Add zone tag, closes #128

kthcloud · Dec 14, 2023 · 72eafc2 · 72eafc2
1 parent d62f9db
commit 72eafc2
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 20 deletions.
diff --git a/src/pages/deploy/Deploy.jsx b/src/pages/deploy/Deploy.jsx
@@ -88,7 +88,7 @@ export function Deploy() {
 
   const [filterName, setFilterName] = useState("");
 
-  const { userRows, user, initialLoad, queueJob } = useResource();
+  const { userRows, user, initialLoad, queueJob, zones } = useResource();
 
   const [filteredRows, setFilteredRows] = useState(userRows);
 
@@ -293,7 +293,11 @@ export function Deploy() {
     let statusMessage = t(row.status);
 
     return (
-      <Label variant="ghost" color={color}>
+      <Label
+        variant="ghost"
+        color={color}
+        startIcon={<Iconify icon="tabler:heartbeat" sx={{ opacity: 0.65 }} />}
+      >
         {sentenceCase(statusMessage)}
       </Label>
     );
@@ -312,12 +316,40 @@ export function Deploy() {
     }
 
     return (
-      <Label variant="ghost" color={color} style={{ fontFamily: "monospace" }}>
+      <Label
+        variant="ghost"
+        color={color}
+        style={{ fontFamily: "monospace" }}
+        startIcon={
+          <Iconify
+            icon="mdi:transit-connection-variant"
+            sx={{ opacity: 0.65 }}
+          />
+        }
+      >
         {row.pingResult + " " + getReasonPhrase(row.pingResult)}
       </Label>
     );
   };
 
+  const renderZone = (row) => {
+    if (!row.zone || !zones) {
+      return <></>;
+    }
+
+    const zone = zones.find((zone) => zone.name === row.zone);
+
+    return (
+      <Label
+        variant="ghost"
+        style={{ fontFamily: "monospace" }}
+        startIcon={<Iconify icon="mdi:earth" sx={{ opacity: 0.65 }} />}
+      >
+        {zone.description}
+      </Label>
+    );
+  };
+
   useEffect(() => {
     if (user && !user.onboarded) {
       navigate("/onboarding");
@@ -420,6 +452,7 @@ export function Deploy() {
                               >
                                 {renderResourceStatus(row)}
                                 {renderStatusCode(row)}
+                                {renderZone(row)}
                               </Stack>
                             </TableCell>
 

diff --git a/src/pages/edit/Edit.jsx b/src/pages/edit/Edit.jsx
@@ -45,14 +45,15 @@ import { HealthCheckRoute } from "./deployments/HealthCheckRoute";
 import { useTranslation } from "react-i18next";
 import DangerZone from "./DangerZone";
 import { ReplicaManager } from "./deployments/ReplicaManager";
+import Iconify from "src/components/Iconify";
 
 export function Edit() {
   const { t } = useTranslation();
   const { initialized } = useKeycloak();
   const [resource, setResource] = useState(null);
   const [envs, setEnvs] = useState([]);
   const [persistent, setPersistent] = useState([]);
-  const { user, rows, initialLoad } = useResource();
+  const { user, rows, initialLoad, zones } = useResource();
   const [loaded, setLoaded] = useState(false);
 
   const allowedTypes = ["vm", "deployment"];
@@ -126,22 +127,52 @@ export function Edit() {
                   <span style={{ fontWeight: 200 }}>{t("editing") + " "}</span>{" "}
                   {resource.name}
                 </Typography>
-                {resource.status && (
-                  <Chip
-                    label={sentenceCase(
-                      resource.status.replace("resource", "").trim()
-                    )}
-                  />
-                )}
-                {resource.pingResult && (
-                  <Chip
-                    label={
-                      sentenceCase(resource.pingResult.toString()) +
-                      " " +
-                      getReasonPhrase(resource.pingResult)
-                    }
-                  />
-                )}
+
+                <Stack
+                  direction="row"
+                  flexWrap={"wrap"}
+                  alignItems={"center"}
+                  spacing={3}
+                  useFlexGap={true}
+                >
+                  {resource.status && (
+                    <Chip
+                      label={sentenceCase(
+                        resource.status.replace("resource", "").trim()
+                      )}
+                      icon={
+                        <Iconify
+                          icon="tabler:heartbeat"
+                          sx={{ opacity: 0.75 }}
+                        />
+                      }
+                    />
+                  )}
+                  {resource.pingResult && (
+                    <Chip
+                      label={
+                        sentenceCase(resource.pingResult.toString()) +
+                        " " +
+                        getReasonPhrase(resource.pingResult)
+                      }
+                      icon={
+                        <Iconify
+                          icon="mdi:transit-connection-variant"
+                          sx={{ opacity: 0.75 }}
+                        />
+                      }
+                    />
+                  )}
+                  {resource.zone && zones && (
+                    <Chip
+                      label={
+                        zones.find((zone) => zone.name === resource.zone)
+                          .description
+                      }
+                      icon={<Iconify icon="mdi:earth" sx={{ opacity: 0.75 }} />}
+                    />
+                  )}
+                </Stack>
                 <div style={{ flexGrow: "1" }} />
 
                 {resource.type === "deployment" && (