@rancher/shell 0.1.0 → 0.1.1

package/pages/diagnostic.vue

@@ -0,0 +1,468 @@
+<script>
+import { CAPI } from '@shell/config/types';
+import AsyncButton from '@shell/components/AsyncButton';
+import { downloadFile } from '@shell/utils/download';
+import { filterOnlyKubernetesClusters, filterHiddenLocalCluster } from '@shell/utils/cluster';
+import { sortBy } from '@shell/utils/sort';
+import { Checkbox } from '@components/Form/Checkbox';
+
+export default {
+  layout:     'plain',
+  components: { AsyncButton, Checkbox },
+  async fetch() {
+    const provClusters = await this.$store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER });
+    const readyClusters = provClusters.filter(c => c.mgmt?.isReady);
+    const clusterForCounts = filterHiddenLocalCluster(filterOnlyKubernetesClusters(readyClusters), this.$store);
+    const finalCounts = [];
+    const promises = [];
+    let topTenForResponseTime = [];
+
+    clusterForCounts.forEach((cluster, i) => {
+      finalCounts.push({
+        id:             cluster.id,
+        capiId:         cluster.mgmt?.id,
+        counts:         null,
+        isTableVisible: i === 0
+      });
+      promises.push(this.$store.dispatch('management/request', { url: `/k8s/clusters/${ cluster.mgmt?.id }/v1/counts` }));
+    });
+
+    const countsPerCluster = await Promise.all(promises);
+
+    countsPerCluster.forEach((clusterCount, index) => {
+      const counts = clusterCount.data?.[0]?.counts;
+
+      if (counts) {
+        const sanitizedCount = [];
+
+        Object.keys(counts).forEach((key) => {
+          sanitizedCount[key] = counts[key].summary?.count;
+          sanitizedCount.push({
+            resource: key,
+            count:    counts[key].summary?.count || 0,
+          });
+        });
+
+        const sortedCount = sortBy(sanitizedCount, 'count:desc');
+
+        topTenForResponseTime = topTenForResponseTime.concat(sortedCount);
+        topTenForResponseTime = sortBy(topTenForResponseTime, 'count:desc');
+        topTenForResponseTime = topTenForResponseTime.splice(0, 10);
+
+        topTenForResponseTime.forEach((item, i) => {
+          topTenForResponseTime[i].id = finalCounts[index].id;
+          topTenForResponseTime[i].capiId = finalCounts[index].capiId;
+        });
+
+        finalCounts[index].counts = sortedCount;
+      }
+    });
+
+    this.topTenForResponseTime = topTenForResponseTime;
+    this.finalCounts = finalCounts;
+  },
+
+  data() {
+    const systemInformation = {
+      browserUserAgent: {
+        label: this.t('about.diagnostic.systemInformation.browserUserAgent'),
+        value: window?.navigator?.userAgent
+      },
+      browserLanguage: {
+        label: this.t('about.diagnostic.systemInformation.browserLanguage'),
+        value: window?.navigator?.language
+      },
+      cookieEnabled: {
+        label: this.t('about.diagnostic.systemInformation.cookieEnabled'),
+        value: window?.navigator?.cookieEnabled
+      },
+      hardwareConcurrency: {
+        label: this.t('about.diagnostic.systemInformation.hardwareConcurrency'),
+        value: window?.navigator?.hardwareConcurrency
+      },
+    };
+
+    if (window?.navigator?.userAgentData?.platform) {
+      systemInformation.os = {
+        label: this.t('about.diagnostic.systemInformation.os'),
+        value: window?.navigator?.userAgentData?.platform
+      };
+    }
+
+    if (window?.navigator?.deviceMemory) {
+      systemInformation.deviceMemory = {
+        label: this.t('about.diagnostic.systemInformation.deviceMemory'),
+        value: window?.navigator?.deviceMemory
+      };
+    }
+
+    if (window?.performance?.memory?.jsHeapSizeLimit) {
+      systemInformation.memJsHeapLimit = {
+        label: this.t('about.diagnostic.systemInformation.memJsHeapLimit'),
+        value: window?.performance?.memory?.jsHeapSizeLimit
+      };
+    }
+
+    if (window?.performance?.memory?.totalJSHeapSize) {
+      systemInformation.memTotalJsHeapSize = {
+        label: this.t('about.diagnostic.systemInformation.memTotalJsHeapSize'),
+        value: window?.performance?.memory?.totalJSHeapSize
+      };
+    }
+
+    if (window?.performance?.memory?.usedJSHeapSize) {
+      systemInformation.memUsedJsHeapSize = {
+        label: this.t('about.diagnostic.systemInformation.memUsedJsHeapSize'),
+        value: window?.performance?.memory?.usedJSHeapSize
+      };
+    }
+
+    // scroll logs container to the bottom
+    this.scrollLogsToBottom();
+
+    return {
+      systemInformation,
+      topTenForResponseTime: null,
+      finalCounts:           null,
+      includeResponseTimes:  true,
+      storeMapping:          this.$store?._modules?.root?.state,
+      latestLogs:            console.logs // eslint-disable-line no-console
+    };
+  },
+  watch: {
+    latestLogs() {
+      this.scrollLogsToBottom();
+    }
+  },
+  computed: {
+    name() {
+      return this.data;
+    }
+  },
+  methods: {
+    scrollLogsToBottom() {
+      this.$nextTick(() => {
+        const logsContainer = document.querySelector('.logs-container');
+
+        logsContainer.scrollTop = logsContainer.scrollHeight;
+      });
+    },
+    generateKey(data) {
+      const randomize = Math.random() * 10000;
+
+      return `key_${ randomize }_${ data }`;
+    },
+    async downloadData(btnCb) {
+      const date = new Date().toLocaleDateString();
+      const time = new Date().toLocaleTimeString();
+      const fileName = `rancher-diagnostic-data-${ date }-${ time.replaceAll(':', '_') }.json`;
+      const data = {
+        systemInformation: this.systemInformation,
+        logs:              this.latestLogs,
+        storeMapping:      this.parseStoreData(this.storeMapping),
+        resourceCounts:    this.finalCounts
+      };
+
+      if (this.includeResponseTimes) {
+        const responseTimes = await this.gatherResponseTimes();
+
+        data.responseTimes = responseTimes;
+      }
+
+      downloadFile(fileName, JSON.stringify(data), 'application/json')
+        .then(() => btnCb(true))
+        .catch(() => btnCb(false));
+    },
+    toggleTable(area) {
+      const itemIndex = this.finalCounts.findIndex(item => item.id === area);
+
+      this.finalCounts[itemIndex].isTableVisible = !this.finalCounts[itemIndex].isTableVisible;
+    },
+    async gatherResponseTimes() {
+      return await Promise.all(this.topTenForResponseTime.map((item) => {
+        const t = Date.now();
+
+        return this.$store.dispatch('management/request', { url: `/k8s/clusters/${ item.capiId }/v1/${ item.resource }` })
+          .then(() => ({
+            outcome: 'success', item, durationMs: Date.now() - t
+          }))
+          .catch(() => ({
+            outcome: 'error', item, durationMs: Date.now() - t
+          }));
+      })).then((responseTimes) => {
+        return responseTimes;
+      });
+    },
+    parseStoreData(rootStore) {
+      // clear potencial sensitive data
+      const disallowedDataKeys = [
+        'aws',
+        'digitalocean',
+        'linode',
+      ];
+
+      const clearListsKeys = [
+        'management',
+        'rancher',
+        'cluster',
+        'harvester',
+        'epinio',
+        'elemental',
+      ];
+
+      const cleanRootStore = {};
+
+      Object.entries(rootStore).forEach(([storeKey, store]) => {
+        if (disallowedDataKeys.includes(storeKey)) {
+          // Ignore any root store in the disallowed list
+          return;
+        }
+
+        // Remove all `list` keys, for example `management.types['management.cattle.io.cluster'].list`
+
+        if (!clearListsKeys.includes(storeKey)) {
+          // This is only done for some store namespaces, if not just save the raw entry
+          cleanRootStore[storeKey] = store;
+
+          return;
+        }
+
+        // if there's no types property to clear, just save the raw entry
+        if (!Object.keys(store.types || {}).length) {
+          cleanRootStore[storeKey] = store;
+
+          return;
+        }
+
+        // Save the root entry with empty types prop
+        cleanRootStore[storeKey] = {
+          ...store,
+          types: {},
+        };
+
+        // Save the root entries type's entries without the list property
+        Object.entries(store.types).forEach(([type, entry]) => {
+          const { list, ...otherProps } = entry;
+
+          cleanRootStore[storeKey].types[type] = {
+            ...otherProps,
+            count: list.length,
+          };
+        });
+      });
+
+      return cleanRootStore;
+    }
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="title-block mt-20 mb-40">
+      <h1
+        v-t="'about.diagnostic.title'"
+        class="mt-20 mb-40"
+      />
+      <div>
+        <Checkbox
+          v-model="includeResponseTimes"
+          v-tooltip.left="t('about.diagnostic.checkboxTooltip')"
+          :label="t('about.diagnostic.checkboxLabel')"
+        />
+        <AsyncButton
+          mode="diagnostic"
+          @click="downloadData"
+        />
+      </div>
+    </div>
+    <div class="mb-40">
+      <h2 class="mb-20">
+        {{ t('about.diagnostic.systemInformation.subtitle') }}
+      </h2>
+      <table>
+        <thead>
+          <tr>
+            <th>Type</th>
+            <th>Value</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, objKey) in systemInformation" :key="objKey">
+            <td>{{ item.label }}</td>
+            <td>{{ item.value }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="mb-40">
+      <h2 class="mb-20">
+        {{ t('about.diagnostic.logs.subtitle') }}
+      </h2>
+      <ul class="logs-container">
+        <li
+          v-for="logEntry in latestLogs"
+          :key="generateKey(logEntry.timestamp)"
+          :class="logEntry.type"
+        >
+          <span class="log-entry-type">{{ logEntry.type }} :: </span>
+          <span
+            v-for="(arg, i) in logEntry.data"
+            :key="i"
+          >{{ arg }}</span>
+        </li>
+      </ul>
+    </div>
+    <div class="mb-40">
+      <h2 class="mb-20">
+        {{ t('about.diagnostic.resourceCounts.subtitle') }}
+      </h2>
+      <div class="resources-count-container">
+        <table
+          v-for="cluster in finalCounts"
+          :key="cluster.id"
+          class="full-width"
+        >
+          <thead @click="toggleTable(cluster.id)">
+            <th colspan="2">
+              <div>
+                <span>{{ cluster.id }}</span>
+                <i
+                  class="icon"
+                  :class="{
+                    'icon-chevron-down': !cluster.isTableVisible,
+                    'icon-chevron-up': cluster.isTableVisible
+                  }"
+                ></i>
+              </div>
+            </th>
+          </thead>
+          <tbody v-show="cluster.isTableVisible">
+            <tr v-for="item in cluster.counts" :key="item.resource">
+              <td>{{ item.resource }}</td>
+              <td>{{ item.count }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.title-block {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  h1 {
+    margin: 0 !important;
+  }
+
+  div {
+    display: flex;
+    align-items: center;
+  }
+}
+
+table {
+  border-collapse: collapse;
+  overflow: hidden;
+  border-radius: var(--border-radius);
+
+  &.full-width {
+    border-radius: 0 !important;
+    min-width: 60%;
+
+    thead {
+      cursor: pointer;
+
+      th div {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+      }
+    }
+  }
+
+  tr > td:first-of-type {
+    width: 20%;
+  }
+
+  th, td {
+    border: 1px solid var(--border);
+    padding: 8px 5px;
+    min-width: 150px;
+    text-align: left;
+  }
+
+  th {
+    background-color: var(--sortable-table-top-divider);
+    border-bottom: 1px solid var(--sortable-table-top-divider);
+  }
+
+  a {
+    cursor: pointer;
+  }
+
+  .os {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.logs-container {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  background-color: #FFF;
+  border: 1px solid var(--body-text);
+  height: 300px;
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  li {
+    font-family: $mono-font;
+    font-size: 12px;
+    margin: 0;
+    padding: 10px 20px;
+    border-bottom: 1px solid #ccc;
+
+    &.log {
+      color: #000;
+    }
+
+    &.warn {
+      background-color: LightGoldenRodYellow;
+      color: SaddleBrown;
+    }
+
+    &.info {
+      background-color: Azure;
+      color: blue;
+    }
+
+    &.error {
+      background-color: MistyRose;
+      color: red;
+    }
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .log-entry-type {
+      font-weight: bold;
+    }
+  }
+}
+
+.resources-count-container {
+  table:nth-child(even) {
+    th {
+      background-color: rgb(239, 239, 239);
+      color: #000;
+    }
+  }
+}
+</style>

package/pages/fail-whale.vue

@@ -1,6 +1,6 @@
 <script>
 import BrandImage from '@shell/components/BrandImage';
-import { mapState } from 'vuex';
+import { mapGetters, mapState } from 'vuex';
 import { stringify } from '@shell/utils/error';
 import { getVendor } from '@shell/config/private-label';
 import { NAME as HARVESTER } from '@shell/config/product/harvester';
@@ -11,7 +11,6 @@ export default {
   components: { BrandImage },
 
   data() {
-    const home = this.$router.resolve({ name: 'home' }).href;
     const store = this.$store;
 
     if ( process.client && !store.state.error && !store.state.cameFromError) {
@@ -19,10 +18,7 @@ export default {
       this.$router.replace('/');
     }
 
-    const isOnlyHarvester = getVendor() === HARVESTER;
-
     return {
-      home:          isOnlyHarvester ? 'c/local/harvester/harvesterhci.io.dashboard' : home,
       previousRoute: '',
       styles:        { '--custom-content': `'${ this.t('nav.failWhale.separator') }'` }
     };
@@ -30,6 +26,22 @@ export default {
 
   computed: {
     ...mapState(['error']),
+    ...mapGetters(['isSingleProduct']),
+
+    home() {
+      const isOnlyHarvester = getVendor() === HARVESTER;
+
+      if (isOnlyHarvester) {
+        // This looks like it's covered by `isSingleProduct?.afterLoginRoute` too
+        return 'c/local/harvester/harvesterhci.io.dashboard';
+      }
+
+      if (this.isSingleProduct?.afterLoginRoute) {
+        return this.$router.resolve(this.isSingleProduct.afterLoginRoute).href;
+      }
+
+      return this.$router.resolve({ name: 'home' }).href;
+    },
 
     displayError() {
       return stringify(this.error);

package/pages/home.vue

@@ -1,10 +1,10 @@
 <script>
 import { mapPref, AFTER_LOGIN_ROUTE, READ_WHATS_NEW, HIDE_HOME_PAGE_CARDS } from '@shell/store/prefs';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import BannerGraphic from '@shell/components/BannerGraphic';
 import IndentedPanel from '@shell/components/IndentedPanel';
 import SortableTable from '@shell/components/SortableTable';
-import BadgeState from '@shell/components/BadgeState';
+import { BadgeState } from '@components/BadgeState';
 import CommunityLinks from '@shell/components/CommunityLinks';
 import SimpleBox from '@shell/components/SimpleBox';
 import SingleClusterInfo from '@shell/components/SingleClusterInfo';
@@ -40,11 +40,9 @@ export default {
 
   mixins: [PageHeaderActions],
 
-  async fetch() {
-    this.clusters = await this.$store.dispatch('management/findAll', {
-      type: MANAGEMENT.CLUSTER,
-      opt:  { url: MANAGEMENT.CLUSTER }
-    });
+  fetch() {
+    this.$store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER });
+    this.$store.dispatch('management/findAll', { type: MANAGEMENT.CLUSTER });
   },
 
   data() {
@@ -63,7 +61,7 @@ export default {
     ];
 
     return {
-      HIDE_HOME_PAGE_CARDS, clusters: [], fullVersion, pageActions, vendor: getVendor(),
+      HIDE_HOME_PAGE_CARDS, fullVersion, pageActions, vendor: getVendor(),
     };
   },
 
@@ -72,6 +70,10 @@ export default {
     ...mapGetters(['currentCluster']),
     mcm: mapFeature(MULTI_CLUSTER),
 
+    provClusters() {
+      return this.$store.getters['management/all'](CAPI.RANCHER_CLUSTER);
+    },
+
     canCreateCluster() {
       const schema = this.$store.getters['management/schemaFor'](CAPI.RANCHER_CLUSTER);
 
@@ -125,12 +127,14 @@ export default {
           value:         'nameDisplay',
           sort:          ['nameSort'],
           canBeVariable: true,
+          getValue:      row => row.mgmt?.nameDisplay
         },
         {
-          label: this.t('landing.clusters.provider'),
-          value: 'status.provider',
-          name:  'Provider',
-          sort:  ['status.provider'],
+          label:     this.t('landing.clusters.provider'),
+          value:     'mgmt.status.provider',
+          name:      'Provider',
+          sort:      ['mgmt.status.provider'],
+          formatter: 'ClusterProvider'
         },
         {
           label: this.t('landing.clusters.kubernetesVersion'),
@@ -187,7 +191,7 @@ export default {
     ...mapGetters(['currentCluster', 'defaultClusterId']),
 
     kubeClusters() {
-      return filterHiddenLocalCluster(filterOnlyKubernetesClusters(this.clusters), this.$store);
+      return filterHiddenLocalCluster(filterOnlyKubernetesClusters(this.provClusters || []), this.$store);
     }
   },
 
@@ -275,7 +279,10 @@ export default {
     <IndentedPanel class="mt-20 mb-20">
       <div v-if="!readWhatsNewAlready" class="row">
         <div class="col span-12">
-          <Banner color="info whats-new">
+          <Banner
+            data-testid="changelog-banner"
+            color="info whats-new"
+          >
             <div>{{ t('landing.seeWhatsNew') }}</div>
             <a class="hand" @click.prevent.stop="showWhatsNew"><span v-html="t('landing.whatsNewLink')" /></a>
           </Banner>
@@ -312,13 +319,20 @@ export default {
 
           <div class="row panel">
             <div v-if="mcm" class="col span-12">
-              <SortableTable :table-actions="false" :row-actions="false" key-field="id" :rows="kubeClusters" :headers="clusterHeaders">
+              <SortableTable
+                :table-actions="false"
+                :row-actions="false"
+                key-field="id"
+                :rows="kubeClusters"
+                :headers="clusterHeaders"
+                :loading="!kubeClusters"
+              >
                 <template #header-left>
                   <div class="row table-heading">
                     <h2 class="mb-0">
                       {{ t('landing.clusters.title') }}
                     </h2>
-                    <BadgeState :label="clusters.length.toString()" color="role-tertiary ml-20 mr-20" />
+                    <BadgeState v-if="kubeClusters" :label="kubeClusters.length.toString()" color="role-tertiary ml-20 mr-20" />
                   </div>
                 </template>
                 <template v-if="canCreateCluster" #header-middle>
@@ -339,8 +353,8 @@ export default {
                 </template>
                 <template #col:name="{row}">
                   <td>
-                    <span>
-                      <n-link v-if="row.isReady" :to="{ name: 'c-cluster-explorer', params: { cluster: row.id }}">
+                    <span v-if="row.mgmt">
+                      <n-link v-if="row.mgmt.isReady" :to="{ name: 'c-cluster-explorer', params: { cluster: row.mgmt.id }}">
                         {{ row.nameDisplay }}
                       </n-link>
                       <span v-else>{{ row.nameDisplay }}</span>
@@ -348,16 +362,16 @@ export default {
                   </td>
                 </template>
                 <template #col:cpu="{row}">
-                  <td v-if="cpuAllocatable(row)">
-                    {{ `${cpuAllocatable(row)} ${t('landing.clusters.cores', {count:cpuAllocatable(row) })}` }}
+                  <td v-if="row.mgmt && cpuAllocatable(row.mgmt)">
+                    {{ `${cpuAllocatable(row.mgmt)} ${t('landing.clusters.cores', {count:cpuAllocatable(row.mgmt) })}` }}
                   </td>
                   <td v-else>
                     &mdash;
                   </td>
                 </template>
                 <template #col:memory="{row}">
-                  <td v-if="memoryAllocatable(row) && !memoryAllocatable(row).match(/^0 [a-zA-z]/)">
-                    {{ memoryAllocatable(row) }}
+                  <td v-if="row.mgmt && memoryAllocatable(row.mgmt) && !memoryAllocatable(row.mgmt).match(/^0 [a-zA-z]/)">
+                    {{ memoryAllocatable(row.mgmt) }}
                   </td>
                   <td v-else>
                     &mdash;

package/pages/plugins.vue

@@ -1,6 +1,6 @@
 <script>
 import { mapGetters } from 'vuex';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 
 export default {
   components: { LabeledInput },