ui: introduce vuex store

Author: sevein

.editorconfig

@@ -5,7 +5,7 @@ root = true
 [Makefile]
 indent_style = tab
 
-[*.js,*.ts]
+[*.js,*.ts,*.json]
 indent_style = space
 indent_size = 2
 

Makefile

@@ -68,16 +68,14 @@ ui-gen:
 
 ui-client:
 	rm -rf $(CURDIR)/ui/src/client
-	docker container run --rm --user $(shell id -u):$(shell id -g) --volume $(CURDIR):/local openapitools/openapi-generator-cli \
+	docker container run --rm --user $(shell id -u):$(shell id -g) --volume $(CURDIR):/local openapitools/openapi-generator-cli:v4.2.1 \
 		generate \
 			--input-spec /local/internal/api/gen/http/openapi.json \
 			--generator-name typescript-fetch \
-			--output /local/ui/src/client \
+			--output /local/ui/src/openapi-generator/ \
 			-p "generateAliasAsModel=true" \
 			-p "typescriptThreePlus=true" \
 			-p "withInterfaces=true"
-	rm $(CURDIR)/ui/src/client/tsconfig.json
-
 
 cadence-flush:
 	docker-compose exec mysql mysql -hlocalhost -uroot -proot123 -e "DROP DATABASE IF EXISTS cadence;"

ui/package.json

@@ -9,14 +9,17 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
+    "@types/vue-moment": "^4.0.0",
     "bootstrap": "^4.3.1",
     "bootstrap-vue": "^2.0.3",
     "core-js": "^2.6.5",
     "vue": "^2.6.10",
     "vue-class-component": "^7.0.2",
+    "vue-moment": "^4.0.0",
     "vue-property-decorator": "^8.1.0",
     "vue-router": "^3.0.3",
