From 0db0a94a05adc7b080621394bc3556576af5609f Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Fri, 19 Nov 2021 11:00:42 -0500
Subject: [PATCH] style(striker-ui): fix style linting errors in components

---
 striker-ui/components/Hosts/AnvilHost.tsx     | 141 +++++++++---------
 .../components/Resource/ResourceVolumes.tsx   |  72 +++++----
 2 files changed, 113 insertions(+), 100 deletions(-)

diff --git a/striker-ui/components/Hosts/AnvilHost.tsx b/striker-ui/components/Hosts/AnvilHost.tsx
index b50e3038..1d013707 100644
--- a/striker-ui/components/Hosts/AnvilHost.tsx
+++ b/striker-ui/components/Hosts/AnvilHost.tsx
@@ -73,84 +73,89 @@ const AnvilHost = ({
   return (
     <Box className={classes.root}>
       {hosts &&
-        hosts.map((host): JSX.Element => {
-          return (
-            <InnerPanel key={host.host_uuid}>
-              <PanelHeader>
-                <Box display="flex" width="100%" className={classes.header}>
+        hosts.map(
+          (host): JSX.Element => {
+            return (
+              <InnerPanel key={host.host_uuid}>
+                <PanelHeader>
+                  <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}>
-                    <BodyText text={host.host_name} />
+                    <Switch
+                      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 className={classes.decoratorBox}>
-                    <Decorator colour={selectDecorator(host.state)} />
+                  <Box className={classes.label}>
+                    <BodyText text="Member: " />
                   </Box>
                   <Box>
-                    <BodyText
-                      text={
-                        host?.state?.replace(stateRegex, (c) =>
-                          c.toUpperCase(),
-                        ) || 'Not Available'
+                    <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>
-              </PanelHeader>
-              <Box display="flex" className={classes.state}>
-                <Box className={classes.label}>
-                  <BodyText text="Power: " />
-                </Box>
-                <Box flexGrow={1}>
-                  <Switch
-                    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 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,
-                        )}
-                      />
+                {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>
-                  <Box display="flex" width="100%" className={classes.bar}>
-                    <Box flexGrow={1}>
-                      <ProgressBar progressPercentage={host.state_percent} />
+                    <Box display="flex" width="100%" className={classes.bar}>
+                      <Box flexGrow={1}>
+                        <ProgressBar progressPercentage={host.state_percent} />
+                      </Box>
                     </Box>
-                  </Box>
-                </>
-              )}
-            </InnerPanel>
-          );
-        })}
+                  </>
+                )}
+              </InnerPanel>
+            );
+          },
+        )}
     </Box>
   );
 };
diff --git a/striker-ui/components/Resource/ResourceVolumes.tsx b/striker-ui/components/Resource/ResourceVolumes.tsx
index 2903a723..a7ee79b4 100644
--- a/striker-ui/components/Resource/ResourceVolumes.tsx
+++ b/striker-ui/components/Resource/ResourceVolumes.tsx
@@ -78,41 +78,49 @@ const ResourceVolumes = ({
                   </Box>
                 </Box>
               </PanelHeader>
-              {volume.connections.map((connection, index): JSX.Element => {
-                return (
-                  <>
-                    <Box
-                      key={connection.fencing}
-                      display="flex"
-                      width="100%"
-                      className={classes.connection}
-                    >
-                      <Box className={classes.decoratorBox}>
-                        <Decorator
-                          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} />
+              {volume.connections.map(
+                (connection, index): JSX.Element => {
+                  return (
+                    <>
+                      <Box
+                        key={connection.fencing}
+                        display="flex"
+                        width="100%"
+                        className={classes.connection}
+                      >
+                        <Box className={classes.decoratorBox}>
+                          <Decorator
+                            colour={selectDecorator(
+                              connection.connection_state,
+                            )}
+                          />
                         </Box>
-                        <Box
-                          display="flex"
-                          justifyContent="center"
-                          width="100%"
-                        >
-                          <BodyText text={connection.connection_state} />
+                        <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
+                            display="flex"
+                            justifyContent="center"
+                            width="100%"
+                          >
+                            <BodyText text={connection.connection_state} />
+                          </Box>
                         </Box>
                       </Box>
-                    </Box>
-                    {volume.connections.length - 1 !== index ? (
-                      <Divider className={classes.divider} />
-                    ) : null}
-                  </>
-                );
-              })}
+                      {volume.connections.length - 1 !== index ? (
+                        <Divider className={classes.divider} />
+                      ) : null}
+                    </>
+                  );
+                },
+              )}
             </InnerPanel>
           );
         })}