jupyter lab dashboard link

Author: oliver-sanders

changes.d/1982.feat.md

@@ -0,0 +1 @@
+Add link to Jupyter Lab from the Dashboard (if Jupyter Lab is installed).

package.json

@@ -42,6 +42,7 @@
     "mitt": "3.0.1",
     "nprogress": "1.0.0-1",
     "preact": "10.24.3",
+    "simple-icons": "2.17.1",
     "subscriptions-transport-ws": "0.11.0",
     "svg-pan-zoom": "3.6.2",
     "vue": "3.4.11",

src/model/User.model.js

@@ -16,7 +16,7 @@
  */
 
 export default class User {
-  constructor ({ username, owner, permissions, mode, initials, color }) {
+  constructor ({ username, owner, permissions, mode, initials, color, extensions }) {
     /**
      * @type {string}
      */
@@ -47,5 +47,9 @@ export default class User {
      * @type {string | null}
      */
     this.color = color
+    /**
+      * Jupyter server extensions.
+      */
+    this.extensions = extensions
   }
 }

src/utils/icons.js

@@ -0,0 +1,32 @@
+/**
+ * Copyright (C) NIWA & British Crown (Met Office) & Contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/**
+ * SVG icons for use in the Cylc UI:
+ * - Centralise icons for use throughout multiple components.
+ * - Define custom icons.
+ * - Reformat icons for other source.
+ *
+ * Note, the `<v-icon>` component expects icons in the MDI format i.e.:
+ * - A string representing an SVG path.
+ * - Consisting of a bezier curve (e.g. `M 0,0 C 1,1 Z`).
+ * - That fits within a 24px box.
+ */
+
+import { Jupyter } from 'simple-icons'
+
+export const jupyterLogo = Jupyter.svg.replace(/.*d="(.*)".*/, '$1')

src/views/Dashboard.vue

@@ -95,6 +95,27 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               You are not running Cylc UI via Cylc Hub.
             </v-tooltip>
           </div>
+          <div>
+            <v-list-item
+              id="jupyter-lab-button"
+              :disabled="!user.extensions?.lab"
+              :href="user.extensions?.lab"
+              target="_blank"
+            >
+              <template v-slot:prepend>
+                <v-icon size="1.6em">{{ $options.icons.jupyterLogo }}</v-icon>
+              </template>
+              <v-list-item-title class="text-h6 font-weight-light">
+                Jupyter Lab
+              </v-list-item-title>
+              <v-list-item-subtitle>
+                Open Jupyter Lab in a new browser tab.
+              </v-list-item-subtitle>
+            </v-list-item>
+            <v-tooltip :disabled="user.extensions?.lab">
+              Jupyter Lab is not installed.
+            </v-tooltip>
+          </div>
         </v-list>
       </v-col>
       <v-col md="6" lg="6">
@@ -141,6 +162,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <script>
 import { mapState, mapGetters } from 'vuex'
 import { mdiBook, mdiBookMultiple, mdiBookOpenVariant, mdiCog, mdiHubspot, mdiTable } from '@mdi/js'
+import { jupyterLogo } from '@/utils/icons'
 import subscriptionComponentMixin from '@/mixins/subscriptionComponent'
 import { createUrl } from '@/utils/urls'
 import { WorkflowState, WorkflowStateOrder } from '@/model/WorkflowState.model'
@@ -250,6 +272,7 @@ export default {
     quickstart: mdiBook,
     workflow: mdiBookOpenVariant,
     documentation: mdiBookMultiple,
+    jupyterLogo,
   },
 }
 </script>

src/views/UserProfile.vue

@@ -48,6 +48,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </v-col>
               </v-row>
 
+              <v-row no-gutters class="align-center wrap">
+                <v-col cols="3">
+                  <span>Jupyter Server Extensions</span>
+                </v-col>
+                <v-col cols="9">
+                  <v-text-field
+                      :model-value="Object.keys(user.extensions).join(', ') || 'None'"
+                      disabled
+                      id="profile-extensions"
+                      aria-disabled="true"
+                      class="text-body-1"
+                  />
+                </v-col>
+              </v-row>
+
               <v-row no-gutters class="align-center wrap">
                 <v-col cols="3">
                   <span>{{ $t('UserProfile.permissions') }}</span>

tests/e2e/specs/dashboard.cy.js

@@ -54,6 +54,12 @@ describe('Dashboard', () => {
       .should('have.class', 'v-list-item--disabled')
   })
 
+  it('Disables Jupyter Lab button when not installed', () => {
+    cy
+      .get('#jupyter-lab-button')
+      .should('have.class', 'v-list-item--disabled')
+  })
+
   for (const ref of ['workflow-table-link', 'user-settings-link', 'quickstart-link']) {
     it(`Visits ${ref}`, () => {
       cy.get(`[data-cy=${ref}`)

yarn.lock

@@ -3609,6 +3609,7 @@ __metadata:
     nyc: "npm:17.1.0"
     preact: "npm:10.24.3"
     sass: "npm:1.77.8"
+    simple-icons: "npm:2.17.1"
     sinon: "npm:19.0.2"
     standard: "npm:17.1.2"
     subscriptions-transport-ws: "npm:0.11.0"
@@ -8984,6 +8985,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"simple-icons@npm:2.17.1":
+  version: 2.17.1
+  resolution: "simple-icons@npm:2.17.1"
+  checksum: 10c0/134bcac6e5c9f737dafe2d24a323f78259dd5a8bb31ea0034469ccac837242ec75982a1fd63e23e33f516e0fedb65cb254209e414142ac4d6ccb75d5fba041ee
+  languageName: node
+  linkType: hard
+
 "simple-update-notifier@npm:^2.0.0":
   version: 2.0.0
   resolution: "simple-update-notifier@npm:2.0.0"