Merge pull request #265 from multinet-app/waxlamp/git-sha

Add an "about" panel that can optionally include a Git SHA

client/.gitignore

@@ -19,3 +19,6 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw?
+
+# Deployment files
+git-sha

client/src/components/AboutDialog.vue

@@ -0,0 +1,93 @@
+<template>
+  <v-dialog
+    class="ws-dialog"
+    v-model="dialog"
+    width="500"
+    >
+    <template v-slot:activator="{ on }">
+      <v-btn
+        class="mt-n1 ml-n1"
+        icon
+        small
+        v-on="on"
+      >
+        <v-icon size="18">help</v-icon>
+      </v-btn>
+    </template>
+
+    <v-card>
+
+      <v-card-title
+        class="headline pb-0 pt-3"
+        primary-title
+        >
+        About Multinet
+      </v-card-title>
+
+      <v-card-text
+        class="px-4 pt-4 pb-1"
+        >
+        Multinet is a system for storing and processing <a
+          href="https://vdl.sci.utah.edu/mvnv/" rel="noopener
+          noreferrer">multivariate networks</a>. Learn more and explore the code
+        at <a href="https://github.com/multinet-app/multinet" rel="noopener
+          noreferrer">GitHub</a>.
+      </v-card-text>
+
+      <v-card-text
+        v-if="gitSha"
+        class="px-4 pt-4 pb-1"
+        >
+        This instance of Multinet was built from Git SHA
+        <a :href="gitShaURL" target="_blank" rel="noopener noreferrer">{{gitSha.slice(0, 6)}}</a>.
+      </v-card-text>
+
+      <v-divider />
+
+      <v-card-actions class="px-4 py-3">
+        <v-spacer />
+
+        <v-btn
+          color="grey darken-3"
+          dark
+          depressed
+          @click="dialog = false"
+          >
+          OK
+        </v-btn>
+      </v-card-actions>
+
+    </v-card>
+
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+declare const GIT_SHA: string;
+
+export default Vue.extend({
+  data() {
+    return {
+      dialog: false,
+    };
+  },
+
+  computed: {
+    gitSha(): string {
+      return GIT_SHA;
+    },
+
+    gitShaURL(this: any): string {
+      const {
+        gitSha,
+      } = this;
+
+      return `https://github.com/multinet-app/multinet/tree/${gitSha}`;
+    },
+  },
+
+});
+
+</script>

client/src/components/Sidebar.vue

@@ -17,6 +17,7 @@
           tag="button"
         >
           Multinet
+          <about-dialog />
         </router-link>
       </v-toolbar-title>
       <v-spacer />
@@ -77,6 +78,7 @@
         </v-list-item>
       </v-hover>
     </v-list>
+
   </v-navigation-drawer>
 </template>
 
@@ -86,6 +88,7 @@ import Vue from 'vue';
 import api from '@/api';
 import WorkspaceDialog from '@/components/WorkspaceDialog.vue';
 import DeleteWorkspaceDialog from '@/components/DeleteWorkspaceDialog.vue';
+import AboutDialog from '@/components/AboutDialog.vue';
 
 interface CheckboxTable {
   [index: string]: boolean;
@@ -103,6 +106,7 @@ export default Vue.extend({
   components: {
     DeleteWorkspaceDialog,
     WorkspaceDialog,
+    AboutDialog,
   },
 
   computed: {

client/vue.config.js

@@ -2,17 +2,28 @@ const fs = require('fs');
 const process = require('process');
 const path = require('path');
 const dotenv = require('dotenv');
+const webpack = require('webpack');
 
 const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
 
 // Read in .env file.
 const env = dotenv.parse(fs.readFileSync(path.resolve('..', '.env')));
 process.env.FLASK_SERVE_PORT = process.env.FLASK_SERVE_PORT || env.FLASK_SERVE_PORT || 5000;
 
+// Look for a git-sha file; if found, inject the value found in it into the
+// application.
+let GIT_SHA = null;
+if (fs.existsSync('git-sha')) {
+  GIT_SHA = JSON.stringify(fs.readFileSync('git-sha').toString().trim());
+}
+
 module.exports = {
   configureWebpack: {
     plugins: [
       new VuetifyLoaderPlugin(),
+      new webpack.DefinePlugin({
+        GIT_SHA,
+      }),
     ],
   },
   devServer: {