Show chart skeleton

https://issues.redhat.com/browse/COST-5573
project-koku · Oct 4, 2024 · 1dd1d7a · 1dd1d7a
1 parent 1ad53f9
commit 1dd1d7a
Show file tree

Hide file tree

Showing 8 changed files with 107 additions and 22 deletions.
diff --git a/src/components/featureToggle/featureToggle.tsx b/src/components/featureToggle/featureToggle.tsx
@@ -7,6 +7,7 @@ import { FeatureToggleActions } from 'store/featureToggle';
 export const enum FeatureToggle {
   accountInfoEmptyState = 'cost-management.ui.account-info-empty-state', // https://issues.redhat.com/browse/COST-5335
   awsEc2Instances = 'cost-management.ui.aws-ec2-instances', // https://issues.redhat.com/browse/COST-4855
+  chartSkeleton = 'cost-management.ui.chart-skeleton', // https://issues.redhat.com/browse/COST-5573
   debug = 'cost-management.ui.debug',
   exports = 'cost-management.ui.exports', // Async exports https://issues.redhat.com/browse/COST-2223
   finsights = 'cost-management.ui.finsights', // RHEL support for FINsights https://issues.redhat.com/browse/COST-3306
@@ -27,6 +28,10 @@ export const useIsAwsEc2InstancesToggleEnabled = () => {
   return useIsToggleEnabled(FeatureToggle.awsEc2Instances);
 };
 
+export const useIsChartSkeletonToggleEnabled = () => {
+  return useIsToggleEnabled(FeatureToggle.chartSkeleton);
+};
+
 export const useIsDebugToggleEnabled = () => {
   return useIsToggleEnabled(FeatureToggle.debug);
 };
@@ -54,6 +59,7 @@ export const useFeatureToggle = () => {
 
   const isAccountInfoEmptyStateToggleEnabled = useIsAccountInfoEmptyStateToggleEnabled();
   const isAwsEc2InstancesToggleEnabled = useIsAwsEc2InstancesToggleEnabled();
+  const isChartSkeletonToggleEnabled = useIsChartSkeletonToggleEnabled();
   const isDebugToggleEnabled = useIsDebugToggleEnabled();
   const isExportsToggleEnabled = useIsExportsToggleEnabled();
   const isFinsightsToggleEnabled = useIsFinsightsToggleEnabled();
@@ -72,6 +78,7 @@ export const useFeatureToggle = () => {
       FeatureToggleActions.setFeatureToggle({
         isAccountInfoEmptyStateToggleEnabled,
         isAwsEc2InstancesToggleEnabled,
+        isChartSkeletonToggleEnabled,
         isDebugToggleEnabled,
         isExportsToggleEnabled,
         isFinsightsToggleEnabled,
@@ -86,6 +93,7 @@ export const useFeatureToggle = () => {
   }, [
     isAccountInfoEmptyStateToggleEnabled,
     isAwsEc2InstancesToggleEnabled,
+    isChartSkeletonToggleEnabled,
     isDebugToggleEnabled,
     isExportsToggleEnabled,
     isFinsightsToggleEnabled,

diff --git a/src/routes/components/charts/costExplorerChart/costExplorerChart.tsx b/src/routes/components/charts/costExplorerChart/costExplorerChart.tsx
@@ -15,7 +15,6 @@ import messages from 'locales/messages';
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl';
 import { injectIntl } from 'react-intl';
-import { default as ChartTheme } from 'routes/components/charts/chartTheme';
 import { getMaxValue } from 'routes/components/charts/common/chartDatum';
 import type { ChartSeries } from 'routes/components/charts/common/chartUtils';
 import {
@@ -38,6 +37,7 @@ interface CostExplorerChartOwnProps {
   baseHeight?: number;
   formatOptions?: FormatOptions;
   formatter?: Formatter;
+  isSkeleton?: boolean;
   legendItemsPerRow?: number;
   name?: string;
   padding?: any;
@@ -97,7 +97,7 @@ class CostExplorerChartBase extends React.Component<CostExplorerChartProps, Stat
   }
 
   private initDatum = () => {
-    const { top1stData, top2ndData, top3rdData, top4thData, top5thData, top6thData } = this.props;
+    const { isSkeleton, top1stData, top2ndData, top3rdData, top4thData, top5thData, top6thData } = this.props;
 
     const series: ChartSeries[] = [];
     if (top1stData && top1stData.length) {
@@ -108,13 +108,13 @@ class CostExplorerChartBase extends React.Component<CostExplorerChartProps, Stat
         legendItem: {
           name,
           symbol: {
-            fill: chartStyles.colorScale[0],
+            fill: isSkeleton ? undefined : chartStyles.colorScale[0],
           },
           tooltip: name,
         },
         style: {
           data: {
-            fill: chartStyles.colorScale[0],
+            fill: isSkeleton ? undefined : chartStyles.colorScale[0],
           },
         },
       });
@@ -127,13 +127,13 @@ class CostExplorerChartBase extends React.Component<CostExplorerChartProps, Stat
         legendItem: {
           name,
           symbol: {
-            fill: chartStyles.colorScale[1],
+            fill: isSkeleton ? undefined : chartStyles.colorScale[1],
           },
           tooltip: name,
         },
         style: {
           data: {
-            fill: chartStyles.colorScale[1],
+            fill: isSkeleton ? undefined : chartStyles.colorScale[1],
           },
         },
       });
@@ -146,13 +146,13 @@ class CostExplorerChartBase extends React.Component<CostExplorerChartProps, Stat
         legendItem: {
           name,
           symbol: {
-            fill: chartStyles.colorScale[2],
+            fill: isSkeleton ? undefined : chartStyles.colorScale[2],
           },
           tooltip: name,
         },
         style: {
           data: {
-            fill: chartStyles.colorScale[2],
+            fill: isSkeleton ? undefined : chartStyles.colorScale[2],
           },
         },
       });
@@ -165,13 +165,13 @@ class CostExplorerChartBase extends React.Component<CostExplorerChartProps, Stat
         legendItem: {
           name,
           symbol: {
-            fill: chartStyles.colorScale[3],
+            fill: isSkeleton ? undefined : chartStyles.colorScale[3],
           },
           tooltip: name,
         },
         style: {
           data: {
-            fill: chartStyles.colorScale[3],
+            fill: isSkeleton ? undefined : chartStyles.colorScale[3],
           },
         },
       });
@@ -184,13 +184,13 @@ class CostExplorerChartBase extends React.Component<CostExplorerChartProps, Stat
         legendItem: {
           name,
           symbol: {
-            fill: chartStyles.colorScale[4],
+            fill: isSkeleton ? undefined : chartStyles.colorScale[4],
           },
           tooltip: name,
         },
         style: {
           data: {
-            fill: chartStyles.colorScale[4],
+            fill: isSkeleton ? undefined : chartStyles.colorScale[4],
           },
         },
       });
