upcoming: [DI-20501] - Fix Demo feedbacks and missed changes across A…

…CLP (linode#10851) * upcoming: [DI-20348] - Fixing Feedbacks * upcoming: [DI-20348] - Fixing empty dependency array * upcoming: [DI-20348] - Defer placeholder from props * upcoming: [DI-20357] - Code Refactoring for bug fixes * upcoming: [DI-20501] - Add change set * upcoming: [DI-20501] - Remove non nullish assertion * upcoming: [DI-20501] - Getting started to Docs * upcoming: [DI-20501] - changing to themes * upcoming: [DI-20501] - changing from day to days * upcoming: [DI-20501] - update changeset * upcoming: [DI-20501] - timestamp to use REFRESH constant * upcoming: [DI-20501] - full undefined checks * upcoming: [DI-20501] - ESlint changes * upcoming: [DI-20501] - PR comments * upcoming: [DI-20501] - UT failure fixes * upcoming: [DI-20501] - Loading icon while jwetoken fetch happening * upcoming: [DI-20501] - Enable option chain checks * upcoming: [DI-20501] - ESlint issue fixes * upcoming: [DI-20501] - is entity for placeholder * upcoming: [DI-20501] - Enable beta for cloudpulse endpoints * upcoming: [DI-20501] - Add api-v4 changeset * upcoming: [DI-20501] - PR comments * upcoming: [DI-20501] - Code simplification --------- Co-authored-by: vmangalr <vmangalr@akamai.com>
coliu-akamai · Sep 3, 2024 · f787b09 · f787b09
1 parent 990fa49
commit f787b09
Show file tree

Hide file tree

Showing 23 changed files with 115 additions and 63 deletions.
diff --git a/packages/api-v4/.changeset/pr-10851-upcoming-features-1725332570350.md b/packages/api-v4/.changeset/pr-10851-upcoming-features-1725332570350.md
@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Upcoming Features
+---
+
+Add beta api root for cloudpulse endpoints ([#10851](https://github.com/linode/manager/pull/10851))
diff --git a/packages/api-v4/src/cloudpulse/dashboards.ts b/packages/api-v4/src/cloudpulse/dashboards.ts
@@ -1,7 +1,7 @@
 import { ResourcePage } from 'src/types';
 import Request, { setMethod, setURL } from '../request';
 import { Dashboard } from './types';
-import { API_ROOT } from 'src/constants';
+import { BETA_API_ROOT as API_ROOT } from 'src/constants';
 
 // Returns the list of all the dashboards available
 export const getDashboards = (serviceType: string) =>

diff --git a/packages/api-v4/src/cloudpulse/services.ts b/packages/api-v4/src/cloudpulse/services.ts
@@ -1,4 +1,4 @@
-import { API_ROOT } from 'src/constants';
+import { BETA_API_ROOT as API_ROOT } from 'src/constants';
 import Request, { setData, setMethod, setURL } from '../request';
 import {
   JWEToken,

diff --git a/packages/manager/.changeset/pr-10851-upcoming-features-1724918306619.md b/packages/manager/.changeset/pr-10851-upcoming-features-1724918306619.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Fix Demo feedbacks and missing changes across ACLP ([#10851](https://github.com/linode/manager/pull/10851))
diff --git a/packages/manager/src/components/LineGraph/LineGraph.tsx b/packages/manager/src/components/LineGraph/LineGraph.tsx
@@ -202,6 +202,11 @@ export const LineGraph = (props: LineGraphProps) => {
       },
       legend: {
         display: _nativeLegend,
+        onClick: (_e, legendItem) => {
+          if (legendItem && legendItem.datasetIndex !== undefined) {
+            handleLegendClick(legendItem.datasetIndex); // when we click on native legend, also call the handle legend click function
+          }
+        },
         position: _nativeLegend ? 'bottom' : undefined,
       },
       maintainAspectRatio: false,
@@ -515,7 +520,7 @@ export const _formatTooltip = curry(
      */
     const dataset = t?.datasetIndex ? data[t?.datasetIndex] : data[0];
     const label = dataset.label;
-    const val = t?.index ? dataset.data[t?.index][1] || 0 : 0;
+    const val = t?.index !== undefined ? dataset.data[t?.index][1] || 0 : 0; // bug, t?.index if 0, it is considered as false, so added undefined check directly
     const value = formatter ? formatter(val) : roundTo(val);
     return `${label}: ${value}${unit ? unit : ''}`;
   }

diff --git a/packages/manager/src/components/RegionSelect/RegionSelect.tsx b/packages/manager/src/components/RegionSelect/RegionSelect.tsx
@@ -51,6 +51,7 @@ export const RegionSelect = <
     helperText,
     label,
     onChange,
+    placeholder,
     regionFilter,
     regions,
     required,
@@ -163,7 +164,7 @@ export const RegionSelect = <
         noOptionsText="No results"
         onChange={onChange}
         options={regionOptions}
-        placeholder="Select a Region"
+        placeholder={placeholder ?? 'Select a Region'}
         value={selectedRegion as Region}
       />
       {showDistributedRegionIconHelperText && ( // @TODO Gecko Beta: Add docs link

diff --git a/packages/manager/src/features/CloudPulse/CloudPulseLanding.tsx b/packages/manager/src/features/CloudPulse/CloudPulseLanding.tsx
@@ -10,7 +10,7 @@ export const CloudPulseLanding = () => {
     <>
       <LandingHeader
         breadcrumbProps={{ pathname: '/Akamai Cloud Pulse' }}
-        docsLabel="Getting Started"
+        docsLabel="Docs"
         docsLink="https://www.linode.com/docs/"
       />
       <React.Suspense fallback={<SuspenseLoader />}>

diff --git a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboard.tsx b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboard.tsx
@@ -154,6 +154,7 @@ export const CloudPulseDashboard = (props: DashboardProperties) => {
   const {
     data: jweToken,
     isError: isJweTokenError,
+    isLoading: isJweTokenLoading,
   } = useCloudPulseJWEtokenQuery(
     dashboard?.service_type,
     getJweTokenPayload(),
@@ -168,7 +169,12 @@ export const CloudPulseDashboard = (props: DashboardProperties) => {
     );
   }
 
-  if (isMetricDefinitionLoading || isDashboardLoading || isResourcesLoading) {
+  if (
+    isMetricDefinitionLoading ||
+    isDashboardLoading ||
+    isResourcesLoading ||
+    isJweTokenLoading
+  ) {
     return <CircleProgress />;
   }
 
@@ -237,11 +243,11 @@ export const CloudPulseDashboard = (props: DashboardProperties) => {
     );
   };
 
-  const renderPlaceHolder = (subtitle: string) => {
+  const renderPlaceHolder = (title: string) => {
     return (
       <Grid item xs>
         <Paper>
-          <Placeholder icon={CloudPulseIcon} subtitle={subtitle} title="" />
+          <Placeholder icon={CloudPulseIcon} isEntity title={title} />
         </Paper>
       </Grid>
     );

diff --git a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.test.tsx b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.test.tsx
@@ -8,7 +8,7 @@ import { renderWithTheme } from 'src/utilities/testHelpers';
 import { CloudPulseDashboardLanding } from './CloudPulseDashboardLanding';
 
 const dashboardLabel = 'Factory Dashboard-1';
-const selectDashboardLabel = 'Select a Dashboard';
+const selectDashboardLabel = 'Select Dashboard';
 const queryMocks = vi.hoisted(() => ({
   useCloudPulseDashboardsQuery: vi.fn().mockReturnValue({}),
   useLoadUserPreferences: vi.fn().mockReturnValue({}),

diff --git a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx
@@ -6,7 +6,7 @@ import { CircleProgress } from 'src/components/CircleProgress';
 import { StyledPlaceholder } from 'src/features/StackScripts/StackScriptBase/StackScriptBase.styles';
 
 import { GlobalFilters } from '../Overview/GlobalFilters';
-import { REGION, RESOURCE_ID } from '../Utils/constants';
+import { REFRESH, REGION, RESOURCE_ID } from '../Utils/constants';
 import {
   checkIfAllMandatoryFiltersAreSelected,
   getMetricsCallCustomFilters,
@@ -104,6 +104,11 @@ export const CloudPulseDashboardLanding = () => {
           filterValue,
           dashboard.service_type
         )}
+        manualRefreshTimeStamp={
+          filterValue[REFRESH] && typeof filterValue[REFRESH] === 'number'
+            ? filterValue[REFRESH]
+            : undefined
+        }
         region={
           typeof filterValue[REGION] === 'string'
             ? (filterValue[REGION] as string)

diff --git a/packages/manager/src/features/CloudPulse/Overview/GlobalFilters.tsx b/packages/manager/src/features/CloudPulse/Overview/GlobalFilters.tsx
@@ -1,5 +1,5 @@
+import { IconButton } from '@mui/material';
 import { Grid } from '@mui/material';
-import { IconButton, Tooltip } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
@@ -9,6 +9,7 @@ import { Divider } from 'src/components/Divider';
 import { CloudPulseDashboardFilterBuilder } from '../shared/CloudPulseDashboardFilterBuilder';
 import { CloudPulseDashboardSelect } from '../shared/CloudPulseDashboardSelect';
 import { CloudPulseTimeRangeSelect } from '../shared/CloudPulseTimeRangeSelect';
+import { REFRESH } from '../Utils/constants';
 
 import type { FilterValueType } from '../Dashboard/CloudPulseDashboardLanding';
 import type { Dashboard, TimeDuration } from '@linode/api-v4';
@@ -34,7 +35,6 @@ export const GlobalFilters = React.memo((props: GlobalFilterProperties) => {
     handleDashboardChange,
     handleTimeDurationChange,
   } = props;
-
   const [selectedDashboard, setSelectedDashboard] = React.useState<
     Dashboard | undefined
   >();
@@ -61,7 +61,15 @@ export const GlobalFilters = React.memo((props: GlobalFilterProperties) => {
     [handleAnyFilterChange]
   );
 
-  const handleGlobalRefresh = React.useCallback(() => {}, []);
+  const handleGlobalRefresh = React.useCallback(
+    (dashboardObj?: Dashboard) => {
+      if (!dashboardObj) {
+        return;
+      }
+      handleAnyFilterChange(REFRESH, Date.now());
+    },
+    [handleAnyFilterChange]
+  );
 
   return (
     <Grid container gap={1}>
@@ -86,17 +94,16 @@ export const GlobalFilters = React.memo((props: GlobalFilterProperties) => {
             hideLabel
             label="Select Time Range"
           />
-          <Tooltip arrow enterDelay={500} placement="top" title="Refresh">
-            <IconButton
-              sx={{
-                marginBlockEnd: 'auto',
-              }}
-              onClick={handleGlobalRefresh}
-              size="small"
-            >
-              <StyledReload />
-            </IconButton>
-          </Tooltip>
+          <IconButton
+            sx={{
+              marginBlockEnd: 'auto',
+            }}
+            disabled={!selectedDashboard}
+            onClick={() => handleGlobalRefresh(selectedDashboard)}
+            size="small"
+          >
+            <StyledReload />
+          </IconButton>
         </Grid>
       </Grid>
       <Grid item xs={12}>

diff --git a/packages/manager/src/features/CloudPulse/Utils/CloudPulseWidgetUtils.ts b/packages/manager/src/features/CloudPulse/Utils/CloudPulseWidgetUtils.ts
@@ -92,6 +92,11 @@ interface graphDataOptionsProps {
    */
   unit: string;
 
+  /**
+   * widget chart type
+   */
+  widgetChartType: string;
+
   /**
    * preferred color for the widget's graph
    */
@@ -150,6 +155,7 @@ export const generateGraphData = (props: graphDataOptionsProps) => {
     serviceType,
     status,
     unit,
+    widgetChartType,
     widgetColor,
   } = props;
 
@@ -190,8 +196,9 @@ export const generateGraphData = (props: graphDataOptionsProps) => {
 
         const dimension = {
           backgroundColor: color,
-          borderColor: '',
+          borderColor: color,
           data: seriesDataFormatter(transformedData.values, start, end),
+          fill: widgetChartType === 'area',
           label: getLabelName(labelOptions),
         };
         // construct a legend row with the dimension
@@ -305,9 +312,10 @@ export const mapResourceIdToName = (
   id: string | undefined,
   resources: CloudPulseResources[]
 ): string => {
-  return (
-    resources.find((resourceObj) => resourceObj?.id === id)?.label ?? id ?? ''
+  const resourcesObj = resources.find(
+    (resourceObj) => String(resourceObj.id) === id
   );
+  return resourcesObj?.label ?? id ?? '';
 };
 
 /**

diff --git a/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx b/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx
@@ -142,6 +142,8 @@ export const CloudPulseWidget = (props: CloudPulseWidgetProperties) => {
 
   const flags = useFlags();
 
+  const jweTokenExpiryError = 'Token expired';
+
   /**
    *
    * @param zoomInValue: True if zoom in clicked &  False if zoom out icon clicked
@@ -274,6 +276,7 @@ export const CloudPulseWidget = (props: CloudPulseWidgetProperties) => {
       serviceType,
       status,
       unit,
+      widgetChartType: widget.chart_type,
       widgetColor: widget.color,
     });
 
@@ -282,6 +285,8 @@ export const CloudPulseWidget = (props: CloudPulseWidgetProperties) => {
     today = generatedData.today;
     currentUnit = generatedData.unit;
   }
+
+  const metricsApiCallError = error?.[0]?.reason;
   return (
     <Grid item lg={widget.size} xs={12}>
       <Paper>
@@ -338,8 +343,8 @@ export const CloudPulseWidget = (props: CloudPulseWidgetProperties) => {
 
           <CloudPulseLineGraph
             error={
-              status === 'error'
-                ? error?.[0]?.reason ?? 'Error while rendering graph'
+              status === 'error' && metricsApiCallError !== jweTokenExpiryError // show the error only if the error is not related to token expiration
+                ? metricsApiCallError ?? 'Error while rendering graph'
                 : undefined
             }
             legendRows={
@@ -350,7 +355,7 @@ export const CloudPulseWidget = (props: CloudPulseWidgetProperties) => {
             formatData={(data: number) => convertValueToUnit(data, currentUnit)}
             formatTooltip={(value: number) => formatToolTip(value, unit)}
             gridSize={widget.size}
-            loading={isLoading}
+            loading={isLoading || metricsApiCallError === jweTokenExpiryError} // keep loading until we fetch the refresh token
             nativeLegend
             showToday={today}
             timezone={timezone}

diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseComponentRenderer.test.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseComponentRenderer.test.tsx
@@ -47,7 +47,7 @@ describe('ComponentRenderer component tests', () => {
       </Grid>
     );
 
-    expect(getByPlaceholderText('Select a Region')).toBeDefined();
+    expect(getByPlaceholderText('Select Region')).toBeDefined();
   }),
     it('it should render provided resource filter in props', () => {
       const resourceProps = linodeFilterConfig?.filters.find(

diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.test.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.test.tsx
@@ -136,7 +136,6 @@ describe('CloudPulseCustomSelect component tests', () => {
     expect(screen.getByPlaceholderText(testFilter)).toBeDefined();
     const keyDown = screen.getByTestId(keyboardArrowDownIcon);
     fireEvent.click(keyDown);
-    fireEvent.click(screen.getByText('Test1'));
     expect(screen.getAllByText('Test1').length).toEqual(2); // here it should be 2
     expect(screen.getAllByText('Test2').length).toEqual(1); // since we didn't select this option it should be 1
     fireEvent.click(screen.getByText('Test2'));

diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseCustomSelect.tsx
@@ -145,13 +145,13 @@ export const CloudPulseCustomSelect = React.memo(
             filterKey,
             handleSelectionChange,
             isMultiSelect: isMultiSelect ?? false,
-            options: options ?? [],
+            options: options || queriedResources || [],
             savePreferences: savePreferences ?? false,
           })
         );
       }
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [savePreferences, options, apiV4QueryKey]); // only execute this use efffect one time or if savePreferences or options or dataApiUrl changes
+    }, [savePreferences, options, apiV4QueryKey, queriedResources]); // only execute this use efffect one time or if savePreferences or options or dataApiUrl changes
 
     const handleChange = (
       _: React.SyntheticEvent,

diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.test.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.test.tsx
@@ -21,7 +21,7 @@ describe('CloudPulseDashboardFilterBuilder component tests', () => {
     expect(getByTestId('region-select')).toBeDefined();
   });
 
-  it('it should render successfully when the required props are passed for service type dbass', async () => {
+  it('it should render successfully when the required props are passed for service type dbaas', async () => {
     const { getByPlaceholderText } = renderWithTheme(
       <CloudPulseDashboardFilterBuilder
         dashboard={dashboardFactory.build({
@@ -33,6 +33,6 @@ describe('CloudPulseDashboardFilterBuilder component tests', () => {
     );
 
     expect(getByPlaceholderText('Select DB Cluster Names')).toBeDefined();
-    expect(getByPlaceholderText('Select a Region')).toBeDefined();
+    expect(getByPlaceholderText('Select Region')).toBeDefined();
   });
 });
diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardSelect.test.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardSelect.test.tsx
@@ -66,7 +66,7 @@ describe('CloudPulse Dashboard select', () => {
     );
 
     expect(getByTestId('cloudpulse-dashboard-select')).toBeInTheDocument();
-    expect(getByPlaceholderText('Select a Dashboard')).toBeInTheDocument();
+    expect(getByPlaceholderText('Select Dashboard')).toBeInTheDocument();
   }),
     it('Should render dashboard select component with data', () => {
       renderWithTheme(<CloudPulseDashboardSelect {...props} />);

diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardSelect.tsx
@@ -59,7 +59,7 @@ export const CloudPulseDashboardSelect = React.memo(
 
     const errorText: string = getErrorText();
 
-    const placeHolder = 'Select a Dashboard';
+    const placeHolder = 'Select Dashboard';
 
     // sorts dashboards by service type. Required due to unexpected autocomplete grouping behaviour
     const getSortedDashboardsList = (options: Dashboard[]): Dashboard[] => {
@@ -116,7 +116,7 @@ export const CloudPulseDashboardSelect = React.memo(
         fullWidth
         groupBy={(option: Dashboard) => option.service_type}
         isOptionEqualToValue={(option, value) => option.id === value.id}
-        label="Select a Dashboard"
+        label="Select Dashboard"
         loading={dashboardsLoading || serviceTypesLoading}
         options={getSortedDashboardsList(dashboardsList ?? [])}
         placeholder={placeHolder}