From 2808fdd12361fc012849ccd05cdf6237224b8207 Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Tue, 24 Aug 2021 17:23:16 -0400
Subject: [PATCH] style(striker-ui): fix styling to make build succeed

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

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