-    "vuex": "^3.0.1"
+    "vuex": "^3.0.1",
+    "vuex-class": "^0.3.2"
   },
   "devDependencies": {
     "@types/jest": "^23.1.4",

ui/src/client.ts

@@ -1,5 +1,4 @@
-import * as client from './client/src';
-
+import * as api from './openapi-generator';
 
 declare global {
   interface Window {
@@ -20,9 +19,9 @@ function apiPath(): string {
   return path.replace(/\/$/, '');
 }
 
-export let EnduroCollectionClient: client.CollectionApi;
+let EnduroCollectionClient: api.CollectionApi;
 
-export function setUpEnduroClient() {
+function setUpEnduroClient() {
   let path = apiPath();
 
   // path seems to be wrong when Enduro is deployed behind FortiNet SSLVPN.
@@ -32,8 +31,8 @@ export function setUpEnduroClient() {
     path = window.fgt_sslvpn.url_rewrite(path);
   }
 
-  const config: client.Configuration = new client.Configuration({basePath: path});
-  EnduroCollectionClient = new client.CollectionApi(config);
+  const config: api.Configuration = new api.Configuration({basePath: path});
+  EnduroCollectionClient = new api.CollectionApi(config);
 
   // tslint:disable-next-line:no-console
   console.log('Enduro client created', path);
@@ -45,3 +44,9 @@ window.enduro = {
     setUpEnduroClient();
   },
 };
+
+export {
+  EnduroCollectionClient,
+  setUpEnduroClient,
+  api,
+};

ui/src/client/.gitignore

@@ -15,12 +15,14 @@
             <dd>
               <CollectionStatusBadge :status="collection.status"/>
             </dd>
-            <template v-if="collection.original_id">
+            <template v-if="collection.originalId">
               <dt>OriginalID</dt>
               <dd>{{ collection.originalId }}</dd>
             </template>
             <dt>Created</dt>
-            <dd>{{ collection.createdAt | formatDateTime }}</dd>
+            <dd>
+              {{ collection.createdAt | formatDateTime }}
+            </dd>
             <template v-if="collection.transferId">
               <dt>Transfer</dt>
               <dd>{{ collection.transferId }}</dd>
@@ -34,7 +36,10 @@
               <dt>AIP</dt>
               <dd>{{ collection.aipId }}</dd>
               <dt>Completed</dt>
-              <dd>{{ collection.completedAt | formatDateTime }}</dd>
+              <dd>
+                {{ collection.completedAt | formatDateTime }}
+                (took {{ took(collection.createdAt, collection.completedAt) }})
+              </dd>
             </template>
           </dl>
           <hr />
@@ -76,32 +81,31 @@
 </template>
 
 <script lang="ts">
-import { CollectionShowResponseBody } from '../client/src';
-import { EnduroCollectionClient } from '../client';
+import { api, EnduroCollectionClient } from '../client';
 import { Component, Inject, Prop, Provide, Vue } from 'vue-property-decorator';
 import CollectionStatusBadge from '@/components/CollectionStatusBadge.vue';
+import moment from 'moment';
 
 @Component({
   components: {
     CollectionStatusBadge,
   },
 })
 export default class CollectionDetail extends Vue {
-
   private interval: number = 0;
   private collection: any = {};
 
-  private created() {
+  private mounted() {
     this.interval = setInterval(() => this.populate(), 500);
-    return this.populate();
+    this.populate();
   }
 
   private beforeDestroy() {
     clearInterval(this.interval);
   }
 
   private populate() {
-    EnduroCollectionClient.collectionShow({id: +this.$route.params.id}).then((response: CollectionShowResponseBody) => {
+    EnduroCollectionClient.collectionShow({id: +this.$route.params.id}).then((response: api.CollectionShowResponseBody) => {
       this.collection = response;
     });
   }
@@ -114,6 +118,11 @@ export default class CollectionDetail extends Vue {
     return ret;
   }
 
+  private took(created: Date, completed: Date): string {
+    const diff = moment(completed).diff(created);
+    return moment.duration(diff).humanize();
+  }
+
   private retry(id: string): Promise<any> {
     return EnduroCollectionClient.collectionRetry({id: +id});
   }

ui/src/client/.openapi-generator/VERSION

@@ -1,45 +1,72 @@
 <template>
   <div class="collection-list">
-    <table class="table table-bordered table-hover table-sm">
-      <thead class="thead">
-        <tr>
-          <th scope="col">ID</th>
-          <th scope="col">Name</th>
-          <th scope="col">Created</th>
-          <th scope="col">Completed</th>
-          <th scope="col">Status</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="item in collections" v-bind:key="item.id" @click="view(item.id)">
-          <th scope="row">{{ item.id }}</th>
-          <td class="collection-name">{{ item.name }}</td>
-          <td>{{ item.created_at | formatDateTime }}</td>
-          <td>{{ item.completed_at | formatDateTime }}</td>
-          <td>
-            <CollectionStatusBadge :status="item.status"/>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    <nav>
-      <ul class="pagination">
-        <li class="page-item">
-          <button class="page-link" @click="next('')">Reload</button>
-        </li>
-        <li class="page-item" v-if="nextCursor">
-          <button class="page-link" @click="next(nextCursor)">Next</button>
-        </li>
-      </ul>
-    </nav>
+    <template v-if="error">
+      <b-alert show dismissible variant="warning">
+        <h4 class="alert-heading">Search error</h4>
+        We couldn't connect to the API server. You may want to try again in a few seconds.
+        <hr />
+        <b-button @click="retryButtonClicked" class="m-1">Retry</b-button>
+      </b-alert>
+    </template>
+    <template v-else>
+      <div>
+        <b-form inline @submit="onSubmit" @reset="onReset" class="py-3">
+          <b-input-group size="sm" class="w-100">
+            <b-form-input autofocus v-model="query" type="text" placeholder="E.g.: a23bd138-4225-4cf7-845d-07a8983cf32f"></b-form-input>
+            <b-input-group-append>
+              <b-button type="submit" variant="info">Search</b-button>
+              <b-button type="reset">Reset</b-button>
+            </b-input-group-append>
+          </b-input-group>
+        </b-form>
+      </div>
+      <template v-if="results.length > 0">
+        <table class="table table-bordered table-hover table-sm">
+          <thead class="thead">
+            <tr>
+              <th scope="col">ID</th>
+              <th scope="col">Name</th>
+              <th scope="col">Created</th>
+              <th scope="col">Completed</th>
+              <th scope="col">Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="item in results" v-bind:key="item.id" @click="rowClicked(item.id)">
+              <th scope="row">{{ item.id }}</th>
+              <td class="collection-name">{{ item.name }}</td>
+              <td>{{ item.createdAt | formatDateTime }}</td>
+              <td>{{ item.completedAt | formatDateTime }}</td>
+              <td><CollectionStatusBadge :status="item.status"/></td>
+            </tr>
+          </tbody>
+        </table>
+        <nav>
+          <ul class="pagination">
+            <li class="page-item">
+              <button class="page-link" @click="reloadButtonClicked">Reload</button>
+            </li>
+            <li class="page-item" v-if="nextCursor">
+              <button class="page-link" @click="nextButtonClicked(nextCursor)">Next</button>
+            </li>
+          </ul>
+        </nav>
+      </template>
+      <div v-if="results.length === 0">
+        No results.
+      </div>
+    </template>
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Prop, Provide, Vue } from 'vue-property-decorator';
-import { EnduroCollectionClient } from '../client';
+import { Component, Vue } from 'vue-property-decorator';
+import { namespace } from 'vuex-class';
+import { api, EnduroCollectionClient } from '../client';
 import CollectionStatusBadge from '@/components/CollectionStatusBadge.vue';
-import { CollectionListRequest, CollectionListResponseBody, EnduroStoredCollectionResponseBodyCollection } from '../client/src';
+import * as CollectionStore from '../store/collection';
+
+const collectionStoreNs = namespace('collection');
 
 @Component({
   components: {
@@ -48,36 +75,85 @@ import { CollectionListRequest, CollectionListResponseBody, EnduroStoredCollecti
 })
 export default class CollectionList extends Vue {
 
-  private interval: number = 0;
-  private collections: EnduroStoredCollectionResponseBodyCollection = [];
-  private nextCursor?: string = '';
+  @collectionStoreNs.Getter(CollectionStore.GET_SEARCH_ERROR)
+  private error?: boolean;
+
+  @collectionStoreNs.Getter(CollectionStore.GET_SEARCH_RESULTS)
+  private results: any;
+
+  @collectionStoreNs.Getter(CollectionStore.GET_SEARCH_NEXT_CURSOR)
+  private nextCursor: any;
+
+  @collectionStoreNs.Action(CollectionStore.SEARCH_COLLECTIONS)
+  private search: any;
+
+  private query: string | null = null;
 
   private created() {
-    this.next();
+    this.search();
+  }
+
+  /**
+   * Performs search action.
+   *
+   * @remarks
+   * Search method for CollectionList. By default, it uses the cursor member of
+   * the class.
+   *
+   * @param cursor - Optional cursor. Set to null to reset the cursor.
+   */
+  private doSearch(cursor?: string | null) {
+    const attrs: any = {
+      query: this.query,
+      cursor: typeof(cursor) === 'undefined' ? this.nextCursor : cursor,
+    };
+    this.search(attrs);
+  }
+
+  /**
+   * Perform same search re-using all existing state.
+   */
+  private retryButtonClicked() {
+    this.doSearch();
   }
 
-  private load(cursor?: string) {
-    const request: CollectionListRequest = {};
-    if (cursor) {
-      request.cursor = cursor;
-    }
-    return EnduroCollectionClient.collectionList(request);
+  /**
+   * Perform search with the cursor reset.
+   */
+  private reloadButtonClicked() {
+    this.doSearch(null);
   }
 
-  private next(cursor?: string) {
-    this.load(cursor).then((response: CollectionListResponseBody) => {
-      this.collections = response.items;
-      this.nextCursor = response.nextCursor;
-    });
+  /*/
+   * Perform search with a new cursor.
+   */
+  private nextButtonClicked(cursor: string) {
+    this.doSearch(cursor);
   }
 
-  private view(id: string) {
-    this.$router.push({
-      name: 'collection',
-      params: {id},
-    });
+  /**
+   * Perform search with the cursor reset.
+   */
+  private onSubmit(event: Event) {
+    event.preventDefault();
+    this.doSearch(null);
   }
 
+  /**
+   * Perform search with both the query and cursor reset.
+   */
+  private onReset(event: Event) {
+    event.preventDefault();
+    this.query = null;
+    this.doSearch(null);
+  }
+
+  /**
+   * Forward user to the collection route.
+   */
+  private rowClicked(id: string) {
+    this.$router.push({ name: 'collection', params: {id} });
+  }
 }
 </script>