Create template for Diagnostics

src/components/DiagnosticsBody.vue

@@ -0,0 +1,126 @@
+<script lang="ts">
+import Vue from 'vue';
+
+import BadgeState from '@/components/BadgeState.vue';
+import SortableTable from '@/components/SortableTable/index.vue';
+
+export default Vue.extend({
+  name:       'DiagnosticsBody',
+  components: {
+    SortableTable,
+    BadgeState,
+  },
+  data() {
+    return {
+      headers: [
+        {
+          name:  'description',
+          label: 'Name',
+        },
+        {
+          name:  'documentation',
+          label: 'Documentation',
+        },
+        {
+          name:  'category',
+          label: 'Category',
+        },
+      ],
+      rows: [
+        {
+          id:            0,
+          description:   'The ~/.rd/bin directory has not been added to the PATH, so commandline utilities are not configured in your back shell',
+          documentation: 'https://docs.rancherdesktop.io/',
+          category:      'Kubernetes',
+          mute:          false,
+          fixes:         { description: 'You have selected manual PATH configuration, you can let Rancher Desktop automatically configure it.' },
+        },
+        {
+          id:            1,
+          description:   'Are the files under ~/.docker/cli-plugins symlinks to ~/.rd/bin?',
+          documentation: 'https://docs.rancherdesktop.io/',
+          category:      'Kubernetes',
+          mute:          false,
+          fixes:         { description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet iaculis diam. Nullam ut dolor nec dolor vestibulum viverra id a arcu.' },
+        },
+      ],
+    };
+  },
+});
+</script>
+
+<template>
+  <div class="diagnostics">
+    <div class="status">
+      <div class="item-results">
+        <span class="icon icon-dot text-error" />6 failed (0 muted)
+      </div>
+      <div class="diagnostics-status-history">
+        Last run: 52 minutes ago
+      </div>
+    </div>
+    <sortable-table
+      key-field="id"
+      :headers="headers"
+      :rows="rows"
+      :search="false"
+      :table-actions="false"
+      :row-actions="false"
+      :sub-rows="true"
+      :sub-expandable="true"
+      :sub-expand-column="true"
+    >
+      <template #col:description="{row}">
+        <td>
+          <span class="font-semibold">{{ row.description }}</span>
+        </td>
+      </template>
+      <template #col:documentation="{row}">
+        <td>
+          <a :href="row.documentation"><span class="icon icon-external-link" /></a>
+        </td>
+      </template>
+      <template #col:category="{row}">
+        <td>
+          <badge-state
+            :label="row.category"
+            color="bg-warning"
+          />
+        </td>
+      </template>
+      <template #sub-row="{row}">
+        <tr>
+          <!--We want an empty data cell so description will align with name-->
+          <td></td>
+          <td class="sub-row">
+            {{ row.fixes.description }}
+          </td>
+          <!--Empty data cells for remaining columns for row highlight-->
+          <td v-for="header in headers.length - 1" :key="header.name" />
+        </tr>
+      </template>
+    </sortable-table>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .diagnostics {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+
+    .status {
+      display: flex;
+
+      .item-results {
+        display: flex;
+        flex: 1;
+        gap: 0.5rem;
+      }
+    }
+
+    .font-semibold {
+      font-weight: 600;
+    }
+  }
+</style>

src/components/DiagnosticsButtonRun.vue

@@ -0,0 +1,32 @@
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({ name: 'diagnostics-button-run' });
+</script>
+
+<template>
+  <div class="diagnostics-actions">
+    <button class="btn btn-xs role-secondary">
+      <span class="icon icon-refresh icon-diagnostics"></span>
+      Rerun
+    </button>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .diagnostics-actions {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 0.5rem;
+  }
+
+  .btn-xs {
+    min-height: 2.25rem;
+    max-height: 2.25rem;
+    line-height: 0.25rem;
+  }
+
+  .icon-diagnostics {
+    padding-right: 0.25rem;
+  }
+</style>

src/components/Nav.vue

@@ -1,9 +1,14 @@
 <template>
   <nav>
     <ul>
-      <li v-for="item in items" :key="item" :item="item">
-        <NuxtLink :to="item">
-          {{ routes[item].name }}
+      <li v-for="item in items" :key="item.route" :item="item.route">
+        <NuxtLink :to="item.route">
+          {{ routes[item.route].name }}
+          <badge-state
+            v-if="item.error"
+            color="bg-error"
+            :label="item.error.toString()"
+          />
         </NuxtLink>
       </li>
     </ul>
@@ -13,8 +18,11 @@
 <script>
 import os from 'os';
 
+import BadgeState from '@/components/BadgeState.vue';
+
 export default {
-  props: {
+  components: { BadgeState },
+  props:      {
     items: {
       type:      Array,
       required:  true,
@@ -25,11 +33,11 @@ export default {
           return paths;
         }, {});
 
-        return value && (value.length > 0) && value.every((path) => {
-          const result = path in routes;
+        return value && (value.length > 0) && value.every(({ route }) => {
+          const result = route in routes;
 
           if (!result) {
-            console.error(`<Nav> error: path ${ JSON.stringify(path) } not found in routes ${ JSON.stringify(Object.keys(routes)) }`);
+            console.error(`<Nav> error: path ${ JSON.stringify(route) } not found in routes ${ JSON.stringify(Object.keys(routes)) }`);
           }
 
           return result;

src/components/TheTitle.vue

@@ -2,11 +2,12 @@
 import Vue from 'vue';
 import { mapState } from 'vuex';
 
+import DiagnosticsButtonRun from '@/components/DiagnosticsButtonRun.vue';
 import ImagesButtonAdd from '@/components/ImagesButtonAdd.vue';
 
 export default Vue.extend({
   name:       'the-title',
-  components: { ImagesButtonAdd },
+  components: { ImagesButtonAdd, DiagnosticsButtonRun },
   data() {
     return {
       data() {

src/layouts/default.vue

@@ -42,12 +42,21 @@ export default {
 
   computed: {
     routes() {
-      return [
-        '/General',
-        '/PortForwarding',
-        '/Images',
-        '/Troubleshooting',
+      const routeTable = [
+        { route: '/General' },
+        { route: '/PortForwarding' },
+        { route: '/Images' },
+        { route: '/Troubleshooting' },
       ];
+
+      if (this.featureDiagnostics) {
+        routeTable.push({ route: '/Diagnostics', error: 3 });
+      }
+
+      return routeTable;
+    },
+    featureDiagnostics() {
+      return !!this.$config.featureDiagnostics;
     },
   },
 

src/nuxt.config.js

@@ -79,6 +79,7 @@ export default {
       '~assets/styles/base/_mixins.scss',
     ],
   },
-  target:    'static',
-  telemetry: false,
+  target:              'static',
+  telemetry:           false,
+  publicRuntimeConfig: { featureDiagnostics: process.env.RD_ENV_DIAGNOSTICS === '1' },
 };

src/pages/Diagnostics.vue

@@ -0,0 +1,23 @@
+<script lang="ts">
+import Vue from 'vue';
+
+import DiagnosticsBody from '@/components/DiagnosticsBody.vue';
+
+export default Vue.extend({
+  name:       'diagnostics',
+  components: { DiagnosticsBody },
+  mounted() {
+    this.$store.dispatch(
+      'page/setHeader',
+      {
+        title:  'Diagnostics',
+        action: 'diagnostics-button-run',
+      },
+    );
+  },
+});
+</script>
+
+<template>
+  <diagnostics-body></diagnostics-body>
+</template>