From 9fb930080e439227cdeba9fbac7f6b47cca86834 Mon Sep 17 00:00:00 2001 From: Nathaniel Caza Date: Fri, 25 Aug 2023 10:28:35 -0500 Subject: [PATCH 1/8] add typography --- web/src/app/admin/switchover/AdminSwitchoverGuide.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/web/src/app/admin/switchover/AdminSwitchoverGuide.tsx b/web/src/app/admin/switchover/AdminSwitchoverGuide.tsx index 8de2fe86b5..7b9d27cfe7 100644 --- a/web/src/app/admin/switchover/AdminSwitchoverGuide.tsx +++ b/web/src/app/admin/switchover/AdminSwitchoverGuide.tsx @@ -2,7 +2,12 @@ import React from 'react' import swoGuide from '../../../../../docs/switchover.md' import Markdown from '../../util/Markdown' +import { Typography } from '@mui/material' export default function AdminSwitchoverGuide(): JSX.Element { - return + return ( + + + + ) } From a70aa8f0a5d0013516c9513caba688b76a336c02 Mon Sep 17 00:00:00 2001 From: Nathaniel Caza Date: Fri, 25 Aug 2023 10:29:38 -0500 Subject: [PATCH 2/8] use as div --- web/src/app/admin/switchover/AdminSwitchoverGuide.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/app/admin/switchover/AdminSwitchoverGuide.tsx b/web/src/app/admin/switchover/AdminSwitchoverGuide.tsx index 7b9d27cfe7..bda924fd9e 100644 --- a/web/src/app/admin/switchover/AdminSwitchoverGuide.tsx +++ b/web/src/app/admin/switchover/AdminSwitchoverGuide.tsx @@ -6,7 +6,7 @@ import { Typography } from '@mui/material' export default function AdminSwitchoverGuide(): JSX.Element { return ( - + ) From 54b866ce84ac397b9e02331b4bdcd375711da335 Mon Sep 17 00:00:00 2001 From: Nathaniel Caza Date: Fri, 25 Aug 2023 10:40:12 -0500 Subject: [PATCH 3/8] move button --- .../admin/switchover/AdminSWOStatusCard.tsx | 2 + .../app/admin/switchover/AdminSwitchover.tsx | 54 ++++++++++--------- .../admin/switchover/AdminSwitchoverGuide.tsx | 18 ++++++- 3 files changed, 48 insertions(+), 26 deletions(-) diff --git a/web/src/app/admin/switchover/AdminSWOStatusCard.tsx b/web/src/app/admin/switchover/AdminSWOStatusCard.tsx index c035a1efad..acd56fac3a 100644 --- a/web/src/app/admin/switchover/AdminSWOStatusCard.tsx +++ b/web/src/app/admin/switchover/AdminSWOStatusCard.tsx @@ -14,6 +14,7 @@ import InProgressIcon from 'mdi-material-ui/DatabaseEdit' import { SWOStatus } from '../../../schema' import LoadingButton from '@mui/lab/LoadingButton' import { toTitle } from './util' +import { AdminSwitchoverGuideButton } from './AdminSwitchoverGuide' function getIcon(data: SWOStatus): JSX.Element { const i: SvgIconProps = { color: 'primary', sx: { fontSize: '3.5rem' } } @@ -118,6 +119,7 @@ export function AdminSWOStatusCard( {isExec ? 'Executing...' : 'Execute'} + ) diff --git a/web/src/app/admin/switchover/AdminSwitchover.tsx b/web/src/app/admin/switchover/AdminSwitchover.tsx index bea62141ea..96773b4732 100644 --- a/web/src/app/admin/switchover/AdminSwitchover.tsx +++ b/web/src/app/admin/switchover/AdminSwitchover.tsx @@ -12,9 +12,7 @@ import { AdminSWODone } from './AdminSWODone' import { AdminSWOWrongMode } from './AdminSWOWrongMode' import { AdminSWODBVersionCard } from './AdminSWODBVersionCard' import { AdminSWOStatusCard } from './AdminSWOStatusCard' -import { Button } from '@mui/material' -import AppLink from '../../util/AppLink' -import OpenInNewIcon from '@mui/icons-material/OpenInNew' +import { AdminSwitchoverGuideButton } from './AdminSwitchoverGuide' const query = gql` query { @@ -48,7 +46,7 @@ const mutation = gql` } ` -export function AdminSwitchoverInterface(): JSX.Element { +export default function AdminSwitchover(): JSX.Element { const [{ fetching, error, data: _data }, refetch] = useQuery({ query, }) @@ -69,12 +67,35 @@ export function AdminSwitchoverInterface(): JSX.Element { }, [fetching, refetch, data?.state, mutationStatus.fetching]) // remember if we are done and stay that way - if (data?.state === 'done') return + if (data?.state === 'done') + return ( + + +
+ +
+ + ) if (error && error.message === '[GraphQL] not in SWO mode' && !data) - return - - if (!data) return + return ( + + +
+ +
+ + ) + + if (!data) + return ( + + +
+ +
+ + ) function actionHandler(action: 'reset' | 'execute'): () => void { return () => { @@ -157,20 +178,3 @@ export function AdminSwitchoverInterface(): JSX.Element { ) } - -export default function AdminSwitchover(): JSX.Element { - return ( - - - - - ) -} diff --git a/web/src/app/admin/switchover/AdminSwitchoverGuide.tsx b/web/src/app/admin/switchover/AdminSwitchoverGuide.tsx index bda924fd9e..e53644f231 100644 --- a/web/src/app/admin/switchover/AdminSwitchoverGuide.tsx +++ b/web/src/app/admin/switchover/AdminSwitchoverGuide.tsx @@ -2,7 +2,23 @@ import React from 'react' import swoGuide from '../../../../../docs/switchover.md' import Markdown from '../../util/Markdown' -import { Typography } from '@mui/material' +import { Button, Typography } from '@mui/material' +import AppLink from '../../util/AppLink' +import OpenInNewIcon from '@mui/icons-material/OpenInNew' + +export function AdminSwitchoverGuideButton(): JSX.Element { + return ( + + ) +} export default function AdminSwitchoverGuide(): JSX.Element { return ( From 4eec3ba4488e20ed785459f628b46675fa435b9f Mon Sep 17 00:00:00 2001 From: Nathaniel Cook Date: Fri, 25 Aug 2023 09:09:53 -0700 Subject: [PATCH 4/8] adjust styling --- .../admin/switchover/AdminSWOStatusCard.tsx | 3 +- .../app/admin/switchover/AdminSwitchover.tsx | 34 ++++++------------- 2 files changed, 11 insertions(+), 26 deletions(-) diff --git a/web/src/app/admin/switchover/AdminSWOStatusCard.tsx b/web/src/app/admin/switchover/AdminSWOStatusCard.tsx index acd56fac3a..1ba64ed423 100644 --- a/web/src/app/admin/switchover/AdminSWOStatusCard.tsx +++ b/web/src/app/admin/switchover/AdminSWOStatusCard.tsx @@ -86,10 +86,9 @@ export function AdminSWOStatusCard( sx={{ p: 0 }} /> {getDetails(props.data)} -
} diff --git a/web/src/app/admin/switchover/AdminSwitchover.tsx b/web/src/app/admin/switchover/AdminSwitchover.tsx index 96773b4732..e2163a749d 100644 --- a/web/src/app/admin/switchover/AdminSwitchover.tsx +++ b/web/src/app/admin/switchover/AdminSwitchover.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react' +import React, { ReactNode, useEffect, useState } from 'react' import Grid from '@mui/material/Grid' import { gql, useMutation, useQuery } from 'urql' import { DateTime } from 'luxon' @@ -66,36 +66,22 @@ export default function AdminSwitchover(): JSX.Element { return () => clearInterval(t) }, [fetching, refetch, data?.state, mutationStatus.fetching]) - // remember if we are done and stay that way - if (data?.state === 'done') + // loading/error states to show before page load + let msgJSX: ReactNode + const err = error && error.message === '[GraphQL] not in SWO mode' && !data + if (err) msgJSX = + if (!data) msgJSX = + if (data?.state === 'done') msgJSX = + if (err || !data || data?.state === 'done') { return ( - -
- -
- - ) - - if (error && error.message === '[GraphQL] not in SWO mode' && !data) - return ( - - -
- -
- - ) - - if (!data) - return ( - - + {msgJSX}
) + } function actionHandler(action: 'reset' | 'execute'): () => void { return () => { From 5d53eb01e643d7ab0506a68607174458918c6012 Mon Sep 17 00:00:00 2001 From: Nathaniel Cook Date: Fri, 25 Aug 2023 09:15:37 -0700 Subject: [PATCH 5/8] tweak if statement --- web/src/app/admin/switchover/AdminSwitchover.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/web/src/app/admin/switchover/AdminSwitchover.tsx b/web/src/app/admin/switchover/AdminSwitchover.tsx index e2163a749d..a4eabcdff5 100644 --- a/web/src/app/admin/switchover/AdminSwitchover.tsx +++ b/web/src/app/admin/switchover/AdminSwitchover.tsx @@ -68,11 +68,11 @@ export default function AdminSwitchover(): JSX.Element { // loading/error states to show before page load let msgJSX: ReactNode - const err = error && error.message === '[GraphQL] not in SWO mode' && !data - if (err) msgJSX = - if (!data) msgJSX = - if (data?.state === 'done') msgJSX = - if (err || !data || data?.state === 'done') { + if (error?.message === '[GraphQL] not in SWO mode' && !data) + msgJSX = + else if (!data) msgJSX = + else if (data?.state === 'done') msgJSX = + if (msgJSX) { return ( {msgJSX} From 486f6a7aa25984c605e4ab5e144ed986dc39f2be Mon Sep 17 00:00:00 2001 From: Nathaniel Cook Date: Fri, 25 Aug 2023 09:19:24 -0700 Subject: [PATCH 6/8] fix md text in dark mode --- .../app/admin/switchover/AdminSwitchoverGuide.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/web/src/app/admin/switchover/AdminSwitchoverGuide.tsx b/web/src/app/admin/switchover/AdminSwitchoverGuide.tsx index e53644f231..03726f31ee 100644 --- a/web/src/app/admin/switchover/AdminSwitchoverGuide.tsx +++ b/web/src/app/admin/switchover/AdminSwitchoverGuide.tsx @@ -2,7 +2,7 @@ import React from 'react' import swoGuide from '../../../../../docs/switchover.md' import Markdown from '../../util/Markdown' -import { Button, Typography } from '@mui/material' +import { Button, Card, CardContent, Typography } from '@mui/material' import AppLink from '../../util/AppLink' import OpenInNewIcon from '@mui/icons-material/OpenInNew' @@ -22,8 +22,12 @@ export function AdminSwitchoverGuideButton(): JSX.Element { export default function AdminSwitchoverGuide(): JSX.Element { return ( - - - + + + + + + + ) } From 0e52ca8f91894d2937e0143b0f01da01deefbe5c Mon Sep 17 00:00:00 2001 From: Nathaniel Cook Date: Fri, 25 Aug 2023 09:22:23 -0700 Subject: [PATCH 7/8] add typography to connections pool amount --- web/src/app/admin/switchover/SWONode.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/web/src/app/admin/switchover/SWONode.tsx b/web/src/app/admin/switchover/SWONode.tsx index 0162e354d2..7d4b400f7e 100644 --- a/web/src/app/admin/switchover/SWONode.tsx +++ b/web/src/app/admin/switchover/SWONode.tsx @@ -43,7 +43,9 @@ export default function SWONode({ node, name }: SWONodeProps): JSX.Element { - {node.connections?.reduce((acc, cur) => acc + cur.count, 0)} + + {node.connections?.reduce((acc, cur) => acc + cur.count, 0)} + @@ -92,7 +94,9 @@ export default function SWONode({ node, name }: SWONodeProps): JSX.Element { - {node.connections?.reduce((acc, cur) => acc + cur.count, 0)} + + {node.connections?.reduce((acc, cur) => acc + cur.count, 0)} + From 74c9c29b1b0d2c07e6791caa95aa49b1b3bf4345 Mon Sep 17 00:00:00 2001 From: Nathaniel Cook Date: Fri, 25 Aug 2023 09:31:43 -0700 Subject: [PATCH 8/8] update styling --- web/src/app/admin/switchover/AdminSwitchover.tsx | 2 +- web/src/app/admin/switchover/SWONode.tsx | 8 ++++++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/web/src/app/admin/switchover/AdminSwitchover.tsx b/web/src/app/admin/switchover/AdminSwitchover.tsx index a4eabcdff5..be78bc250c 100644 --- a/web/src/app/admin/switchover/AdminSwitchover.tsx +++ b/web/src/app/admin/switchover/AdminSwitchover.tsx @@ -146,7 +146,7 @@ export default function AdminSwitchover(): JSX.Element { - + {data?.nodes.length > 0 && data.nodes .slice() diff --git a/web/src/app/admin/switchover/SWONode.tsx b/web/src/app/admin/switchover/SWONode.tsx index 7d4b400f7e..5b0ea6a3f6 100644 --- a/web/src/app/admin/switchover/SWONode.tsx +++ b/web/src/app/admin/switchover/SWONode.tsx @@ -42,7 +42,9 @@ export default function SWONode({ node, name }: SWONodeProps): JSX.Element { - + {node.connections?.reduce((acc, cur) => acc + cur.count, 0)} @@ -93,7 +95,9 @@ export default function SWONode({ node, name }: SWONodeProps): JSX.Element { - + {node.connections?.reduce((acc, cur) => acc + cur.count, 0)}