Merge pull request #3247 from target/switchover-doc-polish

swo: Polish the guide/documentation rendering
target · Aug 25, 2023 · d938a76 · d938a76
2 parents e7e3358 + 74c9c29
commit d938a76
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 37 deletions.
diff --git 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' } }
@@ -85,10 +86,9 @@ export function AdminSWOStatusCard(
           sx={{ p: 0 }}
         />
         {getDetails(props.data)}
-        <div style={{ flexGrow: 1 }} />
         <ButtonGroup
           orientation={theme.breakpoints.up('md') ? 'vertical' : 'horizontal'}
-          sx={{ width: '100%', pb: '32px' }}
+          sx={{ width: '100%', pb: '16px', pt: '16px' }}
         >
           <LoadingButton
             startIcon={<ResetIcon />}
@@ -118,6 +118,7 @@ export function AdminSWOStatusCard(
             {isExec ? 'Executing...' : 'Execute'}
           </LoadingButton>
         </ButtonGroup>
+        <AdminSwitchoverGuideButton />
       </CardContent>
     </Card>
   )

diff --git 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'
@@ -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,
   })
@@ -68,13 +66,22 @@ export function AdminSwitchoverInterface(): JSX.Element {
     return () => clearInterval(t)
   }, [fetching, refetch, data?.state, mutationStatus.fetching])
 
-  // remember if we are done and stay that way
-  if (data?.state === 'done') return <AdminSWODone />
-
-  if (error && error.message === '[GraphQL] not in SWO mode' && !data)
-    return <AdminSWOWrongMode />
-
-  if (!data) return <Spinner />
+  // loading/error states to show before page load
+  let msgJSX: ReactNode
+  if (error?.message === '[GraphQL] not in SWO mode' && !data)
+    msgJSX = <AdminSWOWrongMode />
+  else if (!data) msgJSX = <Spinner />
+  else if (data?.state === 'done') msgJSX = <AdminSWODone />
+  if (msgJSX) {
+    return (
+      <React.Fragment>
+        {msgJSX}
+        <center style={{ paddingTop: '1em' }}>
+          <AdminSwitchoverGuideButton />
+        </center>
+      </React.Fragment>
+    )
+  }
 
   function actionHandler(action: 'reset' | 'execute'): () => void {
     return () => {
@@ -139,7 +146,7 @@ export function AdminSwitchoverInterface(): JSX.Element {
         <AdminSWODBVersionCard data={data} />
       </Grid>
 
-      <Grid item xs={12} container spacing={2} justifyContent='space-between'>
+      <Grid item xs={12} container spacing={2}>
         {data?.nodes.length > 0 &&
           data.nodes
             .slice()
@@ -157,20 +164,3 @@ export function AdminSwitchoverInterface(): JSX.Element {
     </Grid>
   )
 }
-
-export default function AdminSwitchover(): JSX.Element {
-  return (
-    <React.Fragment>
-      <Button
-        variant='contained'
-        endIcon={<OpenInNewIcon />}
-        component={AppLink}
-        to='/admin/switchover/guide'
-        newTab
-      >
-        Switchover Guide
-      </Button>
-      <AdminSwitchoverInterface />
-    </React.Fragment>
-  )
-}
diff --git a/web/src/app/admin/switchover/AdminSwitchoverGuide.tsx b/web/src/app/admin/switchover/AdminSwitchoverGuide.tsx
@@ -2,7 +2,32 @@ import React from 'react'
 import swoGuide from '../../../../../docs/switchover.md'
 
 import Markdown from '../../util/Markdown'
+import { Button, Card, CardContent, Typography } from '@mui/material'
+import AppLink from '../../util/AppLink'
+import OpenInNewIcon from '@mui/icons-material/OpenInNew'
+
+export function AdminSwitchoverGuideButton(): JSX.Element {
+  return (
+    <Button
+      variant='contained'
+      endIcon={<OpenInNewIcon />}
+      component={AppLink}
+      to='/admin/switchover/guide'
+      newTab
+    >
+      Switchover Guide
+    </Button>
+  )
+}
 
 export default function AdminSwitchoverGuide(): JSX.Element {
-  return <Markdown value={swoGuide} />
+  return (
+    <Card>
+      <CardContent>
+        <Typography component='div'>
+          <Markdown value={swoGuide} />
+        </Typography>
+      </CardContent>
+    </Card>
+  )
 }
diff --git a/web/src/app/admin/switchover/SWONode.tsx b/web/src/app/admin/switchover/SWONode.tsx
@@ -42,8 +42,12 @@ export default function SWONode({ node, name }: SWONodeProps): JSX.Element {
             </ListItem>
             <ListItem>
               <ListItemText primary='Connections' />
-              <ListItemSecondaryAction>
-                {node.connections?.reduce((acc, cur) => acc + cur.count, 0)}
+              <ListItemSecondaryAction
+                sx={{ width: '24px', textAlign: 'center' }}
+              >
+                <Typography>
+                  {node.connections?.reduce((acc, cur) => acc + cur.count, 0)}
+                </Typography>
               </ListItemSecondaryAction>
             </ListItem>
           </List>
@@ -91,8 +95,12 @@ export default function SWONode({ node, name }: SWONodeProps): JSX.Element {
           </ListItem>
           <ListItem>
             <ListItemText primary='Connections' />
-            <ListItemSecondaryAction>
-              {node.connections?.reduce((acc, cur) => acc + cur.count, 0)}
+            <ListItemSecondaryAction
+              sx={{ width: '24px', textAlign: 'center' }}
+            >
+              <Typography>
+                {node.connections?.reduce((acc, cur) => acc + cur.count, 0)}
+              </Typography>
             </ListItemSecondaryAction>
           </ListItem>
         </List>