Another round of improvement

src/components/HeadNavigation.vue

@@ -41,15 +41,21 @@
           ></v-list-item>
         </v-list>
       </v-menu>
+      <v-spacer></v-spacer>
+      <ThemeSwitcher/>
     </v-system-bar>
 </template>
 
 <script>
     import { useAuth0 } from '@auth0/auth0-vue';
     import { getAppBaseUrl, isAuthEnabled } from '@/composables/runtime';
+    import ThemeSwitcher from '@/components/ThemeSwitcher.vue';
 
     export default {
       name: 'HeadNavigation',
+      components: {
+        ThemeSwitcher: ThemeSwitcher,
+      },
       setup() {
         if (isAuthEnabled) {
           const auth0 = useAuth0();

src/components/SideNavigation.vue

@@ -2,6 +2,7 @@
 
     <v-navigation-drawer
         v-model="drawer"
+        color="background"
         expand-on-hover
         permanent
         rail

src/components/ThemeSwitcher.vue

@@ -0,0 +1,70 @@
+<template>
+  <v-menu>
+    <template #activator="{ props }">
+      <v-btn
+        class="mt-5 mr-5"
+        icon="mdi-theme-light-dark"
+        v-bind="props"
+        variant="flat"
+        density="comfortable"
+      />
+    </template>
+
+    <v-list>
+      <v-list-item
+        title="Light"
+        prepend-icon="mdi-weather-sunny"
+        @click="setTheme('light')"
+      />
+      <v-list-item
+        title="Dark"
+        prepend-icon="mdi-weather-night"
+        @click="setTheme('dark')"
+      />
+      <v-list-item
+        title="System"
+        prepend-icon="mdi-monitor"
+        @click="setTheme('system')"
+      />
+    </v-list>
+  </v-menu>
+</template>
+
+<script setup>
+
+import { ref, watch } from 'vue'
+import { useTheme } from 'vuetify'
+import { getStorageKey } from '@/composables/runtime';
+
+const THEME_STORAGE_KEY = getStorageKey('theme');
+
+const theme = useTheme()
+const systemDark = window.matchMedia('(prefers-color-scheme: dark)')
+const savedMode = localStorage.getItem(THEME_STORAGE_KEY)
+
+const mode = ref(
+  savedMode === 'light' || savedMode === 'dark' || savedMode === 'system'
+    ? savedMode
+    : 'system'
+)
+
+function applyTheme(value) {
+  if (value === 'system') {
+    theme.change(systemDark.matches ? 'dark' : 'light')
+  } else {
+    theme.change(value)
+  }
+}
+
+function setTheme(value) {
+  mode.value = value
+}
+
+watch(mode, value => {
+  applyTheme(value)
+  localStorage.setItem(THEME_STORAGE_KEY, value)
+}, {
+  immediate: true,
+})
+
+</script>

src/components/pipeline/configs/ReportCard.vue

@@ -64,7 +64,7 @@
             size="small"
             prepend-icon="mdi-eye"
             block
-            :to="navigateToReport(report.ID)"
+            :to="getReportLink(report.ID)"
           >
             View Details
           </v-btn>
@@ -77,7 +77,6 @@
 <script>
 
 import { getStatusColor } from '@/composables/status'
-import { getAppBasePath } from '@/composables/runtime'
 
 export default {
   name: 'ReportCard',
@@ -99,8 +98,8 @@ export default {
   },
 
   methods: {
-    navigateToReport(reportId) {
-      return `${getAppBasePath().replace(/\/$/, "")}/pipeline/reports/${reportId}`
+    getReportLink(reportId) {
+      return `/pipeline/reports/${reportId}`
     },
     getStatusColor(result) {
       return getStatusColor(result)

src/components/pipeline/report.vue

@@ -359,8 +359,8 @@ export default {
   computed: {
     pipelineURLs() {
 
-      if (this.pipeline?.Pipeline?.ci != undefined) {
-        return [this.pipeline.Pipeline.ci.url]
+      if (this.pipeline?.Pipeline?.CI != undefined) {
+        return [this.pipeline.Pipeline.CI["URL"]]
       }
 
       const actions = this.pipeline?.Pipeline?.Actions

src/plugins/vuetify.js

@@ -7,23 +7,7 @@ import { createVuetify } from 'vuetify'
 import * as components from 'vuetify/components'
 import * as directives from 'vuetify/directives'
 
-const updatecliTheme = {
-  dark: true,
-  colors: {
-    background: '#FFFFFF',
-    surface: '#FFFFFF',
-    primary: '#6200EE',
-    'primary-darken-1': '#3700B3',
-    secondary: '#03DAC6',
-    'secondary-darken-1': '#018786',
-    error: '#B00020',
-    info: '#2196F3',
-    success: '#4CAF50',
-    warning: '#FB8C00',
-  }
-}
-
-const spaceTheme = {
+const darkTheme = {
   dark: true,
   colors: {
     background: '#070B12',
@@ -39,7 +23,7 @@ const spaceTheme = {
   }
 }
 
-const spaceLightTheme = {
+const lightTheme = {
   dark: false,
   colors: {
     background: '#F4F9FF',
@@ -55,54 +39,14 @@ const spaceLightTheme = {
   }
 }
 
-const deepSpaceNavyTheme = {
-  dark: true,
-  colors: {
-    background: '#060A14',
-    surface: '#0C1426',
-    primary: '#34D8FF',
-    'primary-darken-1': '#1D9FC4',
-    secondary: '#7CF7FF',
-    'secondary-darken-1': '#3CC4CE',
-    error: '#FF6A8B',
-    info: '#66B3FF',
-    success: '#3DE9A9',
-    warning: '#FFD166',
-  }
-}
-
-const nebulaGlowTheme = {
-  dark: true,
-  colors: {
-    background: '#120A24',
-    surface: '#1B1333',
-    primary: '#D36CFF',
-    'primary-darken-1': '#9A46C9',
-    secondary: '#52E7FF',
-    'secondary-darken-1': '#2AA8C2',
-    error: '#FF5F8A',
-    info: '#74C0FF',
-    success: '#47E0A1',
-    warning: '#FFC76A',
-  }
-}
-
 export default createVuetify({
   components,
   directives,
   theme: {
-    // Valid values: updatecliTheme | spaceTheme | spaceLightTheme | deepSpaceNavyTheme | nebulaGlowTheme
-    defaultTheme: "spaceTheme",
-    //defaultTheme: "updatecliTheme",
-    //defaultTheme: "deepSpaceNavyTheme",
-    //defaultTheme: "nebulaGlowTheme",
-    //defaultTheme: "spaceLightTheme",
+    defaultTheme: "system",
     themes: {
-      updatecliTheme: updatecliTheme,
-      spaceTheme: spaceTheme,
-      spaceLightTheme: spaceLightTheme,
-      deepSpaceNavyTheme: deepSpaceNavyTheme,
-      nebulaGlowTheme: nebulaGlowTheme,
+      light: lightTheme,
+      dark: darkTheme,
     }
   }
 }