seasharp
/
anvil
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style(striker-ui): fix styling to make build succeed

Browse Source
main
Tsu-ba-me 3 years ago
parent 34f7ece2f9
commit 2808fdd123
2 changed files with 100 additions and 113 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 141
      striker-ui/components/Hosts/AnvilHost.tsx
  2. 72
      striker-ui/components/Resource/ResourceVolumes.tsx

141
striker-ui/components/Hosts/AnvilHost.tsx
Unescape View File

@ -73,89 +73,84 @@ const AnvilHost = ({
return ( return (
<Box className={classes.root}> <Box className={classes.root}>
{hosts && {hosts &&
hosts.map( hosts.map((host): JSX.Element => {
(host): JSX.Element => { return (
return ( <InnerPanel key={host.host_uuid}>
<InnerPanel key={host.host_uuid}> <PanelHeader>
<PanelHeader> <Box display="flex" width="100%" className={classes.header}>
<Box display="flex" width="100%" className={classes.header}>
<Box flexGrow={1}>
<BodyText text={host.host_name} />
</Box>
<Box className={classes.decoratorBox}>
<Decorator colour={selectDecorator(host.state)} />
</Box>
<Box>
<BodyText
text={
host?.state?.replace(stateRegex, (c) =>
c.toUpperCase(),
) || 'Not Available'
}
/>
</Box>
</Box>
</PanelHeader>
<Box display="flex" className={classes.state}>
<Box className={classes.label}>
<BodyText text="Power: " />
</Box>
<Box flexGrow={1}> <Box flexGrow={1}>
<Switch <BodyText text={host.host_name} />
checked={host.state === 'online'}
onChange={() =>
putFetch(
`${process.env.NEXT_PUBLIC_API_URL}/set_power`,
{
host_uuid: host.host_uuid,
is_on: !(host.state === 'online'),
},
)
}
/>
</Box> </Box>
<Box className={classes.label}> <Box className={classes.decoratorBox}>
<BodyText text="Member: " /> <Decorator colour={selectDecorator(host.state)} />
</Box> </Box>
<Box> <Box>
<Switch <BodyText
checked={host.state === 'online'} text={
disabled={!(host.state === 'online')} host?.state?.replace(stateRegex, (c) =>
onChange={() => c.toUpperCase(),
putFetch( ) || 'Not Available'
`${process.env.NEXT_PUBLIC_API_URL}/set_membership`,
{
host_uuid: host.host_uuid,
is_member: !(host.state === 'online'),
},
)
} }
/> />
</Box> </Box>
</Box> </Box>
{host.state !== 'online' && host.state !== 'offline' && ( </PanelHeader>
<> <Box display="flex" className={classes.state}>
<Box display="flex" width="100%" className={classes.state}> <Box className={classes.label}>
<Box> <BodyText text="Power: " />
<BodyText </Box>
text={selectStateMessage( <Box flexGrow={1}>
messageRegex, <Switch
host.state_message, checked={host.state === 'online'}
)} onChange={() =>
/> putFetch(`${process.env.NEXT_PUBLIC_API_URL}/set_power`, {
</Box> host_uuid: host.host_uuid,
is_on: !(host.state === 'online'),
})
}
/>
</Box>
<Box className={classes.label}>
<BodyText text="Member: " />
</Box>
<Box>
<Switch
checked={host.state === 'online'}
disabled={!(host.state === 'online')}
onChange={() =>
putFetch(
`${process.env.NEXT_PUBLIC_API_URL}/set_membership`,
{
host_uuid: host.host_uuid,
is_member: !(host.state === 'online'),
},
)
}
/>
</Box>
</Box>
{host.state !== 'online' && host.state !== 'offline' && (
<>
<Box display="flex" width="100%" className={classes.state}>
<Box>
<BodyText
text={selectStateMessage(
messageRegex,
host.state_message,
)}
/>
</Box> </Box>
<Box display="flex" width="100%" className={classes.bar}> </Box>
<Box flexGrow={1}> <Box display="flex" width="100%" className={classes.bar}>
<ProgressBar progressPercentage={host.state_percent} /> <Box flexGrow={1}>
</Box> <ProgressBar progressPercentage={host.state_percent} />
</Box> </Box>
</> </Box>
)} </>
</InnerPanel> )}
); </InnerPanel>
}, );
)} })}
</Box> </Box>
); );
}; };

72
striker-ui/components/Resource/ResourceVolumes.tsx
Unescape View File

@ -78,49 +78,41 @@ const ResourceVolumes = ({
</Box> </Box>
</Box> </Box>
</PanelHeader> </PanelHeader>
{volume.connections.map( {volume.connections.map((connection, index): JSX.Element => {
(connection, index): JSX.Element => { return (
return ( <>
<> <Box
<Box key={connection.fencing}
key={connection.fencing} display="flex"
display="flex" width="100%"
width="100%" className={classes.connection}
className={classes.connection} >
> <Box className={classes.decoratorBox}>
<Box className={classes.decoratorBox}> <Decorator
<Decorator colour={selectDecorator(connection.connection_state)}
colour={selectDecorator( />
connection.connection_state, </Box>
)} <Box>
/> <Box display="flex" width="100%">
<BodyText text={connection.targets[0].target_name} />
<InsertLinkIcon style={{ color: DIVIDER }} />
<BodyText text={connection.targets[1].target_name} />
</Box> </Box>
<Box> <Box
<Box display="flex" width="100%"> display="flex"
<BodyText justifyContent="center"
text={connection.targets[0].target_name} width="100%"
/> >
<InsertLinkIcon style={{ color: DIVIDER }} /> <BodyText text={connection.connection_state} />
<BodyText
text={connection.targets[1].target_name}
/>
</Box>
<Box
display="flex"
justifyContent="center"
width="100%"
>
<BodyText text={connection.connection_state} />
</Box>
</Box> </Box>
</Box> </Box>
{volume.connections.length - 1 !== index ? ( </Box>
<Divider className={classes.divider} /> {volume.connections.length - 1 !== index ? (
) : null} <Divider className={classes.divider} />
</> ) : null}
); </>
}, );
)} })}
</InnerPanel> </InnerPanel>
); );
})} })}

Write Preview
Loading…
Cancel
Save