From f0b920768acc8a72eafd06b467603c9ce64a145a Mon Sep 17 00:00:00 2001 From: vmangalr Date: Mon, 16 Sep 2024 18:49:05 +0530 Subject: [PATCH 01/31] upcoming: [DI-20585] - CSS for widget size control and feedbacks --- .../src/assets/icons/cloudpulse_reload.svg | 3 + .../src/assets/icons/cloudpulse_zoomin.svg | 29 +++++++ .../src/assets/icons/cloudpulse_zoomout.svg | 6 ++ .../Dashboard/CloudPulseDashboard.tsx | 2 +- .../Dashboard/CloudPulseDashboardLanding.tsx | 2 +- .../CloudPulse/Overview/GlobalFilters.tsx | 75 ++++++++++--------- .../CloudPulse/Utils/CloudPulseWidgetUtils.ts | 16 ++++ .../features/CloudPulse/Utils/FilterConfig.ts | 10 +-- .../CloudPulse/Widget/CloudPulseWidget.tsx | 30 ++++---- .../Widget/components/CloudPulseLineGraph.tsx | 3 + .../CloudPulse/Widget/components/Zoomer.tsx | 5 +- .../CloudPulseDashboardFilterBuilder.tsx | 13 +--- .../shared/CloudPulseRegionSelect.tsx | 2 +- packages/manager/src/mocks/serverHandlers.ts | 32 ++++++-- 14 files changed, 152 insertions(+), 76 deletions(-) create mode 100644 packages/manager/src/assets/icons/cloudpulse_reload.svg create mode 100644 packages/manager/src/assets/icons/cloudpulse_zoomin.svg create mode 100644 packages/manager/src/assets/icons/cloudpulse_zoomout.svg diff --git a/packages/manager/src/assets/icons/cloudpulse_reload.svg b/packages/manager/src/assets/icons/cloudpulse_reload.svg new file mode 100644 index 00000000000..3d76ffbee84 --- /dev/null +++ b/packages/manager/src/assets/icons/cloudpulse_reload.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/packages/manager/src/assets/icons/cloudpulse_zoomin.svg b/packages/manager/src/assets/icons/cloudpulse_zoomin.svg new file mode 100644 index 00000000000..b2a590966cd --- /dev/null +++ b/packages/manager/src/assets/icons/cloudpulse_zoomin.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/manager/src/assets/icons/cloudpulse_zoomout.svg b/packages/manager/src/assets/icons/cloudpulse_zoomout.svg new file mode 100644 index 00000000000..7bbd58259e5 --- /dev/null +++ b/packages/manager/src/assets/icons/cloudpulse_zoomout.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboard.tsx b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboard.tsx index 3d010993877..6ecfbd7f71c 100644 --- a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboard.tsx +++ b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboard.tsx @@ -203,7 +203,7 @@ export const CloudPulseDashboard = (props: DashboardProperties) => { // maintain a copy const newDashboard: Dashboard = createObjectCopy(dashboard)!; return ( - + {{ ...newDashboard }.widgets.map((widget, index) => { // check if widget metric definition is available or not if (widget) { diff --git a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx index b31ee7f84a8..6f33642be14 100644 --- a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx +++ b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx @@ -131,7 +131,7 @@ export const CloudPulseDashboardLanding = () => { } return ( - + { ); return ( - - - - + + + + + + + + + handleGlobalRefresh(selectedDashboard)} + size="small" + > + + + - - - + {selectedDashboard && ( + + handleGlobalRefresh(selectedDashboard)} - size="small" - > - - + /> - - - - + )} + {selectedDashboard && ( { thisSeries.data.every((thisPoint) => thisPoint[1] === null) ); }; + +export const StyledWidgetWrapper = styled(Paper, { + label: 'StyledWidgetWrapper', +})(({ theme }) => ({ + [theme.breakpoints.down('sm')]: { + maxHeight: '580px', + minHeight: '580px', + }, + [theme.breakpoints.up('md')]: { + maxHeight: '540px', + minHeight: '540px', + }, +})); diff --git a/packages/manager/src/features/CloudPulse/Utils/FilterConfig.ts b/packages/manager/src/features/CloudPulse/Utils/FilterConfig.ts index cc6782926a2..cb2049952c1 100644 --- a/packages/manager/src/features/CloudPulse/Utils/FilterConfig.ts +++ b/packages/manager/src/features/CloudPulse/Utils/FilterConfig.ts @@ -28,7 +28,7 @@ export const LINODE_CONFIG: Readonly = { isMultiSelect: true, name: 'Resource', neededInServicePage: false, - placeholder: 'Select Resources', + placeholder: 'Select a Resource', priority: 2, }, name: 'Resources', @@ -42,7 +42,7 @@ export const LINODE_CONFIG: Readonly = { isMultiSelect: false, name: TIME_DURATION, neededInServicePage: false, - placeholder: 'Select Duration', + placeholder: 'Select a Duration', priority: 3, }, name: TIME_DURATION, @@ -100,7 +100,7 @@ export const DBAAS_CONFIG: Readonly = { isMultiSelect: true, name: 'Resource', neededInServicePage: false, - placeholder: 'Select DB Cluster Names', + placeholder: 'Select a DB Cluster', priority: 3, }, name: 'Resources', @@ -114,7 +114,7 @@ export const DBAAS_CONFIG: Readonly = { isMultiSelect: false, name: TIME_DURATION, neededInServicePage: false, // we will have a static time duration component, no need render from filter builder - placeholder: 'Select Duration', + placeholder: 'Select a Duration', priority: 4, }, name: TIME_DURATION, @@ -138,7 +138,7 @@ export const DBAAS_CONFIG: Readonly = { label: 'Secondary', }, ], - placeholder: 'Select Node Type', + placeholder: 'Select a Node Type', priority: 5, type: CloudPulseSelectTypes.static, }, diff --git a/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx b/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx index 06847a0573e..a372fc7f944 100644 --- a/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx +++ b/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx @@ -1,13 +1,13 @@ -import { Box, Grid, Paper, Stack, Typography } from '@mui/material'; +import { Box, Grid, Stack, Typography } from '@mui/material'; import { DateTime } from 'luxon'; import React from 'react'; -import { Divider } from 'src/components/Divider'; import { useFlags } from 'src/hooks/useFlags'; import { useCloudPulseMetricsQuery } from 'src/queries/cloudpulse/metrics'; import { useProfile } from 'src/queries/profile/profile'; import { + StyledWidgetPaper, generateGraphData, getCloudPulseMetricRequest, } from '../Utils/CloudPulseWidgetUtils'; @@ -26,12 +26,12 @@ import { ZoomIcon } from './components/Zoomer'; import type { FilterValueType } from '../Dashboard/CloudPulseDashboardLanding'; import type { CloudPulseResources } from '../shared/CloudPulseResourcesSelect'; -import type { Widgets } from '@linode/api-v4'; import type { AvailableMetrics, TimeDuration, TimeGranularity, } from '@linode/api-v4'; +import type { Widgets } from '@linode/api-v4'; import type { DataSet } from 'src/components/LineGraph/LineGraph'; import type { Metrics } from 'src/utilities/statMetrics'; @@ -289,28 +289,26 @@ export const CloudPulseWidget = (props: CloudPulseWidgetProperties) => { const metricsApiCallError = error?.[0]?.reason; return ( - - + + - - {convertStringToCamelCasesWithSpaces(widget.label)}{' '} - {!isLoading && - `(${currentUnit}${unit.endsWith('ps') ? '/s' : ''})`} + + {convertStringToCamelCasesWithSpaces(widget.label)} ({currentUnit} + {unit.endsWith('ps') ? '/s' : ''}) {availableMetrics?.scrape_interval && ( @@ -339,7 +337,6 @@ export const CloudPulseWidget = (props: CloudPulseWidgetProperties) => { - { formatTooltip={(value: number) => formatToolTip(value, unit)} gridSize={widget.size} loading={isLoading || metricsApiCallError === jweTokenExpiryError} // keep loading until we fetch the refresh token - nativeLegend showToday={today} timezone={timezone} title={widget.label} /> - - + + ); }; diff --git a/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx b/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx index 80958e13749..f1150aa65e1 100644 --- a/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx +++ b/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx @@ -46,6 +46,9 @@ export const CloudPulseLineGraph = React.memo((props: CloudPulseLineGraph) => { '& .MuiTable-root': { border: 0, }, + height: '100px', + maxHeight: '100px', + overflow: 'auto', }} ariaLabel={ariaLabel} data={data} diff --git a/packages/manager/src/features/CloudPulse/Widget/components/Zoomer.tsx b/packages/manager/src/features/CloudPulse/Widget/components/Zoomer.tsx index 6ed093ed513..2b157a6cff4 100644 --- a/packages/manager/src/features/CloudPulse/Widget/components/Zoomer.tsx +++ b/packages/manager/src/features/CloudPulse/Widget/components/Zoomer.tsx @@ -1,7 +1,8 @@ -import ZoomInMap from '@mui/icons-material/ZoomInMap'; -import ZoomOutMap from '@mui/icons-material/ZoomOutMap'; import * as React from 'react'; +import ZoomInMap from 'src/assets/icons/cloudpulse_zoomin.svg'; +import ZoomOutMap from 'src/assets/icons/cloudpulse_zoomout.svg'; + export interface ZoomIconProperties { className?: string; handleZoomToggle: (zoomIn: boolean) => void; diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx index a0e1cd76801..7e01899274e 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx @@ -5,7 +5,6 @@ import * as React from 'react'; import InfoIcon from 'src/assets/icons/info.svg'; import { Button } from 'src/components/Button/Button'; -import { Divider } from 'src/components/Divider'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import NullComponent from 'src/components/NullComponent'; @@ -205,8 +204,8 @@ export const CloudPulseDashboardFilterBuilder = React.memo( } return ( - - + + - - - diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx index c2f9095f8b6..de9c342a17b 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx @@ -62,7 +62,7 @@ export const CloudPulseRegionSelect = React.memo( disabled={!selectedDashboard || !regions} fullWidth label="Select a Region" - placeholder={placeholder ?? 'Select Region'} + placeholder={placeholder ?? 'Select a Region'} regions={regions ? regions : []} value={selectedRegion} /> diff --git a/packages/manager/src/mocks/serverHandlers.ts b/packages/manager/src/mocks/serverHandlers.ts index 062b1c9796b..6236c762635 100644 --- a/packages/manager/src/mocks/serverHandlers.ts +++ b/packages/manager/src/mocks/serverHandlers.ts @@ -2445,7 +2445,7 @@ export const handlers = [ { aggregate_function: 'avg', chart_type: 'area', - color: 'blue', + color: 'default', label: 'CPU utilization', metric: 'system_cpu_utilization_percent', size: 12, @@ -2455,7 +2455,7 @@ export const handlers = [ { aggregate_function: 'avg', chart_type: 'area', - color: 'red', + color: 'default', label: 'Memory Usage', metric: 'system_memory_usage_by_resource', size: 12, @@ -2465,7 +2465,7 @@ export const handlers = [ { aggregate_function: 'avg', chart_type: 'area', - color: 'green', + color: 'default', label: 'Network Traffic', metric: 'system_network_io_by_resource', size: 6, @@ -2475,7 +2475,7 @@ export const handlers = [ { aggregate_function: 'avg', chart_type: 'area', - color: 'yellow', + color: 'default', label: 'Disk I/O', metric: 'system_disk_OPS_total', size: 6, @@ -2491,7 +2491,9 @@ export const handlers = [ data: { result: [ { - metric: {}, + metric: { + test: 'Test1', + }, values: [ [1721854379, '0.2744841110560275'], [1721857979, '0.2980357104166823'], @@ -2508,6 +2510,26 @@ export const handlers = [ [1721897579, '0.26164641539434685'], ], }, + { + metric: { + test2: 'Test2', + }, + values: [ + [1721854379, '0.3744841110560275'], + [1721857979, '0.4980357104166823'], + [1721861579, '0.3290476561287732'], + [1721865179, '0.42148793964961897'], + [1721868779, '0.2269247326830727'], + [1721872379, '0.3393055885526987'], + [1721875979, '0.5237102833940027'], + [1721879579, '0.3153372503472701'], + [1721883179, '0.26811506053820466'], + [1721886779, '0.35839295774934357'], + [1721890379, '0.36863082415681144'], + [1721893979, '0.46126998689934394'], + [1721897579, '0.56164641539434685'], + ], + }, ], resultType: 'matrix', }, From b21c912b34bf7fa59cc6c5e3567f142f6fd1d2a3 Mon Sep 17 00:00:00 2001 From: vmangalr Date: Tue, 17 Sep 2024 11:47:14 +0530 Subject: [PATCH 02/31] upcoming: [DI-20585] - Some simple updates for using styled wrapper and margin updates --- .../src/assets/icons/cloudpulse_arrow_down.svg | 4 ++++ .../src/assets/icons/cloudpulse_arrow_right.svg | 4 ++++ .../CloudPulse/Widget/CloudPulseWidget.tsx | 6 +++--- .../shared/CloudPulseDashboardFilterBuilder.tsx | 16 ++++++++++++---- 4 files changed, 23 insertions(+), 7 deletions(-) create mode 100644 packages/manager/src/assets/icons/cloudpulse_arrow_down.svg create mode 100644 packages/manager/src/assets/icons/cloudpulse_arrow_right.svg diff --git a/packages/manager/src/assets/icons/cloudpulse_arrow_down.svg b/packages/manager/src/assets/icons/cloudpulse_arrow_down.svg new file mode 100644 index 00000000000..a3fd5b92a1a --- /dev/null +++ b/packages/manager/src/assets/icons/cloudpulse_arrow_down.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/manager/src/assets/icons/cloudpulse_arrow_right.svg b/packages/manager/src/assets/icons/cloudpulse_arrow_right.svg new file mode 100644 index 00000000000..9b741f4e10d --- /dev/null +++ b/packages/manager/src/assets/icons/cloudpulse_arrow_right.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx b/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx index a372fc7f944..8c7649abd39 100644 --- a/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx +++ b/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx @@ -7,7 +7,7 @@ import { useCloudPulseMetricsQuery } from 'src/queries/cloudpulse/metrics'; import { useProfile } from 'src/queries/profile/profile'; import { - StyledWidgetPaper, + StyledWidgetWrapper, generateGraphData, getCloudPulseMetricRequest, } from '../Utils/CloudPulseWidgetUtils'; @@ -290,7 +290,7 @@ export const CloudPulseWidget = (props: CloudPulseWidgetProperties) => { return ( - + { timezone={timezone} title={widget.label} /> - + ); diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx index 7e01899274e..c32f7158ff8 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx @@ -1,8 +1,8 @@ -import KeyboardArrowDownIcon from '@mui/icons-material/ArrowDropDown'; -import KeyboardArrowRightIcon from '@mui/icons-material/ArrowRight'; import { Grid, Typography } from '@mui/material'; import * as React from 'react'; +import KeyboardArrowDownIcon from 'src/assets/icons/cloudpulse_arrow_down.svg'; +import KeyboardArrowRightIcon from 'src/assets/icons/cloudpulse_arrow_right.svg'; import InfoIcon from 'src/assets/icons/info.svg'; import { Button } from 'src/components/Button/Button'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; @@ -205,7 +205,15 @@ export const CloudPulseDashboardFilterBuilder = React.memo( return ( - + From ed075c5cd2fa40535cc316e822c9e16ae4a4d210 Mon Sep 17 00:00:00 2001 From: vmangalr Date: Tue, 17 Sep 2024 13:52:53 +0530 Subject: [PATCH 03/31] upcoming: [DI-20800] - SVG updates according to CDS 2.0 --- .../assets/icons/cloudpulse_arrow_down.svg | 6 +-- .../assets/icons/cloudpulse_arrow_right.svg | 6 +-- .../src/assets/icons/cloudpulse_reload.svg | 7 +++- .../src/assets/icons/cloudpulse_zoomin.svg | 37 +++++-------------- .../src/assets/icons/cloudpulse_zoomout.svg | 14 ++++--- 5 files changed, 29 insertions(+), 41 deletions(-) diff --git a/packages/manager/src/assets/icons/cloudpulse_arrow_down.svg b/packages/manager/src/assets/icons/cloudpulse_arrow_down.svg index a3fd5b92a1a..3b811e948f8 100644 --- a/packages/manager/src/assets/icons/cloudpulse_arrow_down.svg +++ b/packages/manager/src/assets/icons/cloudpulse_arrow_down.svg @@ -1,4 +1,4 @@ - - - + + + \ No newline at end of file diff --git a/packages/manager/src/assets/icons/cloudpulse_arrow_right.svg b/packages/manager/src/assets/icons/cloudpulse_arrow_right.svg index 9b741f4e10d..f5bf57050b1 100644 --- a/packages/manager/src/assets/icons/cloudpulse_arrow_right.svg +++ b/packages/manager/src/assets/icons/cloudpulse_arrow_right.svg @@ -1,4 +1,4 @@ - - - + + + \ No newline at end of file diff --git a/packages/manager/src/assets/icons/cloudpulse_reload.svg b/packages/manager/src/assets/icons/cloudpulse_reload.svg index 3d76ffbee84..c1414256425 100644 --- a/packages/manager/src/assets/icons/cloudpulse_reload.svg +++ b/packages/manager/src/assets/icons/cloudpulse_reload.svg @@ -1,3 +1,6 @@ - - + + + + + \ No newline at end of file diff --git a/packages/manager/src/assets/icons/cloudpulse_zoomin.svg b/packages/manager/src/assets/icons/cloudpulse_zoomin.svg index b2a590966cd..239abd2bdfe 100644 --- a/packages/manager/src/assets/icons/cloudpulse_zoomin.svg +++ b/packages/manager/src/assets/icons/cloudpulse_zoomin.svg @@ -1,29 +1,10 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/packages/manager/src/assets/icons/cloudpulse_zoomout.svg b/packages/manager/src/assets/icons/cloudpulse_zoomout.svg index 7bbd58259e5..7021f3a5f61 100644 --- a/packages/manager/src/assets/icons/cloudpulse_zoomout.svg +++ b/packages/manager/src/assets/icons/cloudpulse_zoomout.svg @@ -1,6 +1,10 @@ - - - - - + + + + + + + + + \ No newline at end of file From c4abd516527c8eeea39c2234559bf8557bdef4e8 Mon Sep 17 00:00:00 2001 From: vmangalr Date: Tue, 17 Sep 2024 13:59:41 +0530 Subject: [PATCH 04/31] upcoming: [DI-20800] - Simple CSS minHeight updates --- .../CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx index c32f7158ff8..86e75dfa539 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx @@ -227,7 +227,7 @@ export const CloudPulseDashboardFilterBuilder = React.memo( ) } onClick={toggleShowFilter} - sx={{ justifyContent: 'start', mb: 0, p: 0 }} + sx={{ justifyContent: 'start', m: 0, minHeight: 'auto', p: 0 }} > Filters From 061860c8def749302162ed56c7e95ce852d4beb8 Mon Sep 17 00:00:00 2001 From: vmangalr Date: Tue, 17 Sep 2024 14:00:41 +0530 Subject: [PATCH 05/31] upcoming: [DI-20800] - Added changeset --- .../.changeset/pr-10951-upcoming-features-1726561825358.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/manager/.changeset/pr-10951-upcoming-features-1726561825358.md diff --git a/packages/manager/.changeset/pr-10951-upcoming-features-1726561825358.md b/packages/manager/.changeset/pr-10951-upcoming-features-1726561825358.md new file mode 100644 index 00000000000..7bb65ed0db1 --- /dev/null +++ b/packages/manager/.changeset/pr-10951-upcoming-features-1726561825358.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Upcoming Features +--- + +Enhance CSS for widget component and main bar component for cloudpulse ([#10951](https://github.com/linode/manager/pull/10951)) From 291ba175b16d0dde0cb1e27217a818bec33f7167 Mon Sep 17 00:00:00 2001 From: vmangalr Date: Tue, 17 Sep 2024 14:02:14 +0530 Subject: [PATCH 06/31] upcoming: [DI-20800] - CSS updates for button width --- .../shared/CloudPulseDashboardFilterBuilder.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx index 86e75dfa539..700d8dd0219 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx @@ -226,8 +226,14 @@ export const CloudPulseDashboardFilterBuilder = React.memo( /> ) } + sx={{ + justifyContent: 'start', + m: 0, + minHeight: 'auto', + minWidth: 'auto', + p: 0, + }} onClick={toggleShowFilter} - sx={{ justifyContent: 'start', m: 0, minHeight: 'auto', p: 0 }} > Filters From 2423b651ffe6b28c082280403e76fd696129b7f8 Mon Sep 17 00:00:00 2001 From: vmangalr Date: Tue, 17 Sep 2024 14:49:28 +0530 Subject: [PATCH 07/31] upcoming: [DI-20800] - Widget level height corrections --- .../src/features/CloudPulse/Utils/CloudPulseWidgetUtils.ts | 4 ++-- .../src/features/CloudPulse/Widget/CloudPulseWidget.tsx | 2 +- .../CloudPulse/Widget/components/CloudPulseLineGraph.tsx | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/manager/src/features/CloudPulse/Utils/CloudPulseWidgetUtils.ts b/packages/manager/src/features/CloudPulse/Utils/CloudPulseWidgetUtils.ts index 385b8dd1182..7f5604432f3 100644 --- a/packages/manager/src/features/CloudPulse/Utils/CloudPulseWidgetUtils.ts +++ b/packages/manager/src/features/CloudPulse/Utils/CloudPulseWidgetUtils.ts @@ -339,8 +339,8 @@ export const StyledWidgetWrapper = styled(Paper, { label: 'StyledWidgetWrapper', })(({ theme }) => ({ [theme.breakpoints.down('sm')]: { - maxHeight: '580px', - minHeight: '580px', + maxHeight: '610px', + minHeight: '610px', }, [theme.breakpoints.up('md')]: { maxHeight: '540px', diff --git a/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx b/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx index 8c7649abd39..df420654cf1 100644 --- a/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx +++ b/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx @@ -307,7 +307,7 @@ export const CloudPulseWidget = (props: CloudPulseWidgetProperties) => { alignItems={'center'} direction={{ sm: 'row' }} gap={1} - maxHeight={'80px'} + maxHeight={'85px'} overflow={'auto'} width={{ sm: 'inherit', xs: '100%' }} > diff --git a/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx b/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx index f1150aa65e1..56682448257 100644 --- a/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx +++ b/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx @@ -46,8 +46,8 @@ export const CloudPulseLineGraph = React.memo((props: CloudPulseLineGraph) => { '& .MuiTable-root': { border: 0, }, - height: '100px', - maxHeight: '100px', + height: '115px', + maxHeight: '115px', overflow: 'auto', }} ariaLabel={ariaLabel} From 489e9c1bb06f310f013321240cf82101043a10f6 Mon Sep 17 00:00:00 2001 From: vmangalr Date: Tue, 17 Sep 2024 15:03:38 +0530 Subject: [PATCH 08/31] upcoming: [DI-20800] - Mock update to have one more dimension --- packages/manager/src/mocks/serverHandlers.ts | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/packages/manager/src/mocks/serverHandlers.ts b/packages/manager/src/mocks/serverHandlers.ts index 6236c762635..de824907c71 100644 --- a/packages/manager/src/mocks/serverHandlers.ts +++ b/packages/manager/src/mocks/serverHandlers.ts @@ -2530,6 +2530,26 @@ export const handlers = [ [1721897579, '0.56164641539434685'], ], }, + { + metric: { + test3: 'Test3', + }, + values: [ + [1721854379, '0.3744841110560275'], + [1721857979, '0.4980357104166823'], + [1721861579, '0.3290476561287732'], + [1721865179, '0.4148793964961897'], + [1721868779, '0.4269247326830727'], + [1721872379, '0.3393055885526987'], + [1721875979, '0.6237102833940027'], + [1721879579, '0.3153372503472701'], + [1721883179, '0.26811506053820466'], + [1721886779, '0.45839295774934357'], + [1721890379, '0.36863082415681144'], + [1721893979, '0.56126998689934394'], + [1721897579, '0.66164641539434685'], + ], + }, ], resultType: 'matrix', }, From 0ad7f9d50453630c9b32c1abb2d952428bacda43 Mon Sep 17 00:00:00 2001 From: vmangalr Date: Tue, 17 Sep 2024 16:48:25 +0530 Subject: [PATCH 09/31] upcoming: [DI-20800] - Spacing improvement in grids --- .../src/features/CloudPulse/Dashboard/CloudPulseDashboard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboard.tsx b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboard.tsx index 6ecfbd7f71c..13140055ff5 100644 --- a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboard.tsx +++ b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboard.tsx @@ -203,7 +203,7 @@ export const CloudPulseDashboard = (props: DashboardProperties) => { // maintain a copy const newDashboard: Dashboard = createObjectCopy(dashboard)!; return ( - + {{ ...newDashboard }.widgets.map((widget, index) => { // check if widget metric definition is available or not if (widget) { From 9c070d5907b5818d9dd97ef125b71f397f27f44f Mon Sep 17 00:00:00 2001 From: vmangalr Date: Wed, 18 Sep 2024 10:22:23 +0530 Subject: [PATCH 10/31] upcoming: [DI-20800] - Use Theme spacing and colors --- .../CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx | 2 +- .../src/features/CloudPulse/Overview/GlobalFilters.tsx | 8 +++++--- .../features/CloudPulse/Utils/CloudPulseWidgetUtils.ts | 8 ++++---- .../CloudPulse/Widget/components/CloudPulseLineGraph.tsx | 8 +++++--- 4 files changed, 15 insertions(+), 11 deletions(-) diff --git a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx index 6f33642be14..3907346f617 100644 --- a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx +++ b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx @@ -131,7 +131,7 @@ export const CloudPulseDashboardLanding = () => { } return ( - + { [handleAnyFilterChange] ); + const theme = useTheme(); + return ( - + { diff --git a/packages/manager/src/features/CloudPulse/Utils/CloudPulseWidgetUtils.ts b/packages/manager/src/features/CloudPulse/Utils/CloudPulseWidgetUtils.ts index db2e0584c58..3ef0942d0db 100644 --- a/packages/manager/src/features/CloudPulse/Utils/CloudPulseWidgetUtils.ts +++ b/packages/manager/src/features/CloudPulse/Utils/CloudPulseWidgetUtils.ts @@ -343,12 +343,12 @@ export const StyledWidgetWrapper = styled(Paper, { label: 'StyledWidgetWrapper', })(({ theme }) => ({ [theme.breakpoints.down('sm')]: { - maxHeight: '610px', - minHeight: '610px', + height: theme.spacing(76), + maxHeight: theme.spacing(76), }, [theme.breakpoints.up('md')]: { - maxHeight: '540px', - minHeight: '540px', + height: theme.spacing(67.5), + maxHeight: theme.spacing(67.5), }, })); /** diff --git a/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx b/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx index 56682448257..30592d22cbb 100644 --- a/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx +++ b/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx @@ -1,4 +1,4 @@ -import { Box, Typography } from '@mui/material'; +import { Box, Typography, useTheme } from '@mui/material'; import * as React from 'react'; import { CircleProgress } from 'src/components/CircleProgress'; @@ -23,6 +23,8 @@ export interface CloudPulseLineGraph extends LineGraphProps { export const CloudPulseLineGraph = React.memo((props: CloudPulseLineGraph) => { const { ariaLabel, data, error, legendRows, loading, ...rest } = props; + const theme = useTheme(); + if (loading) { return ; } @@ -46,8 +48,8 @@ export const CloudPulseLineGraph = React.memo((props: CloudPulseLineGraph) => { '& .MuiTable-root': { border: 0, }, - height: '115px', - maxHeight: '115px', + height: theme.spacing(14.37), + maxHeight: theme.spacing(14.37), overflow: 'auto', }} ariaLabel={ariaLabel} From 561e9de0c4f48ceff5d02ce5cf2070626396d9ae Mon Sep 17 00:00:00 2001 From: vmangalr Date: Wed, 18 Sep 2024 10:26:54 +0530 Subject: [PATCH 11/31] upcoming: [DI-20800] - Use calc for custom themes --- .../CloudPulse/Widget/components/CloudPulseLineGraph.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx b/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx index 30592d22cbb..753692e99d8 100644 --- a/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx +++ b/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx @@ -48,8 +48,8 @@ export const CloudPulseLineGraph = React.memo((props: CloudPulseLineGraph) => { '& .MuiTable-root': { border: 0, }, - height: theme.spacing(14.37), - maxHeight: theme.spacing(14.37), + height: `calc(${theme.spacing(14)} + 3px)`, + maxHeight: `calc(${theme.spacing(14)} + 3px)`, overflow: 'auto', }} ariaLabel={ariaLabel} From 40b390d1556b61acf51f32bee4939dd791b11888 Mon Sep 17 00:00:00 2001 From: vmangalr Date: Wed, 18 Sep 2024 10:28:25 +0530 Subject: [PATCH 12/31] upcoming: [DI-20800] - Comments for height in px --- .../src/features/CloudPulse/Utils/CloudPulseWidgetUtils.ts | 6 +++--- .../CloudPulse/Widget/components/CloudPulseLineGraph.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/manager/src/features/CloudPulse/Utils/CloudPulseWidgetUtils.ts b/packages/manager/src/features/CloudPulse/Utils/CloudPulseWidgetUtils.ts index 3ef0942d0db..40e6b8abdea 100644 --- a/packages/manager/src/features/CloudPulse/Utils/CloudPulseWidgetUtils.ts +++ b/packages/manager/src/features/CloudPulse/Utils/CloudPulseWidgetUtils.ts @@ -343,12 +343,12 @@ export const StyledWidgetWrapper = styled(Paper, { label: 'StyledWidgetWrapper', })(({ theme }) => ({ [theme.breakpoints.down('sm')]: { - height: theme.spacing(76), + height: theme.spacing(76), // 608px maxHeight: theme.spacing(76), }, [theme.breakpoints.up('md')]: { - height: theme.spacing(67.5), - maxHeight: theme.spacing(67.5), + height: theme.spacing(67.5), // 540px + maxHeight: theme.spacing(67.5), // 540px }, })); /** diff --git a/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx b/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx index 753692e99d8..364e3c310bd 100644 --- a/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx +++ b/packages/manager/src/features/CloudPulse/Widget/components/CloudPulseLineGraph.tsx @@ -48,7 +48,7 @@ export const CloudPulseLineGraph = React.memo((props: CloudPulseLineGraph) => { '& .MuiTable-root': { border: 0, }, - height: `calc(${theme.spacing(14)} + 3px)`, + height: `calc(${theme.spacing(14)} + 3px)`, // 115px maxHeight: `calc(${theme.spacing(14)} + 3px)`, overflow: 'auto', }} From d5db90cda974ce74f394b790b5f459a004748e3e Mon Sep 17 00:00:00 2001 From: vmangalr Date: Wed, 18 Sep 2024 10:43:25 +0530 Subject: [PATCH 13/31] upcoming: [DI-20800] - revert unwanted file changes to latest develop --- packages/api-v4/package.json | 2 +- packages/manager/package.json | 6 ++-- yarn.lock | 68 +++++++++++++++++++++-------------- 3 files changed, 46 insertions(+), 30 deletions(-) diff --git a/packages/api-v4/package.json b/packages/api-v4/package.json index a4867b936e4..ea692180f5e 100644 --- a/packages/api-v4/package.json +++ b/packages/api-v4/package.json @@ -1,6 +1,6 @@ { "name": "@linode/api-v4", - "version": "0.125.0", + "version": "0.126.0", "homepage": "https://github.com/linode/manager/tree/develop/packages/api-v4", "bugs": { "url": "https://github.com/linode/manager/issues" diff --git a/packages/manager/package.json b/packages/manager/package.json index 407c3c24825..bc96cdcedcb 100644 --- a/packages/manager/package.json +++ b/packages/manager/package.json @@ -2,7 +2,7 @@ "name": "linode-manager", "author": "Linode", "description": "The Linode Manager website", - "version": "1.127.0", + "version": "1.128.0", "private": true, "type": "module", "bugs": { @@ -35,7 +35,7 @@ "chart.js": "~2.9.4", "copy-to-clipboard": "^3.0.8", "country-region-data": "^3.0.0", - "dompurify": "^3.1.0", + "dompurify": "^3.1.3", "flag-icons": "^6.6.5", "font-logos": "^0.18.0", "formik": "~2.1.3", @@ -113,7 +113,7 @@ ] }, "devDependencies": { - "@linode/eslint-plugin-cloud-manager": "^0.0.3", + "@linode/eslint-plugin-cloud-manager": "^0.0.5", "@storybook/addon-actions": "^8.3.0", "@storybook/addon-controls": "^8.3.0", "@storybook/addon-docs": "^8.3.0", diff --git a/yarn.lock b/yarn.lock index 6cdf3057e09..d77a20ca264 100644 --- a/yarn.lock +++ b/yarn.lock @@ -191,12 +191,12 @@ "@jridgewell/trace-mapping" "^0.3.17" jsesc "^2.5.1" -"@babel/generator@^7.25.0": - version "7.25.0" - resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.25.0.tgz#f858ddfa984350bc3d3b7f125073c9af6988f18e" - integrity sha512-3LEEcj3PVW8pW2R1SR1M89g/qrYk/m/mB/tLqn7dn4sbBUQyTqnlod+II2U4dqiGtUmkcnAmkMDralTFZttRiw== +"@babel/generator@^7.25.6": + version "7.25.6" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.25.6.tgz#0df1ad8cb32fe4d2b01d8bf437f153d19342a87c" + integrity sha512-VPC82gr1seXOpkjAAKoLhP50vx4vGNlF4msF64dSFq1P8RfB+QAuJWGHPXXPc8QyfVWwwB/TNNU4+ayZmHNbZw== dependencies: - "@babel/types" "^7.25.0" + "@babel/types" "^7.25.6" "@jridgewell/gen-mapping" "^0.3.5" "@jridgewell/trace-mapping" "^0.3.25" jsesc "^2.5.1" @@ -307,7 +307,7 @@ resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.9.tgz#7b903b6149b0f8fa7ad564af646c4c38a77fc44b" integrity sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA== -"@babel/parser@^7.25.0", "@babel/parser@^7.25.3": +"@babel/parser@^7.25.0": version "7.25.3" resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.25.3.tgz#91fb126768d944966263f0657ab222a642b82065" integrity sha512-iLTJKDbJ4hMvFPgQwwsVoxtHyWpKKPBrxkANrSYewDPaPpT5py5yeVkgPIJ7XYXhndxJpaA3PyALSXQ7u8e/Dw== @@ -321,6 +321,13 @@ dependencies: "@babel/types" "^7.25.4" +"@babel/parser@^7.25.6": + version "7.25.6" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.25.6.tgz#85660c5ef388cbbf6e3d2a694ee97a38f18afe2f" + integrity sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q== + dependencies: + "@babel/types" "^7.25.6" + "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.0", "@babel/runtime@^7.14.6", "@babel/runtime@^7.15.4", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.23.2", "@babel/runtime@^7.23.9", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": version "7.23.9" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.9.tgz#47791a15e4603bb5f905bc0753801cf21d6345f7" @@ -347,15 +354,15 @@ "@babel/types" "^7.25.0" "@babel/traverse@^7.18.9", "@babel/traverse@^7.23.3", "@babel/traverse@^7.23.9", "@babel/traverse@^7.7.0": - version "7.25.3" - resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.25.3.tgz#f1b901951c83eda2f3e29450ce92743783373490" - integrity sha512-HefgyP1x754oGCsKmV5reSmtV7IXj/kpaE1XYY+D9G5PvKKoFfSbiS4M77MdjuwlZKDIKFCffq9rPU+H/s3ZdQ== + version "7.25.6" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.25.6.tgz#04fad980e444f182ecf1520504941940a90fea41" + integrity sha512-9Vrcx5ZW6UwK5tvqsj0nGpp/XzqthkT0dqIc9g1AdtygFToNtTF67XzYS//dm+SAK9cp3B9R4ZO/46p63SCjlQ== dependencies: "@babel/code-frame" "^7.24.7" - "@babel/generator" "^7.25.0" - "@babel/parser" "^7.25.3" + "@babel/generator" "^7.25.6" + "@babel/parser" "^7.25.6" "@babel/template" "^7.25.0" - "@babel/types" "^7.25.2" + "@babel/types" "^7.25.6" debug "^4.3.1" globals "^11.1.0" @@ -386,6 +393,15 @@ "@babel/helper-validator-identifier" "^7.24.7" to-fast-properties "^2.0.0" +"@babel/types@^7.25.6": + version "7.25.6" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.25.6.tgz#893942ddb858f32ae7a004ec9d3a76b3463ef8e6" + integrity sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw== + dependencies: + "@babel/helper-string-parser" "^7.24.8" + "@babel/helper-validator-identifier" "^7.24.7" + to-fast-properties "^2.0.0" + "@base2/pretty-print-object@1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@base2/pretty-print-object/-/pretty-print-object-1.0.1.tgz#371ba8be66d556812dc7fb169ebc3c08378f69d4" @@ -1351,10 +1367,10 @@ react-dom "^17.0.2" style-dictionary "4.0.1" -"@linode/eslint-plugin-cloud-manager@^0.0.3": - version "0.0.3" - resolved "https://registry.yarnpkg.com/@linode/eslint-plugin-cloud-manager/-/eslint-plugin-cloud-manager-0.0.3.tgz#dcb78ab36065bf0fb71106a586c1f3f88dbf840a" - integrity sha512-tW0CVkou/UzsAfvVbyxsvdwgXspcKMuJZPnGJJnlAGzFa7CVSURJiefYRbWjn2EFeoehgGvW4mGt30JNhhY+3g== +"@linode/eslint-plugin-cloud-manager@^0.0.5": + version "0.0.5" + resolved "https://registry.yarnpkg.com/@linode/eslint-plugin-cloud-manager/-/eslint-plugin-cloud-manager-0.0.5.tgz#d35a80870e301ff43c4a2ade7d53d866c6a87bb8" + integrity sha512-zOT3iFnFTG5h4ylczvA3fUk8xiJPKzmzNTVsszjfyTDqFr6FiCDhGzUgj7znToW6J3Mr3CATobid2GCR2Ls19Q== "@lukemorales/query-key-factory@^1.3.4": version "1.3.4" @@ -5160,10 +5176,10 @@ dompurify@^2.2.0: resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.4.7.tgz#277adeb40a2c84be2d42a8bcd45f582bfa4d0cfc" integrity sha512-kxxKlPEDa6Nc5WJi+qRgPbOAbgTpSULL+vI3NUXsZMlkJxTqYI9wg5ZTay2sFrdZRWHPWNi+EdAhcJf81WtoMQ== -dompurify@^3.1.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.1.0.tgz#8c6b9fe986969a33aa4686bd829cbe8e14dd9445" - integrity sha512-yoU4rhgPKCo+p5UrWWWNKiIq+ToGqmVVhk0PmMYBK4kRsR3/qhemNFL8f6CFmBd4gMwm3F4T7HBoydP5uY07fA== +dompurify@^3.1.3: + version "3.1.3" + resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.1.3.tgz#cfe3ce4232c216d923832f68f2aa18b2fb9bd223" + integrity sha512-5sOWYSNPaxz6o2MUPvtyxTTqR4D3L77pr5rUQoWgD5ROQtVIZQgJkXbo1DLlK3vj11YGw5+LnF4SYti4gZmwng== dot-case@^3.0.4: version "3.0.4" @@ -11498,9 +11514,9 @@ typescript@^5.5.4: integrity sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q== ua-parser-js@^0.7.30, ua-parser-js@^0.7.33: - version "0.7.38" - resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.38.tgz#f497d8a4dc1fec6e854e5caa4b2f9913422ef054" - integrity sha512-fYmIy7fKTSFAhG3fuPlubeGaMoAd6r0rSnfEsO5nEY55i26KSLt9EH7PLQiiqPUhNqYIJvSkTy1oArIcXAbPbA== + version "0.7.39" + resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.39.tgz#c71efb46ebeabc461c4612d22d54f88880fabe7e" + integrity sha512-IZ6acm6RhQHNibSt7+c09hhvsKy9WUr4DVbeq9U8o71qxyYtJpQeDxQnMrVqnIFMLcQjHO0I9wgfO2vIahht4w== uc.micro@^1.0.1, uc.micro@^1.0.5: version "1.0.6" @@ -12111,9 +12127,9 @@ yallist@^3.0.2: integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g== yaml@^1.10.0, yaml@^1.7.2, yaml@^2.2.2, yaml@^2.3.0, yaml@~2.5.0: - version "2.5.0" - resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.5.0.tgz#c6165a721cf8000e91c36490a41d7be25176cf5d" - integrity sha512-2wWLbGbYDiSqqIKoPjar3MPgB94ErzCtrNE1FdqGuaO0pi2JGjmE8aW8TDZwzU7vuxcGRdL/4gPQwQ7hD5AMSw== + version "2.5.1" + resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.5.1.tgz#c9772aacf62cb7494a95b0c4f1fb065b563db130" + integrity sha512-bLQOjaX/ADgQ20isPJRvF0iRUHIxVhYvr53Of7wGcWlO2jvtUlH5m87DsmulFVxRpNLOnI4tB6p/oh8D7kpn9Q== yargs-parser@^11.1.1, yargs-parser@^21.1.1: version "21.1.1" From c8615b2e467437c9d3cd3d22ce0a764fdb081223 Mon Sep 17 00:00:00 2001 From: vmangalr Date: Wed, 18 Sep 2024 10:50:47 +0530 Subject: [PATCH 14/31] upcoming: [DI-20800] - Use theme spacing wherever applicable --- .../Dashboard/CloudPulseDashboardLanding.tsx | 6 ++++-- .../features/CloudPulse/Overview/GlobalFilters.tsx | 12 +++++++++--- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx index 3907346f617..9c4ee4abd05 100644 --- a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx +++ b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx @@ -1,4 +1,4 @@ -import { Grid, Paper } from '@mui/material'; +import { Grid, Paper, useTheme } from '@mui/material'; import * as React from 'react'; import CloudPulseIcon from 'src/assets/icons/entityIcons/monitor.svg'; @@ -52,6 +52,8 @@ export const CloudPulseDashboardLanding = () => { const { isLoading } = useLoadUserPreferences(); + const theme = useTheme(); + /** * Takes an error message as input and renders a placeholder with the error message * @param errorMessage {string} - Error message which will be displayed @@ -131,7 +133,7 @@ export const CloudPulseDashboardLanding = () => { } return ( - + { return ( - + Date: Wed, 18 Sep 2024 10:53:21 +0530 Subject: [PATCH 15/31] Revert "upcoming: [DI-20800] - Use theme spacing wherever applicable" This reverts commit c8615b2e467437c9d3cd3d22ce0a764fdb081223. --- .../Dashboard/CloudPulseDashboardLanding.tsx | 6 ++---- .../features/CloudPulse/Overview/GlobalFilters.tsx | 12 +++--------- 2 files changed, 5 insertions(+), 13 deletions(-) diff --git a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx index 9c4ee4abd05..3907346f617 100644 --- a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx +++ b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx @@ -1,4 +1,4 @@ -import { Grid, Paper, useTheme } from '@mui/material'; +import { Grid, Paper } from '@mui/material'; import * as React from 'react'; import CloudPulseIcon from 'src/assets/icons/entityIcons/monitor.svg'; @@ -52,8 +52,6 @@ export const CloudPulseDashboardLanding = () => { const { isLoading } = useLoadUserPreferences(); - const theme = useTheme(); - /** * Takes an error message as input and renders a placeholder with the error message * @param errorMessage {string} - Error message which will be displayed @@ -133,7 +131,7 @@ export const CloudPulseDashboardLanding = () => { } return ( - + { return ( - + Date: Wed, 18 Sep 2024 15:01:46 +0530 Subject: [PATCH 16/31] upcoming: [DI-20800] - Placeholder value updates --- .../features/CloudPulse/shared/CloudPulseDashboardSelect.tsx | 2 +- .../features/CloudPulse/shared/CloudPulseResourcesSelect.tsx | 2 +- .../features/CloudPulse/shared/CloudPulseTimeRangeSelect.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardSelect.tsx index 93504ac2882..a27e9051d87 100644 --- 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 Dashboard'; + const placeHolder = 'Select a Dashboard'; // sorts dashboards by service type. Required due to unexpected autocomplete grouping behaviour const getSortedDashboardsList = (options: Dashboard[]): Dashboard[] => { diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx index c7ec0850ac6..adaf971e1ba 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseResourcesSelect.tsx @@ -91,7 +91,7 @@ export const CloudPulseResourcesSelect = React.memo( handleResourcesSelection(resourceSelections); }} placeholder={ - selectedResources?.length ? '' : placeholder || 'Select Resources' + selectedResources?.length ? '' : placeholder || 'Select a Resource' } textFieldProps={{ InputProps: { diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseTimeRangeSelect.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseTimeRangeSelect.tsx index e6aeb855f23..b270743305f 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseTimeRangeSelect.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseTimeRangeSelect.tsx @@ -85,7 +85,7 @@ export const CloudPulseTimeRangeSelect = React.memo( isOptionEqualToValue={(option, value) => option.value === value.value} label="Select Time Duration" options={options} - placeholder={placeholder ?? 'Select Time Duration'} + placeholder={placeholder ?? 'Select a Time Duration'} value={selectedTimeRange} /> ); From ca1db73d885ff7fdc20f3fd332f5b3cf527833fe Mon Sep 17 00:00:00 2001 From: vmangalr Date: Wed, 18 Sep 2024 15:04:05 +0530 Subject: [PATCH 17/31] upcoming: [DI-20800] - Style updates for widget --- .../src/features/CloudPulse/Widget/CloudPulseWidget.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx b/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx index c2b03c54c82..5f53f87e079 100644 --- a/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx +++ b/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx @@ -1,4 +1,4 @@ -import { Box, Grid, Stack, Typography } from '@mui/material'; +import { Box, Grid, Stack, Typography, useTheme } from '@mui/material'; import { DateTime } from 'luxon'; import React from 'react'; @@ -126,6 +126,8 @@ export const CloudPulseWidget = (props: CloudPulseWidgetProperties) => { const [widget, setWidget] = React.useState({ ...props.widget }); + const theme = useTheme(); + const { additionalFilters, ariaLabel, @@ -306,8 +308,8 @@ export const CloudPulseWidget = (props: CloudPulseWidgetProperties) => { From 39b433cd3cde399fd5bb732102a1bb508a4017ca Mon Sep 17 00:00:00 2001 From: vmangalr Date: Wed, 18 Sep 2024 19:03:28 +0530 Subject: [PATCH 18/31] upcoming: [DI-20800] - SVG fill color update --- .../manager/src/assets/icons/cloudpulse_reload.svg | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/manager/src/assets/icons/cloudpulse_reload.svg b/packages/manager/src/assets/icons/cloudpulse_reload.svg index c1414256425..677cb9966bb 100644 --- a/packages/manager/src/assets/icons/cloudpulse_reload.svg +++ b/packages/manager/src/assets/icons/cloudpulse_reload.svg @@ -1,6 +1,6 @@ - - - - - + + + + + \ No newline at end of file From 2ae688ca75db6d5f7973a3b3b1419f212d730497 Mon Sep 17 00:00:00 2001 From: vmangalr Date: Thu, 19 Sep 2024 15:49:59 +0530 Subject: [PATCH 19/31] upcoming: [DI-20800] - useTheme values --- .../CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx index 700d8dd0219..7313a229afe 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx @@ -204,7 +204,7 @@ export const CloudPulseDashboardFilterBuilder = React.memo( } return ( - + Date: Thu, 19 Sep 2024 16:52:05 +0530 Subject: [PATCH 20/31] upcoming: [DI-20800] - Reusable component padding updates --- .../CloudPulseDashboardWithFilters.tsx | 27 ++++++++++--------- .../CloudPulseDashboardFilterBuilder.tsx | 8 +++++- 2 files changed, 22 insertions(+), 13 deletions(-) diff --git a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx index 2354bda5533..063d6cc3194 100644 --- a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx +++ b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx @@ -1,4 +1,4 @@ -import { Divider, Grid, styled } from '@mui/material'; +import { Grid, styled } from '@mui/material'; import React from 'react'; import CloudPulseIcon from 'src/assets/icons/entityIcons/monitor.svg'; @@ -100,7 +100,7 @@ export const CloudPulseDashboardWithFilters = React.memo( return ( <> - + - {isFilterBuilderNeeded && ( - <> - - - + )} - + {isMandatoryFiltersSelected ? ( + Date: Thu, 19 Sep 2024 17:56:54 +0530 Subject: [PATCH 21/31] upcoming: [DI-20800] - Simple refactoring --- .../Dashboard/CloudPulseDashboardWithFilters.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx index 063d6cc3194..053734cdac0 100644 --- a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx +++ b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx @@ -158,9 +158,4 @@ const StyledPlaceholder = styled(Placeholder, { flex: 'auto', }); -const StyledPaper = styled( - Paper, - {} -)({ - padding: 0, -}); +const StyledPaper = styled(Paper, {})({ padding: 0 }); From 9255e2e0d9d583f387acc74681611c7c757dd609 Mon Sep 17 00:00:00 2001 From: vmangalr Date: Thu, 19 Sep 2024 18:26:44 +0530 Subject: [PATCH 22/31] upcoming: [DI-20800] - Rename files --- .../icons/{cloudpulse_arrow_down.svg => arrow_down.svg} | 0 .../icons/{cloudpulse_arrow_right.svg => arrow_right.svg} | 0 .../src/assets/icons/{cloudpulse_reload.svg => refresh.svg} | 0 .../src/assets/icons/{cloudpulse_zoomin.svg => zoomin.svg} | 0 .../src/assets/icons/{cloudpulse_zoomout.svg => zoomout.svg} | 0 .../src/features/CloudPulse/Overview/GlobalFilters.tsx | 2 +- .../src/features/CloudPulse/Widget/components/Zoomer.tsx | 4 ++-- .../CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx | 4 ++-- 8 files changed, 5 insertions(+), 5 deletions(-) rename packages/manager/src/assets/icons/{cloudpulse_arrow_down.svg => arrow_down.svg} (100%) rename packages/manager/src/assets/icons/{cloudpulse_arrow_right.svg => arrow_right.svg} (100%) rename packages/manager/src/assets/icons/{cloudpulse_reload.svg => refresh.svg} (100%) rename packages/manager/src/assets/icons/{cloudpulse_zoomin.svg => zoomin.svg} (100%) rename packages/manager/src/assets/icons/{cloudpulse_zoomout.svg => zoomout.svg} (100%) diff --git a/packages/manager/src/assets/icons/cloudpulse_arrow_down.svg b/packages/manager/src/assets/icons/arrow_down.svg similarity index 100% rename from packages/manager/src/assets/icons/cloudpulse_arrow_down.svg rename to packages/manager/src/assets/icons/arrow_down.svg diff --git a/packages/manager/src/assets/icons/cloudpulse_arrow_right.svg b/packages/manager/src/assets/icons/arrow_right.svg similarity index 100% rename from packages/manager/src/assets/icons/cloudpulse_arrow_right.svg rename to packages/manager/src/assets/icons/arrow_right.svg diff --git a/packages/manager/src/assets/icons/cloudpulse_reload.svg b/packages/manager/src/assets/icons/refresh.svg similarity index 100% rename from packages/manager/src/assets/icons/cloudpulse_reload.svg rename to packages/manager/src/assets/icons/refresh.svg diff --git a/packages/manager/src/assets/icons/cloudpulse_zoomin.svg b/packages/manager/src/assets/icons/zoomin.svg similarity index 100% rename from packages/manager/src/assets/icons/cloudpulse_zoomin.svg rename to packages/manager/src/assets/icons/zoomin.svg diff --git a/packages/manager/src/assets/icons/cloudpulse_zoomout.svg b/packages/manager/src/assets/icons/zoomout.svg similarity index 100% rename from packages/manager/src/assets/icons/cloudpulse_zoomout.svg rename to packages/manager/src/assets/icons/zoomout.svg diff --git a/packages/manager/src/features/CloudPulse/Overview/GlobalFilters.tsx b/packages/manager/src/features/CloudPulse/Overview/GlobalFilters.tsx index 3c4575dce41..b6b290176d7 100644 --- a/packages/manager/src/features/CloudPulse/Overview/GlobalFilters.tsx +++ b/packages/manager/src/features/CloudPulse/Overview/GlobalFilters.tsx @@ -3,7 +3,7 @@ import { Grid } from '@mui/material'; import { styled } from '@mui/material/styles'; import * as React from 'react'; -import Reload from 'src/assets/icons/cloudpulse_reload.svg'; +import Reload from 'src/assets/icons/refresh.svg'; import { Divider } from 'src/components/Divider'; import { CloudPulseDashboardFilterBuilder } from '../shared/CloudPulseDashboardFilterBuilder'; diff --git a/packages/manager/src/features/CloudPulse/Widget/components/Zoomer.tsx b/packages/manager/src/features/CloudPulse/Widget/components/Zoomer.tsx index c46d9577072..f21148cc831 100644 --- a/packages/manager/src/features/CloudPulse/Widget/components/Zoomer.tsx +++ b/packages/manager/src/features/CloudPulse/Widget/components/Zoomer.tsx @@ -1,8 +1,8 @@ import { useTheme } from '@mui/material'; import * as React from 'react'; -import ZoomInMap from 'src/assets/icons/cloudpulse_zoomin.svg'; -import ZoomOutMap from 'src/assets/icons/cloudpulse_zoomout.svg'; +import ZoomInMap from 'src/assets/icons/zoomin.svg'; +import ZoomOutMap from 'src/assets/icons/zoomout.svg'; export interface ZoomIconProperties { className?: string; diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx index 1085b71cc90..57bde56f10e 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx @@ -1,8 +1,8 @@ import { Grid, Typography } from '@mui/material'; import * as React from 'react'; -import KeyboardArrowDownIcon from 'src/assets/icons/cloudpulse_arrow_down.svg'; -import KeyboardArrowRightIcon from 'src/assets/icons/cloudpulse_arrow_right.svg'; +import KeyboardArrowDownIcon from 'src/assets/icons/arrow_down.svg'; +import KeyboardArrowRightIcon from 'src/assets/icons/arrow_right.svg'; import InfoIcon from 'src/assets/icons/info.svg'; import { Button } from 'src/components/Button/Button'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; From e7118f1400c3d072ef4014c916fd413bfad9f7fa Mon Sep 17 00:00:00 2001 From: vmangalr Date: Thu, 19 Sep 2024 21:12:55 +0530 Subject: [PATCH 23/31] upcoming: [DI-20800] - PR comments addressed --- .../manager/src/assets/icons/arrow_down.svg | 6 +++--- .../manager/src/assets/icons/arrow_right.svg | 6 +++--- packages/manager/src/assets/icons/zoomin.svg | 18 +++++++++--------- .../CloudPulseDashboardWithFilters.tsx | 8 ++++---- .../Widget/components/CloudPulseLineGraph.tsx | 2 ++ .../CloudPulseDashboardFilterBuilder.tsx | 7 ++++++- 6 files changed, 27 insertions(+), 20 deletions(-) diff --git a/packages/manager/src/assets/icons/arrow_down.svg b/packages/manager/src/assets/icons/arrow_down.svg index 3b811e948f8..9f1e07f546c 100644 --- a/packages/manager/src/assets/icons/arrow_down.svg +++ b/packages/manager/src/assets/icons/arrow_down.svg @@ -1,4 +1,4 @@ - - - + + + \ No newline at end of file diff --git a/packages/manager/src/assets/icons/arrow_right.svg b/packages/manager/src/assets/icons/arrow_right.svg index f5bf57050b1..1791c6569e8 100644 --- a/packages/manager/src/assets/icons/arrow_right.svg +++ b/packages/manager/src/assets/icons/arrow_right.svg @@ -1,4 +1,4 @@ - - - + + + \ No newline at end of file diff --git a/packages/manager/src/assets/icons/zoomin.svg b/packages/manager/src/assets/icons/zoomin.svg index 239abd2bdfe..fcb722675ef 100644 --- a/packages/manager/src/assets/icons/zoomin.svg +++ b/packages/manager/src/assets/icons/zoomin.svg @@ -1,10 +1,10 @@ - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx index 053734cdac0..889f3f8797b 100644 --- a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx +++ b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx @@ -100,7 +100,9 @@ export const CloudPulseDashboardWithFilters = React.memo( return ( <> - + )} - + {isMandatoryFiltersSelected ? ( { '& .MuiTable-root': { border: 0, }, + backgroundColor: theme.bg.offWhite, height: `calc(${theme.spacing(14)} + 3px)`, // 115px maxHeight: `calc(${theme.spacing(14)} + 3px)`, overflow: 'auto', + padding: theme.spacing(1), }} ariaLabel={ariaLabel} data={data} diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx index 57bde56f10e..0073d350890 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx @@ -1,4 +1,4 @@ -import { Grid, Typography } from '@mui/material'; +import { Grid, Typography, useTheme } from '@mui/material'; import * as React from 'react'; import KeyboardArrowDownIcon from 'src/assets/icons/arrow_down.svg'; @@ -58,6 +58,8 @@ export const CloudPulseDashboardFilterBuilder = React.memo( const [showFilter, setShowFilter] = React.useState(true); + const theme = useTheme(); + const dependentFilterReference: React.MutableRefObject<{ [key: string]: FilterValueType; }> = React.useRef({}); @@ -238,6 +240,9 @@ export const CloudPulseDashboardFilterBuilder = React.memo( minHeight: 'auto', minWidth: 'auto', p: 0, + svg: { + color: theme.color.grey4, + }, }} onClick={toggleShowFilter} > From 7265a3a39cc0d6b7d4f0f8ab891c8248a6eb418e Mon Sep 17 00:00:00 2001 From: vmangalr Date: Thu, 19 Sep 2024 23:16:21 +0530 Subject: [PATCH 24/31] upcoming: [DI-20800] - Removed styled widget wrapper --- .../CloudPulseDashboardWithFilters.tsx | 8 +++++--- .../CloudPulse/Utils/CloudPulseWidgetUtils.ts | 17 ----------------- .../CloudPulse/Widget/CloudPulseWidget.tsx | 11 +++++------ 3 files changed, 10 insertions(+), 26 deletions(-) diff --git a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx index 889f3f8797b..e8f65dd6842 100644 --- a/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx +++ b/packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardWithFilters.tsx @@ -100,9 +100,11 @@ export const CloudPulseDashboardWithFilters = React.memo( return ( <> - + { thisSeries.data.every((thisPoint) => thisPoint[1] === null) ); }; - -/** - * Returns a paper that wraps the contents of the widget around it - */ -export const StyledWidgetWrapper = styled(Paper, { - label: 'StyledWidgetWrapper', -})(({ theme }) => ({ - [theme.breakpoints.down('sm')]: { - height: theme.spacing(76), // 608px - maxHeight: theme.spacing(76), - }, - [theme.breakpoints.up('md')]: { - height: theme.spacing(67.5), // 540px - maxHeight: theme.spacing(67.5), // 540px - }, -})); /** * Returns an autocomplete with updated styles according to UX, this will be used at widget level */ diff --git a/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx b/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx index 5f53f87e079..664bcf64cb1 100644 --- a/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx +++ b/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx @@ -2,12 +2,12 @@ import { Box, Grid, Stack, Typography, useTheme } from '@mui/material'; import { DateTime } from 'luxon'; import React from 'react'; +import { Paper } from 'src/components/Paper'; import { useFlags } from 'src/hooks/useFlags'; import { useCloudPulseMetricsQuery } from 'src/queries/cloudpulse/metrics'; import { useProfile } from 'src/queries/profile/profile'; import { - StyledWidgetWrapper, generateGraphData, getCloudPulseMetricRequest, } from '../Utils/CloudPulseWidgetUtils'; @@ -290,9 +290,9 @@ export const CloudPulseWidget = (props: CloudPulseWidgetProperties) => { const metricsApiCallError = error?.[0]?.reason; return ( - - - + + + { - { timezone={timezone} title={widget.label} /> - + ); From 445a6dd920d5fe943345a4879a23bbea6bdef538 Mon Sep 17 00:00:00 2001 From: Jaalah Ramos <125309814+jaalah-akamai@users.noreply.github.com> Date: Thu, 19 Sep 2024 17:30:16 -0400 Subject: [PATCH 25/31] Update packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx Co-authored-by: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com> --- .../manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx b/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx index 664bcf64cb1..2eb36a257b8 100644 --- a/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx +++ b/packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx @@ -310,7 +310,7 @@ export const CloudPulseWidget = (props: CloudPulseWidgetProperties) => { direction={{ sm: 'row' }} gap={2} maxHeight={`calc(${theme.spacing(10)} + 5px)`} - overflow={'auto'} + overflow="auto" width={{ sm: 'inherit', xs: '100%' }} > {availableMetrics?.scrape_interval && ( From 1561c53af4ce2105a7adad103360cf58b42f2d44 Mon Sep 17 00:00:00 2001 From: Jaalah Ramos <125309814+jaalah-akamai@users.noreply.github.com> Date: Thu, 19 Sep 2024 17:30:33 -0400 Subject: [PATCH 26/31] Update packages/manager/.changeset/pr-10951-upcoming-features-1726561825358.md Co-authored-by: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com> --- .../.changeset/pr-10951-upcoming-features-1726561825358.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/manager/.changeset/pr-10951-upcoming-features-1726561825358.md b/packages/manager/.changeset/pr-10951-upcoming-features-1726561825358.md index 7bb65ed0db1..aa7056eab9e 100644 --- a/packages/manager/.changeset/pr-10951-upcoming-features-1726561825358.md +++ b/packages/manager/.changeset/pr-10951-upcoming-features-1726561825358.md @@ -2,4 +2,4 @@ "@linode/manager": Upcoming Features --- -Enhance CSS for widget component and main bar component for cloudpulse ([#10951](https://github.com/linode/manager/pull/10951)) +Enhance CSS for Cloudpulse widget and main bar components ([#10951](https://github.com/linode/manager/pull/10951)) From 2a525aaf77071854ca054831894cbc3b9ad6ec30 Mon Sep 17 00:00:00 2001 From: Jaalah Ramos <125309814+jaalah-akamai@users.noreply.github.com> Date: Thu, 19 Sep 2024 17:30:49 -0400 Subject: [PATCH 27/31] Update packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx Co-authored-by: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com> --- .../CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx index 0073d350890..f552390810e 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx @@ -246,7 +246,7 @@ export const CloudPulseDashboardFilterBuilder = React.memo( }} onClick={toggleShowFilter} > - Filters + Filters Date: Thu, 19 Sep 2024 17:31:08 -0400 Subject: [PATCH 28/31] Update packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx Co-authored-by: Dajahi Wiley <114682940+dwiley-akamai@users.noreply.github.com> --- .../CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx index f552390810e..d908924c1a8 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.tsx @@ -219,7 +219,7 @@ export const CloudPulseDashboardFilterBuilder = React.memo( p: 0, }} item - key={'toggleFilter'} + key="toggleFilter" xs={12} > ); - expect(getByPlaceholderText('Select Region')).toBeDefined(); + expect(getByPlaceholderText('Select a Region')).toBeDefined(); }), it('it should render provided resource filter in props', () => { const resourceProps = linodeFilterConfig?.filters.find( @@ -81,6 +81,6 @@ describe('ComponentRenderer component tests', () => { })} ); - expect(getByPlaceholderText('Select Resources')).toBeDefined(); + expect(getByPlaceholderText('Select a Resource')).toBeDefined(); }); }); diff --git a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.test.tsx b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.test.tsx index aae73a9acd6..006dc05afb6 100644 --- a/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.test.tsx +++ b/packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardFilterBuilder.test.tsx @@ -32,7 +32,7 @@ describe('CloudPulseDashboardFilterBuilder component tests', () => { /> ); - expect(getByPlaceholderText('Select DB Cluster Names')).toBeDefined(); - expect(getByPlaceholderText('Select Region')).toBeDefined(); + expect(getByPlaceholderText('Select an Engine')).toBeDefined(); + expect(getByPlaceholderText('Select a Region')).toBeDefined(); }); }); From 2ab97bd252eeb9177762acc049d05214991a9162 Mon Sep 17 00:00:00 2001 From: vmangalr Date: Fri, 20 Sep 2024 12:01:44 +0530 Subject: [PATCH 31/31] upcoming: [DI-20800] - Reverting not needed changes --- .../src/features/CloudPulse/Utils/CloudPulseWidgetUtils.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/manager/src/features/CloudPulse/Utils/CloudPulseWidgetUtils.ts b/packages/manager/src/features/CloudPulse/Utils/CloudPulseWidgetUtils.ts index 530b9e70e24..29eabd3a7a9 100644 --- a/packages/manager/src/features/CloudPulse/Utils/CloudPulseWidgetUtils.ts +++ b/packages/manager/src/features/CloudPulse/Utils/CloudPulseWidgetUtils.ts @@ -334,6 +334,7 @@ export const isDataEmpty = (data: DataSet[]): boolean => { thisSeries.data.every((thisPoint) => thisPoint[1] === null) ); }; + /** * Returns an autocomplete with updated styles according to UX, this will be used at widget level */