refactor: translate and display node state messages

striker-ui/components/Nodes/AnvilNode.tsx

@@ -4,6 +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 putJSON from '../../lib/fetchers/putJSON';
 
@@ -38,6 +39,15 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
+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 'Error code not found';
+};
+
 const selectDecorator = (state: string): Colours => {
   switch (state) {
     case 'ready':
@@ -58,7 +68,8 @@ const AnvilNode = ({
   nodes: Array<AnvilStatusNode & AnvilListItemNode>;
 }): JSX.Element => {
   const classes = useStyles();
-  const regex = /(^|| )+[a-zA-Z0-9]/;
+  const stateRegex = /^[a-zA-Z]/;
+  const messageRegex = /^(message_[0-9]+)/;
 
   return (
     <Box className={classes.root}>
@@ -78,8 +89,9 @@ const AnvilNode = ({
                     <Box>
                       <BodyText
                         text={
-                          node?.state?.replace(regex, (c) => c.toUpperCase()) ||
-                          'Not Available'
+                          node?.state?.replace(stateRegex, (c) =>
+                            c.toUpperCase(),
+                          ) || 'Not Available'
                         }
                       />
                     </Box>
@@ -119,11 +131,13 @@ const AnvilNode = ({
                 {node.state !== 'ready' && (
                   <>
                     <Box display="flex" width="100%" className={classes.state}>
-                      <Box flexGrow={1}>
-                        <BodyText text={`State: ${node.state}`} />
-                      </Box>
                       <Box>
-                        <BodyText text={node.state_message} />
+                        <BodyText
+                          text={selectStateMessage(
+                            messageRegex,
+                            node.state_message,
+                          )}
+                        />
                       </Box>
                     </Box>
                     <Box display="flex" width="100%" className={classes.bar}>

striker-ui/lib/consts/NODES.ts

@@ -1,9 +1,18 @@
-const nodeState: ReadonlyMap<string, string> = new Map([
-  ['unknown', 'Unknown'],
-  ['off', 'Off'],
-  ['on', 'On'],
-  ['accessible', 'Accessible'],
-  ['ready', 'Ready'],
+const NODE_STATUS_MESSAGE_MAP: ReadonlyMap<string, string> = new Map([
+  ['message_0222', 'The node is in an unknown state.'],
+  ['message_0223', 'The node is a full cluster member.'],
+  [
+    'message_0224',
+    'The node is coming online; the cluster resource manager is running (step 2/3).',
+  ],
+  [
+    'message_0225',
+    'The node is coming online; the node is a consensus cluster member (step 1/3).',
+  ],
+  [
+    'message_0226',
+    'The node has booted, but it is not (yet) joining the cluster.',
+  ],
 ]);
 
-export default nodeState;
+export default NODE_STATUS_MESSAGE_MAP;