| {r} |
diff --git a/src/routes/costModels/costModelWizard/sources.tsx b/src/routes/costModels/costModelWizard/sources.tsx
index 18a578986..accd9dfc6 100644
--- a/src/routes/costModels/costModelWizard/sources.tsx
+++ b/src/routes/costModels/costModelWizard/sources.tsx
@@ -10,14 +10,14 @@ class Sources extends React.Component {
constructor(props) {
super(props);
this.fetchData = () => {
- const { type, query, page, perPage, fetchSources } = this.context;
+ const { type, query, page, perPage, fetchSources } = this.context as any;
const sourceType = type === 'Azure' ? 'Azure' : type;
fetchSources(sourceType, query, page, perPage);
};
}
public componentDidMount() {
- const { dataFetched } = this.context;
+ const { dataFetched } = this.context as any;
if (dataFetched) {
return;
}
@@ -25,11 +25,11 @@ class Sources extends React.Component {
}
public renderContent() {
- if (this.context.loading) {
+ if ((this.context as any).loading) {
return ;
}
- if (this.context.apiError) {
+ if ((this.context as any).apiError) {
return ;
}
return ;
diff --git a/src/routes/details/components/costOverview/costOverview.scss b/src/routes/details/components/costOverview/costOverview.scss
new file mode 100644
index 000000000..ae52ca72e
--- /dev/null
+++ b/src/routes/details/components/costOverview/costOverview.scss
@@ -0,0 +1,9 @@
+@import url("~@patternfly/patternfly/base/patternfly-variables.css");
+
+.pf-c-card {
+ &.cardOverride {
+ .pf-c-card__title {
+ padding-bottom: 0;
+ }
+ }
+}
diff --git a/src/routes/details/components/costOverview/costOverviewBase.tsx b/src/routes/details/components/costOverview/costOverviewBase.tsx
index ca368b677..730396f9e 100644
--- a/src/routes/details/components/costOverview/costOverviewBase.tsx
+++ b/src/routes/details/components/costOverview/costOverviewBase.tsx
@@ -1,3 +1,5 @@
+import './costOverview.scss';
+
import {
Button,
ButtonVariant,
@@ -169,10 +171,10 @@ class CostOverviewsBase extends React.Component {
// Returns CPU usage chart
private getCpuUsageChart = (widget: CostOverviewWidget) => {
- const { intl } = this.props;
+ const { groupBy, intl } = this.props;
return (
-
+
{intl.formatMessage(messages.cpuTitle)}
@@ -187,10 +189,10 @@ class CostOverviewsBase extends React.Component<CostOverviewProps, any> {
// Returns memory usage chart
private getMemoryUsageChart = (widget: CostOverviewWidget) => {
- const { intl } = this.props;
+ const { groupBy, intl } = this.props;
return (
- <Card>
+ <Card className={groupBy === 'node' ? 'cardOverride' : undefined}>
<CardTitle>
<Title headingLevel="h2" size={TitleSizes.lg}>
{intl.formatMessage(messages.memoryTitle)}
@@ -248,10 +250,10 @@ class CostOverviewsBase extends React.Component<CostOverviewProps, any> {
// Returns volume usage chart
private getVolumeUsageChart = (widget: CostOverviewWidget) => {
- const { intl } = this.props;
+ const { groupBy, intl } = this.props;
return (
- <Card>
+ <Card className={groupBy === 'node' ? 'cardOverride' : undefined}>
<CardTitle>
<Title headingLevel="h2" size={TitleSizes.lg}>
{intl.formatMessage(messages.volumeTitle)}
diff --git a/src/routes/details/components/usageChart/usageChart.styles.ts b/src/routes/details/components/usageChart/usageChart.styles.ts
index 74205a7bb..33eebc5a6 100644
--- a/src/routes/details/components/usageChart/usageChart.styles.ts
+++ b/src/routes/details/components/usageChart/usageChart.styles.ts
@@ -3,6 +3,9 @@ import global_spacer_md from '@patternfly/react-tokens/dist/js/global_spacer_md'
import type React from 'react';
export const styles = {
+ chartContainer: {
+ marginTop: global_spacer_md.value,
+ },
chartSkeleton: {
marginBottom: global_spacer_md.value,
},
@@ -12,4 +15,7 @@ export const styles = {
legendSkeleton: {
marginTop: global_spacer_md.value,
},
+ subtitle: {
+ marginBottom: global_spacer_md.value,
+ },
} as { [className: string]: React.CSSProperties };
diff --git a/src/routes/details/components/usageChart/usageChart.tsx b/src/routes/details/components/usageChart/usageChart.tsx
index b4fca6650..b68d64cc2 100644
--- a/src/routes/details/components/usageChart/usageChart.tsx
+++ b/src/routes/details/components/usageChart/usageChart.tsx
@@ -91,20 +91,28 @@ class UsageChartBase extends React.Component<UsageChartProps, UsageChartState> {
};
private getChartDatum(): ChartDatum {
- const { groupBy, report, intl, reportType } = this.props;
+ const { groupBy, intl, report, reportType } = this.props;
const datum: ChartDatum = {
limit: {},
ranges: [],
usage: [],
};
- // Always show bullet chart legends https://github.com/project-koku/koku-ui/issues/963
- const hasTotal = report && report.meta && report.meta.total;
+ const {
+ hasCapacityUnits,
+ hasCapacityValue,
+ hasLimitUnits,
+ hasLimitValue,
+ hasRequestUnits,
+ hasRequestValue,
+ hasUsageUnits,
+ hasUsageValue,
+ } = this.getHasData();
- const hasLimit = hasTotal && report.meta.total.limit && report.meta.total.limit !== null;
- const limit = Math.trunc(hasLimit ? report.meta.total.limit.value : 0);
+ // Always show bullet chart legends https://github.com/project-koku/koku-ui/issues/963
+ const limit = Math.trunc(hasLimitValue ? report.meta.total.limit.value : 0);
const limitUnits = intl.formatMessage(messages.units, {
- units: unitsLookupKey(hasLimit ? report.meta.total.limit.units : undefined),
+ units: unitsLookupKey(hasLimitUnits ? report.meta.total.limit.units : undefined),
});
datum.limit = {
legend: intl.formatMessage(messages.detailsUsageLimit, {
@@ -119,11 +127,10 @@ class UsageChartBase extends React.Component<UsageChartProps, UsageChartState> {
};
// Qualitative range included when grouped by cluster and volume usage
- if (groupBy === 'cluster' || reportType === ReportType.volume) {
- const hasCapacity = hasTotal && report.meta.total.capacity && report.meta.total.capacity !== null;
- const capacity = Math.trunc(hasCapacity ? report.meta.total.capacity.value : 0);
+ if (groupBy === 'cluster' || groupBy === 'node' || reportType === ReportType.volume) {
+ const capacity = Math.trunc(hasCapacityValue ? report.meta.total.capacity.value : 0);
const capacityUnits = intl.formatMessage(messages.units, {
- units: unitsLookupKey(hasCapacity ? report.meta.total.capacity.units : undefined),
+ units: unitsLookupKey(hasCapacityUnits ? report.meta.total.capacity.units : undefined),
});
datum.ranges = [
{
@@ -140,15 +147,13 @@ class UsageChartBase extends React.Component<UsageChartProps, UsageChartState> {
];
}
- const hasRequest = hasTotal && report.meta.total.request && report.meta.total.request !== null;
- const hasUsage = hasTotal && report.meta.total.usage && report.meta.total.usage !== null;
- const request = Math.trunc(hasRequest ? report.meta.total.request.value : 0);
+ const request = Math.trunc(hasRequestValue ? report.meta.total.request.value : 0);
const requestUnits = intl.formatMessage(messages.units, {
- units: unitsLookupKey(hasRequest ? report.meta.total.request.units : undefined),
+ units: unitsLookupKey(hasRequestUnits ? report.meta.total.request.units : undefined),
});
- const usage = Math.trunc(hasUsage ? report.meta.total.usage.value : 0);
+ const usage = Math.trunc(hasUsageValue ? report.meta.total.usage.value : 0);
const usageUnits = intl.formatMessage(messages.units, {
- units: unitsLookupKey(hasUsage ? report.meta.total.usage.units : undefined),
+ units: unitsLookupKey(hasUsageUnits ? report.meta.total.usage.units : undefined),
});
datum.usage = [
{
@@ -178,22 +183,21 @@ class UsageChartBase extends React.Component<UsageChartProps, UsageChartState> {
}
private getChart = () => {
- const { groupBy, name, reportFetchStatus, report } = this.props;
+ const { name, reportFetchStatus, report } = this.props;
const { width } = this.state;
const chartDatum = this.getChartDatum();
-
if (!report || chartDatum.usage.length === 0) {
return null;
}
return (
- <div className="chartOverride">
+ <>
{reportFetchStatus === FetchStatus.inProgress ? (
this.getSkeleton()
) : (
<>
- {groupBy === 'cluster' && this.getFreeSpace()}
+ {this.getFreeSpace()}
<ChartBullet
comparativeErrorMeasureData={
chartDatum.limit.value
@@ -253,61 +257,69 @@ class UsageChartBase extends React.Component<UsageChartProps, UsageChartState> {
/>
</>
)}
- </div>
+ </>
);
};
private getFreeSpace() {
- const { report, intl } = this.props;
- const hasTotal = report && report.meta && report.meta.total;
- const hasCapacity = hasTotal && report.meta.total.capacity && report.meta.total.capacity !== null;
- const hasRequest = hasTotal && report.meta.total.request && report.meta.total.request !== null;
- const hasUsage = hasTotal && report.meta.total.usage && report.meta.total.usage !== null;
-
- const capacity = Math.trunc(hasCapacity ? report.meta.total.capacity.value : 0);
- const request = Math.trunc(hasRequest ? report.meta.total.request.value : 0);
- const requestUnits = intl.formatMessage(messages.units, {
- units: unitsLookupKey(hasRequest ? report.meta.total.request.units : undefined),
- });
- const usage = Math.trunc(hasUsage ? report.meta.total.usage.value : 0);
- const usageUnits = intl.formatMessage(messages.units, {
- units: unitsLookupKey(hasUsage ? report.meta.total.usage.units : undefined),
- });
+ const { groupBy, intl, report } = this.props;
- // Show negative values https://github.com/project-koku/koku-ui/issues/1214
- const unusedRequestCapacity = capacity - request;
- const unusedUsageCapacity = capacity - usage;
-
- let unusedRequestCapacityPercentage = request > 0 ? (request / capacity) * 100 : 0;
- if (unusedRequestCapacityPercentage > 100) {
- unusedRequestCapacityPercentage = 100 - unusedRequestCapacityPercentage;
+ if (!report || !(groupBy === 'cluster' || groupBy === 'node')) {
+ return null;
}
- let unusedUsageCapacityPercentage = capacity > usage ? (usage / capacity) * 100 : 0;
- if (unusedUsageCapacityPercentage > 100) {
- unusedUsageCapacityPercentage = 100 - unusedUsageCapacityPercentage;
+
+ const {
+ hasCapacityCount,
+ hasCapacityCountUnits,
+ hasCapacityUnits,
+ hasCapacityUnused,
+ hasCapacityUnusedPercent,
+ hasRequestUnits,
+ hasRequestUnused,
+ hasRequestUnusedPercent,
+ } = this.getHasData();
+
+ if (!(hasCapacityUnused && hasRequestUnused)) {
+ return null;
}
+ // Show negative values https://github.com/project-koku/koku-ui/issues/1214
+ const capacityUnits = intl.formatMessage(messages.units, {
+ units: unitsLookupKey(hasCapacityUnits ? report.meta.total.capacity.units : undefined),
+ });
+ const capacityUnused = Math.trunc(hasCapacityUnused ? report.meta.total.capacity.unused : 0);
+ const capacityUnusedPercent = Math.trunc(hasCapacityUnusedPercent ? report.meta.total.capacity.unused_percent : 0);
+
+ const requestUnits = intl.formatMessage(messages.units, {
+ units: unitsLookupKey(hasRequestUnits ? report.meta.total.request.units : undefined),
+ });
+ const requestUnused = Math.trunc(hasRequestUnused ? report.meta.total.request.unused : 0);
+ const requestUnusedPercent = Math.trunc(hasRequestUnusedPercent ? report.meta.total.request.unused_percent : 0);
+
+ const chartContainer =
+ groupBy === 'node' && !(hasCapacityCount && hasCapacityCountUnits) ? styles.chartContainer : undefined;
+
return (
- <Grid hasGutter>
+ <Grid hasGutter style={chartContainer}>
<GridItem md={12} lg={6}>
- <div>{intl.formatMessage(messages.detailsUnusedUsageLabel)}</div>
- <div style={styles.capacity}>{formatUnits(unusedUsageCapacity, usageUnits)}</div>
+ <div>{intl.formatMessage(messages.detailsUnusedCapacityLabel)}</div>
+ <div style={styles.capacity}>{formatUnits(capacityUnused, capacityUnits)}</div>
<div>
{intl.formatMessage(messages.detailsUnusedUnits, {
- percentage: formatPercentage(unusedUsageCapacityPercentage, {
+ percentage: formatPercentage(capacityUnusedPercent, {
minimumFractionDigits: 0,
maximumFractionDigits: 0,
}),
- units: usageUnits,
+ units: capacityUnits,
})}
</div>
</GridItem>
<GridItem md={12} lg={6}>
<div>{intl.formatMessage(messages.detailsUnusedRequestsLabel)}</div>
- <div style={styles.capacity}>{formatUnits(unusedRequestCapacity, requestUnits)}</div>
+ <div style={styles.capacity}>{formatUnits(requestUnused, requestUnits)}</div>
<div>
{intl.formatMessage(messages.detailsUnusedUnits, {
- percentage: formatPercentage(unusedRequestCapacityPercentage, {
+ percentage: formatPercentage(requestUnusedPercent, {
minimumFractionDigits: 0,
maximumFractionDigits: 0,
}),
@@ -323,13 +335,64 @@ class UsageChartBase extends React.Component<UsageChartProps, UsageChartState> {
const { groupBy } = this.props;
const { width } = this.state;
- if (groupBy === 'cluster') {
+ if (groupBy === 'cluster' || groupBy === 'node') {
return width > 950 ? 115 : width > 450 ? 150 : 210;
} else {
return width > 700 ? 115 : width > 450 ? 150 : 180;
}
};
+ private getHasData = () => {
+ const { report } = this.props;
+
+ // Note: When APIs return an empty data array, units are unknown. Likewise, when "platform projects" are applied,
+ // there is no "platform" project. As a workaround, we obtain values from the meta data.
+
+ const hasMeta = report && report.meta !== undefined;
+ const hasTotal = hasMeta && report.meta.total !== undefined;
+ const hasCapacity = hasTotal && report.meta.total.capacity !== undefined;
+ const hasCapacityCount = hasCapacity && report.meta.total.capacity.count !== undefined;
+ const hasCapacityCountUnits = hasCapacity && report.meta.total.capacity.count_units !== undefined;
+ const hasCapacityUnits = hasCapacity && report.meta.total.capacity.units !== undefined;
+ const hasCapacityUnused = hasCapacity && report.meta.total.capacity.unused !== undefined;
+ const hasCapacityUnusedPercent = hasCapacity && report.meta.total.capacity.unused_percent !== undefined;
+ const hasCapacityValue = hasCapacity && report.meta.total.capacity.value !== undefined;
+ const hasLimit = hasTotal && report.meta.total.limit;
+ const hasLimitUnits = hasLimit && report.meta.total.limit.value !== undefined;
+ const hasLimitValue = hasLimit && report.meta.total.limit.units !== undefined;
+ const hasRequest = hasTotal && report.meta.total.request !== undefined;
+ const hasRequestUnits = hasRequest && report.meta.total.request.units !== undefined;
+ const hasRequestUnused = hasRequest && report.meta.total.request.unused !== undefined;
+ const hasRequestUnusedPercent = hasRequest && report.meta.total.request.unused_percent !== undefined;
+ const hasRequestValue = hasRequest && report.meta.total.request.value !== undefined;
+ const hasUsage = hasTotal && report.meta.total.usage !== undefined;
+ const hasUsageUnits = hasUsage && report.meta.total.usage.units !== undefined;
+ const hasUsageValue = hasUsage && report.meta.total.usage.value !== undefined;
+
+ return {
+ hasCapacity,
+ hasCapacityCount,
+ hasCapacityCountUnits,
+ hasCapacityUnits,
+ hasCapacityUnused,
+ hasCapacityUnusedPercent,
+ hasCapacityValue,
+ hasLimit,
+ hasLimitUnits,
+ hasLimitValue,
+ hasMeta,
+ hasRequest,
+ hasRequestUnits,
+ hasRequestUnused,
+ hasRequestUnusedPercent,
+ hasRequestValue,
+ hasTotal,
+ hasUsage,
+ hasUsageUnits,
+ hasUsageValue,
+ };
+ };
+
private getItemsPerRow = () => {
const { width } = this.state;
return width > 950 ? 4 : width > 700 ? 3 : width > 450 ? 2 : 1;
@@ -344,6 +407,26 @@ class UsageChartBase extends React.Component<UsageChartProps, UsageChartState> {
);
};
+ private getSubTitle() {
+ const { groupBy, intl, report } = this.props;
+
+ if (!report || !(groupBy === 'cluster' || groupBy === 'node')) {
+ return null;
+ }
+
+ const { hasCapacityCount, hasCapacityCountUnits } = this.getHasData();
+
+ const count = hasCapacityCount ? report.meta.total.capacity.count : 0;
+ const countUnits = intl.formatMessage(messages.units, {
+ units: unitsLookupKey(hasCapacityCountUnits ? report.meta.total.capacity.count_units : undefined),
+ });
+
+ if (hasCapacityCount && hasCapacityCountUnits) {
+ return <div style={styles.subtitle}>{intl.formatMessage(messages.usageSubtitle, { count, countUnits })}</div>;
+ }
+ return null;
+ }
+
private isDatumEmpty = (datum: ChartDatum) => {
let hasRange = false;
for (const range of datum.ranges) {
@@ -370,6 +453,7 @@ class UsageChartBase extends React.Component<UsageChartProps, UsageChartState> {
public render() {
return (
<div className="chartOverride" ref={this.containerRef}>
+ {this.getSubTitle()}
{this.getChart()}
</div>
);
diff --git a/src/routes/details/ocpDetails/detailsTable.tsx b/src/routes/details/ocpDetails/detailsTable.tsx
index ccf1f8ba6..7a8c82809 100644
--- a/src/routes/details/ocpDetails/detailsTable.tsx
+++ b/src/routes/details/ocpDetails/detailsTable.tsx
@@ -207,12 +207,13 @@ class DetailsTableBase extends React.Component<DetailsTableProps, DetailsTableSt
const monthOverMonth = this.getMonthOverMonthCost(item, index);
const supplementaryCost = this.getSupplementaryCost(item, index);
const InfrastructureCost = this.getInfrastructureCost(item, index);
+ const isPlatformCosts = item.classification === classificationPlatform;
+ const isUnallocatedCosts = item.classification === classificationUnallocated;
const isOverheadCosts =
costDistribution === ComputedReportItemValueType.distributed &&
+ !isUnallocatedCosts &&
((item.cost.platformDistributed && item.cost.platformDistributed.value > 0) ||
(item.cost.workerUnallocatedDistributed && item.cost.workerUnallocatedDistributed.value > 0));
- const isPlatformCosts = item.classification === classificationPlatform;
- const isUnallocatedCosts = item.classification === classificationUnallocated;
const desc = item.id && item.id !== item.label ? <div style={styles.infoDescription}>{item.id}</div> : null;
const isDisabled =
label === `${noPrefix}${groupBy}` || label === `${noPrefix}${groupByTagKey}` || isUnallocatedCosts;
diff --git a/src/routes/explorer/explorerTable.tsx b/src/routes/explorer/explorerTable.tsx
index c938ecb85..036a9d0a7 100644
--- a/src/routes/explorer/explorerTable.tsx
+++ b/src/routes/explorer/explorerTable.tsx
@@ -30,7 +30,7 @@ import { getUnsortedComputedReportItems } from 'routes/utils/computedReport/getC
import { getDateRangeFromQuery } from 'routes/utils/dateRange';
import { createMapStateToProps } from 'store/common';
import { formatCurrency } from 'utils/format';
-import { classificationDefault, noPrefix } from 'utils/props';
+import { classificationDefault, classificationUnallocated, noPrefix } from 'utils/props';
import type { RouterComponentProps } from 'utils/router';
import { withRouter } from 'utils/router';
@@ -246,6 +246,7 @@ class ExplorerTableBase extends React.Component<ExplorerTableProps, ExplorerTabl
}
if (
showCostDistribution &&
+ item.classification !== classificationUnallocated &&
item.cost &&
((item.cost.platformDistributed && item.cost.platformDistributed.value > 0) ||
(item.cost.workerUnallocatedDistributed && item.cost.workerUnallocatedDistributed.value > 0))
diff --git a/src/routes/settings/costModels/components/inputs/rateInput.tsx b/src/routes/settings/costModels/components/inputs/rateInput.tsx
index e063c2a1f..b64e695a9 100644
--- a/src/routes/settings/costModels/components/inputs/rateInput.tsx
+++ b/src/routes/settings/costModels/components/inputs/rateInput.tsx
@@ -43,8 +43,10 @@ const RateInputBase: React.FC<RateInputBaseProps> = ({
isRequired
style={style}
fieldId={fieldId}
- label={label !== null && typeof label === 'object' ? intl.formatMessage(label) : label}
- helperTextInvalid={helpText !== null && typeof helpText === 'object' ? intl.formatMessage(helpText) : helpText}
+ label={label !== null && typeof label === 'object' ? intl.formatMessage(label) : (label as string)}
+ helperTextInvalid={
+ helpText !== null && typeof helpText === 'object' ? intl.formatMessage(helpText) : (helpText as string)
+ }
validated={validated}
>
<InputGroup>
diff --git a/src/routes/settings/costModels/components/inputs/selector.tsx b/src/routes/settings/costModels/components/inputs/selector.tsx
index 35dc427c0..7129c8a60 100644
--- a/src/routes/settings/costModels/components/inputs/selector.tsx
+++ b/src/routes/settings/costModels/components/inputs/selector.tsx
@@ -83,8 +83,10 @@ const SelectorBase: React.FC<SelectorProps> = ({
isRequired={isRequired}
style={style}
fieldId={id}
- label={label !== null && typeof label === 'object' ? intl.formatMessage(label) : label}
- helperTextInvalid={helpText !== null && typeof helpText === 'object' ? intl.formatMessage(helpText) : helpText}
+ label={label !== null && typeof label === 'object' ? intl.formatMessage(label) : (label as string)}
+ helperTextInvalid={
+ helpText !== null && typeof helpText === 'object' ? intl.formatMessage(helpText) : (helpText as string)
+ }
validated={isInvalid ? 'error' : 'default'}
>
<Select
diff --git a/src/routes/settings/costModels/components/inputs/simpleInput.tsx b/src/routes/settings/costModels/components/inputs/simpleInput.tsx
index e80669d5f..172e84822 100644
--- a/src/routes/settings/costModels/components/inputs/simpleInput.tsx
+++ b/src/routes/settings/costModels/components/inputs/simpleInput.tsx
@@ -36,8 +36,10 @@ const SimpleInputBase: React.FC<SimpleInputProps> = ({
isRequired={isRequired}
style={style}
fieldId={id}
- label={label !== null && typeof label === 'object' ? intl.formatMessage(label) : label}
- helperTextInvalid={helpText !== null && typeof helpText === 'object' ? intl.formatMessage(helpText) : helpText}
+ label={label !== null && typeof label === 'object' ? intl.formatMessage(label) : (label as string)}
+ helperTextInvalid={
+ helpText !== null && typeof helpText === 'object' ? intl.formatMessage(helpText) : (helpText as string)
+ }
validated={validated}
>
<TextInput
diff --git a/src/routes/settings/costModels/costModel/sourcesTable.tsx b/src/routes/settings/costModels/costModel/sourcesTable.tsx
index c479c5582..e6e21da4a 100644
--- a/src/routes/settings/costModels/costModel/sourcesTable.tsx
+++ b/src/routes/settings/costModels/costModel/sourcesTable.tsx
@@ -57,7 +57,7 @@ const SourcesTable: React.FC<SourcesTableProps> = ({ canWrite, costModels, intl,
</Tr>
</Thead>
<Tbody>
- {rows.map((r, rowIndex) => (
+ {rows.map((r: any, rowIndex) => (
<Tr key={rowIndex}>
<Td>{r}</Td>
<Td isActionCell>
diff --git a/src/routes/settings/costModels/costModelWizard/sources.tsx b/src/routes/settings/costModels/costModelWizard/sources.tsx
index f1bbcab20..f3e947998 100644
--- a/src/routes/settings/costModels/costModelWizard/sources.tsx
+++ b/src/routes/settings/costModels/costModelWizard/sources.tsx
@@ -10,14 +10,14 @@ class Sources extends React.Component<any, any> {
constructor(props) {
super(props);
this.fetchData = () => {
- const { type, query, page, perPage, fetchSources } = this.context;
+ const { type, query, page, perPage, fetchSources } = this.context as any;
const sourceType = type === 'Azure' ? 'Azure' : type;
fetchSources(sourceType, query, page, perPage);
};
}
public componentDidMount() {
- const { dataFetched } = this.context;
+ const { dataFetched } = this.context as any;
if (dataFetched) {
return;
}
@@ -25,11 +25,11 @@ class Sources extends React.Component<any, any> {
}
public renderContent() {
- if (this.context.loading) {
+ if ((this.context as any).loading) {
return <LoadingState />;
}
- if (this.context.apiError) {
+ if ((this.context as any).apiError) {
return <SourceStepErrorState onRefresh={this.fetchData} />;
}
return <SourcesTable />;
diff --git a/src/routes/settings/settings.tsx b/src/routes/settings/settings.tsx
index 4d0ae0c52..bd920c778 100644
--- a/src/routes/settings/settings.tsx
+++ b/src/routes/settings/settings.tsx
@@ -6,6 +6,7 @@ import type { UserAccess } from 'api/userAccess';
import { UserAccessType } from 'api/userAccess';
import type { AxiosError } from 'axios';
import messages from 'locales/messages';
+import type { RefObject } from 'react';
import React, { useState } from 'react';
import { useIntl } from 'react-intl';
import { useSelector } from 'react-redux';
@@ -53,7 +54,7 @@ export const getIdKeyForTab = (tab: SettingsTab) => {
};
interface AvailableTab {
- contentRef: React.ReactNode;
+ contentRef: RefObject<any>;
tab: SettingsTab;
}
@@ -81,7 +82,7 @@ const Settings: React.FC<SettingsProps> = ({ chrome }) => {
const intl = useIntl();
const getAvailableTabs = () => {
- const availableTabs = [
+ const availableTabs: AvailableTab[] = [
{
contentRef: React.createRef(),
tab: SettingsTab.costModels,
diff --git a/src/routes/utils/computedReport/getComputedReportItems.ts b/src/routes/utils/computedReport/getComputedReportItems.ts
index c9a77cea4..c50ccafba 100644
--- a/src/routes/utils/computedReport/getComputedReportItems.ts
+++ b/src/routes/utils/computedReport/getComputedReportItems.ts
@@ -97,77 +97,111 @@ function getClusters(val, item?: any) {
}
function getCostData(val, key, item?: any) {
+ const defaultUnits = 'USD';
return {
- distributed: {
- value:
- (item && item[key] && item[key].distributed ? item[key].distributed.value : 0) +
- (val[key] && val[key].distributed ? val[key].distributed.value : 0),
- units: val && val[key] && val[key].distributed ? val[key].distributed.units : 'USD',
- },
- markup: {
- value:
- (item && item[key] && item[key].markup ? item[key].markup.value : 0) +
- (val[key] && val[key].markup ? val[key].markup.value : 0),
- units: val && val[key] && val[key].markup ? val[key].markup.units : 'USD',
- },
- platformDistributed: {
- value:
- (item && item[key] && item[key].platform_distributed ? item[key].platform_distributed.value : 0) +
- (val[key] && val[key].platform_distributed ? val[key].platform_distributed.value : 0),
- units: val && val[key] && val[key].platform_distributed ? val[key].platform_distributed.units : 'USD',
- },
- raw: {
- value:
- (item && item[key] && item[key].raw ? item[key].raw.value : 0) +
- (val[key] && val[key].raw ? val[key].raw.value : 0),
- units: val && val[key] && val[key].raw ? val[key].raw.units : 'USD',
- },
- total: {
- value:
- (item && item[key] && item[key].total ? item[key].total.value : 0) +
- (val[key] && val[key].total ? Number(val[key].total.value) : 0),
- units: val && val[key] && val[key].total ? val[key].total.units : null,
- },
- usage: {
- value:
- (item && item[key] && item[key].usage ? item[key].usage.value : 0) +
- (val[key] && val[key].usage ? Number(val[key].usage.value) : 0),
- units: val && val[key] && val[key].usage ? val[key].usage.units : null,
- },
- workerUnallocatedDistributed: {
- value:
- (item && item[key] && item[key].worker_unallocated_distributed
- ? item[key].worker_unallocated_distributed.value
- : 0) +
- (val[key] && val[key].worker_unallocated_distributed
- ? Number(val[key].worker_unallocated_distributed.value)
- : 0),
- units:
- val && val[key] && val[key].worker_unallocated_distributed
- ? val[key].worker_unallocated_distributed.units
- : null,
- },
+ ...(val[key] &&
+ val[key].distributed && {
+ distributed: {
+ value: val[key].distributed.value + (item && item[key]?.distributed ? item[key].distributed.value : 0),
+ units: val[key].distributed.units ? val[key].distributed.units : defaultUnits,
+ },
+ }),
+ ...(val[key] &&
+ val[key].markup && {
+ markup: {
+ value: val[key].markup.value + (item && item[key]?.markup ? item[key].markup.value : 0),
+ units: val[key].markup.units ? val[key].markup.units : defaultUnits,
+ },
+ }),
+ ...(val[key] &&
+ val[key].platform_distributed && {
+ platformDistributed: {
+ value:
+ val[key].platform_distributed.value +
+ (item && item[key]?.platform_distributed ? item[key].platform_distributed.value : 0),
+ units: val[key].platform_distributed.units ? val[key].platform_distributed.units : defaultUnits,
+ },
+ }),
+ ...(val[key] &&
+ val[key].total && {
+ raw: {
+ value: val[key].raw.value + (item && item[key]?.raw ? item[key].raw.value : 0),
+ units: val[key].raw.units ? val[key].raw.units : defaultUnits,
+ },
+ }),
+ ...(val[key] &&
+ val[key].total && {
+ total: {
+ value: val[key].total.value + (item && item[key]?.total ? item[key].total.value : 0),
+ units: val[key].total.units ? val[key].total.units : defaultUnits,
+ },
+ }),
+ ...(val[key] &&
+ val[key].usage && {
+ usage: {
+ value: val[key].usage.value + (item && item[key]?.usage ? item[key].usage.value : 0),
+ units: val[key].usage.units ? val[key].usage.units : defaultUnits,
+ },
+ }),
+ ...(val[key] &&
+ val[key].worker_unallocated_distributed && {
+ workerUnallocatedDistributed: {
+ value:
+ val[key].worker_unallocated_distributed.value +
+ (item && item[key]?.worker_unallocated_distributed ? item[key].worker_unallocated_distributed.value : 0),
+ units: val[key].worker_unallocated_distributed.units
+ ? val[key].worker_unallocated_distributed.units
+ : defaultUnits,
+ },
+ }),
};
}
function getUsageData(val, item?: any) {
+ const defaultUnits = 'Core-Hours';
return {
- capacity: {
- value: (item && item.capacity ? item.capacity.value : 0) + (val.capacity ? val.capacity.value : 0),
- units: val && val.capacity ? val.capacity.units : 'Core-Hours',
- },
- limit: {
- value: (item && item.limit ? item.limit.value : 0) + (val.limit ? val.limit.value : 0),
- units: val && val.limit ? val.limit.units : 'Core-Hours',
- },
- request: {
- value: (item && item.request ? item.request.value : 0) + (val.request ? val.request.value : 0),
- units: val && val.request ? val.request.units : 'Core-Hours',
- },
- usage: {
- value: (item && item.usage ? item.usage.value : 0) + (val.usage ? val.usage.value : 0),
- units: val && val.usage ? val.usage.units : 'Core-Hours',
- },
+ ...(val.capacity && {
+ capacity: {
+ value: val.capacity.value + (item?.capacity ? item.capacity.value : 0),
+ units: val.capacity.units ? val.capacity.units : defaultUnits,
+ ...(val.capacity.count !== undefined && {
+ count: val.capacity.count + (item?.capacity ? item.capacity.count : 0),
+ }),
+ ...(val.capacity.count_units && {
+ count_units: val.capacity.count_units,
+ }),
+ ...(val.capacity.unused !== undefined && {
+ unused: val.capacity.unused + (item?.capacity ? item.capacity.unused : 0),
+ }),
+ ...(val.capacity.unused_percent !== undefined && {
+ unused_percent: val.capacity.unused_percent + (item?.capacity ? item.capacity.unused_percent : 0),
+ }),
+ },
+ }),
+ ...(val.limit && {
+ limit: {
+ value: val.limit.value + (item?.limit ? item.limit.value : 0),
+ units: val.limit.units ? val.limit.units : defaultUnits,
+ },
+ }),
+ ...(val.request && {
+ request: {
+ value: val.request.value + (item?.request ? item.request.value : 0),
+ units: val.request.units ? val.request.units : defaultUnits,
+ ...(val.request.unused !== undefined && {
+ unused: val.request.unused + (item?.request ? item.request.unused : 0),
+ }),
+ ...(val.request.unused_percent !== undefined && {
+ unused_percent: val.request.unused_percent + (item?.request ? item.request.unused_percent : 0),
+ }),
+ },
+ }),
+ ...(val.usage && {
+ usage: {
+ value: val.usage.value + (item?.usage ? item.usage.value : 0),
+ units: val.usage.units ? val.usage.units : defaultUnits,
+ },
+ }),
};
}
diff --git a/src/utils/format.ts b/src/utils/format.ts
index fd900b540..b43d34ed9 100644
--- a/src/utils/format.ts
+++ b/src/utils/format.ts
@@ -228,6 +228,7 @@ export const unitsLookupKey = (units): string => {
switch (lookup) {
case 'byte_ms':
+ case 'core':
case 'core_hours':
case 'gb':
case 'gb_hours':
|