From b4ec1fb45d1ca1fa7f47a5e4a6c11c195ddc7517 Mon Sep 17 00:00:00 2001
From: Matthew Penner <me@matthewp.io>
Date: Wed, 6 Jan 2021 09:52:07 -0700
Subject: [PATCH] NodesContainer: add more fields to table

---
 resources/scripts/api/admin/nodes/getNodes.ts | 13 ++++-
 .../components/admin/nodes/NodesContainer.tsx | 50 ++++++++++++++++++-
 2 files changed, 59 insertions(+), 4 deletions(-)

diff --git a/resources/scripts/api/admin/nodes/getNodes.ts b/resources/scripts/api/admin/nodes/getNodes.ts
index 45a020f0d..961fba1e8 100644
--- a/resources/scripts/api/admin/nodes/getNodes.ts
+++ b/resources/scripts/api/admin/nodes/getNodes.ts
@@ -1,6 +1,7 @@
 import http, { FractalResponseData, getPaginationSet, PaginatedResult } from '@/api/http';
 import { createContext, useContext } from 'react';
 import useSWR from 'swr';
+import { Location, rawDataToLocation } from '@/api/admin/locations/getLocations';
 
 export interface Node {
     id: number;
@@ -23,6 +24,10 @@ export interface Node {
     daemonBase: string;
     createdAt: Date;
     updatedAt: Date;
+
+    relations: {
+        location: Location | undefined;
+    };
 }
 
 export const rawDataToNode = ({ attributes }: FractalResponseData): Node => ({
@@ -46,6 +51,10 @@ export const rawDataToNode = ({ attributes }: FractalResponseData): Node => ({
     daemonBase: attributes.daemon_base,
     createdAt: new Date(attributes.created_at),
     updatedAt: new Date(attributes.updated_at),
+
+    relations: {
+        location: attributes.relationships?.location !== undefined ? rawDataToLocation(attributes.relationships.location as FractalResponseData) : undefined,
+    },
 });
 
 interface ctx {
@@ -55,11 +64,11 @@ interface ctx {
 
 export const Context = createContext<ctx>({ page: 1, setPage: () => 1 });
 
-export default () => {
+export default (include: string[] = []) => {
     const { page } = useContext(Context);
 
     return useSWR<PaginatedResult<Node>>([ 'nodes', page ], async () => {
-        const { data } = await http.get('/api/application/nodes', { params: { page } });
+        const { data } = await http.get('/api/application/nodes', { params: { include: include.join(','), page } });
 
         return ({
             items: (data.data || []).map(rawDataToNode),
diff --git a/resources/scripts/components/admin/nodes/NodesContainer.tsx b/resources/scripts/components/admin/nodes/NodesContainer.tsx
index af77eb498..f7737c8d6 100644
--- a/resources/scripts/components/admin/nodes/NodesContainer.tsx
+++ b/resources/scripts/components/admin/nodes/NodesContainer.tsx
@@ -9,6 +9,8 @@ import AdminContentBlock from '@/components/admin/AdminContentBlock';
 import AdminCheckbox from '@/components/admin/AdminCheckbox';
 import AdminTable, { TableBody, TableHead, TableHeader, TableRow, Pagination, Loading, NoItems, ContentWrapper } from '@/components/admin/AdminTable';
 import Button from '@/components/elements/Button';
+import CopyOnClick from '@/components/elements/CopyOnClick';
+import { bytesToHuman, megabytesToBytes } from '@/helpers';
 
 const RowCheckbox = ({ id }: { id: number}) => {
     const isChecked = AdminContext.useStoreState(state => state.nodes.selectedNodes.indexOf(id) >= 0);
@@ -35,7 +37,7 @@ const NodesContainer = () => {
 
     const { page, setPage } = useContext(NodesContext);
     const { clearFlashes, clearAndAddHttpError } = useFlash();
-    const { data: nodes, error, isValidating } = getNodes();
+    const { data: nodes, error, isValidating } = getNodes([ 'location' ]);
 
     useEffect(() => {
         if (!error) {
@@ -91,6 +93,11 @@ const NodesContainer = () => {
                                         <TableHead>
                                             <TableHeader name={'ID'}/>
                                             <TableHeader name={'Name'}/>
+                                            <TableHeader name={'Location'}/>
+                                            <TableHeader name={'FQDN'}/>
+                                            <TableHeader name={'Total Memory'}/>
+                                            <TableHeader name={'Total Disk'}/>
+                                            <th css={tw`px-6 py-2`}/>
                                         </TableHead>
 
                                         <TableBody>
@@ -101,12 +108,51 @@ const NodesContainer = () => {
                                                             <RowCheckbox id={node.id}/>
                                                         </td>
 
-                                                        <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{node.id}</td>
+                                                        <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                                            <CopyOnClick text={node.id.toString()}>
+                                                                <code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{node.id}</code>
+                                                            </CopyOnClick>
+                                                        </td>
+
                                                         <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
                                                             <NavLink to={`${match.url}/${node.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
                                                                 {node.name}
                                                             </NavLink>
                                                         </td>
+
+                                                        {/* TODO: Have permission check for displaying location information. */}
+                                                        <td css={tw`px-6 text-sm text-left whitespace-nowrap`}>
+                                                            <NavLink to={`/admin/locations/${node.relations.location?.id}`} css={tw`text-primary-400 hover:text-primary-300`}>
+                                                                <div css={tw`text-sm text-neutral-200`}>
+                                                                    {node.relations.location?.short}
+                                                                </div>
+
+                                                                <div css={tw`text-sm text-neutral-400`}>
+                                                                    {node.relations.location?.long}
+                                                                </div>
+                                                            </NavLink>
+                                                        </td>
+
+                                                        <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>
+                                                            <CopyOnClick text={node.fqdn}>
+                                                                <code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>{node.fqdn}</code>
+                                                            </CopyOnClick>
+                                                        </td>
+
+                                                        <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{bytesToHuman(megabytesToBytes(node.memory))}</td>
+                                                        <td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{bytesToHuman(megabytesToBytes(node.disk))}</td>
+
+                                                        <td css={tw`px-6 whitespace-nowrap`}>
+                                                            { node.scheme === 'https' ?
+                                                                <span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-green-100 text-green-800`}>
+                                                                    Secure
+                                                                </span>
+                                                                :
+                                                                <span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-red-200 text-red-800`}>
+                                                                    Non-Secure
+                                                                </span>
+                                                            }
+                                                        </td>
                                                     </TableRow>
                                                 ))
                                             }