Merge pull request #10 from MatrixAI/feature-deployments

Deployments Visualization
MatrixAI · Jan 23, 2024 · 1c27da5 · 1c27da5
2 parents 8f8dac5 + 7d64104
commit 1c27da5
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 31 deletions.
diff --git a/src/components/NodeList.tsx b/src/components/NodeList.tsx
diff --git a/src/components/ResourceChart.tsx b/src/components/ResourceChart.tsx
@@ -100,8 +100,8 @@ function ResourceChart({
             },
             limits: {
               x: {
-                min: timestamps.at(-1),
-                max: timestamps.at(0),
+                min: timestamps.at(0),
+                max: timestamps.at(-1),
               },
             },
           },

diff --git a/src/components/SeedNodeCard.tsx b/src/components/SeedNodeCard.tsx
@@ -11,6 +11,9 @@ const NodeCard = React.forwardRef<
       agentPort: number;
       clientHost: string;
       clientPort: number;
+      versionMetadata: {
+        cliAgentCommitHash: string;
+      }
     };
   }
   // Complains about props not being validated
@@ -46,6 +49,12 @@ const NodeCard = React.forwardRef<
           <div className="overflow-x-auto break-normal">
             {data.clientHost}:{data.clientPort}
           </div>
+          <span className="font-semibold">Commit Hash:</span>
+          <div className="overflow-x-auto break-normal">
+              <a href={`https://github.com/MatrixAI/Polykey-CLI/commit/${data.versionMetadata.cliAgentCommitHash}`}>
+                {data.versionMetadata.cliAgentCommitHash}
+              </a>
+          </div>
         </>
       ) : (
         <></>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -46,6 +46,24 @@ export default function Home(): JSX.Element {
       ),
     refetchInterval: 60 * 1000,
   });
+  const deploymentsQuery = useQuery<Array<{
+    id: string;
+    commitHash: string;
+    startedOn: number;
+    finishedOn?: number;
+    progress: number;
+  }>>({
+    queryKey: ['deployments'],
+    queryFn: () =>
+      fetch(`${siteConfig.url}/api/deployments`).then((response) =>
+        response.json(),
+      ),
+    refetchInterval: 60 * 1000,
+  });
+
+  const seedNodesCommitHashes = seedNodesQuery.data == null ? undefined : Object.values(seedNodesQuery.data).map((seedNode) =>
+    seedNode.versionMetadata.cliAgentCommitHash
+  );
 
   return (
     <Layout
@@ -75,7 +93,7 @@ export default function Home(): JSX.Element {
               <></>
             )}
           </div>
-          <div className="w-full">
+          <div className="bg-[#E4F6F2] rounded-2xl p-3">
             <div className="w-full md:w-1/2 inline-block aspect-[1.5]">
               {resourceCpuQuery.data != null ? (
                 <ResourceChart title="CPU Usage" data={resourceCpuQuery.data} />
@@ -94,6 +112,51 @@ export default function Home(): JSX.Element {
               )}
             </div>
           </div>
+          <div className='bg-[#E4F6F2] rounded-2xl p-3'>
+            <span className="font-semibold">Deployments:</span>
+            <table className='w-full mt-3 max-h-96'>
+              <thead>
+                <tr>
+                  <th>ID</th>
+                  <th className='w-full'>Commit Hash</th>
+                  <th>Started On</th>
+                  <th>Finished On</th>
+                  <th>Nodes</th>
+                  <th>Progress</th>
+                </tr>
+              </thead>
+              <tbody>
+                {deploymentsQuery.data != null && deploymentsQuery.data.length !== 0 ? (
+                  deploymentsQuery.data.map(
+                    (deployment) => (
+                      <tr>
+                        <td>{deployment.id}</td>
+                        <td>
+                          <a href={`https://github.com/MatrixAI/Polykey-CLI/commit/${deployment.commitHash}`}>
+                            {deployment.commitHash}
+                          </a>
+                        </td>
+                        <td>{new Date(deployment.startedOn).toISOString()}</td>
+                        <td>{deployment.finishedOn == null ? "" : new Date(deployment.finishedOn).toISOString()}</td>
+                        <td>
+                          {seedNodesCommitHashes?.filter((commitHash) => commitHash === deployment.commitHash).length ?? 0}
+                        </td>
+                        <td>
+                          {deployment.progress * 100}%
+                        </td>
+                      </tr>
+                    ),
+                  )
+                ) : (
+                  <tr>
+                    <td colSpan={5} align="center">
+                      No deployments have been recorded
+                    </td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
     </Layout>