Merge pull request #2135 from MetRonnie/dev

* Include cylc-flow & UIS version in sidebar.
* Simplify user service.

Author: MetRonnie

changes.d/2135.feat.md

@@ -0,0 +1 @@
+Show more Cylc version info in the sidebar.

src/components/cylc/Drawer.vue

@@ -33,7 +33,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           to="/"
         >
           <template v-slot:prepend>
-            <v-icon style="opacity: 1;">{{ $options.icons.mdiHome }}</v-icon>
+            <v-icon style="opacity: 1;">{{ mdiHome }}</v-icon>
           </template>
           <v-list-item-title>Dashboard</v-list-item-title>
         </v-list-item>
@@ -49,21 +49,43 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </div>
     <div class="resize-bar" ref="resizeBar"></div>
     <template v-slot:append>
-      <div class="px-4 py-2 d-flex justify-center">
-        <span class="text--secondary">
-          <strong v-if="$options.mode !== 'production'">{{ $options.mode.toUpperCase() }}</strong> {{ $t('App.name') }} {{ $options.version }}
-        </span>
+      <div class="pa-2 d-flex justify-center">
+        <v-chip
+          id="version-chip"
+          label
+          class="font-weight-bold cursor-default"
+          :prepend-icon="mdiInformationOutline"
+          v-bind="versionChipProps"
+        />
+        <v-tooltip
+          activator="#version-chip"
+          location="top"
+          >
+          <div
+            class="d-flex flex-column align-center"
+            style="pointer-events: visible;"
+            data-cy="version-tooltip"
+          >
+            <span
+              v-for="(value, key) in cylcVersionInfo"
+              :key="key"
+            >
+              {{ key }} {{ value }}
+            </span>
+            <span>cylc-ui {{ UIVersion }}</span>
+          </div>
+        </v-tooltip>
       </div>
     </template>
   </v-navigation-drawer>
 </template>
 
 <script>
-import { nextTick, ref } from 'vue'
+import { inject, nextTick, ref, computed } from 'vue'
 import { useDisplay } from 'vuetify'
 import Header from '@/components/cylc/Header.vue'
 import Workflows from '@/views/Workflows.vue'
-import { mdiHome, mdiGraphql } from '@mdi/js'
+import { mdiHome, mdiInformationOutline } from '@mdi/js'
 import pkg from '@/../package.json'
 import { when } from '@/utils'
 import { useDrawer } from '@/utils/toolbar'
@@ -122,18 +144,29 @@ export default {
       )
     })
 
+    const cylcVersionInfo = inject('versionInfo')
+    const versionChipProps = computed(() => import.meta.env.MODE === 'production'
+      ? {
+          text: `Cylc ${cylcVersionInfo.value?.['cylc-flow'] ?? ''}`,
+          variant: 'text'
+        }
+      : {
+          text: import.meta.env.MODE.toUpperCase(),
+          variant: 'flat',
+          color: 'indigo-darken-4',
+        }
+    )
+
     return {
       drawer,
       drawerWidth,
       resizeBar,
+      UIVersion: pkg.version,
+      cylcVersionInfo,
+      mdiInformationOutline,
+      mdiHome,
+      versionChipProps,
     }
   },
-
-  icons: {
-    mdiHome,
-    mdiGraphql,
-  },
-  mode: import.meta.env.MODE,
-  version: pkg.version,
 }
 </script>

src/graphql/graphiql.js

@@ -19,7 +19,7 @@
 
 import { parse } from 'graphql'
 import { createGraphQLUrls } from '@/graphql/index'
-import { getCylcHeaders } from '@/utils/urls'
+import { getXSRFHeaders } from '@/utils/urls'
 
 // TODO: https://github.com/apollographql/GraphiQL-Subscriptions-Fetcher/issues/16
 //       the functions hasSubscriptionOperation and graphQLFetcher are both from
