@rancher/shell 0.3.0 → 0.3.1

package/components/formatter/InternalExternalIP.vue

@@ -11,8 +11,8 @@ export default {
     },
   },
   computed: {
-    showBoth() {
-      return this.row.internalIp !== this.row.externalIp;
+    internalSameAsExternal() {
+      return this.row.internalIp === this.row.externalIp;
     },
     ...mapGetters({ t: 'i18n/t' })
   },
@@ -35,12 +35,15 @@ export default {
       />
     </template>
     <template v-else>
-      {{ t('generic.none') }}
+      -
     </template>
-
-    <template v-if="showBoth">
-      <template v-if="isIp(row.internalIp)">
-        / {{ row.internalIp }} <CopyToClipboard
+    /
+    <template>
+      <template v-if="internalSameAsExternal && isIp(row.internalIp)">
+        {{ t('tableHeaders.internalIpSameAsExternal') }}
+      </template>
+      <template v-else-if="isIp(row.internalIp)">
+        {{ row.internalIp }}<CopyToClipboard
           label-as="tooltip"
           :text="row.internalIp"
           class="icon-btn"
@@ -48,7 +51,7 @@ export default {
         />
       </template>
       <template v-else>
-        {{ t('generic.none') }}
+        -
       </template>
     </template>
   </span>

package/components/formatter/LiveDuration.vue

@@ -0,0 +1,78 @@
+<script>
+import day from 'dayjs';
+import { elapsedTime } from '@shell/utils/time';
+
+export default {
+  props: {
+    value: {
+      type:    Object,
+      default: () => {}
+    },
+  },
+
+  mounted() {
+    // Set initial value;
+    if (this.value.startTime) {
+      this.liveUpdate(day());
+    }
+  },
+
+  data() {
+    return { label: '-' };
+  },
+
+  computed: {
+    dayValue() {
+      if (!this.value.startTime) {
+        return null;
+      }
+
+      return day(this.value.startTime);
+    }
+  },
+
+  watch: {
+    value() {
+      if (this.value.startTime) {
+        this.liveUpdate(day());
+      }
+    }
+  },
+
+  methods: {
+    liveUpdate(now) {
+      if (!this.dayValue) {
+        this.label = '-';
+
+        return 300;
+      }
+
+      const { label, diff } = this.getDuration(this.dayValue, now);
+
+      this.label = label;
+
+      return diff;
+    },
+    getDuration(value, from) {
+      const now = day();
+
+      from = from || now;
+      const seconds = Math.abs(value.diff(now, 'seconds'));
+
+      return elapsedTime(seconds);
+    },
+  }
+};
+</script>
+
+<template>
+  <span v-if="value.staticValue">
+    {{ value.staticValue }}
+  </span>
+  <span
+    v-else
+    class="live-date"
+  >
+    {{ label }}
+  </span>
+</template>

package/components/formatter/WorkloadHealthScale.vue

@@ -261,15 +261,17 @@ $width: 150px;
       }
     }
 
+    $icon-width: 21px;
+
     .health {
-      width: $width - $height; // height is width of icon;
+      width: $width - $icon-width;
       margin-left: 5px;
     }
     .icon {
-      font-size: $height;
-      width: $height;
+      width: $icon-width;
       color: var(--primary);
       margin-top: 1px;
+      padding: 0 5px 0 3px; // It would be better to display flex here... but the icon looks a pixel off to the right
     }
   }
 

package/components/nav/Header.vue

@@ -49,7 +49,7 @@ export default {
       searchShortcut,
       shellShortcut,
       LOGGED_OUT,
-      navHeaderRight:    null
+      navHeaderRight:    null,
     };
   },
 
@@ -671,8 +671,6 @@ export default {
 
         .vs__dropdown-toggle .vs__actions:after {
           color: var(--body-text) !important;
-          font-size: 1.5rem;
-          padding-right: 4px;
         }
 
         .vs__dropdown-toggle {
@@ -816,6 +814,11 @@ export default {
             background-color: var(--success);
             color: var(--success-text);
           }
+
+          img {
+            height: 20px;
+            width: 20px;
+          }
         }
       }
 

package/components/nav/NamespaceFilter.vue

