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

refactor: adopt back-end naming in all the components

Browse Source
main
Josue 4 years ago committed by Tsu-ba-me
parent ff9460cc49
commit f79b9e3f04
13 changed files with 92 additions and 91 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. 2
      striker-ui/components/Anvils/SelectedAnvil.tsx
  2. 46
      striker-ui/components/Hosts/AnvilHost.tsx
  3. 16
      striker-ui/components/Hosts/index.tsx
  4. 10
      striker-ui/components/Network/Network.tsx
  5. 24
      striker-ui/components/Network/processNetwork.ts
  6. 8
      striker-ui/components/Servers.tsx
  7. 22
      striker-ui/components/SharedStorage/SharedStorage.tsx
  8. 24
      striker-ui/components/SharedStorage/SharedStorageHost.tsx
  9. 4
      striker-ui/pages/index.tsx
  10. 10
      striker-ui/types/AnvilNetwork.d.ts
  11. 7
      striker-ui/types/AnvilSharedStorage.d.ts
  12. 4
      striker-ui/types/AnvilStatus.d.ts
  13. 6
      striker-ui/types/NodeSet.d.ts

2
striker-ui/components/Anvils/SelectedAnvil.tsx
Unescape View File

@ -35,7 +35,7 @@ const selectDecorator = (state: string): Colours => {
const isAnvilOn = (anvil: AnvilListItem): boolean => const isAnvilOn = (anvil: AnvilListItem): boolean =>
!( !(
anvil.nodes.findIndex(({ state }: AnvilStatusNode) => state !== 'off') === anvil.hosts.findIndex(({ state }: AnvilStatusHost) => state !== 'off') ===
-1 -1
); );

46
striker-ui/components/Nodes/AnvilNode.tsx → striker-ui/components/Hosts/AnvilHost.tsx
Unescape View File

@ -4,7 +4,7 @@ import { InnerPanel, PanelHeader } from '../Panels';
import { ProgressBar } from '../Bars'; import { ProgressBar } from '../Bars';
import { BodyText } from '../Text'; import { BodyText } from '../Text';
import Decorator, { Colours } from '../Decorator'; import Decorator, { Colours } from '../Decorator';
import NODE_STATUS from '../../lib/consts/NODES'; import HOST_STATUS from '../../lib/consts/NODES';
import putJSON from '../../lib/fetchers/putJSON'; import putJSON from '../../lib/fetchers/putJSON';
@ -43,7 +43,7 @@ const selectStateMessage = (regex: RegExp, message: string): string => {
const msg = regex.exec(message); const msg = regex.exec(message);
if (msg) { if (msg) {
return NODE_STATUS.get(msg[0]) || 'Error code not recognized'; return HOST_STATUS.get(msg[0]) || 'Error code not recognized';
} }
return 'Error code not found'; return 'Error code not found';
}; };
@ -62,10 +62,10 @@ const selectDecorator = (state: string): Colours => {
} }
}; };
const AnvilNode = ({ const AnvilHost = ({
nodes, hosts,
}: { }: {
nodes: Array<AnvilStatusNode>; hosts: Array<AnvilStatusHost>;
}): JSX.Element => { }): JSX.Element => {
const classes = useStyles(); const classes = useStyles();
const stateRegex = /^[a-zA-Z]/; const stateRegex = /^[a-zA-Z]/;
@ -73,23 +73,23 @@ const AnvilNode = ({
return ( return (
<Box className={classes.root}> <Box className={classes.root}>
{nodes && {hosts &&
nodes.map( hosts.map(
(node): JSX.Element => { (host): JSX.Element => {
return ( return (
<InnerPanel key={node.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}> <Box flexGrow={1}>
<BodyText text={node.host_name} /> <BodyText text={host.host_name} />
</Box> </Box>
<Box className={classes.decoratorBox}> <Box className={classes.decoratorBox}>
<Decorator colour={selectDecorator(node.state)} /> <Decorator colour={selectDecorator(host.state)} />
</Box> </Box>
<Box> <Box>
<BodyText <BodyText
text={ text={
node?.state?.replace(stateRegex, (c) => host?.state?.replace(stateRegex, (c) =>
c.toUpperCase(), c.toUpperCase(),
) || 'Not Available' ) || 'Not Available'
} }
@ -103,11 +103,11 @@ const AnvilNode = ({
</Box> </Box>
<Box flexGrow={1}> <Box flexGrow={1}>
<Switch <Switch
checked={node.state === 'ready'} checked={host.state === 'ready'}
onChange={() => onChange={() =>
putJSON('/anvils/set_power', { putJSON('/anvils/set_power', {
host_uuid: node.host_uuid, host_uuid: host.host_uuid,
is_on: !(node.state === 'ready'), is_on: !(host.state === 'ready'),
}) })
} }
/> />
@ -117,32 +117,32 @@ const AnvilNode = ({
</Box> </Box>
<Box> <Box>
<Switch <Switch
checked={node.state === 'ready'} checked={host.state === 'ready'}
disabled={!node.removable} disabled={!host.removable}
onChange={() => onChange={() =>
putJSON('/anvils/set_membership', { putJSON('/anvils/set_membership', {
host_uuid: node.host_uuid, host_uuid: host.host_uuid,
is_member: !(node.state === 'ready'), is_member: !(host.state === 'ready'),
}) })
} }
/> />
</Box> </Box>
</Box> </Box>
{node.state !== 'ready' && ( {host.state !== 'ready' && (
<> <>
<Box display="flex" width="100%" className={classes.state}> <Box display="flex" width="100%" className={classes.state}>
<Box> <Box>
<BodyText <BodyText
text={selectStateMessage( text={selectStateMessage(
messageRegex, messageRegex,
node.state_message, host.state_message,
)} )}
/> />
</Box> </Box>
</Box> </Box>
<Box display="flex" width="100%" className={classes.bar}> <Box display="flex" width="100%" className={classes.bar}>
<Box flexGrow={1}> <Box flexGrow={1}>
<ProgressBar progressPercentage={node.state_percent} /> <ProgressBar progressPercentage={host.state_percent} />
</Box> </Box>
</Box> </Box>
</> </>
@ -155,4 +155,4 @@ const AnvilNode = ({
); );
}; };
export default AnvilNode; export default AnvilHost;

16
striker-ui/components/Nodes/index.tsx → striker-ui/components/Hosts/index.tsx
Unescape View File

@ -1,11 +1,11 @@
import { useContext } from 'react'; import { useContext } from 'react';
import { Panel } from '../Panels'; import { Panel } from '../Panels';
import { HeaderText } from '../Text'; import { HeaderText } from '../Text';
import AnvilNode from './AnvilNode'; import AnvilHost from './AnvilHost';
import PeriodicFetch from '../../lib/fetchers/periodicFetch'; import PeriodicFetch from '../../lib/fetchers/periodicFetch';
import { AnvilContext } from '../AnvilContext'; import { AnvilContext } from '../AnvilContext';
const Nodes = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => { const Hosts = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
const { uuid } = useContext(AnvilContext); const { uuid } = useContext(AnvilContext);
const { data } = PeriodicFetch<AnvilStatus>( const { data } = PeriodicFetch<AnvilStatus>(
@ -14,12 +14,12 @@ const Nodes = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
return ( return (
<Panel> <Panel>
<HeaderText text="Nodes" /> <HeaderText text="Hosts" />
{anvil.findIndex((a) => a.anvil_uuid === uuid) !== -1 && data && ( {anvil.findIndex((a) => a.anvil_uuid === uuid) !== -1 && data && (
<AnvilNode <AnvilHost
nodes={anvil[anvil.findIndex((a) => a.anvil_uuid === uuid)].nodes.map( hosts={anvil[anvil.findIndex((a) => a.anvil_uuid === uuid)].hosts.map(
(node, index) => { (host, index) => {
return data.nodes[index]; return data.hosts[index];
}, },
)} )}
/> />
@ -28,4 +28,4 @@ const Nodes = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
); );
}; };
export default Nodes; export default Hosts;

10
striker-ui/components/Network/Network.tsx
Unescape View File

@ -72,12 +72,12 @@ const Network = (): JSX.Element => {
<BodyText text={bond.bond_name} /> <BodyText text={bond.bond_name} />
<BodyText text={`${bond.bond_speed}Mbps`} /> <BodyText text={`${bond.bond_speed}Mbps`} />
</Box> </Box>
{bond.nodes.map( {bond.hosts.map(
(node): JSX.Element => ( (host): JSX.Element => (
<Box p={1} key={node.host_name}> <Box p={1} key={host.host_name}>
<Box> <Box>
<BodyText text={node.host_name} selected={false} /> <BodyText text={host.host_name} selected={false} />
<BodyText text={node.link.link_name} /> <BodyText text={host.link.link_name} />
</Box> </Box>
</Box> </Box>
), ),

24
striker-ui/components/Network/processNetwork.ts
Unescape View File

@ -2,8 +2,8 @@ const processNetworkData = (data: AnvilNetwork): ProcessedNetwork => {
const processedBonds: string[] = []; const processedBonds: string[] = [];
const displayBonds: ProcessedNetwork = { bonds: [] }; const displayBonds: ProcessedNetwork = { bonds: [] };
data?.nodes.forEach((node) => { data?.hosts.forEach((host) => {
node.bonds.forEach((bond) => { host.bonds.forEach((bond) => {
const index = processedBonds.findIndex( const index = processedBonds.findIndex(
(processed: string) => processed === bond.bond_name, (processed: string) => processed === bond.bond_name,
); );
@ -15,18 +15,18 @@ const processNetworkData = (data: AnvilNetwork): ProcessedNetwork => {
bond_uuid: bond.bond_uuid, bond_uuid: bond.bond_uuid,
bond_speed: 0, bond_speed: 0,
bond_state: 'degraded', bond_state: 'degraded',
nodes: [ hosts: [
{ {
host_name: node.host_name, host_name: host.host_name,
host_uuid: node.host_uuid, host_uuid: host.host_uuid,
link: bond.links[0].is_active ? bond.links[0] : bond.links[1], link: bond.links[0].is_active ? bond.links[0] : bond.links[1],
}, },
], ],
}); });
} else { } else {
displayBonds.bonds[index].nodes.push({ displayBonds.bonds[index].hosts.push({
host_name: node.host_name, host_name: host.host_name,
host_uuid: node.host_uuid, host_uuid: host.host_uuid,
link: bond.links[0].is_active ? bond.links[0] : bond.links[1], link: bond.links[0].is_active ? bond.links[0] : bond.links[1],
}); });
} }
@ -35,11 +35,11 @@ const processNetworkData = (data: AnvilNetwork): ProcessedNetwork => {
/* eslint-disable no-param-reassign */ /* eslint-disable no-param-reassign */
displayBonds.bonds.forEach((bond) => { displayBonds.bonds.forEach((bond) => {
const nodeIndex = const hostIndex =
bond.nodes[0].link.link_speed > bond.nodes[1].link.link_speed ? 1 : 0; bond.hosts[0].link.link_speed > bond.hosts[1].link.link_speed ? 1 : 0;
bond.bond_speed = bond.nodes[nodeIndex].link.link_speed; bond.bond_speed = bond.hosts[hostIndex].link.link_speed;
bond.bond_state = bond.nodes[nodeIndex].link.link_state; bond.bond_state = bond.hosts[hostIndex].link.link_state;
}); });
return displayBonds; return displayBonds;
}; };

8
striker-ui/components/Servers.tsx
Unescape View File

@ -87,14 +87,14 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
server.server_state !== 'crashed' && server.server_state !== 'crashed' &&
anvil[ anvil[
anvil.findIndex((a) => a.anvil_uuid === uuid) anvil.findIndex((a) => a.anvil_uuid === uuid)
].nodes.map( ].hosts.map(
( (
node: AnvilListItemNode, host: AnvilStatusHost,
index: number, index: number,
): JSX.Element => ( ): JSX.Element => (
<Box p={1} key={node.node_uuid}> <Box p={1} key={host.host_uuid}>
<BodyText <BodyText
text={node.node_name} text={host.host_name}
selected={server.server_host_index === index} selected={server.server_host_index === index}
/> />
</Box> </Box>

22
striker-ui/components/SharedStorage/SharedStorage.tsx
Unescape View File

@ -4,7 +4,7 @@ import { Box } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles'; import { makeStyles } from '@material-ui/core/styles';
import { BodyText, HeaderText } from '../Text'; import { BodyText, HeaderText } from '../Text';
import { Panel, InnerPanel, PanelHeader } from '../Panels'; import { Panel, InnerPanel, PanelHeader } from '../Panels';
import SharedStorageNode from './SharedStorageNode'; import SharedStorageHost from './SharedStorageHost';
import PeriodicFetch from '../../lib/fetchers/periodicFetch'; import PeriodicFetch from '../../lib/fetchers/periodicFetch';
import { AnvilContext } from '../AnvilContext'; import { AnvilContext } from '../AnvilContext';
@ -44,20 +44,20 @@ const SharedStorage = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
</Box> </Box>
</Box> </Box>
</PanelHeader> </PanelHeader>
{fs?.nodes && {fs?.hosts &&
fs.nodes.map( fs.hosts.map(
( (
node: AnvilSharedStorageNode, host: AnvilSharedStorageHost,
index: number, index: number,
): JSX.Element => ( ): JSX.Element => (
<SharedStorageNode <SharedStorageHost
node={{ host={{
...node, ...host,
nodeInfo: ...anvil[
anvil[anvil.findIndex((a) => a.anvil_uuid === uuid)] anvil.findIndex((a) => a.anvil_uuid === uuid)
.nodes[index], ].hosts[index],
}} }}
key={fs.nodes[index].free} key={fs.hosts[index].free}
/> />
), ),
)} )}

24
striker-ui/components/SharedStorage/SharedStorageNode.tsx → striker-ui/components/SharedStorage/SharedStorageHost.tsx
Unescape View File

@ -20,38 +20,38 @@ const useStyles = makeStyles(() => ({
}, },
})); }));
const SharedStorageNode = ({ const SharedStorageHost = ({
node, host,
}: { }: {
node: AnvilSharedStorageNode; host: AnvilSharedStorageHost;
}): JSX.Element => { }): JSX.Element => {
const classes = useStyles(); const classes = useStyles();
return ( return (
<> <>
<Box display="flex" width="100%" className={classes.fs}> <Box display="flex" width="100%" className={classes.fs}>
<Box flexGrow={1}> <Box flexGrow={1}>
<BodyText text={node.nodeInfo?.node_name || 'Not Available'} /> <BodyText text={host.host_name || 'Not Available'} />
</Box> </Box>
<Box className={classes.decoratorBox}> <Box className={classes.decoratorBox}>
<Decorator colour={node.is_mounted ? 'ok' : 'error'} /> <Decorator colour={host.is_mounted ? 'ok' : 'error'} />
</Box> </Box>
<Box> <Box>
<BodyText text={node.is_mounted ? 'Mounted' : 'Not Mounted'} /> <BodyText text={host.is_mounted ? 'Mounted' : 'Not Mounted'} />
</Box> </Box>
</Box> </Box>
{node.is_mounted && ( {host.is_mounted && (
<> <>
<Box display="flex" width="100%" className={classes.fs}> <Box display="flex" width="100%" className={classes.fs}>
<Box flexGrow={1}> <Box flexGrow={1}>
<BodyText <BodyText
text={`Used: ${prettyBytes.default(node.total - node.free, { text={`Used: ${prettyBytes.default(host.total - host.free, {
binary: true, binary: true,
})}`} })}`}
/> />
</Box> </Box>
<Box> <Box>
<BodyText <BodyText
text={`Free: ${prettyBytes.default(node.free, { text={`Free: ${prettyBytes.default(host.free, {
binary: true, binary: true,
})}`} })}`}
/> />
@ -60,13 +60,13 @@ const SharedStorageNode = ({
<Box display="flex" width="100%" className={classes.bar}> <Box display="flex" width="100%" className={classes.bar}>
<Box flexGrow={1}> <Box flexGrow={1}>
<AllocationBar <AllocationBar
allocated={((node.total - node.free) / node.total) * 100} allocated={((host.total - host.free) / host.total) * 100}
/> />
</Box> </Box>
</Box> </Box>
<Box display="flex" justifyContent="center" width="100%"> <Box display="flex" justifyContent="center" width="100%">
<BodyText <BodyText
text={`Total Storage: ${prettyBytes.default(node.total, { text={`Total Storage: ${prettyBytes.default(host.total, {
binary: true, binary: true,
})}`} })}`}
/> />
@ -77,4 +77,4 @@ const SharedStorageNode = ({
); );
}; };
export default SharedStorageNode; export default SharedStorageHost;

4
striker-ui/pages/index.tsx
Unescape View File

@ -2,7 +2,7 @@ import { Box } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles'; import { makeStyles } from '@material-ui/core/styles';
import Anvils from '../components/Anvils'; import Anvils from '../components/Anvils';
import Nodes from '../components/Nodes'; import Hosts from '../components/Hosts';
import CPU from '../components/CPU'; import CPU from '../components/CPU';
import SharedStorage from '../components/SharedStorage'; import SharedStorage from '../components/SharedStorage';
import Memory from '../components/Memory'; import Memory from '../components/Memory';
@ -59,7 +59,7 @@ const Home = (): JSX.Element => {
<Box className={classes.container}> <Box className={classes.container}>
<Box className={classes.child}> <Box className={classes.child}>
<Anvils list={data} /> <Anvils list={data} />
<Nodes anvil={data.anvils} /> <Hosts anvil={data.anvils} />
</Box> </Box>
<Box className={classes.server}> <Box className={classes.server}>
<Servers anvil={data.anvils} /> <Servers anvil={data.anvils} />

10
striker-ui/types/AnvilNetwork.d.ts vendored
Unescape View File

@ -6,20 +6,20 @@ declare type AnvilNetworkBondLink = {
is_active: boolean; is_active: boolean;
}; };
declare type AnvilNetworkNodeBond = { declare type AnvilNetworkHostBond = {
bond_name: string; bond_name: string;
bond_uuid: string; bond_uuid: string;
links: Array<AnvilNetworkBondLink>; links: Array<AnvilNetworkBondLink>;
}; };
declare type AnvilNetworkNode = { declare type AnvilNetworkHosts = {
host_name: string; host_name: string;
host_uuid: string; host_uuid: string;
bonds: Array<AnvilNetworkNodeBond>; bonds: Array<AnvilNetworkHostBond>;
}; };
declare type AnvilNetwork = { declare type AnvilNetwork = {
nodes: Array<AnvilNetworkNode>; hosts: Array<AnvilNetworkHosts>;
}; };
declare type ProcessedBond = { declare type ProcessedBond = {
@ -27,7 +27,7 @@ declare type ProcessedBond = {
bond_uuid: string; bond_uuid: string;
bond_speed: number; bond_speed: number;
bond_state: 'optimal' | 'degraded'; bond_state: 'optimal' | 'degraded';
nodes: Array<{ hosts: Array<{
host_name: string; host_name: string;
host_uuid: string; host_uuid: string;
link: { link: {

7
striker-ui/types/AnvilSharedStorage.d.ts vendored
Unescape View File

@ -1,13 +1,14 @@
declare type AnvilSharedStorageNode = { declare type AnvilSharedStorageHost = {
host_uuid: string;
host_name: string;
is_mounted: boolean; is_mounted: boolean;
total: number; total: number;
free: number; free: number;
nodeInfo?: AnvilListItemNode;
}; };
declare type AnvilSharedStorageFileSystem = { declare type AnvilSharedStorageFileSystem = {
mount_point: string; mount_point: string;
nodes: Array<AnvilSharedStorageNode>; hosts: Array<AnvilSharedStorageHost>;
}; };
declare type AnvilSharedStorage = { declare type AnvilSharedStorage = {

4
striker-ui/types/AnvilStatus.d.ts vendored
Unescape View File

@ -1,4 +1,4 @@
declare type AnvilStatusNode = { declare type AnvilStatusHost = {
state: 'unknown' | 'off' | 'on' | 'accessible' | 'ready'; state: 'unknown' | 'off' | 'on' | 'accessible' | 'ready';
host_uuid: string; host_uuid: string;
host_name: string; host_name: string;
@ -9,5 +9,5 @@ declare type AnvilStatusNode = {
declare type AnvilStatus = { declare type AnvilStatus = {
anvil_state: 'optimal' | 'not_ready' | 'degraded'; anvil_state: 'optimal' | 'not_ready' | 'degraded';
nodes: Array<AnvilStatusNode>; hosts: Array<AnvilStatusHost>;
}; };

6
striker-ui/types/NodeSet.d.ts vendored
Unescape View File

@ -1,11 +1,11 @@
declare type NodeSet = { declare type HostSet = {
host_uuid: string; host_uuid: string;
}; };
declare type NodeSetPower = NodeSet & { declare type HostSetPower = HostSet & {
is_on: boolean; is_on: boolean;
}; };
declare type NodeSetMembership = NodeSet & { declare type HostSetMembership = HostSet & {
is_membership: boolean; is_membership: boolean;
}; };

Write Preview
Loading…
Cancel
Save