Merge pull request #165 from onattech/Update_Status_Chips

Update status chips
dataplane-app · Mar 9, 2022 · bd35515 · bd35515
2 parents 8023859 + 6beb796
commit bd35515
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 14 deletions.
diff --git a/frontend/src/pages/View/index.jsx b/frontend/src/pages/View/index.jsx
@@ -16,6 +16,7 @@ import { useGetPipelineFlow } from '../../graphql/getPipelineFlow';
 import { edgeTypes, nodeTypes, useGlobalFlowState } from '../Flow';
 import LogsDrawer from '../../components/DrawerContent/LogsDrawer';
 import TurnOffPipelineDrawer from '../../components/DrawerContent/TurnOffPipelineDrawer';
+import CustomChip from '../../components/CustomChip';
 
 const View = () => {
     // Hooks
@@ -134,10 +135,7 @@ const View = () => {
 
                         <Grid display="flex">
                             <Box display="flex" alignItems="center" ml={4} mr={2}>
-                                <Box height={16} width={16} backgroundColor={isPipelineOnline ? 'status.pipelineOnlineText' : 'error.main'} borderRadius="100%"></Box>
-                                <Typography ml={1} fontSize={16} color={isPipelineOnline ? 'status.pipelineOnlineText' : 'error.main'}>
-                                    {isPipelineOnline ? 'Online' : 'Offline'}
-                                </Typography>
+                                {isPipelineOnline ? <CustomChip label={'Online'} customColor="green" /> : <CustomChip label="Offline" customColor="red" />}
                             </Box>
 
                             <Box sx={{ top: '0', right: '0' }}>

diff --git a/frontend/src/pages/Workers/WorkerDetail.jsx b/frontend/src/pages/Workers/WorkerDetail.jsx
@@ -225,19 +225,15 @@ const CustomWorker = ({ row }) => {
                 <Typography component="h4" variant="h3" sx={{ display: 'inline' }}>
                     {WorkerID}
                 </Typography>
-                <Typography
-                    component="h4"
-                    variant="subtitle1"
-                    color={Status === 'Online' ? 'green' : 'red'}
-                    fontWeight={700}
-                    ml={3}
-                    sx={{ display: 'inline', verticalAlign: 'top' }}>
-                    {Status}
-                </Typography>
             </div>
-            <Typography component="h5" mt={0.5} variant="subtitle1">
+            <Typography component="h5" mt={0.5} variant="subtitle1" mb={1}>
                 Last updated: {T}
             </Typography>
+            {Status === 'Online' ? (
+                <CustomChip label={'Online'} customColor="green" style={{ width: 'fit-content' }} />
+            ) : (
+                <CustomChip label="Offline" customColor="red" style={{ width: 'fit-content' }} />
+            )}
             {/* <Grid item display="flex" alignItems="center" mt={2} sx={{ alignSelf: 'flex-start' }}>
                 <CustomChip amount={queue} label="Queue" margin={2} customColor="purple" />
                 <CustomChip amount={running} label="Running" margin={1} customColor="orange" />