Flesh out allocations table

Signed-off-by: josh <josh.timmons@hashicorp.com>

plugins/nomad/package.json

@@ -51,5 +51,30 @@
   },
   "files": [
     "dist"
-  ]
+  ],
+  "configSchema": {
+    "$schema": "https://backstage.io/schema/config-v1",
+    "title": "@backstage/nomad",
+    "type": "object",
+    "properties": {
+      "nomad": {
+        "type": "object",
+        "properties": {
+          "addr": {
+            "type": "string",
+            "description": "The address of the Nomad API. See: https://developer.hashicorp.com/nomad/api-docs#addressing-and-ports",
+            "visibility": "frontend"
+          },
+          "token": {
+            "type": "string",
+            "description": "The token to call the Nomad API with. See: https://developer.hashicorp.com/nomad/api-docs#authentication",
+            "visibility": "secret"
+          }
+        },
+        "required": [
+          "addr"
+        ]
+      }
+    }
+  }
 }

plugins/nomad/src/api.ts

@@ -54,6 +54,8 @@ export interface Allocation {
   CreateTime: number;
   DeploymentStatus: DeploymentStatus;
   ID: string;
+  JobID: string;
+  JobVersion: string;
   ModifyTime: number;
   Name: string;
   Namespace: string;

plugins/nomad/src/components/GroupList/AllocationListTable.tsx

@@ -0,0 +1,96 @@
+/*
+ * Copyright 2020 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  Link,
+  StatusError,
+  StatusOK,
+  StatusPending,
+  StatusRunning,
+  Table,
+  TableColumn,
+} from '@backstage/core-components';
+import React from 'react';
+import { Allocation } from '../../api';
+
+const columns: TableColumn<Allocation & { nomadAddr: string }>[] = [
+  {
+    title: 'ID',
+    render: row => (
+      <Link to={`${row.nomadAddr}/ui/allocations/${row.ID}`} underline="always">
+        {row.ID.split('-')[0]}
+      </Link>
+    ),
+  },
+  {
+    title: 'Task Group',
+    render: row => (
+      <Link
+        to={`${row.nomadAddr}/ui/jobs/${row.JobID}/${row.TaskGroup}`}
+        underline="always"
+      >
+        {row.TaskGroup}
+      </Link>
+    ),
+  },
+  {
+    title: 'Created',
+    render: row => new Date(row.CreateTime / 1000000).toLocaleString(),
+  },
+  {
+    title: 'Status',
+    render: row =>
+      ({
+        pending: <StatusPending>pending</StatusPending>,
+        running: <StatusOK>running</StatusOK>,
+        failed: <StatusError>failed</StatusError>,
+        complete: <StatusRunning>complete</StatusRunning>,
+      }[row.ClientStatus] || <text>{row.ClientStatus}</text>),
+  },
+  {
+    title: 'Version',
+    render: row => row.JobVersion,
+  },
+  {
+    title: 'Client',
+    render: row => (
+      <Link to={`${row.nomadAddr}/ui/clients/${row.NodeID}`} underline="always">
+        {row.ID.split('-')[0]}
+      </Link>
+    ),
+  },
+];
+
+/**
+ * AllocationListTable is roughly based off Nomad's Allocations tab's view.
+ */
+export const AllocationListTable = (props: {
+  allocations: Allocation[];
+  nomadAddr: string;
+}) => (
+  <Table
+    options={{
+      paging: false,
+      toolbar: false,
+    }}
+    columns={columns}
+    data={props.allocations.map(allocation => ({
+      ...allocation,
+      id: allocation.ID,
+      nomadAddr: props.nomadAddr,
+    }))}
+  />
+);

plugins/nomad/src/components/GroupList/GroupListForEntity.tsx

@@ -16,15 +16,16 @@
 
 import { Progress } from '@backstage/core-components';
 import React, { useState } from 'react';
-import { GroupListTable } from './GroupListTable';
+import { AllocationListTable } from './AllocationListTable';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import { Allocation, nomadApiRef } from '../../api';
-import { ErrorApiError, errorApiRef, useApi } from '@backstage/core-plugin-api';
+import { configApiRef, useApi } from '@backstage/core-plugin-api';
 import useAsync from 'react-use/lib/useAsync';
 import {
   NOMAD_GROUP_ANNOTATION,
   NOMAD_NAMESPACE_ANNOTATION,
 } from '../../Router';
+import { Alert } from '@material-ui/lab';
 
 export const GroupListForEntity = () => {
   const { entity } = useEntity();
@@ -33,8 +34,11 @@ export const GroupListForEntity = () => {
     entity.metadata.annotations?.[NOMAD_NAMESPACE_ANNOTATION] ?? 'default';
   const group = entity.metadata.annotations?.[NOMAD_GROUP_ANNOTATION] ?? '';
 
+  const configApi = useApi(configApiRef);
   const nomadApi = useApi(nomadApiRef);
-  const errorApi = useApi(errorApiRef);
+
+  // Get the Nomad server address for links in the table
+  const nomadAddr = configApi.getString('nomad.addr');
 
   // Retrieve allocations for the group
   const [allocations, setAllocations] = useState<Allocation[]>([]);
@@ -45,23 +49,23 @@ export const GroupListForEntity = () => {
     }
 
     // Issue call to nomad-backend
-    try {
-      const resp = await nomadApi.listAllocations({
-        namespace,
-        filter: `TaskGroup == "${group}"`,
-      });
-      setAllocations(resp.allocations);
-    } catch (e) {
-      errorApi.post(e as ErrorApiError);
-    }
+    const resp = await nomadApi.listAllocations({
+      namespace,
+      filter: `TaskGroup == "${group}"`,
+    });
+    setAllocations(
+      resp.allocations.sort((a, b) => b.CreateTime - a.CreateTime),
+    );
   }, [group]);
 
   if (response.loading) {
     return <Progress />;
   }
   if (response.error) {
-    return null;
+    return <Alert severity="error">{response.error.message}</Alert>;
   }
 
-  return <GroupListTable allocations={allocations} />;
+  return (
+    <AllocationListTable allocations={allocations} nomadAddr={nomadAddr} />
+  );
 };

plugins/nomad/src/components/GroupList/GroupListTable.tsx

@@ -1,47 +0,0 @@
-/*
- * Copyright 2020 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { Table, TableColumn } from '@backstage/core-components';
-import React from 'react';
-import { Allocation } from '../../api';
-
-const columns: TableColumn[] = [
-  {
-    title: 'Allocation ID',
-    field: 'ID',
-  },
-  {
-    title: 'Name',
-    field: 'Name',
-  },
-];
-
-export const GroupListTable = ({
-  allocations,
-}: {
-  allocations: Allocation[];
-}) => {
-  return (
-    <Table
-      options={{
-        paging: false,
-        toolbar: false,
-      }}
-      columns={columns}
-      data={allocations}
-    />
-  );
-};