upcoming: [DI-22132] - Code refactoring, util update and constants up…

…date
linode · Jan 6, 2025 · 05cee31 · 05cee31
1 parent e3c57c9
commit 05cee31
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 58 deletions.
diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetailCriteria.test.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetailCriteria.test.tsx
@@ -1,15 +1,32 @@
 import React from 'react';
 
-import { alertFactory } from 'src/factories';
+import {
+  alertDimensionsFactory,
+  alertFactory,
+  alertRulesFactory,
+} from 'src/factories';
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
-import { operators } from '../constants';
+import { metricOperatorTypeMap } from '../constants';
 import { convertSecondsToMinutes } from '../Utils/utils';
 import { AlertDetailCriteria } from './AlertDetailCriteria';
 
 describe('AlertDetailCriteria component tests', () => {
   it('should render the alert detail criteria successfully on correct inputs', () => {
-    const alertDetails = alertFactory.build();
+    const alertDetails = alertFactory.build({
+      rule_criteria: {
+        rules: [
+          ...alertRulesFactory.buildList(2, {
+            aggregation_type: 'avg',
+            dimension_filters: alertDimensionsFactory.buildList(2),
+            label: 'CPU Usage',
+            metric: 'cpu_usage',
+            operator: 'gt',
+            unit: 'bytes',
+          }),
+        ],
+      },
+    });
     const { getAllByText, getByText } = renderWithTheme(
       <AlertDetailCriteria alertDetails={alertDetails} />
     );
@@ -19,7 +36,8 @@ describe('AlertDetailCriteria component tests', () => {
     expect(getByText('Criteria')).toBeInTheDocument();
     expect(getAllByText('Average').length).toBe(2);
     expect(getAllByText('CPU Usage').length).toBe(2);
-    expect(getAllByText(operators['gt']).length).toBe(2);
+    expect(getAllByText('bytes').length).toBe(2);
+    expect(getAllByText(metricOperatorTypeMap['gt']).length).toBe(2);
 
     const {
       evaluation_period_seconds,

diff --git a/packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/DisplayAlertDetailChips.tsx b/packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/DisplayAlertDetailChips.tsx
@@ -2,6 +2,7 @@ import { Typography } from '@linode/ui';
 import { Grid, useTheme } from '@mui/material';
 import React from 'react';
 
+import { getAlertChipBorderRadius } from '../Utils/utils';
 import { StyledAlertChip } from './AlertDetail';
 
 export interface AlertDimensionsProp {
@@ -42,41 +43,20 @@ export const DisplayAlertDetailChips = React.memo(
       values: values,
     } = props;
 
-    const iterables: string[][] = Array.isArray(values)
+    const chipValues: string[][] = Array.isArray(values)
       ? values.every(Array.isArray)
         ? values
         : [values]
       : [];
 
     const theme = useTheme();
 
-    /**
-     * @param index  The index of the list of chips that we are rendering
-     * @param length The length of the iteration so far
-     * @returns The border radius to be applied on chips based on the parameters
-     */
-    const getAlertChipBorderRadius = (
-      index: number,
-      length: number
-    ): string => {
-      if (!mergeChips || length === 1) {
-        return theme.spacing(0.3);
-      }
-      if (index === 0) {
-        return `${theme.spacing(0.3)} 0 0 ${theme.spacing(0.3)}`;
-      }
-      if (index === length - 1) {
-        return `0 ${theme.spacing(0.3)} ${theme.spacing(0.3)} 0`;
-      }
-      return '0';
-    };
-
     return (
       <Grid container item spacing={1}>
-        {iterables.map((value, idx) => (
-          <React.Fragment key={idx}>
+        {chipValues.map((value, index) => (
+          <React.Fragment key={`${label}_${index}`}>
             <Grid item md={labelGridColumns} xs={12}>
-              {idx === 0 && (
+              {index === 0 && (
                 <Typography
                   color={theme.tokens.content.Text.Primary.Default}
                   fontFamily={theme.font.bold}
@@ -101,7 +81,9 @@ export const DisplayAlertDetailChips = React.memo(
                     <StyledAlertChip
                       borderRadius={getAlertChipBorderRadius(
                         index,
-                        value.length
+                        value.length,
+                        mergeChips,
+                        theme
                       )}
                       label={label}
                       variant="outlined"

diff --git a/.../manager/src/features/CloudPulse/Alerts/AlertsDetail/RenderAlertsMetricsAndDimensions.tsx b/.../manager/src/features/CloudPulse/Alerts/AlertsDetail/RenderAlertsMetricsAndDimensions.tsx
@@ -3,7 +3,11 @@ import React from 'react';
 
 import NullComponent from 'src/components/NullComponent';
 
-import { aggregationTypes, operatorLabel, operators } from '../constants';
+import {
+  aggregationTypeMap,
+  dimensionOperatorTypeMap,
+  metricOperatorTypeMap,
+} from '../constants';
 import { DisplayAlertDetailChips } from './DisplayAlertDetailChips';
 
 import type { AlertDefinitionMetricCriteria } from '@linode/api-v4';
@@ -41,11 +45,9 @@ export const RenderAlertMetricsAndDimensions = React.memo(
           <Grid item xs={12}>
             <DisplayAlertDetailChips
               values={[
-                aggregationType
-                  ? aggregationTypes[aggregationType]
-                  : aggregationType,
+                aggregationTypeMap[aggregationType],
                 label,
-                operator ? operators[operator] : operator,
+                metricOperatorTypeMap[operator],
                 String(threshold),
                 unit,
               ]}
@@ -57,11 +59,17 @@ export const RenderAlertMetricsAndDimensions = React.memo(
           {dimensionFilters.length > 0 && (
             <Grid item xs={12}>
               <DisplayAlertDetailChips
-                values={dimensionFilters.map(({ label, operator, value }) => [
-                  label,
-                  operatorLabel[operator],
-                  value,
-                ])}
+                values={dimensionFilters.map(
+                  ({
+                    label: dimensionLabel,
+                    operator: dimensionOperator,
+                    value,
+                  }) => [
+                    dimensionLabel,
+                    dimensionOperatorTypeMap[dimensionOperator],
+                    value,
+                  ]
+                )}
                 label="Dimension Filter"
                 mergeChips
               />

diff --git a/packages/manager/src/features/CloudPulse/Alerts/Utils/utils.test.ts b/packages/manager/src/features/CloudPulse/Alerts/Utils/utils.test.ts
@@ -15,7 +15,7 @@ it('test getServiceTypeLabel method', () => {
 });
 
 it('test convertSecondsToMinutes method', () => {
-  expect(convertSecondsToMinutes(0)).toBe('0 minutes');
+  expect(convertSecondsToMinutes(0)).toBe('0 minute');
   expect(convertSecondsToMinutes(60)).toBe('1 minute');
   expect(convertSecondsToMinutes(120)).toBe('2 minutes');
   expect(convertSecondsToMinutes(65)).toBe('1 minute and 5 seconds');

diff --git a/packages/manager/src/features/CloudPulse/Alerts/Utils/utils.ts b/packages/manager/src/features/CloudPulse/Alerts/Utils/utils.ts
@@ -36,24 +36,41 @@ export const getAlertBoxStyles = (theme: Theme) => ({
  * @returns A string representing the time in minutes and seconds.
  */
 export const convertSecondsToMinutes = (seconds: number): string => {
-  if (seconds === 0) {
-    return '0 minutes';
+  if (seconds <= 0) {
+    return '0 minute';
   }
-
   const minutes = Math.floor(seconds / 60);
   const remainingSeconds = seconds % 60;
+  const minuteString =
+    minutes > 0
+      ? `${minutes} ${minutes === 1 ? 'minute' : 'minutes'}`
+      : undefined;
+  const secondString =
+    remainingSeconds > 0
+      ? `${remainingSeconds} ${remainingSeconds <= 1 ? 'second' : 'seconds'}`
+      : undefined;
+  return [minuteString, secondString].filter(Boolean).join(' and ');
+};
 
-  const minuteString = `${minutes} ${minutes === 1 ? 'minute' : 'minutes'}`;
-  const secondString = `${remainingSeconds} ${
-    remainingSeconds === 1 ? 'second' : 'seconds'
-  }`;
-
-  if (!minutes) {
-    return secondString;
+/**
+ * @param index  The index of the list of chips that we are rendering
+ * @param length The length of the iteration so far
+ * @returns The border radius to be applied on chips based on the parameters
+ */
+export const getAlertChipBorderRadius = (
+  index: number,
+  length: number,
+  mergeChips: boolean | undefined,
+  theme: Theme
+): string => {
+  if (!mergeChips || length === 1) {
+    return theme.spacing(0.3);
   }
-  if (!remainingSeconds) {
-    return minuteString;
+  if (index === 0) {
+    return `${theme.spacing(0.3)} 0 0 ${theme.spacing(0.3)}`;
   }
-
-  return `${minuteString} and ${secondString}`;
+  if (index === length - 1) {
+    return `0 ${theme.spacing(0.3)} ${theme.spacing(0.3)} 0`;
+  }
+  return '0';
 };
diff --git a/packages/manager/src/features/CloudPulse/Alerts/constants.ts b/packages/manager/src/features/CloudPulse/Alerts/constants.ts
@@ -87,23 +87,26 @@ export const alertStatusToIconStatusMap: Record<AlertStatusType, Status> = {
   enabled: 'active',
 };
 
-export const operators: Record<MetricOperatorType, string> = {
+export const metricOperatorTypeMap: Record<MetricOperatorType, string> = {
   eq: '=',
   gt: '>',
   gte: '>=',
   lt: '<',
   lte: '<=',
 };
 
-export const aggregationTypes: Record<MetricAggregationType, string> = {
+export const aggregationTypeMap: Record<MetricAggregationType, string> = {
   avg: 'Average',
   count: 'Count',
   max: 'Maximum',
   min: 'Minimum',
   sum: 'Sum',
 };
 
-export const operatorLabel: Record<DimensionFilterOperatorType, string> = {
+export const dimensionOperatorTypeMap: Record<
+  DimensionFilterOperatorType,
+  string
+> = {
   endswith: 'ends with',
   eq: 'equals',
   neq: 'not equals',