Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Sep 1, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fc16d9e
add spacing back
coliu-akamai Aug 31, 2023
f1a27f6
add changeset
coliu-akamai Aug 31, 2023
f2738e4
Update packages/manager/.changeset/pr-9619-fixed-1693518126299.md
coliu-akamai Sep 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/manager/.changeset/pr-9619-fixed-1693518126299.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@linode/manager": Fixed
---

Longview styling regressions ([#9619](https://github.com/linode/manager/pull/9619))
2 changes: 1 addition & 1 deletion packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Apache/Apache.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
9 changes: 8 additions & 1 deletion packages/manager/src/features/Longview/LongviewDetail/DetailTabs/GaugesSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
7 changes: 7 additions & 0 deletions packages/manager/src/features/Longview/LongviewDetail/DetailTabs/IconSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,7 @@ const IconSection: React.FC<Props> = (props) => {
className={classes.headerSection}
container
item
spacing={2}
wrap="nowrap"
>
<Grid item>
Expand All @@ -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}>
Expand All @@ -190,6 +192,7 @@ const IconSection: React.FC<Props> = (props) => {
alignItems="center"
className={classes.iconSection}
container
spacing={2}
item
wrap="nowrap"
>
Expand All @@ -207,6 +210,7 @@ const IconSection: React.FC<Props> = (props) => {
alignItems="center"
className={classes.iconSection}
container
spacing={2}
item
wrap="nowrap"
>
Expand All @@ -232,6 +236,7 @@ const IconSection: React.FC<Props> = (props) => {
alignItems="center"
className={classes.iconSection}
container
spacing={2}
item
wrap="nowrap"
>
Expand Down Expand Up @@ -262,6 +267,7 @@ const IconSection: React.FC<Props> = (props) => {
alignItems="center"
className={classes.iconSection}
container
spacing={2}
item
wrap="nowrap"
>
Expand All @@ -282,6 +288,7 @@ const IconSection: React.FC<Props> = (props) => {
alignItems="center"
className={classes.packageStaticOuter}
container
spacing={2}
item
wrap="nowrap"
>
Expand Down
2 changes: 1 addition & 1 deletion packages/manager/src/features/Longview/LongviewDetail/DetailTabs/LongviewDetailOverview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion packages/manager/src/features/Longview/LongviewDetail/DetailTabs/MySQL/MySQLLanding.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion packages/manager/src/features/Longview/LongviewDetail/DetailTabs/NGINX/NGINX.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion packages/manager/src/features/Longview/LongviewDetail/DetailTabs/NGINX/NGINXGraphs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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={[
Expand Down
2 changes: 1 addition & 1 deletion packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Network/Network.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions packages/manager/src/features/Longview/LongviewDetail/DetailTabs/ProcessGraphs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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={[
Expand Down Expand Up @@ -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={[
Expand Down
2 changes: 1 addition & 1 deletion packages/manager/src/features/Longview/LongviewLanding/LongviewClientHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions packages/manager/src/features/Longview/LongviewLanding/LongviewClientInstructions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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}
Expand Down
7 changes: 4 additions & 3 deletions packages/manager/src/features/Longview/LongviewLanding/LongviewClientRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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}
Expand Down Expand Up @@ -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}
Expand Down
8 changes: 7 additions & 1 deletion packages/manager/src/features/Longview/LongviewLanding/LongviewClients.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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>
Expand Down
5 changes: 3 additions & 2 deletions packages/manager/src/features/Longview/shared/InstallationInstructions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -66,6 +66,7 @@ const InstallationInstructions: React.FC<CombinedProps> = (props) => {
alignItems="center"
className={classes.copyContainer}
container
spacing={2}
wrap="nowrap"
>
<Grid className="py0" item>
Expand All @@ -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/">
Expand Down