Migrated status to about tab

src/components/appContent.vue

@@ -79,6 +79,17 @@
       >
         <i class="material-icons">{{ plugin.icon || "extension" }}</i>
       </tabIcon>
+
+      <tabIcon
+        id="about-tab-icon"
+        class="uk-margin-auto-top"
+        tab-i-d="about"
+        :require-connection="false"
+        :current-tab="currentTab"
+        @set-tab="setTab"
+      >
+        <i class="material-icons">info</i>
+      </tabIcon>
     </div>
 
     <!-- Corresponding vertical tab content -->
@@ -137,6 +148,14 @@
           @reloadForms="updatePlugins()"
         />
       </tabContent>
+
+      <tabContent
+        tab-i-d="about"
+        :require-connection="false"
+        :current-tab="currentTab"
+      >
+        <aboutContent class="section-content" />
+      </tabContent>
     </div>
   </div>
 </template>
@@ -155,6 +174,7 @@ import viewContent from "./tabContentComponents/viewContent.vue";
 import settingsContent from "./tabContentComponents/settingsContent.vue";
 import galleryContent from "./tabContentComponents/galleryContent.vue";
 import extensionContent from "./tabContentComponents/extensionContent.vue";
+import aboutContent from "./tabContentComponents/aboutContent.vue";
 
 // Import modal components for device initialisation
 import calibrationModal from "./modalComponents/calibrationModal.vue";
@@ -172,7 +192,8 @@ export default {
     settingsContent,
     galleryContent,
     extensionContent,
-    calibrationModal
+    calibrationModal,
+    aboutContent
   },
 
   data: function() {

src/components/controlComponents/devTools.vue

@@ -1,10 +1,7 @@
 <template>
   <div>
-    <form
+    <form class="uk-form-stacked" @submit.prevent="overrideAPIHost">
-      class="uk-form-stacked uk-width-medium"
+      <label class="uk-form-label">Override API origin</label>
-      @submit.prevent="overrideAPIHost"
-    >
-      <label class="uk-form-label">API origin</label>
       <input v-model="currentOrigin" class="uk-input" type="text" />
     </form>
   </div>

src/components/loadingContent.vue

@@ -11,7 +11,7 @@
       {{ $store.state.error }}
     </div>
     <div class="uk-align-center">
-      <devTools></devTools>
+      <devTools class="uk-width-medium"></devTools>
     </div>
   </div>
 </template>

src/components/tabContentComponents/aboutContent.vue

@@ -0,0 +1,35 @@
+<template>
+  <!-- Grid managing tab content -->
+  <div class="uk-height-1-1 view-component">
+    <div class="uk-padding-small">
+      <statusPane class="uk-width-large" />
+    </div>
+    <div class="uk-padding-small">
+      <h2>Links</h2>
+      <a
+        class="uk-link"
+        target="_blank"
+        href="https://gitlab.com/openflexure/openflexure-microscope-jsclient/-/issues"
+        >Report an issue</a
+      >
+    </div>
+    <div class="uk-padding-small">
+      <h2>Developer tools</h2>
+      <devTools class="uk-width-large" />
+    </div>
+  </div>
+</template>
+
+<script>
+import devTools from "../controlComponents/devTools.vue";
+import statusPane from "../viewComponents/statusPane.vue";
+
+export default {
+  name: "AboutContent",
+
+  components: {
+    devTools,
+    statusPane
+  }
+};
+</script>

src/components/viewComponents/settingsDisplay.vue

@@ -4,19 +4,6 @@
     <div class="settings-nav">
       <ul class="uk-nav uk-nav-default">
         <li class="uk-nav-header">Application settings</li>
-        <li>
-          <tabIcon
-            id="settings-status-icon"
-            tab-i-d="status"
-            :show-title="false"
-            :show-tooltip="false"
-            :require-connection="false"
-            :current-tab="currentTab"
-            @set-tab="setTab"
-          >
-            Status
-          </tabIcon>
-        </li>
         <li>
           <tabIcon
             id="settings-display-icon"
@@ -73,16 +60,6 @@
       </ul>
     </div>
     <div class="view-component uk-width-expand uk-padding-small">
-      <tabContent
-        tab-i-d="status"
-        :require-connection="false"
-        :current-tab="currentTab"
-      >
-        <div class="settings-pane uk-padding-small">
-          <statusPane />
-        </div>
-      </tabContent>
-
       <tabContent
         tab-i-d="display"
         :require-connection="false"
@@ -135,7 +112,6 @@
 </template>
 
 <script>
-import statusPane from "./settingsComponents/statusPane.vue";
 import streamSettings from "./settingsComponents/streamSettings.vue";
 import microscopeSettings from "./settingsComponents/microscopeSettings.vue";
 import cameraSettings from "./settingsComponents/cameraSettings.vue";
@@ -151,7 +127,6 @@ export default {
   name: "SettingsDisplay",
 
   components: {
-    statusPane,
     streamSettings,
     cameraSettings,
     microscopeSettings,
@@ -163,8 +138,8 @@ export default {
 
   data: function() {
     return {
-      selected: "status",
+      selected: "display",
-      currentTab: "status"
+      currentTab: "display"
     };
   },
 

src/components/viewComponents/statusPane.vue

@@ -1,12 +1,15 @@
 <template>
   <div class="host-input">
-    <h3>Status</h3>
+    <div v-if="configuration">
-    <div v-if="configuration && $store.getters.ready">
       <div>
         <div class="uk-margin-small-bottom">
-          <b>Host:</b>
+          <b>API origin:</b>
           <br />
-          {{ $store.state.host }}
+          {{ $store.state.origin }}
+          <br />
+          <b>API URL:</b>
+          <br />
+          {{ $store.getters.uriV2 }}
         </div>
       </div>
 
@@ -21,7 +24,7 @@
         {{ configuration.application.version }}
       </div>
       <div>
-        <b>OpenFlexure eV version:</b> <br />
+        <b>Client version:</b> <br />
         {{ clientVersionName }}
       </div>
 
@@ -69,7 +72,7 @@
       </div>
     </div>
     <div v-else-if="$store.state.waiting">
-      <progressBar></progressBar>
+      Loading...
     </div>
     <div v-else-if="$store.state.error">
       <b>Error:</b> {{ $store.state.error }}
@@ -80,14 +83,11 @@
 
 <script>
 import axios from "axios";
-import progressBar from "../../genericComponents/progressBar";
 
 export default {
   name: "StatusPane",
 
-  components: {
+  components: {},
-    progressBar
-  },
 
   data: function() {
     return {
@@ -113,18 +113,11 @@ export default {
     }
   },
 
-  created: function() {
+  mounted: function() {
     // Watch for host 'ready', then update configuration
-    this.$store.watch(
+    this.updateConfiguration();
-      (state, getters) => {
+    this.updateSettings();
-        return getters.ready;
+    this.updateSystemActions();
-      },
-      () => {
-        this.updateConfiguration();
-        this.updateSettings();
-        this.updateSystemActions();
-      }
-    );
   },
 
   methods: {