@@ -203,13 +203,13 @@ class CostExplorerChartBase extends React.Component<CostExplorerChartProps, Stat
         legendItem: {
           name,
           symbol: {
-            fill: chartStyles.colorScale[5],
+            fill: isSkeleton ? undefined : chartStyles.colorScale[5],
           },
           tooltip: name,
         },
         style: {
           data: {
-            fill: chartStyles.colorScale[5],
+            fill: isSkeleton ? undefined : chartStyles.colorScale[5],
           },
         },
       });
@@ -384,7 +384,7 @@ class CostExplorerChartBase extends React.Component<CostExplorerChartProps, Stat
 
   private getTruncatedString = (str: string) => {
     const maxChars = 20;
-    return str.length > maxChars ? str.substring(0, maxChars - 1) + '...' : str;
+    return str?.length > maxChars ? str.substring(0, maxChars - 1) + '...' : str;
   };
 
   private getTickValue = (t: number) => {
@@ -430,7 +430,7 @@ class CostExplorerChartBase extends React.Component<CostExplorerChartProps, Stat
   };
 
   public render() {
-    const { baseHeight, intl, name, padding = this.getPadding() } = this.props;
+    const { baseHeight, intl, isSkeleton, name, padding = this.getPadding() } = this.props;
     const { cursorVoronoiContainer, hiddenSeries, series, tickValues, width } = this.state;
 
     const barWidth = this.getBarWidth();
@@ -455,7 +455,7 @@ class CostExplorerChartBase extends React.Component<CostExplorerChartProps, Stat
         <div style={{ height: chartHeight }}>
           <Chart
             ariaTitle={intl.formatMessage(messages.explorerChartAriaTitle)}
-            containerComponent={container}
+            containerComponent={isSkeleton ? undefined : container}
             domain={this.getDomain(series, hiddenSeries)}
             domainPadding={{ x: this.getBarWidth(true) }}
             events={this.getEvents()}
@@ -466,8 +466,7 @@ class CostExplorerChartBase extends React.Component<CostExplorerChartProps, Stat
             legendPosition="bottom-left"
             name={name}
             padding={padding}
-            theme={ChartTheme}
-            themeColor={ChartThemeColor.multiOrdered}
+            themeColor={isSkeleton ? ChartThemeColor.skeleton : ChartThemeColor.multiOrdered}
             width={width}
           >
             {series && series.length > 0 && (

diff --git a/src/routes/explorer/explorer.tsx b/src/routes/explorer/explorer.tsx
@@ -82,6 +82,7 @@ interface ExplorerStateProps {
   dateRangeType: DateRangeType;
   gcpProviders: Providers;
   ibmProviders: Providers;
+  isChartSkeletonToggleEnabled?: boolean;
   isFinsightsToggleEnabled?: boolean;
   ocpProviders: Providers;
   perspective: PerspectiveType;
@@ -446,6 +447,7 @@ class Explorer extends React.Component<ExplorerProps, ExplorerState> {
       gcpProviders,
       ibmProviders,
       intl,
+      isChartSkeletonToggleEnabled,
       ocpProviders,
       providersFetchStatus,
       perspective,
@@ -529,7 +531,7 @@ class Explorer extends React.Component<ExplorerProps, ExplorerState> {
           perspective={perspective}
           report={report}
         />
-        {itemsTotal > 0 && (
+        {(itemsTotal > 0 || isChartSkeletonToggleEnabled) && (
           <div style={styles.chartContent}>
             <div style={styles.chartContainer}>
               <ExplorerChart
@@ -666,6 +668,7 @@ const mapStateToProps = createMapStateToProps<ExplorerOwnProps, ExplorerStatePro
     dateRangeType,
     gcpProviders,
     ibmProviders,
+    isChartSkeletonToggleEnabled: FeatureToggleSelectors.selectIsChartSkeletonToggleEnabled(state),
     isFinsightsToggleEnabled: FeatureToggleSelectors.selectIsFinsightsToggleEnabled(state),
     ociProviders,
     ocpProviders,

diff --git a/src/routes/explorer/explorerChart.tsx b/src/routes/explorer/explorerChart.tsx
@@ -31,6 +31,7 @@ import { withRouter } from 'utils/router';
 import { getCostDistribution } from 'utils/sessionStorage';
 
 import { chartStyles, styles } from './explorerChart.styles';
+import { getExplorerSkeletonData } from './explorerSkeletonData';
 import { PerspectiveType } from './explorerUtils';
 import { getGroupByDefault, getReportPathsType, getReportType } from './explorerUtils';
 
@@ -232,9 +233,15 @@ class ExplorerChartBase extends React.Component<ExplorerChartProps, ExplorerChar
   };
 
   public render() {
-    const { perspective, reportFetchStatus, intl } = this.props;
+    const { perspective, report, reportFetchStatus, intl } = this.props;
 
-    const datums = this.getChartDatums(this.getComputedItems());
+    let datums = this.getChartDatums(this.getComputedItems());
+    let isSkeleton = false;
+
+    if (report && datums.length === 0) {
+      isSkeleton = true;
+      datums = getExplorerSkeletonData(report?.meta?.count) as any;
+    }
 
     // Todo: get title from perspective menu
     return (
@@ -253,6 +260,7 @@ class ExplorerChartBase extends React.Component<ExplorerChartProps, ExplorerChar
                 baseHeight={chartStyles.chartHeight}
                 formatOptions={{}}
                 formatter={formatUnits}
+                isSkeleton={isSkeleton}
                 top1stData={datums.length > 0 ? datums[0] : []}
                 top2ndData={datums.length > 1 ? datums[1] : []}
                 top3rdData={datums.length > 2 ? datums[2] : []}

diff --git a/src/routes/explorer/explorerSkeletonData.tsx b/src/routes/explorer/explorerSkeletonData.tsx
@@ -0,0 +1,61 @@
+const top1stData = [
+  1108.53, 1108.12, 1109.35, 1109.71, 1109.73, 1109.81, 1109.69, 1108.75, 1109.03, 1108.87, 1108.62, 1108.57, 1108.95,
+  1109.85, 1109.83, 1109.78, 1109.57, 1108.47, 1108.53, 1108.9, 1109.8, 1109.91, 1111.42, 1109.74, 1109.61, 1109.6,
+  1109.73, 1112.55, 1109.65, 1109.78, 231.21,
+];
+const top2ndData = [
+  1343.03, 903.56, 953.58, 609.13, 1185.89, 1501.3, 887.25, 598.46, 913.52, 1957.66, 1645.23, 544.67, 1203.28, 1251.59,
+  552.12, 673.74, 753.94, 1392.65, 435.82, 1269.72, 1288.04, 936.65, 823.59, 824.14, 823.54, 824.06, 480.64, 417.32,
+  1003.14, 1001.25, 583.4,
+];
+const top3rdData = [
+  374.82, 383.76, 319.87, 104.59, 118.03, 337.04, 823.11, 579.26, 295.51, 531.44, 105.67, 104.6, 971.38, 286.35, 568.39,
+  238.03, 192.37, 60.09, 78.2, 237.03, 209.01, 224.73, 326.58, 200.96, 68.54, 99.04, 300.24, 232.8, 107.08, 267.67,
+  55.62,
+];
+const top4thData = [
+  120.66, 60.11, 8.44, 8.45, 20.26, 75.93, 32.08, 11.92, 22.96, 67.38, 25.19, 17.91, 67.42, 47.74, 67.47, 67.31, 71.37,
+  52.86, 11.64, 26.41, 31.85, 67.31, 19.95, 59.17, 7.32, 7.32, 7.33, 328.35, 8.08, 8.69, 1.19,
+];
+const top5thData = [
+  123.35, 123.04, 123.13, 123.06, 124.51, 123.46, 123.21, 123.22, 123.28, 123.14, 123.19, 129.31, 123.18, 123.42,
+  123.56, 123.46, 123.16, 123.19, 126.51, 123.28, 123.44, 123.38, 123.43, 123.38, 123.25, 129.4, 123.7, 123.12, 123.15,
+  119.73, 21.57,
+];
+const top6thData = [
+  1535.93, 1403.04, 1356.65, 1282.12, 1264.35, 1286.7, 1511.64, 1388.88, 1370.51, 1319.67, 1155.13, 975.7, 1030.38,
+  1129.76, 1218.14, 1117.55, 1196.87, 997.1, 830.46, 1031.18, 1215.34, 1373, 1405.28, 1431.94, 1164.6, 1031.98, 1360.85,
+  1548.71, 1206.01, 1179.92,
+];
+
+const getData = (name: string, values: number[], count: number) => {
+  const datum = [];
+
+  let index = 0;
+  while (count > index) {
+    datum.push({
+      date: `${index}`,
+      key: name,
+      name,
+      units: 'USD',
+      x: `${index}`,
+      y: values[index % values.length],
+    });
+    index++;
+  }
+  return datum;
+};
+
+export const getExplorerSkeletonData = (count = 0) => {
+  // There will always be at least one day
+  const days = count ? count : 1;
+
+  return [
+    getData('top1stData', top1stData, days),
+    getData('top2ndData', top2ndData, days),
+    getData('top3rdData', top3rdData, days),
+    getData('top4thData', top4thData, days),
+    getData('top5thData', top5thData, days),
+    getData('top6thData', top6thData, days), // Others
+  ];
+};
diff --git a/src/store/featureToggle/featureToggleActions.ts b/src/store/featureToggle/featureToggleActions.ts
@@ -3,6 +3,7 @@ import { createAction } from 'typesafe-actions';
 export interface FeatureToggleActionMeta {
   isAccountInfoEmptyStateToggleEnabled?: boolean;
   isAwsEc2InstancesToggleEnabled?: boolean;
+  isChartSkeletonToggleEnabled?: boolean;
   isDebugToggleEnabled?: boolean;
   isExportsToggleEnabled?: boolean;
   isFinsightsToggleEnabled?: boolean;

diff --git a/src/store/featureToggle/featureToggleReducer.ts b/src/store/featureToggle/featureToggleReducer.ts
@@ -10,6 +10,7 @@ export type FeatureToggleState = Readonly<{
   hasFeatureToggle: boolean;
   isAccountInfoEmptyStateToggleEnabled: boolean;
   isAwsEc2InstancesToggleEnabled: boolean;
+  isChartSkeletonToggleEnabled: boolean;
   isDebugToggleEnabled: boolean;
   isExportsToggleEnabled: boolean;
   isFinsightsToggleEnabled: boolean;
@@ -21,6 +22,7 @@ export const defaultState: FeatureToggleState = {
   hasFeatureToggle: false,
   isAccountInfoEmptyStateToggleEnabled: false,
   isAwsEc2InstancesToggleEnabled: false,
+  isChartSkeletonToggleEnabled: false,
   isDebugToggleEnabled: false,
   isExportsToggleEnabled: false,
   isFinsightsToggleEnabled: false,
@@ -38,6 +40,7 @@ export function FeatureToggleReducer(state = defaultState, action: FeatureToggle
         hasFeatureToggle: true,
         isAccountInfoEmptyStateToggleEnabled: action.payload.isAccountInfoEmptyStateToggleEnabled,
         isAwsEc2InstancesToggleEnabled: action.payload.isAwsEc2InstancesToggleEnabled,
+        isChartSkeletonToggleEnabled: action.payload.isChartSkeletonToggleEnabled,
         isDebugToggleEnabled: action.payload.isDebugToggleEnabled,
         isExportsToggleEnabled: action.payload.isExportsToggleEnabled,
         isFinsightsToggleEnabled: action.payload.isFinsightsToggleEnabled,

diff --git a/src/store/featureToggle/featureToggleSelectors.ts b/src/store/featureToggle/featureToggleSelectors.ts
@@ -10,6 +10,8 @@ export const selectIsAccountInfoEmptyStateToggleEnabled = (state: RootState) =>
   selectFeatureToggleState(state).isAccountInfoEmptyStateToggleEnabled;
 export const selectIsAwsEc2InstancesToggleEnabled = (state: RootState) =>
   selectFeatureToggleState(state).isAwsEc2InstancesToggleEnabled;
+export const selectIsChartSkeletonToggleEnabled = (state: RootState) =>
+  selectFeatureToggleState(state).isChartSkeletonToggleEnabled;
 export const selectIsDebugToggleEnabled = (state: RootState) => selectFeatureToggleState(state).isDebugToggleEnabled;
 export const selectIsExportsToggleEnabled = (state: RootState) =>
   selectFeatureToggleState(state).isExportsToggleEnabled;