Merge pull request #333 from project-koku/release_prod-stable.51458

Deployment commit for prod-stable

Author: dlabrecq

.archive/routes/optimizations/optimizationsBreakdown/data.ts

@@ -0,0 +1,3 @@
+# Koku UI MFE Documentation Index #
+
+Welcome to the Koku UI MFE documentation!

docs/index.md

@@ -1440,6 +1440,18 @@
         "value": "value"
       }
     ],
+    "optimizedStateDesc": [
+      {
+        "type": 0,
+        "value": "Good job optimizing the current configuration."
+      }
+    ],
+    "optimizedStateTitle": [
+      {
+        "type": 0,
+        "value": "You have reached recommended state!"
+      }
+    ],
     "pageTitleDefault": [
       {
         "type": 0,

locales/data.json

@@ -59,6 +59,8 @@
   "optimizationsShortTerm": "Last 24 hrs",
   "optimizationsValue": "{value}{units}",
   "optimizationsValues": "{value, select, cluster {Cluster name} container {Container name} last_reported {Last reported} project {Project name} workload {Workload name} workload_type {Workload type} other {}}",
+  "optimizedStateDesc": "Good job optimizing the current configuration.",
+  "optimizedStateTitle": "You have reached recommended state!",
   "pageTitleDefault": "Cost Management MFE | OpenShift",
   "pageTitleOptimizations": "Optimizations - Cost Management | OpenShift",
   "paginationTitle": "{placement, select, top {{title} top pagination} bottom {{title} bottom pagination} other {{title} pagination}}",

locales/translations.json

@@ -0,0 +1,4 @@
+docs_dir: docs/
+site_name: Koku UI MFE Documentation
+plugins:
+  - techdocs-core

mkdocs.yml

@@ -48,67 +48,66 @@
     "verify": "npm-run-all build lint test"
   },
   "dependencies": {
-    "@patternfly/patternfly": "5.2.0",
-    "@patternfly/react-charts": "7.2.2",
-    "@patternfly/react-component-groups": "5.1.0",
-    "@patternfly/react-core": "5.2.0",
-    "@patternfly/react-icons": "5.2.0",
-    "@patternfly/react-table": "5.2.0",
-    "@patternfly/react-tokens": "5.2.0",
-    "@redhat-cloud-services/frontend-components": "^4.2.6",
+    "@patternfly/patternfly": "5.3.1",
+    "@patternfly/react-charts": "7.3.0",
+    "@patternfly/react-component-groups": "^5.1.0",
+    "@patternfly/react-core": "5.3.3",
+    "@patternfly/react-icons": "5.3.2",
+    "@patternfly/react-table": "5.3.3",
+    "@patternfly/react-tokens": "5.3.1",
+    "@redhat-cloud-services/frontend-components": "^4.2.10",
     "@redhat-cloud-services/frontend-components-notifications": "^4.1.0",
     "@redhat-cloud-services/frontend-components-translations": "^3.2.7",
-    "@redhat-cloud-services/frontend-components-utilities": "^4.0.10",
-    "@redhat-cloud-services/rbac-client": "^1.3.3",
-    "@reduxjs/toolkit": "^2.2.3",
-    "@unleash/proxy-client-react": "^4.2.2",
-    "axios": "^1.6.8",
+    "@redhat-cloud-services/frontend-components-utilities": "^4.0.11",
+    "@redhat-cloud-services/rbac-client": "^1.4.4",
+    "@reduxjs/toolkit": "^2.2.5",
+    "@unleash/proxy-client-react": "^4.2.4",
+    "axios": "^1.7.2",
     "date-fns": "^3.6.0",
     "js-file-download": "^0.4.12",
     "lodash": "^4.17.21",
     "qs": "^6.12.1",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "react-bootstrap": "^2.10.2",
-    "react-dom": "^18.2.0",
-    "react-intl": "^6.6.5",
-    "react-redux": "^9.1.1",
-    "react-router-dom": "^6.22.3",
+    "react-dom": "^18.3.1",
+    "react-intl": "^6.6.8",
+    "react-redux": "^9.1.2",
+    "react-router-dom": "^6.23.1",
     "redux": "^5.0.1",
     "redux-thunk": "^3.1.0",
     "typesafe-actions": "^5.1.0",
-    "unleash-proxy-client": "^3.3.2",
     "victory-core": "^37.0.2",
-    "yaml": "^2.4.1"
+    "yaml": "^2.4.2"
   },
   "devDependencies": {
-    "@formatjs/cli": "^6.2.9",
+    "@formatjs/cli": "^6.2.12",
     "@redhat-cloud-services/eslint-config-redhat-cloud-services": "^2.0.4",
-    "@redhat-cloud-services/frontend-components-config": "^6.0.12",
-    "@redhat-cloud-services/tsc-transform-imports": "^1.0.9",
-    "@swc/core": "^1.4.14",
+    "@redhat-cloud-services/frontend-components-config": "^6.0.14",
+    "@redhat-cloud-services/tsc-transform-imports": "^1.0.10",
+    "@swc/core": "^1.5.7",
     "@swc/jest": "^0.2.36",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^15.0.2",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
     "@types/qs": "^6.9.15",
-    "@types/react": "^18.2.79",
-    "@types/react-dom": "^18.2.25",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/react-redux": "^7.1.33",
     "@types/react-router-dom": "^5.3.3",
-    "@typescript-eslint/eslint-plugin": "^7.7.0",
-    "@typescript-eslint/parser": "^7.7.0",
+    "@typescript-eslint/eslint-plugin": "^7.11.0",
+    "@typescript-eslint/parser": "^7.11.0",
     "@xstate/test": "^0.5.1",
     "aphrodite": "^2.4.0",
     "copy-webpack-plugin": "^12.0.2",
     "eslint": "^8.57.0",
-    "eslint-plugin-formatjs": "^4.13.0",
-    "eslint-plugin-jest-dom": "^5.2.0",
-    "eslint-plugin-jsdoc": "^48.2.3",
-    "eslint-plugin-markdown": "^4.0.1",
-    "eslint-plugin-patternfly-react": "^5.2.1",
+    "eslint-plugin-formatjs": "^4.13.3",
+    "eslint-plugin-jest-dom": "^5.4.0",
+    "eslint-plugin-jsdoc": "^48.2.7",
+    "eslint-plugin-markdown": "^5.0.0",
+    "eslint-plugin-patternfly-react": "^5.3.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react": "^7.34.2",
     "eslint-plugin-simple-import-sort": "^12.1.0",
     "eslint-plugin-sort-keys-fix": "^1.1.2",
     "eslint-plugin-testing-library": "^6.2.2",
@@ -121,9 +120,9 @@
     "jws": "^4.0.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.2.5",
-    "rimraf": "^5.0.5",
+    "rimraf": "^5.0.7",
     "swc_mut_cjs_exports": "^0.90.24",
-    "ts-jest": "^29.1.2",
+    "ts-jest": "^29.1.4",
     "ts-patch": "^3.1.2",
     "typescript": "^5.4.5",
     "webpack-bundle-analyzer": "^4.10.2"

package-lock.json

@@ -27,6 +27,9 @@ export interface RecommendationValues {
 
 export interface RecommendationEngine {
   config: RecommendationValues;
+  notifications?: {
+    [key: string]: Notification;
+  };
   pods_count?: number;
   variation: RecommendationValues;
 }
@@ -46,10 +49,6 @@ export interface RecommendationTerm {
   notifications?: {
     [key: string]: Notification;
   };
-  recommendation_engines?: {
-    cost: RecommendationEngine;
-    performance: RecommendationEngine;
-  };
   plots?: {
     datapoints?: number;
     plots_data?: {
@@ -59,6 +58,10 @@ export interface RecommendationTerm {
       };
     };
   };
+  recommendation_engines?: {
+    cost: RecommendationEngine;
+    performance: RecommendationEngine;
+  };
 }
 
 export interface RecommendationTerms {
@@ -67,7 +70,7 @@ export interface RecommendationTerms {
   short_term?: RecommendationTerm;
 }
 
-export interface RecommendationItems {
+export interface Recommendations {
   current?: RecommendationValues;
   monitoring_end_time?: string;
   notifications?: {
@@ -77,7 +80,7 @@ export interface RecommendationItems {
 }
 
 export interface RecommendationReportData extends RosData {
-  recommendations?: RecommendationItems;
+  recommendations?: Recommendations;
 }
 
 export interface RecommendationReportMeta extends RosMeta {

package.json

@@ -6,30 +6,30 @@ import { featureToggleActions } from 'store/featureToggle';
 
 // eslint-disable-next-line no-shadow
 export const enum FeatureToggle {
-  debug = 'cost-management.ui.mfe.debug',
-  utilization = 'cost-management.ui.mfe.utilization', // https://issues.redhat.com/browse/COST-4619
+  boxPlot = 'cost-management.mfe.box-plot', // https://issues.redhat.com/browse/COST-4619
+  debug = 'cost-management.mfe.debug',
 }
 
 const useIsToggleEnabled = (toggle: FeatureToggle) => {
   const client = useUnleashClient();
   return client.isEnabled(toggle);
 };
 
-export const useIsDebugFlagEnabled = () => {
+export const useIsDebugToggleEnabled = () => {
   return useIsToggleEnabled(FeatureToggle.debug);
 };
 
-export const useIsUtilizationFlagEnabled = () => {
-  return useIsToggleEnabled(FeatureToggle.utilization) && insights?.chrome?.isBeta();
+export const useIsBoxPlotToggleEnabled = () => {
+  return useIsToggleEnabled(FeatureToggle.boxPlot);
 };
 
 // The FeatureToggle component saves feature toggles in store for places where Unleash hooks not available
 const useFeatureToggle = () => {
   const dispatch = useDispatch();
   const { auth } = useChrome();
 
-  const isDebugFlagEnabled = useIsDebugFlagEnabled();
-  const isUtilizationFlagEnabled = useIsUtilizationFlagEnabled();
+  const isDebugToggleEnabled = useIsDebugToggleEnabled();
+  const isBoxPlotToggleEnabled = useIsBoxPlotToggleEnabled();
 
   const fetchUser = callback => {
     auth.getUser().then(user => {
@@ -41,15 +41,15 @@ const useFeatureToggle = () => {
     // Workaround for code that doesn't use hooks
     dispatch(
       featureToggleActions.setFeatureToggle({
-        isDebugFlagEnabled,
-        isUtilizationFlagEnabled,
+        isDebugToggleEnabled,
+        isBoxPlotToggleEnabled,
       })
     );
-    if (isDebugFlagEnabled) {
+    if (isDebugToggleEnabled) {
       // eslint-disable-next-line no-console
       fetchUser(identity => console.log('User identity:', identity));
     }
-  }, [isDebugFlagEnabled, isUtilizationFlagEnabled]);
+  }, [isDebugToggleEnabled, isBoxPlotToggleEnabled]);
 };
 
 export default useFeatureToggle;

src/api/ros/recommendations.ts

@@ -419,6 +419,16 @@ export default defineMessages({
     description: 'Selected items for export',
     id: 'optimizationsValues',
   },
+  optimizedStateDesc: {
+    defaultMessage: 'Good job optimizing the current configuration.',
+    description: 'Good job optimizing the current configuration.',
+    id: 'optimizedStateDesc',
+  },
+  optimizedStateTitle: {
+    defaultMessage: 'You have reached recommended state!',
+    description: 'You have reached recommended state!',
+    id: 'optimizedStateTitle',
+  },
   pageTitleDefault: {
     defaultMessage: 'Cost Management MFE | OpenShift',
     description: 'Cost Management MFE | OpenShift',

src/components/featureToggle/featureToggle.tsx

@@ -25,13 +25,21 @@ export function getMaxMinValues(datums: ChartDatum[]) {
         datum.y0 !== undefined
           ? Math.max(datum.y, datum.y0)
           : Array.isArray(datum.y)
-            ? Math.max(...(datum.y[0] !== null ? datum.y : [0]))
+            ? datum.y[0] !== null
+              ? Math.max(...datum.y)
+              : (datum as any).yVal // For boxplot, which is hidden via `datum.y[0] = null` when all values are equal
+                ? (datum as any).yVal
+                : 0
             : datum.y;
       const minY =
         datum.y0 !== undefined
           ? Math.min(datum.y, datum.y0)
           : Array.isArray(datum.y)
-            ? Math.min(...(datum.y[0] !== null ? datum.y : [0]))
+            ? datum.y[0] !== null
+              ? Math.min(...datum.y)
+              : (datum as any).yVal // For boxplot, which is hidden via `datum.y[0] = null` when all values are equal
+                ? (datum as any).yVal
+                : 0
             : datum.y;
       if (maxY > max) {
         max = maxY;

src/locales/messages.ts

@@ -38,14 +38,15 @@ export const getChartNames = (series: ChartSeries[]) => {
   return result as any;
 };
 
-export const getDomain = (series: ChartSeries[], hiddenSeries: Set<number>) => {
+// Note: A series may be grouped in order to be hidden / shown together
+export const getDomain = (series: ChartSeries[], hiddenSeries: Set<number>, groupedSeriesCount = 0) => {
   const domain: { x?: DomainTuple; y?: DomainTuple } = { y: [0, 1] };
   let maxValue = -1;
   let minValue = -1;
 
   if (series) {
     // Don't use zero domain
-    if (series.length === hiddenSeries.size) {
+    if (series.length - groupedSeriesCount === hiddenSeries.size) {
       domain.x = [0, 1];
       hiddenSeries = new Set();
     }
@@ -78,14 +79,17 @@ export const getLegendData = (series: ChartSeries[], hiddenSeries: Set<number>,
   if (!series) {
     return undefined;
   }
-  const result = series.map((s, index) => {
-    const data = {
-      childName: s.childName,
-      ...s.legendItem, // name property
-      ...(tooltip && { name: s.legendItem.tooltip }), // Override name property for tooltip
-      ...getInteractiveLegendItemStyles(hiddenSeries.has(index)), // hidden styles
-    };
-    return data;
+  const result = [];
+  series.map((s, index) => {
+    if (s.legendItem) {
+      const data = {
+        childName: s.childName,
+        ...s.legendItem, // name property
+        ...(tooltip && { name: s.legendItem.tooltip }), // Override name property for tooltip
+        ...getInteractiveLegendItemStyles(hiddenSeries.has(index)), // hidden styles
+      };
+      result.push(data);
+    }
   });
   return result;
 };

src/routes/components/charts/common/chartDatum.ts

@@ -0,0 +1 @@
+export { default as OptimizedState } from './optimizedState';

src/routes/components/charts/common/chartUtils.ts

@@ -0,0 +1,8 @@
+import { global_success_color_100 } from '@patternfly/react-tokens/dist/js/global_success_color_100';
+import type React from 'react';
+
+export const styles = {
+  icon: {
+    color: global_success_color_100.var,
+  },
+} as { [className: string]: React.CSSProperties };