upcoming: [DI-20800] - CSS for widget size control and feedbacks

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))

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 (
-      <Grid columnSpacing={1} container item rowSpacing={2} xs={12}>
+      <Grid columnSpacing={1} container item rowSpacing={1} xs={12}>
         {{ ...newDashboard }.widgets.map((widget, index) => {
           // check if widget metric definition is available or not
           if (widget) {

packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx

@@ -131,7 +131,7 @@ export const CloudPulseDashboardLanding = () => {
   }
 
   return (
-    <Grid container spacing={2}>
+    <Grid container paddingTop={'8px'} spacing={2}>
       <Grid item xs={12}>
         <Paper>
           <GlobalFilters

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/reload.svg';
+import Reload from 'src/assets/icons/cloudpulse_reload.svg';
 import { Divider } from 'src/components/Divider';
 
 import { CloudPulseDashboardFilterBuilder } from '../shared/CloudPulseDashboardFilterBuilder';
@@ -72,43 +72,50 @@ export const GlobalFilters = React.memo((props: GlobalFilterProperties) => {
   );
 
   return (
-    <Grid container gap={1}>
-      <Grid
-        columnSpacing={2}
-        container
-        item
-        justifyContent="space-between"
-        mt={2}
-        px={2}
-        rowGap={2}
-        xs={12}
-      >
-        <Grid display={'flex'} item md={4} sm={5} xs={12}>
-          <CloudPulseDashboardSelect
-            handleDashboardChange={onDashboardChange}
-          />
+    <Grid container>
+      <Grid container item m={'24px'} rowGap={1} xs={12}>
+        <Grid
+          columnSpacing={2}
+          container
+          item
+          justifyContent="space-between"
+          rowSpacing={2}
+        >
+          <Grid display={'flex'} item md={4} sm={5} xs={12}>
+            <CloudPulseDashboardSelect
+              handleDashboardChange={onDashboardChange}
+            />
+          </Grid>
+          <Grid display="flex" gap={1} item md={4} sm={5} xs={12}>
+            <CloudPulseTimeRangeSelect
+              handleStatsChange={handleTimeRangeChange}
+              hideLabel
+              label="Select Time Range"
+            />
+            <IconButton
+              sx={{
+                marginBlockEnd: 'auto',
+              }}
+              disabled={!selectedDashboard}
+              onClick={() => handleGlobalRefresh(selectedDashboard)}
+              size="small"
+            >
+              <StyledReload />
+            </IconButton>
+          </Grid>
         </Grid>
-        <Grid display="flex" gap={1} item md={4} sm={5} xs={12}>
-          <CloudPulseTimeRangeSelect
-            handleStatsChange={handleTimeRangeChange}
-            hideLabel
-            label="Select Time Range"
-          />
-          <IconButton
+      </Grid>
+      {selectedDashboard && (
+        <Grid item xs={12}>
+          <Divider
             sx={{
-              marginBlockEnd: 'auto',
+              borderColor: '#F4F5F6',
+              margin: 0,
             }}
-            disabled={!selectedDashboard}
-            onClick={() => handleGlobalRefresh(selectedDashboard)}
-            size="small"
-          >
-            <StyledReload />
-          </IconButton>
+          />
         </Grid>
-      </Grid>
-      <Grid item xs={12}>
-        <Divider />
-      </Grid>
+      )}
+
       {selectedDashboard && (
         <CloudPulseDashboardFilterBuilder
           dashboard={selectedDashboard}

packages/manager/src/features/CloudPulse/Utils/CloudPulseWidgetUtils.ts

@@ -1,3 +1,6 @@
+import { styled } from '@mui/material';
+
+import { Paper } from 'src/components/Paper';
 import { isToday } from 'src/utilities/isToday';
 import { getMetrics } from 'src/utilities/statMetrics';
 
@@ -331,3 +334,16 @@ export const isDataEmpty = (data: DataSet[]): boolean => {
       thisSeries.data.every((thisPoint) => thisPoint[1] === null)
   );
 };
+
+export const StyledWidgetWrapper = styled(Paper, {
+  label: 'StyledWidgetWrapper',
+})(({ theme }) => ({
+  [theme.breakpoints.down('sm')]: {
+    maxHeight: '610px',
+    minHeight: '610px',
+  },
+  [theme.breakpoints.up('md')]: {
+    maxHeight: '540px',
+    minHeight: '540px',
+  },
+}));

packages/manager/src/features/CloudPulse/Utils/FilterConfig.ts

@@ -28,7 +28,7 @@ export const LINODE_CONFIG: Readonly<CloudPulseServiceTypeFilterMap> = {
         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<CloudPulseServiceTypeFilterMap> = {
         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<CloudPulseServiceTypeFilterMap> = {
         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<CloudPulseServiceTypeFilterMap> = {
         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<CloudPulseServiceTypeFilterMap> = {
             label: 'Secondary',
           },
         ],
-        placeholder: 'Select Node Type',
+        placeholder: 'Select a Node Type',
         priority: 5,
         type: CloudPulseSelectTypes.static,
       },

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 {
+  StyledWidgetWrapper,
   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 (
     <Grid item lg={widget.size} xs={12}>
-      <Paper>
-        <Stack spacing={2}>
+      <Stack spacing={2}>
+        <StyledWidgetWrapper>
           <Stack
             alignItems={'center'}
             direction={{ sm: 'row' }}
             gap={{ sm: 0, xs: 2 }}
             justifyContent={{ sm: 'space-between' }}
+            marginBottom={1}
             padding={1}
           >
-            <Typography
-              fontSize={{ sm: '1.5rem', xs: '2rem' }}
-              marginLeft={1}
-              variant="h1"
-            >
-              {convertStringToCamelCasesWithSpaces(widget.label)}{' '}
-              {!isLoading &&
-                `(${currentUnit}${unit.endsWith('ps') ? '/s' : ''})`}
+            <Typography marginLeft={1} variant="h2">
+              {convertStringToCamelCasesWithSpaces(widget.label)} ({currentUnit}
+              {unit.endsWith('ps') ? '/s' : ''})
             </Typography>
             <Stack
               alignItems={'center'}
               direction={{ sm: 'row' }}
               gap={1}
+              maxHeight={'85px'}
+              overflow={'auto'}
               width={{ sm: 'inherit', xs: '100%' }}
             >
               {availableMetrics?.scrape_interval && (
@@ -339,7 +337,6 @@ export const CloudPulseWidget = (props: CloudPulseWidgetProperties) => {
               </Box>
             </Stack>
           </Stack>
-          <Divider />
 
           <CloudPulseLineGraph
             error={
@@ -356,13 +353,12 @@ 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}
           />
-        </Stack>
-      </Paper>
+        </StyledWidgetWrapper>
+      </Stack>
     </Grid>
   );
 };

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: '115px',
+            maxHeight: '115px',
+            overflow: 'auto',
           }}
           ariaLabel={ariaLabel}
           data={data}

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;