feat: node ui

app/Transformers/Api/Application/NodeTransformer.php

@@ -14,7 +14,7 @@ class NodeTransformer extends Transformer
     /**
      * List of resources that can be included.
      */
-    protected array $availableIncludes = ['allocations', 'location', 'servers'];
+    protected array $availableIncludes = ['allocations', 'location', 'servers', 'database_host'];
 
     /**
      * Return the resource name for the JSONAPI output.
@@ -45,6 +45,18 @@ public function transform(Node $model): array
         return $response;
     }
 
+    /**
+     * Return the database host associated with this node.
+     */
+    public function includeDatabaseHost(Node $node): Item|NullResource
+    {
+        if (!$this->authorize(AdminAcl::RESOURCE_DATABASE_HOSTS)) {
+            return $this->null();
+        }
+
+        return $this->item($node->databaseHost, new DatabaseHostTransformer());
+    }
+
     /**
      * Return the allocations associated with this node.
      */

resources/scripts/components/admin/nodes/NodeStatus.tsx

@@ -0,0 +1,29 @@
+import getNodeInformation, { NodeInformation } from '@/api/admin/nodes/getNodeInformation';
+import Tooltip from '@/components/elements/tooltip/Tooltip';
+import { faHeartPulse } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useEffect, useState } from 'react';
+import tw from 'twin.macro';
+
+export default function NodeStatus({ node }: { node: number }) {
+    const [info, setInfo] = useState<NodeInformation | null>(null);
+    useEffect(() => {
+        const getNodeStatus = async () => {
+            getNodeInformation(node)
+                .then(info => setInfo(info))
+                .catch(error => {
+                    console.error(error);
+                });
+        };
+        getNodeStatus();
+    }, []);
+
+    return (
+        <Tooltip content={info ? info.version : 'offline'}>
+            <FontAwesomeIcon
+                css={[tw`h-4 w-4 animate-pulse`, !info ? tw`text-red-300` : tw`text-green-300`]}
+                icon={faHeartPulse}
+            />
+        </Tooltip>
+    );
+}

resources/scripts/components/admin/nodes/NodesContainer.tsx

@@ -23,6 +23,8 @@ import AdminTable, {
 import Button from '@/components/elements/Button';
 import CopyOnClick from '@/components/elements/CopyOnClick';
 import { bytesToString, mbToBytes } from '@/lib/formatters';
+import NodeStatus from '@/components/admin/nodes/NodeStatus';
+import { Size } from '@/components/elements/button/types';
 
 const RowCheckbox = ({ id }: { id: number }) => {
     const isChecked = AdminContext.useStoreState(state => state.nodes.selectedNodes.indexOf(id) >= 0);
@@ -224,23 +226,7 @@ const NodesContainer = () => {
 
                                                 <td css={tw`px-6 whitespace-nowrap`}>
                                                     {/* TODO: Change color based off of online/offline status */}
-                                                    <svg
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                        viewBox="0 0 20 20"
-                                                        fill="currentColor"
-                                                        css={[
-                                                            tw`h-5 w-5`,
-                                                            node.scheme === 'https'
-                                                                ? tw`text-green-200`
-                                                                : tw`text-red-300`,
-                                                        ]}
-                                                    >
-                                                        <path
-                                                            clipRule="evenodd"
-                                                            fillRule="evenodd"
-                                                            d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
-                                                        />
-                                                    </svg>
+                                                    <NodeStatus node={node.id} />
                                                 </td>
                                             </TableRow>
                                         ))}