feat(fastani): Add method to find previous jobs.

assets/api/fastani.ts

@@ -27,6 +27,17 @@ export class FastAniApi {
       })
   }
 
+  getJobInfo(jobId: string) {
+    return axios.get<FastAniJobInfo>(`${apiBase}/fastani/${jobId}/info`,
+      {
+        timeout: 60000,
+        params: {cacheKey: apiCacheKey},
+        validateStatus: function(status) {
+              return status < 500;
+        }
+      })
+  }
+
   getJobHeatmap(jobId: string, method: string) {
     return axios.get<FastAniJobHeatmap>(`${apiBase}/fastani/${jobId}/heatmap/${method}`,
       {
@@ -124,3 +135,16 @@ export interface FastAniJobHeatmap {
   spReps: string[],
   pctDone: number,
 }
+
+export enum FastAniJobStatus {
+  QUEUED = "queued",
+  RUNNING = "running",
+  FINISHED = "finished",
+  ERROR = "error"
+}
+
+export interface FastAniJobInfo {
+  jobId: string,
+  createdOn: number,
+  status: FastAniJobStatus,
+}

assets/css/global.css

@@ -44,6 +44,8 @@ https://nuxtjs.org/docs/2.x/features/transitions
   color: white !important;
 }
 
+
+
 /* Main container that wraps all default template pages */
 .gtdb-container {
   max-width: 1500px !important;

components/fastani/FastAniRecentJobs.vue

@@ -0,0 +1,247 @@
+<template>
+  <div>
+    <v-dialog
+      v-model="dialog"
+      max-width="1000px"
+    >
+      <template v-slot:activator="{ on, attrs }">
+        <v-btn
+          :disabled="isLoading"
+          class="white--text"
+          color="#5a6955"
+          depressed
+          small
+          v-bind="attrs"
+          v-on="on"
+        >
+          <v-icon left>
+            {{ svgHistory }}
+          </v-icon>
+          Previous jobs ({{ nPreviousJobs }})
+        </v-btn>
+      </template>
+      <v-card>
+
+        <v-card-title>
+          <v-icon left>
+            {{ svgHistory }}
+          </v-icon>
+          Previous Jobs
+
+          <v-spacer></v-spacer>
+          <v-btn
+            color="#5a6955"
+            dark
+            icon
+            outlined
+            small
+            @click="dialog = false"
+          >
+            <v-icon>
+              {{ svgClose }}
+            </v-icon>
+          </v-btn>
+        </v-card-title>
+
+        <v-card-text class="text--primary">
+
+          The most recent 50 jobs are shown below. Click on a job ID to view the results.
+
+          <v-data-table
+            :headers="tableHeaders"
+            :items="rows"
+            :loading="isLoading"
+            class="gtdb-table mt-2"
+            dense
+            multi-sort
+          >
+            <!-- Job ID column -->
+            <template v-slot:item.jobId="{ item }">
+              <a :href="`fastani?job-id=${item.jobId}`">
+                {{ item.jobId }}
+              </a>
+            </template>
+
+            <!-- Creation column -->
+            <template v-slot:item.createdOn="{ item }">
+              {{ convertEpochToString(item.createdOn) }}
+            </template>
+
+            <!-- Status column -->
+            <template v-slot:item.status="{ item }">
+              <v-chip v-if="item.status === 'running'" color="orange" small text-color="white">
+                {{ item.status }}
+              </v-chip>
+              <v-chip v-else-if="item.status === 'finished'" color="green" small text-color="white">
+                {{ item.status }}
+              </v-chip>
+              <v-chip v-else-if="item.status === 'error'" color="red" small text-color="white">
+                {{ item.status }}
+              </v-chip>
+              <v-chip v-else small text-color="white">
+                {{ item.status }}
+              </v-chip>
+            </template>
+
+            <!-- Delete column -->
+            <template v-slot:item.delete="{ item }">
+              <v-btn
+                depressed
+                icon
+                small
+                @click="removeJob(item.jobId)"
+              >
+                <v-icon>
+                  {{ svgRemoveRow }}
+                </v-icon>
+              </v-btn>
+            </template>
+          </v-data-table>
+
+        </v-card-text>
+      </v-card>
+
+    </v-dialog>
+  </div>
+</template>
+
+
+<script lang="ts">
+import Vue from 'vue';
+import {FastAniJobInfo} from "~/assets/api/fastani";
+import {mdiClose, mdiHistory, mdiTrashCanOutline} from "@mdi/js";
+
+
+export default Vue.extend({
+  data: () => ({
+    svgRemoveRow: mdiTrashCanOutline,
+    svgHistory: mdiHistory,
+    svgClose: mdiClose,
+    isLoading: true,
+    panelExpanded: [],
+    dialog: false,
+    fastAniJobCookieName: process.env.fastAniJobCookieName,
+    rows: [] as FastAniJobInfo[],
+
+    tableHeaders: [
+      {
+        text: 'Job ID',
+        value: 'jobId'
+      },
+      {
+        text: 'Created',
+        value: 'createdOn'
+      },
+      {
+        text: 'Status',
+        align: 'middle',
+        value: 'status'
+      },
+      {
+        text: 'Delete',
+        value: 'delete',
+        align: 'middle',
+        sortable: false
+      }
+    ],
+    tableItemsPerPage: 10,
+
+  }),
+
+  computed: {
+    nPreviousJobs(): string {
+      if (this.isLoading) {
+        return 'Loading...'
+      } else {
+        return this.rows.length.toLocaleString()
+      }
+    }
+  },
+
+  methods: {
+    // Return job ids from cookie
+    getJobIdsFromCookie(): string[] {
+      if (this.fastAniJobCookieName) {
+        const cookie = this.$cookies.get(this.fastAniJobCookieName);
+        if (cookie) {
+          return cookie.split(',');
+        }
+      }
+      return [];
+    },
+
+    // Updates the cookie and resets it to only those jobs in the rows
+    updateCookieFromRows(): void {
+      if (this.fastAniJobCookieName) {
+        const jobIds = this.rows.map((row) => row.jobId);
+        this.$cookies.set(this.fastAniJobCookieName, jobIds.join(','), {
+          path: '/',
+          maxAge: 60 * 60 * 24 * 365
+        });
+      }
+    },
+
+    // The main method to reload the content
+    async loadRecentJobs() {
+
+      // Load the job ids from the cookie
+      const jobIds = this.getJobIdsFromCookie();
+      if (jobIds.length === 0) {
+        this.isLoading = false;
+        return;
+      }
+
+      // There are jobs, load all of them asynchronously
+      try {
+        this.isLoading = true;
+        this.rows = [];
+        const promises = jobIds.map((jobId) => {
+          return this.$api.fastani.getJobInfo(jobId);
+        });
+        const results = await Promise.all(promises);
+        for (const result of results) {
+          if (result && result.status < 300 && result.status >= 200) {
+            this.rows.push({
+              jobId: result.data.jobId,
+              createdOn: result.data.createdOn,
+              status: result.data.status,
+            });
+          }
+        }
+
+        // If it was successful, update the cookie
+        this.updateCookieFromRows();
+
+      } finally {
+        this.isLoading = false;
+      }
+    },
+
+    removeJob(jobId: string): void {
+      console.log(jobId)
+
+      // Remove the job from the rows
+      this.rows = this.rows.filter((row) => row.jobId !== jobId);
+
+      // Remove the job from the cookie
+      this.updateCookieFromRows();
+
+    },
+
+    convertEpochToString(ts: number) {
+      const date = new Date(ts * 1000);
+      // convert to utc date
+      date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
+      return date.toLocaleString();
+    }
+  },
+
+  mounted() {
+    this.loadRecentJobs();
+  },
+
+})
+</script>
+
+<style scoped>
+</style>

nuxt.config.js

@@ -156,6 +156,7 @@ export default {
     latestStatsPageUrl: '/stats/r207',  // this is used to point to the latest stats page,
     nuxtVersion: version,
     apiCacheKey: loadApiVersion(),
+    fastAniJobCookieName: 'fastani-jobs'
   },
 
   // https://github.com/nuxt/telemetry