fix: Restore Longview styling to what it used to be (#9619)

* add spacing back * add changeset * Update packages/manager/.changeset/pr-9619-fixed-1693518126299.md Co-authored-by: Alban Bailly <130582365+abailly-akamai@users.noreply.github.com> --------- Co-authored-by: Alban Bailly <130582365+abailly-akamai@users.noreply.github.com>
linode · Sep 1, 2023 · d71430d · d71430d
1 parent 3887161
commit d71430d
Show file tree

Hide file tree

Showing 15 changed files with 45 additions and 18 deletions.
diff --git a/packages/manager/.changeset/pr-9619-fixed-1693518126299.md b/packages/manager/.changeset/pr-9619-fixed-1693518126299.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Longview styling regressions ([#9619](https://github.com/linode/manager/pull/9619))
diff --git a/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Apache/Apache.tsx b/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Apache/Apache.tsx
@@ -93,7 +93,7 @@ export const Apache: React.FC<Props> = (props) => {
   }
 
   return (
-    <Grid container direction="column">
+    <Grid container direction="column" spacing={2}>
       <DocumentTitleSegment segment={'Apache'} />
       <Grid item xs={12}>
         <Box

diff --git a/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/GaugesSection.tsx b/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/GaugesSection.tsx
@@ -36,7 +36,14 @@ const GaugesSection: React.FC<Props> = (props) => {
   const classes = useStyles();
 
   return (
-    <Grid className={classes.gaugesOuter} container item md={5} xs={12}>
+    <Grid
+      className={classes.gaugesOuter}
+      container
+      item
+      md={5}
+      spacing={2}
+      xs={12}
+    >
       <Grid className={classes.gaugeContainer} item xs={4}>
         <CPUGauge
           clientID={props.clientID}

diff --git a/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/IconSection.tsx b/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/IconSection.tsx
@@ -160,6 +160,7 @@ const IconSection: React.FC<Props> = (props) => {
         className={classes.headerSection}
         container
         item
+        spacing={2}
         wrap="nowrap"
       >
         <Grid item>
@@ -175,6 +176,7 @@ const IconSection: React.FC<Props> = (props) => {
         className={classes.iconSection}
         container
         item
+        spacing={2}
         wrap="nowrap"
       >
         <Grid className={classes.iconItem} item md={2} sm={1} xs={2}>
@@ -190,6 +192,7 @@ const IconSection: React.FC<Props> = (props) => {
         alignItems="center"
         className={classes.iconSection}
         container
+        spacing={2}
         item
         wrap="nowrap"
       >
@@ -207,6 +210,7 @@ const IconSection: React.FC<Props> = (props) => {
         alignItems="center"
         className={classes.iconSection}
         container
+        spacing={2}
         item
         wrap="nowrap"
       >
@@ -232,6 +236,7 @@ const IconSection: React.FC<Props> = (props) => {
         alignItems="center"
         className={classes.iconSection}
         container
+        spacing={2}
         item
         wrap="nowrap"
       >
@@ -262,6 +267,7 @@ const IconSection: React.FC<Props> = (props) => {
         alignItems="center"
         className={classes.iconSection}
         container
+        spacing={2}
         item
         wrap="nowrap"
       >
@@ -282,6 +288,7 @@ const IconSection: React.FC<Props> = (props) => {
             alignItems="center"
             className={classes.packageStaticOuter}
             container
+            spacing={2}
             item
             wrap="nowrap"
           >

diff --git a/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/LongviewDetailOverview.tsx b/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/LongviewDetailOverview.tsx
@@ -74,7 +74,7 @@ export const LongviewDetailOverview: React.FC<CombinedProps> = (props) => {
   return (
     <React.Fragment>
       <DocumentTitleSegment segment="Overview" />
-      <Grid container>
+      <Grid container spacing={2}>
         <Grid item xs={12}>
           <Paper>
             <Grid

diff --git a/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/MySQL/MySQLLanding.tsx b/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/MySQL/MySQLLanding.tsx
@@ -94,7 +94,7 @@ export const MySQLLanding: React.FC<Props> = (props) => {
   }
 
   return (
-    <Grid container direction="column">
+    <Grid container direction="column" spacing={2}>
       <DocumentTitleSegment segment={'MySQL'} />
       <Grid item xs={12}>
         <Box

diff --git a/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/NGINX/NGINX.tsx b/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/NGINX/NGINX.tsx
@@ -105,7 +105,7 @@ export const NGINX: React.FC<Props> = (props) => {
   }
 
   return (
-    <Grid container direction="column">
+    <Grid container direction="column" spacing={2}>
       <DocumentTitleSegment segment={'NGINX'} />
       <Grid item xs={12}>
         <Box

diff --git a/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/NGINX/NGINXGraphs.tsx b/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/NGINX/NGINXGraphs.tsx
@@ -73,7 +73,7 @@ export const NGINXGraphs: React.FC<CombinedProps> = (props) => {
           />
         </Grid>
         <Grid item xs={12}>
-          <Grid container direction="row">
+          <Grid container direction="row" spacing={2}>
             <Grid className={classes.smallGraph} item sm={6} xs={12}>
               <LongviewLineGraph
                 data={[

diff --git a/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Network/Network.tsx b/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Network/Network.tsx
@@ -64,7 +64,7 @@ export const NetworkLanding: React.FC<Props> = (props) => {
   const isToday = _isToday(time.start, time.end);
 
   return (
-    <Grid container direction="column">
+    <Grid container direction="column" spacing={2}>
       <DocumentTitleSegment segment={'Network'} />
       <Grid item xs={12}>
         <Box

diff --git a/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/ProcessGraphs.tsx b/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/ProcessGraphs.tsx
@@ -81,7 +81,7 @@ export const ProcessGraphs: React.FC<CombinedProps> = (props) => {
   return (
     <>
       <Grid item xs={12}>
-        <Grid container direction="row">
+        <Grid container direction="row" spacing={2}>
           <Grid className={classes.smallGraph} item sm={6} xs={12}>
             <LongviewLineGraph
               data={[
@@ -122,7 +122,7 @@ export const ProcessGraphs: React.FC<CombinedProps> = (props) => {
         </Grid>
       </Grid>
       <Grid item xs={12}>
-        <Grid container direction="row">
+        <Grid container direction="row" spacing={2}>
           <Grid className={classes.smallGraph} item sm={6} xs={12}>
             <LongviewLineGraph
               data={[

diff --git a/packages/manager/src/features/Longview/LongviewLanding/LongviewClientHeader.tsx b/packages/manager/src/features/Longview/LongviewLanding/LongviewClientHeader.tsx
@@ -139,7 +139,7 @@ export const LongviewClientHeader: React.FC<CombinedProps> = (props) => {
     longviewClientLastUpdated !== 0;
 
   return (
-    <Grid className={classes.root} container direction="column">
+    <Grid className={classes.root} container direction="column" spacing={2}>
       <Grid item>
         {userCanModifyClient ? (
           <EditableEntityLabel

diff --git a/packages/manager/src/features/Longview/LongviewLanding/LongviewClientInstructions.tsx b/packages/manager/src/features/Longview/LongviewLanding/LongviewClientInstructions.tsx
@@ -74,7 +74,7 @@ export const LongviewClientInstructions: React.FC<Props> = (props) => {
         spacing={2}
       >
         <Grid item xs={11}>
-          <Grid container>
+          <Grid container spacing={2}>
             <Grid item md={3} xs={12}>
               {userCanModifyClient ? (
                 <EditableEntityLabel
@@ -99,7 +99,7 @@ export const LongviewClientInstructions: React.FC<Props> = (props) => {
           </Grid>
         </Grid>
         <Grid item xs={1}>
-          <Grid container justifyContent="flex-end">
+          <Grid container justifyContent="flex-end" spacing={2}>
             <Grid item>
               <ActionMenu
                 longviewClientID={clientID}

diff --git a/packages/manager/src/features/Longview/LongviewLanding/LongviewClientRow.tsx b/packages/manager/src/features/Longview/LongviewLanding/LongviewClientRow.tsx
@@ -109,10 +109,11 @@ const LongviewClientRow: React.FC<CombinedProps> = (props) => {
         container
         data-testid="longview-client-row"
         justifyContent="space-between"
+        spacing={2}
         wrap="nowrap"
       >
         <Grid item xs={11}>
-          <Grid container>
+          <Grid container spacing={2}>
             <Grid item md={3} xs={12}>
               <LongviewClientHeader
                 clientID={clientID}
@@ -125,7 +126,7 @@ const LongviewClientRow: React.FC<CombinedProps> = (props) => {
               />
             </Grid>
             <Grid item md={9} xs={12}>
-              <Grid alignItems="center" container direction="row">
+              <Grid alignItems="center" container direction="row" spacing={2}>
                 <Grid className={classes.gaugeContainer} item sm={2} xs={4}>
                   <CPUGauge
                     clientID={clientID}
@@ -167,7 +168,7 @@ const LongviewClientRow: React.FC<CombinedProps> = (props) => {
           </Grid>
         </Grid>
         <Grid item xs={1}>
-          <Grid container justifyContent="flex-end">
+          <Grid container justifyContent="flex-end" spacing={2}>
             <Grid item>
               <ActionMenu
                 longviewClientID={clientID}

diff --git a/packages/manager/src/features/Longview/LongviewLanding/LongviewClients.tsx b/packages/manager/src/features/Longview/LongviewLanding/LongviewClients.tsx
@@ -233,7 +233,12 @@ export const LongviewClients: React.FC<CombinedProps> = (props) => {
   return (
     <React.Fragment>
       <DocumentTitleSegment segment="Clients" />
-      <Grid alignItems="center" className={classes.headingWrapper} container>
+      <Grid
+        alignItems="center"
+        className={classes.headingWrapper}
+        container
+        spacing={2}
+      >
         <Grid className={classes.searchbar} item>
           <DebouncedSearchTextField
             debounceTime={250}
@@ -277,6 +282,7 @@ export const LongviewClients: React.FC<CombinedProps> = (props) => {
           container
           direction="column"
           justifyContent="center"
+          spacing={2}
         >
           <Typography data-testid="longview-upgrade">
             <Link to={'/longview/plan-details'}>Upgrade to Longview Pro</Link>

diff --git a/packages/manager/src/features/Longview/shared/InstallationInstructions.tsx b/packages/manager/src/features/Longview/shared/InstallationInstructions.tsx
@@ -52,7 +52,7 @@ const InstallationInstructions: React.FC<CombinedProps> = (props) => {
   const command = `curl -s https://lv.linode.com/${props.installationKey} | sudo bash`;
 
   return (
-    <Grid container>
+    <Grid container spacing={2}>
       <Grid item>
         <Typography>
           Before this client can gather data, you need to install the Longview
@@ -66,6 +66,7 @@ const InstallationInstructions: React.FC<CombinedProps> = (props) => {
           alignItems="center"
           className={classes.copyContainer}
           container
+          spacing={2}
           wrap="nowrap"
         >
           <Grid className="py0" item>
@@ -86,7 +87,7 @@ const InstallationInstructions: React.FC<CombinedProps> = (props) => {
         </Typography>
       </Grid>
       <Grid item xs={12}>
-        <Grid container>
+        <Grid container spacing={2}>
           <Grid className={classes.instruction} item>
             <Typography>
               <Link to="https://www.linode.com/docs/platform/longview/troubleshooting-linode-longview/">