@rancher/shell 0.1.0 → 0.1.1

package/components/formatter/HarvesterIpAddress.vue

@@ -1,10 +1,10 @@
 <script>
-import compact from 'lodash/compact';
 import { OFF } from '@shell/models/harvester/kubevirt.io.virtualmachine';
 import { get } from '@shell/utils/object';
 import { isIpv4 } from '@shell/utils/string';
 import { HCI as HCI_ANNOTATIONS } from '@shell/config/labels-annotations';
 import { HCI } from '@shell/config/types';
+import { MANAGEMENT_NETWORK } from '@shell/mixins/harvester-vm';
 import CopyToClipboard from '@shell/components/CopyToClipboard';
 
 export default {
@@ -17,18 +17,15 @@ export default {
     row: {
       type:     Object,
       required: true
-    },
-    col: {
-      type:     Object,
-      default: () => {}
     }
   },
 
   computed: {
-    ip() {
-      const s = new Set([...this.vmiIp, ...this.networkAnnotationIP]);
-
-      return compact([...s]).sort();
+    // Return VM instance IP and VM annotation IP
+    ips() {
+      return [...this.vmiIp, ...this.networkAnnotationIP]
+        .filter(Boolean)
+        .sort((a, b) => a.ip < b.ip ? -1 : 1);
     },
 
     networkAnnotationIP() {
@@ -38,21 +35,42 @@ export default {
 
       const annotationIp = get(this.row, `metadata.annotations."${ HCI_ANNOTATIONS.NETWORK_IPS }"`) || '[]';
 
-      const out = JSON.parse(annotationIp);
+      // Obtain IP from VM annotation, remove the CIDR suffix number if CIDR Exist
+      try {
+        const out = JSON.parse(annotationIp);
 
-      return out.map( (O) => {
-        return O.replace(/\/[\d\D]*/, '');
-      });
+        return out.map( ip => ({
+          ip:   ip.replace(/\/[\d\D]*/, ''),
+          name: ''
+        }));
+      } catch (e) {
+        return [];
+      }
     },
 
     vmiIp() {
       const vmiResources = this.$store.getters['harvester/all'](HCI.VMI);
       const resource = vmiResources.find(VMI => VMI.id === this.value) || null;
       const networksName = this.row.networksName || [];
+      const vmiNetworks = resource?.spec?.networks || [];
+
+      return (resource?.status?.interfaces || []).filter((intf) => {
+        return isIpv4(intf.ipAddress) && networksName.includes(intf.name);
+      }).map((intf) => {
+        let name;
+        const network = vmiNetworks.find(network => network.name === intf.name);
 
-      return (resource?.status?.interfaces || []).filter((O) => {
-        return isIpv4(O.ipAddress) && networksName.includes(O.name);
-      }).map(O => O.ipAddress);
+        if (network && network.multus) {
+          name = network.multus.networkName;
+        } else if (network && network.pod) {
+          name = MANAGEMENT_NETWORK;
+        }
+
+        return {
+          ip: intf.ipAddress,
+          name
+        };
+      });
     },
 
     showIP() {
@@ -64,8 +82,9 @@ export default {
 
 <template>
   <div v-if="showIP">
-    <span v-for="(ipValue) in ip" :key="ipValue">
-      {{ ipValue }}<CopyToClipboard :text="ipValue" label-as="tooltip" class="icon-btn" action-color="bg-transparent" />
+    <span v-for="{ip, name} in ips" :key="ip">
+      <span v-tooltip="name">{{ ip }}</span>
+      <CopyToClipboard :text="ip" label-as="tooltip" class="icon-btn" action-color="bg-transparent" />
     </span>
   </div>
 </template>

package/components/formatter/HarvesterMigrationState.vue

@@ -1,6 +1,6 @@
 <script>
 import { HCI } from '@shell/config/types';
-import BadgeState from '@shell/components/BadgeState';
+import { BadgeState } from '@components/BadgeState';
 
 export default {
   components: { BadgeState },

package/components/formatter/HarvesterVmState.vue

@@ -51,7 +51,7 @@ export default {
     warningMessage() {
       const out = [];
 
-      if (this.networkImpassability) {
+      if (this.networkImpassability && this.allClusterNetwork.length) {
         out.push(this.t('harvester.network.message.vlanInactive', { name: this.row.realAttachNodeName }));
       }
 

package/components/formatter/LinkDetail.vue

@@ -11,6 +11,10 @@ export default {
       type:     Object,
       required: true
     },
+    col: {
+      type:     Object,
+      default:  () => {}
+    },
     reference: {
       type:    String,
       default: null,
@@ -31,7 +35,7 @@ export default {
       }
 
       return this.row?.detailLocation;
-    },
+    }
   }
 };
 </script>
@@ -41,6 +45,11 @@ export default {
     <n-link v-if="to" :to="to">
       {{ value }}
     </n-link>
-    <span v-else>{{ value }}</span>
+    <span v-else>
+      {{ value }}
+      <template v-if="!value && col.dashIfEmpty">
+        <span class="text-muted">&mdash;</span>
+      </template>
+    </span>
   </span>
 </template>

package/components/formatter/LinkName.vue

@@ -4,7 +4,7 @@ import { NAME as EXPLORER } from '@shell/config/product/explorer';
 export default {
   props: {
     value: {
-      type:     String,
+      type:     null,
       required: true
     },
 
@@ -42,7 +42,7 @@ export default {
 </script>
 
 <template>
-  <span>
+  <span v-if="value">
     <nuxt-link :to="url">
       {{ value }}
     </nuxt-link>

package/components/formatter/LiveExpiryBadgeState.vue

@@ -1,6 +1,6 @@
 <script>
 import day from 'dayjs';
-import BadgeState from '@shell/components/BadgeState';
+import { BadgeState } from '@components/BadgeState';
 import { colorForState, stateDisplay } from '@shell/plugins/dashboard-store/resource-class';
 import { safeSetTimeout } from '@shell/utils/time';
 

package/components/formatter/LivePodRestarts.vue

@@ -0,0 +1,47 @@
+<script>
+export default {
+  props: {
+    row: {
+      type:     Object,
+      required: true
+    },
+    col: {
+      type:     Object,
+      required: true
+    },
+  },
+
+  data() {
+    return { loading: true, restarts: 0 };
+  },
+
+  methods:  {
+    startDelayedLoading() {
+      this.loading = false;
+    },
+
+    liveUpdate() {
+      if (this.loading) {
+        return;
+      }
+
+      this.restarts = this.row?.restartCount;
+
+      return 5;
+    }
+  }
+};
+</script>
+
+<template>
+  <i v-if="loading" class="icon icon-spinner delayed-loader" />
+  <span v-else>{{ restarts }}</span>
+</template>
+
+<style lang="scss" scoped>
+  .delayed-loader {
+    font-size: 16px;
+    height: 16px;
+    width: 16px;
+  }
+</style>

package/components/formatter/MachineSummaryGraph.vue

@@ -9,22 +9,33 @@ export default {
       type:     Object,
       required: true
     },
+    horizontal: {
+      type:    Boolean,
+      default: false
+    }
+  },
+
+  computed: {
+    ready() {
+      // Ensure we never show more ready machines than desired
+      // If w can address in backedn, we could revert this in the future
+      const ready = this.row?.ready || 0;
+      const desired = this.row?.desired || 0;
+
+      return ready > desired ? desired : ready;
+    }
   },
 };
 </script>
 
 <template>
   <v-popover
-    class="text-center hand"
+    class="text-center hand machine-summary-graph"
     placement="top"
     :open-group="row.id"
     trigger="click"
     offset="1"
   >
-    <ProgressBarMulti v-if="row.stateParts" :values="row.stateParts" class="mb-5" />
-    <span v-if="row.desired === row.ready">{{ row.ready }}</span>
-    <span v-else>{{ row.ready }} of {{ row.desired }}</span>
-
     <template #popover>
       <table class="fixed">
         <tbody>
@@ -39,5 +50,40 @@ export default {
         </tbody>
       </table>
     </template>
+
+    <div class="content" :class="{ horizontal }">
+      <ProgressBarMulti v-if="row.stateParts" :values="row.stateParts" class="progress-bar" />
+      <span v-if="row.desired === ready" class="count">{{ ready }}</span>
+      <span v-else class="count">{{ ready }} of {{ row.desired }}</span>
+    </div>
   </v-popover>
 </template>
+
+<style lang="scss" scoped>
+  .machine-summary-graph {
+    display: flex;
+    align-items: center;
+
+    .content {
+      .progress-bar {
+        margin-bottom: 5px;
+      }
+
+      &.horizontal {
+        // When horizontal, put the number before the graph
+        align-items: center;
+        direction: rtl;
+        display: flex;
+
+        > * {
+          direction: ltr;
+        }
+
+        .progress-bar {
+          margin-bottom: 0;
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+</style>

package/components/formatter/PodsUsage.vue

@@ -16,12 +16,14 @@ export default {
   },
   methods: {
     async startDelayedLoading() {
-      if (this.row?.isReady) {
-        const req = await this.$store.dispatch('management/request', { url: `/k8s/clusters/${ this.row?.id }/v1/counts` });
+      const id = this.row?.mgmt?.id;
+
+      if (this.row?.isReady && id) {
+        const req = await this.$store.dispatch('management/request', { url: `/k8s/clusters/${ id }/v1/counts` });
 
         this.loading = false;
         const usedPods = req.data?.[0]?.counts[POD]?.summary?.count || 0;
-        const totalPods = this.row?.status?.allocatable?.pods;
+        const totalPods = this.row?.mgmt?.status?.allocatable?.pods;
 
         if (totalPods) {
           this.podsUsage = `${ usedPods }/${ totalPods }`;

package/components/formatter/Weight.vue

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

package/components/formatter/WorkloadHealthScale.vue

@@ -3,7 +3,7 @@ import Vue from 'vue';
 import ProgressBarMulti from '@shell/components/ProgressBarMulti';
 import PlusMinus from '@shell/components/form/PlusMinus';
 import { SCALABLE_WORKLOAD_TYPES } from '~shell/config/types';
-import { ucFirst } from '~shell/utils/string';
+import { ucFirst } from '@shell/utils/string';
 
 const SCALABLE_TYPES = Object.values(SCALABLE_WORKLOAD_TYPES);
 
@@ -33,7 +33,8 @@ export default {
     return {
       disabled: false,
       expanded: false,
-      loading:  true
+      loading:  true,
+      cParts:   [],
     };
   },
 
@@ -47,18 +48,28 @@ export default {
     },
 
     parts() {
-      return Object.entries(this.row.jobGauges || this.row.podGauges || [])
+      return this.cParts;
+    },
+  },
+
+  methods:  {
+    liveUpdate() {
+      if (this.loading) {
+        return 5;
+      }
+
+      this.cParts = Object.entries(this.row.jobGauges || this.row.podGauges || [])
         .map(([name, value]) => ({
           color: `bg-${ value.color }`,
           value: value.count || 0,
           label: ucFirst(name)
         })).filter(x => x.value > 0);
-    },
-  },
 
-  methods:  {
+      return 5;
+    },
     startDelayedLoading() {
       this.loading = false;
+      this.liveUpdate();
     },
 
     onClickOutside(event) {

package/components/nav/HarvesterUpgrade.vue

@@ -13,11 +13,21 @@ export default {
   },
 
   async fetch() {
-    await allHash({
-      images:   this.$store.dispatch('harvester/findAll', { type: HCI.IMAGE }),
-      upgrades: this.$store.dispatch('harvester/findAll', { type: HCI.UPGRADE }),
-      nodes:    this.$store.dispatch('harvester/findAll', { type: NODE })
-    });
+    const hash = {};
+
+    if (this.$store.getters['harvester/schemaFor'](HCI.IMAGE)) {
+      hash.images = this.$store.dispatch('harvester/findAll', { type: HCI.IMAGE });
+    }
+
+    if (this.$store.getters['harvester/schemaFor'](HCI.UPGRADE)) {
+      hash.upgrades = this.$store.dispatch('harvester/findAll', { type: HCI.UPGRADE });
+    }
+
+    if (this.$store.getters['harvester/schemaFor'](NODE)) {
+      hash.nodes = this.$store.dispatch('harvester/findAll', { type: NODE });
+    }
+
+    await allHash(hash);
   },
 
   computed: {

package/components/nav/Header.vue

@@ -329,9 +329,9 @@ export default {
     <div class="spacer"></div>
 
     <div class="rd-header-right">
-      <HarvesterUpgrade v-if="isVirtualCluster" />
+      <HarvesterUpgrade v-if="isVirtualCluster && currentProduct.name === VIRTUAL" />
       <div
-        v-if="currentCluster && !simple && (currentProduct.showNamespaceFilter || currentProduct.showWorkspaceSwitcher)"
+        v-if="(currentCluster || (currentProduct && currentProduct.customNamespaceFilter)) && !simple && (currentProduct.showNamespaceFilter || currentProduct.showWorkspaceSwitcher)"
         class="top"
       >
         <NamespaceFilter v-if="clusterReady && currentProduct && (currentProduct.showNamespaceFilter || isExplorer)" />
@@ -420,9 +420,11 @@ export default {
 
       <div
         v-if="showPageActions"
+        id="page-actions"
         class="actions"
       >
         <i
+          data-testid="page-actions-menu"
           class="icon icon-actions"
           @blur="showPageActionsMenu(false)"
           @click="showPageActionsMenu(true)"
@@ -438,7 +440,11 @@ export default {
           :container="false"
         >
           <template slot="popover" class="user-menu">
-            <ul class="list-unstyled dropdown" @click.stop="showPageActionsMenu(false)">
+            <ul
+              data-testid="page-actions-dropdown"
+              class="list-unstyled dropdown"
+              @click.stop="showPageActionsMenu(false)"
+            >
               <li v-for="a in pageActions" :key="a.label" class="user-menu-item">
                 <a v-if="!a.separator" @click="pageAction(a)">{{ a.labelKey ? t(a.labelKey) : a.label }}</a>
                 <div v-else class="menu-separator">
@@ -486,13 +492,13 @@ export default {
                 </div>
               </li>
               <nuxt-link v-if="showPreferencesLink" tag="li" :to="{name: 'prefs'}" class="user-menu-item">
-                <a>{{ t('nav.userMenu.preferences') }} <i class="icon icon-fw icon-gear" /></a>
+                <a>{{ t('nav.userMenu.preferences') }}</a>
               </nuxt-link>
               <nuxt-link v-if="showAccountAndApiKeyLink" tag="li" :to="{name: 'account'}" class="user-menu-item">
-                <a>{{ t('nav.userMenu.accountAndKeys', {}, true) }} <i class="icon icon-fw icon-user" /></a>
+                <a>{{ t('nav.userMenu.accountAndKeys', {}, true) }}</a>
               </nuxt-link>
               <nuxt-link v-if="authEnabled" tag="li" :to="{name: 'auth-logout', query: { [LOGGED_OUT]: true }}" class="user-menu-item">
-                <a @blur="showMenu(false)">{{ t('nav.userMenu.logOut') }} <i class="icon icon-fw icon-close" /></a>
+                <a @blur="showMenu(false)">{{ t('nav.userMenu.logOut') }}</a>
               </nuxt-link>
             </ul>
           </template>
@@ -505,6 +511,7 @@ export default {
 <style lang="scss" scoped>
   HEADER {
     display: flex;
+    z-index: z-index('mainHeader');
 
     > .spacer {
       flex: 1;
@@ -819,6 +826,8 @@ export default {
   }
 
   .user-name {
+    display: flex;
+    align-items: center;
     color: var(--secondary);
   }
 

package/components/nav/Jump.vue

@@ -37,7 +37,7 @@ export default {
       let namespaces = null;
 
       if ( !isAllNamespaces ) {
-        namespaces = Object.keys(this.$store.getters['namespaces']());
+        namespaces = Object.keys(this.$store.getters['activeNamespaceCache']);
       }
 
       const allTypes = this.$store.getters['type-map/allTypes'](product) || {};

package/components/nav/NamespaceFilter.vue

@@ -1,10 +1,10 @@
 <script>
 import { mapGetters } from 'vuex';
-import { NAMESPACE_FILTERS } from '@shell/store/prefs';
+import { NAMESPACE_FILTERS, DEV } from '@shell/store/prefs';
 import { NAMESPACE, MANAGEMENT } from '@shell/config/types';
 import { sortBy } from '@shell/utils/sort';
 import { isArray, addObjects, findBy, filterBy } from '@shell/utils/array';
-import { NAME as HARVESTER } from '@shell/config/product/harvester';
+
 import {
   NAMESPACE_FILTER_SPECIAL as SPECIAL,
   NAMESPACE_FILTER_ALL_USER as ALL_USER,
@@ -130,17 +130,12 @@ export default {
       }
 
       const inStore = this.$store.getters['currentStore'](NAMESPACE);
-      const namespaces = sortBy(
+      let namespaces = sortBy(
         this.$store.getters[`${ inStore }/all`](NAMESPACE),
         ['nameDisplay']
-      ).filter( (N) => {
-        const isSettingSystemNamespace = this.$store.getters['systemNamespaces'].includes(N.metadata.name);
-
-        const needFilter = !N.isSystem && !N.isFleetManaged && !isSettingSystemNamespace;
-        const isVirtualProduct = this.$store.getters['currentProduct'].name === HARVESTER;
+      );
 
-        return this.isVirtualCluster && isVirtualProduct ? needFilter : true;
-      });
+      namespaces = this.filterNamespaces(namespaces);
 
       if (this.$store.getters['isRancher'] || this.isMultiVirtualCluster) {
         const cluster = this.$store.getters['currentCluster'];
@@ -323,6 +318,31 @@ export default {
   },
 
   methods: {
+    filterNamespaces(namespaces) {
+      if (this.$store.getters['prefs/get'](DEV)) {
+        // If developer tools are turned on in the user preferences,
+        // return all namespaces including system namespaces and RBAC
+        // management namespaces.
+        return namespaces;
+      }
+
+      const isVirtualCluster = this.$store.getters['isVirtualCluster'];
+
+      return namespaces.filter((namespace) => {
+        const isSettingSystemNamespace = this.$store.getters['systemNamespaces'].includes(namespace.metadata.name);
+        const systemNS = namespace.isSystem || namespace.isFleetManaged || isSettingSystemNamespace;
+
+        // For Harvester, filter out system namespaces AND obscure namespaces.
+        if (isVirtualCluster) {
+          return !systemNS && !namespace.isObscure;
+        }
+
+        // Otherwise only filter out obscure namespaces, such as namespaces
+        // that Rancher uses to manage RBAC for projects, which should not be
+        // edited or deleted by Rancher users.
+        return !namespace.isObscure;
+      });
+    },
     // Layout the content in the dropdown box to best use the space to show the selection
     layout() {
       this.$nextTick(() => {