refactor: adopt back-end naming in all the components

main
Josue 4 years ago committed by Tsu-ba-me
parent ff9460cc49
commit f79b9e3f04
  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

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

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

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

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

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

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

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

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

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

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

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

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

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

Loading…
Cancel
Save