@@ -115,7 +115,7 @@ function fallbackGraphQLFetcher (graphQLParams) {
       headers: {
         Accept: 'application/json',
         'Content-Type': 'application/json',
-        ...getCylcHeaders()
+        ...getXSRFHeaders()
       },
       body: JSON.stringify(graphQLParams),
       credentials: 'include'

src/graphql/index.js

@@ -27,7 +27,7 @@ import { getMainDefinition } from '@apollo/client/utilities'
 import { WebSocketLink } from '@apollo/client/link/ws'
 import { setContext } from '@apollo/client/link/context'
 import { store } from '@/store/index'
-import { createUrl, getCylcHeaders } from '@/utils/urls'
+import { createUrl, getXSRFHeaders } from '@/utils/urls'
 
 /** @typedef {import('subscriptions-transport-ws').ClientOptions} ClientOptions */
 
@@ -133,7 +133,7 @@ export function createApolloClient (httpUrl, subscriptionClient) {
     return {
       headers: {
         ...headers,
-        ...getCylcHeaders()
+        ...getXSRFHeaders()
       }
     }
   })

src/router/index.js

@@ -30,6 +30,7 @@ import { i18n } from '@/i18n'
 import paths from '@/router/paths'
 import { store } from '@/store/index'
 import { Alert } from '@/model/Alert.model'
+import { getUserProfile } from '@/services/user.service'
 
 const defaultPageTitle = i18n.global.t('App.name')
 
@@ -72,7 +73,7 @@ const router = createRouter({
 router.beforeEach(async (to, from) => {
   NProgress.start()
   if (!store.state.user.user) {
-    const user = await router.app.config.globalProperties.$userService.getUserProfile()
+    const user = await getUserProfile()
     // TODO: catch error getting user profile and redirect to static error page
     store.commit('user/SET_USER', user)
   }

src/services/mock/json-server.cjs

@@ -19,6 +19,7 @@
 const PORT = 3000
 
 const userProfile = require('./json/userprofile.json')
+const versionInfo = require('./json/version.json')
 const graphql = require('./graphql.cjs')
 const websockets = require('./websockets.cjs')
 
@@ -29,6 +30,7 @@ const server = jsonServer.create()
 require('express-ws')(server)
 const router = jsonServer.router({
   userProfile,
+  version: versionInfo,
 })
 const middlewares = [
   ...jsonServer.defaults({ logger: false }),

src/services/mock/json/version.json

@@ -0,0 +1,4 @@
+{
+  "cylc-flow": "X.Y.Z",
+  "cylc-uiserver": "X.Y.Z"
+}

src/services/plugin.js

@@ -15,9 +15,10 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import { shallowRef } from 'vue'
 import { createSubscriptionClient, createGraphQLUrls } from '@/graphql'
 import SubscriptionWorkflowService from '@/services/workflow.service'
-import UserService from '@/services/user.service'
+import { fetchData } from '@/utils/urls'
 
 /**
  * A plugin that loads the application services.
@@ -28,7 +29,10 @@ export default {
    */
   install (app) {
     this._installWorkflowService(app)
-    this._installUserService(app)
+
+    const versionInfo = shallowRef(null)
+    app.provide('versionInfo', versionInfo)
+    fetchData('version').then((data) => { versionInfo.value = data })
   },
 
   /**
@@ -51,16 +55,4 @@ export default {
     // Options API (legacy):
     app.config.globalProperties.$workflowService = workflowService
   },
-
-  /**
-   * Creates a user service for the application.
-   *
-   * The service is available as `Vue.$userService`.
-   *
-   * @private
-   * @param {Object} app - Vue application
-   */
-  _installUserService (app) {
-    app.config.globalProperties.$userService = new UserService()
-  }
 }

src/services/user.service.js

@@ -15,20 +15,13 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import axios from 'axios'
 import User from '@/model/User.model'
-import { createUrl, getCylcHeaders } from '@/utils/urls'
+import { fetchData } from '@/utils/urls'
 
-export default class UserService {
-  /**
-   * Gets the user profile from the backend server.
-   * @returns {Promise<User>} - a promise that dispatches Vuex action
-   */
-  async getUserProfile () {
-    const { data } = await axios.get(
-      createUrl('userprofile'),
-      { headers: getCylcHeaders() }
-    )
-    return new User(data)
-  }
+/**
+ * Gets the user profile from the backend server.
+ * @returns {Promise<User>}
+ */
+export async function getUserProfile () {
+  return new User(await fetchData('userprofile'))
 }

src/store/user.module.js

@@ -25,15 +25,8 @@ export const mutations = {
   }
 }
 
-export const actions = {
-  setUser ({ commit }, user) {
-    commit('SET_USER', user)
-  }
-}
-
 export const user = {
   namespaced: true,
   state,
   mutations,
-  actions
 }