@@ -19,16 +19,17 @@ import { KEY } from '@shell/utils/platform';
 export default {
   data() {
     return {
-      isOpen:        false,
-      filter:        '',
-      hidden:        0,
-      total:         0,
-      activeElement: null,
+      isOpen:         false,
+      filter:         '',
+      hidden:         0,
+      total:          0,
+      activeElement:  null,
+      cachedFiltered: [],
     };
   },
 
   computed: {
-    ...mapGetters(['currentProduct']),
+    ...mapGetters(['currentProduct', 'namespaceFilterMode']),
 
     hasFilter() {
       return this.filter.length > 0;
@@ -37,11 +38,26 @@ export default {
     filtered() {
       let out = this.options;
 
-      // Filter by the current filter
-      if (this.hasFilter) {
-        out = out.filter((item) => {
+      out = out.filter((item) => {
+        // Filter out anything not applicable to singleton selection
+        if (this.namespaceFilterMode) {
+          // We always show dividers, projects and namespaces
+          if (!['divider', 'project', this.namespaceFilterMode].includes(item.kind)) {
+            // Hide any invalid option that's not selected
+            return this.value.findIndex(v => v.id === item.id) >= 0;
+          }
+        }
+
+        // Filter by the current filter
+        if (this.hasFilter) {
           return item.kind !== SPECIAL && item.label.toLowerCase().includes(this.filter.toLowerCase());
-        });
+        }
+
+        return true;
+      });
+
+      if (out?.[0]?.kind === 'divider') {
+        out.splice(0, 1);
       }
 
       const mapped = this.value.reduce((m, v) => {
@@ -54,6 +70,8 @@ export default {
       out.forEach((i) => {
         i.selected = !!mapped[i.id] || (i.id === ALL && this.value && this.value.length === 0);
         i.elementId = (i.id || '').replace('://', '_');
+        // Are we in singleton resource type mode, if so is this an allowed type?
+        i.enabled = !this.namespaceFilterMode || i.kind === this.namespaceFilterMode;
       });
 
       return out;
@@ -326,6 +344,21 @@ export default {
   watch: {
     value(neu) {
       this.layout();
+    },
+
+    /**
+     * When there are thousands of entries certain actions (drop down opened, selection changed, etc) take a long time to complete (upwards
+     * of 5 seconds)
+     *
+     * This is caused by churn of the filtered and options computed properties causing multiple renders for each action.
+     *
+     * To break this multiple-render per cycle behaviour detatch `filtered` from the value used in `v-for`.
+     *
+     */
+    filtered(neu) {
+      if (!!neu) {
+        this.cachedFiltered = neu;
+      }
     }
   },
 
@@ -427,7 +460,10 @@ export default {
         e.preventDefault();
         e.stopPropagation();
         this.up();
-      } else if (e.keyCode === KEY.SPACE) {
+      } else if (e.keyCode === KEY.SPACE || e.keyCode === KEY.CR) {
+        if (this.namespaceFilterMode && !opt.enabled) {
+          return;
+        }
         e.preventDefault();
         e.stopPropagation();
         this.selectOption(opt);
@@ -545,9 +581,22 @@ export default {
 
       const current = this.value;
       const exists = current.findIndex(v => v.id === option.id);
+      const optionIsSelected = exists !== -1;
+
+      // Any type of mode means only a single resource can be selected. So clear out any stale
+      // values (multiple selected in another context OR a single one selected in this context)
+      if (this.namespaceFilterMode) {
+        if (current.length === 1 && optionIsSelected) {
+          // Don't deselect the only selected option
+          return;
+        }
+        current.length = 0;
+      }
 
-      // Remove if it exists, add if it does not
-      if (exists !== -1) {
+      const remove = !this.namespaceFilterMode && optionIsSelected;
+
+      // Remove if it exists (or always add if in singleton mode - we've reset the list above)
+      if (remove) {
         current.splice(exists, 1);
       } else {
         current.push(option);
@@ -559,6 +608,14 @@ export default {
         document.activeElement.blur();
       }
     },
+    handleValueMouseDown(ns, event) {
+      this.removeOption(ns, event);
+
+      if (this.value.length === 0) {
+        this.open();
+      }
+    },
+
     removeOption(ns, event) {
       this.selectOption(ns);
       event.preventDefault();
@@ -634,9 +691,11 @@ export default {
         >
           <div>{{ ns.label }}</div>
           <i
+            v-if="!namespaceFilterMode"
             class="icon icon-close"
             :data-testid="`namespaces-values-close-${j}`"
             @click="removeOption(ns, $event)"
+            @mousedown="handleValueMouseDown(ns, $event)"
           />
         </div>
       </div>
@@ -686,7 +745,19 @@ export default {
             @click="filter = ''"
           />
         </div>
-        <div class="ns-clear">
+        <div
+          v-if="namespaceFilterMode"
+          class="ns-singleton-info"
+        >
+          <i
+            v-tooltip="t('resourceList.nsFilterToolTip', { mode: namespaceFilterMode})"
+            class="icon icon-info"
+          />
+        </div>
+        <div
+          v-else
+          class="ns-clear"
+        >
           <i
             class="icon icon-close"
             @click="clear()"
@@ -700,18 +771,19 @@ export default {
         role="list"
       >
         <div
-          v-for="(opt, i) in filtered"
+          v-for="(opt, i) in cachedFiltered"
           :id="opt.elementId"
           :key="opt.id"
           tabindex="0"
           class="ns-option"
+          :disabled="!opt.enabled"
           :class="{
             'ns-selected': opt.selected,
-            'ns-single-match': filtered.length === 1 && !opt.selected,
+            'ns-single-match': cachedFiltered.length === 1 && !opt.selected,
           }"
           :data-testid="`namespaces-option-${i}`"
-          @click="selectOption(opt)"
-          @mouseover="mouseOver($event)"
+          @click="opt.enabled && selectOption(opt)"
+          @mouseover="opt.enabled && mouseOver($event)"
           @keydown="itemKeyHandler($event, opt)"
         >
           <div
@@ -734,7 +806,7 @@ export default {
           </div>
         </div>
         <div
-          v-if="filtered.length === 0"
+          v-if="cachedFiltered.length === 0"
           class="ns-none"
           data-testid="namespaces-option-none"
         >
@@ -775,16 +847,17 @@ export default {
     }
 
     .ns-clear {
+      &:hover {
+        color: var(--primary);
+        cursor: pointer;
+      }
+    }
+
+    .ns-singleton-info, .ns-clear {
       align-items: center;
       display: flex;
       > i {
-        font-size: 24px;
-        padding: 0 5px;
-      }
-
-      &:hover {
-        color: var(--link);
-        cursor: pointer;
+        padding-right: 5px;
       }
     }
 
@@ -803,7 +876,6 @@ export default {
       position: absolute;
       right: 10px;
       top: 5px;
-      font-size: 16px;
       line-height: 24px;
       text-align: center;
       width: 24px;
@@ -811,7 +883,7 @@ export default {
 
     .ns-dropdown-menu {
       background-color: var(--header-bg);
-      border: 1px solid var(--link-border);
+      border: 1px solid var(--primary-border);
       border-bottom-left-radius: var(--border-radius);
       border-bottom-right-radius: var(--border-radius);
       color: var(--header-btn-text);
@@ -837,12 +909,49 @@ export default {
         padding-bottom: 10px;
       }
 
-      .ns-option:focus {
-        background-color: var(--dropdown-hover-bg);
-        color: var(--dropdown-hover-text);
-      }
-
       .ns-option {
+
+        &[disabled] {
+          cursor: default;
+        }
+
+        &:not([disabled]) {
+          &:focus {
+            background-color: var(--dropdown-hover-bg);
+            color: var(--dropdown-hover-text);
+          }
+          .ns-item {
+             &:hover, &:focus {
+              background-color: var(--dropdown-hover-bg);
+              color: var(--dropdown-hover-text);
+              cursor: pointer;
+
+              > i {
+                color: var(--dropdown-hover-text);
+              }
+            }
+          }
+
+          &.ns-selected {
+            &:hover,&:focus {
+              .ns-item {
+                > * {
+                  background-color: var(--dropdown-hover-bg);
+                  color: var(--dropdown-hover-text);
+                }
+              }
+            }
+          }
+
+          &.ns-selected:not(:hover) {
+            .ns-item {
+              > * {
+                color: var(--dropdown-hover-bg);
+              }
+            }
+          }
+        }
+
         .ns-item {
           align-items: center;
           display: flex;
@@ -862,33 +971,8 @@ export default {
             white-space: nowrap;
           }
 
-          &:hover, &:focus {
-            background-color: var(--dropdown-hover-bg);
-            color: var(--dropdown-hover-text);
-            cursor: pointer;
-
-            > i {
-              color: var(--dropdown-hover-text);
-            }
-          }
-        }
-        &.ns-selected:not(:hover) {
-          .ns-item {
-            > * {
-              color: var(--dropdown-hover-bg);
-            }
-          }
-        }
-        &.ns-selected {
-          &:hover,&:focus {
-            .ns-item {
-              > * {
-                background-color: var(--dropdown-hover-bg);
-                color: var(--dropdown-hover-text);
-              }
-            }
-          }
         }
+
         &.ns-single-match {
           .ns-item {
             background-color: var(--dropdown-hover-bg);
@@ -915,7 +999,7 @@ export default {
       &.ns-open {
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
-        border-color: var(--link-border);
+        border-color: var(--primary-border);
       }
 
       > .ns-values {
@@ -924,14 +1008,13 @@ export default {
 
       &:hover {
         > i {
-          color: var(--link);
+          color: var(--primary);
         }
       }
 
       > i {
         height: $ns_dropdown_size;
         width: $ns_dropdown_size;
-        font-size: 20px;
         cursor: pointer;
         text-align: center;
         line-height: $ns_dropdown_size;
@@ -963,7 +1046,7 @@ export default {
             margin-left: 5px;
 
             &:hover {
-              color: var(--link);
+              color: var(--primary);
             };
           }
 

package/components/nav/TopLevelMenu.vue

@@ -1,6 +1,7 @@
 <script>
 import BrandImage from '@shell/components/BrandImage';
 import ClusterProviderIcon from '@shell/components/ClusterProviderIcon';
+import IconOrSvg from '../IconOrSvg';
 import { mapGetters } from 'vuex';
 import $ from 'jquery';
 import { CAPI, MANAGEMENT } from '@shell/config/types';
@@ -14,13 +15,13 @@ import { SETTING } from '@shell/config/settings';
 import { filterOnlyKubernetesClusters, filterHiddenLocalCluster } from '@shell/utils/cluster';
 import { isRancherPrime } from '@shell/config/version';
 
-const UNKNOWN = 'unknown';
-const UI_VERSION = process.env.VERSION || UNKNOWN;
-const UI_COMMIT = process.env.COMMIT || UNKNOWN;
-
 export default {
 
-  components: { BrandImage, ClusterProviderIcon },
+  components: {
+    BrandImage,
+    ClusterProviderIcon,
+    IconOrSvg
+  },
 
   data() {
     const { displayVersion, fullVersion } = getVersionInfo(this.$store);
@@ -30,8 +31,6 @@ export default {
       shown:         false,
       displayVersion,
       fullVersion,
-      uiCommit:      UI_COMMIT,
-      uiVersion:     UI_VERSION,
       clusterFilter: '',
       hasProvCluster,
     };
@@ -145,6 +144,7 @@ export default {
         return {
           label:             this.$store.getters['i18n/withFallback'](`product."${ p.name }"`, null, ucFirst(p.name)),
           icon:              `icon-${ p.icon || 'copy' }`,
+          svg:               p.svg,
           value:             p.name,
           removable:         p.removable !== false,
           inStore:           p.inStore || 'cluster',
@@ -347,9 +347,9 @@ export default {
                 class="option"
                 :to="a.to"
               >
-                <i
-                  class="icon group-icon"
-                  :class="a.icon"
+                <IconOrSvg
+                  :icon="a.icon"
+                  :src="a.svg"
                 />
                 <div>{{ a.label }}</div>
               </nuxt-link>
@@ -368,9 +368,9 @@ export default {
                 class="option"
                 :to="a.to"
               >
-                <i
-                  class="icon group-icon"
-                  :class="a.icon"
+                <IconOrSvg
+                  :icon="a.icon"
+                  :src="a.svg"
                 />
                 <div>{{ a.label }}</div>
               </nuxt-link>
@@ -389,9 +389,9 @@ export default {
                 class="option"
                 :to="a.to"
               >
-                <i
-                  class="icon group-icon"
-                  :class="a.icon"
+                <IconOrSvg
+                  :icon="a.icon"
+                  :src="a.svg"
                 />
                 <div>{{ a.label }}</div>
               </nuxt-link>
@@ -410,11 +410,11 @@ export default {
           </div>
           <div @click="hide()">
             <nuxt-link
-              v-tooltip="{ content: fullVersion, classes: 'footer-tooltip' }"
               :to="{ name: 'about' }"
               class="version"
-              v-html="displayVersion"
-            />
+            >
+              {{ t('about.title') }}
+            </nuxt-link>
           </div>
         </div>
       </div>
@@ -505,6 +505,9 @@ export default {
       margin-right: 8px;
       fill: var(--link);
     }
+    img {
+      margin-right: 8px;
+    }
 
     > div {
       color: var(--link);