@rancher/shell 0.1.3 → 0.1.4

package/components/LocaleSelector.vue

@@ -1,12 +1,35 @@
 <script>
 import { mapGetters } from 'vuex';
+import Select from '@shell/components/form/Select.vue';
 
 export default {
   name: 'LocalSelector',
 
+  components: { Select },
+
+  props: {
+    mode: {
+      type:    String,
+      default: ''
+    },
+  },
+
   computed: {
     ...mapGetters('i18n', ['selectedLocaleLabel', 'availableLocales']),
 
+    localesOptions() {
+      return Object.keys(this.availableLocales).map((value) => {
+        return {
+          label: this.t(`locale.${ value }`),
+          value
+        };
+      });
+    },
+
+    selectedOption() {
+      return Object.keys(this.availableLocales)[Object.values(this.availableLocales).indexOf(this.selectedLocaleLabel)];
+    },
+
     showLocale() {
       return (this.availableLocales && Object.keys(this.availableLocales).length > 1) || this.dev;
     },
@@ -17,42 +40,52 @@ export default {
   },
 
   methods: {
-    switchLocale(locale) {
-      this.$store.dispatch('i18n/switchTo', locale);
+    switchLocale($event) {
+      this.$store.dispatch('i18n/switchTo', $event);
     },
   }
 };
 </script>
 
 <template>
-  <div v-if="showLocale">
-    <v-popover
-      popover-class="localeSelector"
-      placement="top"
-      trigger="click"
-    >
-      <a
-        data-testid="locale-selector"
-        class="locale-chooser"
-      >
-        {{ selectedLocaleLabel }}
-        <i class="icon icon-fw icon-sort-down" />
-      </a>
-
-      <template slot="popover">
-        <ul class="list-unstyled dropdown" style="margin: -1px;">
-          <li v-if="showNone" v-t="'locale.none'" class="hand" @click="switchLocale('none')" />
-          <li
-            v-for="(label, name) in availableLocales"
-            :key="name"
-            class="hand"
-            @click="switchLocale(name)"
+  <div>
+    <div v-if="mode === 'login'">
+      <div v-if="showLocale">
+        <v-popover
+          popover-class="localeSelector"
+          placement="top"
+          trigger="click"
+        >
+          <a
+            data-testid="locale-selector"
+            class="locale-chooser"
           >
-            {{ label }}
-          </li>
-        </ul>
-      </template>
-    </v-popover>
+            {{ selectedLocaleLabel }}
+            <i class="icon icon-fw icon-sort-down" />
+          </a>
+          <template slot="popover">
+            <ul class="list-unstyled dropdown" style="margin: -1px;">
+              <li v-if="showNone" v-t="'locale.none'" class="hand" @click="switchLocale('none')" />
+              <li
+                v-for="(label, name) in availableLocales"
+                :key="name"
+                class="hand"
+                @click="switchLocale(name)"
+              >
+                {{ label }}
+              </li>
+            </ul>
+          </template>
+        </v-popover>
+      </div>
+    </div>
+    <div v-else>
+      <Select
+        :value="selectedOption"
+        :options="localesOptions"
+        @input="switchLocale($event)"
+      />
+    </div>
   </div>
 </template>
 

package/components/ResourceTable.vue

@@ -116,7 +116,12 @@ export default {
     getCustomDetailLink: {
       type:    Function,
       default: null
-    }
+    },
+
+    ignoreFilter: {
+      type:    Boolean,
+      default: false
+    },
   },
 
   data() {
@@ -197,7 +202,7 @@ export default {
       const isAll = this.$store.getters['isAllNamespaces'];
 
       // If the resources isn't namespaced or we want ALL of them, there's nothing to do.
-      if ( !this.isNamespaced || (isAll && !this.currentProduct?.hideSystemResources)) {
+      if ( !this.isNamespaced || (isAll && !this.currentProduct?.hideSystemResources) || this.ignoreFilter) {
         return this.rows || [];
       }
 

package/components/SimpleBox.vue

@@ -29,10 +29,12 @@ export default {
 
 <template>
   <div v-if="shown" class="simple-box" v-on="$listeners">
-    <div v-if="title || canClose" class="top">
-      <h2 v-if="title">
-        {{ title }}
-      </h2>
+    <div v-if="title || canClose || $slots.title" class="top">
+      <slot name="title">
+        <h2 v-if="title">
+          {{ title }}
+        </h2>
+      </slot>
       <div v-if="canClose || pref" class="close-button" @click="closeBox($event)">
         <i class="icon icon-close" />
       </div>

package/components/SortableTable/index.vue

@@ -20,6 +20,11 @@ import actions from './actions';
 // Uncomment for table performance debugging
 // import tableDebug from './debug';
 
+// Its quicker to render if we directly supply the components for the formatters
+// rather than just the name of a global component - so create a map of the formatter comoponents
+// NOTE: This is populated by a plugin (formatters.js) to avoid issues with plugins
+export const FORMATTERS = {};
+
 export const COLUMN_BREAKPOINTS = {
   /**
    * Only show column if at tablet width or wider
@@ -35,19 +40,6 @@ export const COLUMN_BREAKPOINTS = {
   DESKTOP: 'desktop'
 };
 
-// Its quicker to render if we directly supply the components for the formatters
-// rather than just the name of a global component - so create a map of the formatter comoponents
-const FORMATTERS = {};
-
-const components = require.context('@shell/components/formatter', false, /[A-Z]\w+\.(vue)$/);
-
-components.keys().forEach((fileName) => {
-  const componentConfig = components(fileName);
-  const componentName = fileName.split('/').pop().split('.')[0];
-
-  FORMATTERS[componentName] = componentConfig.default || componentConfig;
-});
-
 // @TODO:
 // Fixed header/scrolling
 
@@ -334,6 +326,7 @@ export default {
     clearTimeout(this._loadingDelayTimer);
     clearTimeout(this._liveColumnsTimer);
     clearTimeout(this._delayedColumnsTimer);
+    clearTimeout(this.manualRefreshTimer);
 
     const $main = $('main');
 
@@ -348,23 +341,18 @@ export default {
     descending(neu, old) {
       this.watcherUpdateLiveAndDelayed(neu, old);
     },
-
     searchQuery(neu, old) {
       this.watcherUpdateLiveAndDelayed(neu, old);
     },
-
     sortFields(neu, old) {
       this.watcherUpdateLiveAndDelayed(neu, old);
     },
-
     groupBy(neu, old) {
       this.watcherUpdateLiveAndDelayed(neu, old);
     },
-
     namespaces(neu, old) {
       this.watcherUpdateLiveAndDelayed(neu, old);
     },
-
     page(neu, old) {
       this.watcherUpdateLiveAndDelayed(neu, old);
     },
@@ -385,9 +373,11 @@ export default {
 
       // setTimeout is needed so that this is pushed further back on the JS computing queue
       // because nextTick isn't enough to capture the DOM update for the manual refresh only scenario
-      setTimeout(() => {
-        this.watcherUpdateLiveAndDelayed(neu, old);
-      }, 500);
+      if (old && !neu) {
+        this.manualRefreshTimer = setTimeout(() => {
+          this.watcherUpdateLiveAndDelayed(neu, old);
+        }, 1000);
+      }
     }
   },
 

package/components/Tabbed/Tab.vue

@@ -36,6 +36,11 @@ export default {
       type:    Boolean,
       default: false
     },
+    badge: {
+      default:  0,
+      required: false,
+      type:     Number
+    },
   },
 
   data() {

package/components/Tabbed/index.vue

@@ -38,6 +38,11 @@ export default {
     noContent: {
       type:    Boolean,
       default: false,
+    },
+
+    tabsOnly: {
+      type:    Boolean,
+      default: false,
     }
   },
 
@@ -207,7 +212,7 @@ export default {
 </script>
 
 <template>
-  <div :class="{'side-tabs': !!sideTabs }">
+  <div :class="{'side-tabs': !!sideTabs, 'tabs-only': tabsOnly }">
     <ul
       ref="tablist"
       role="tablist"
@@ -233,6 +238,7 @@ export default {
           @click.prevent="select(tab.name, $event)"
         >
           <span>{{ tab.labelDisplay }}</span>
+          <span v-if="tab.badge" class="tab-badge">{{ tab.badge }}</span>
           <i v-if="hasIcon(tab)" v-tooltip="t('validation.tab')" class="conditions-alert-icon icon-error icon-lg" />
         </a>
       </li>
@@ -326,6 +332,15 @@ export default {
         color: var(--error);
       }
     }
+
+    .tab-badge {
+      margin-left: 5px;
+      background-color: var(--link);
+      color: #fff;
+      border-radius: 6px;
+      padding: 1px 7px;
+      font-size: 11px;
+    }
   }
 }
 
@@ -337,6 +352,19 @@ export default {
   }
 }
 
+.tabs-only {
+  margin-bottom: 20px;
+
+  .tab-container {
+    display: none;
+  }
+
+  .tabs {
+    border: 0;
+    border-bottom: 2px solid var(--border);
+  }
+}
+
 .side-tabs {
   display: flex;
   box-shadow: 0 0 20px var(--shadow);
@@ -349,7 +377,6 @@ export default {
 
   // Tabbed component within a tabbed component
   .tab-container & {
-    margin: -20px;
     box-shadow: unset;
   }
 

package/components/auth/Principal.vue

@@ -159,6 +159,7 @@ export default {
     .name {
       grid-area: name;
       line-height: math.div($size, 2);
+      overflow-wrap: anywhere;
     }
 
     .description {

package/components/fleet/FleetBundles.vue

@@ -103,9 +103,14 @@ export default {
       return out;
     },
   },
+
+  methods: {
+    displayWarning(row) {
+      return !!row.status?.summary && (row.status.summary.desiredReady !== row.status.summary.ready);
+    }
+  }
 };
 </script>
-
 <template>
   <div>
     <Loading v-if="$fetchState.pending" />
@@ -117,9 +122,9 @@ export default {
         :rows="bundles"
       >
         <template #cell:deploymentsReady="{row}">
-          <span v-if="row.status.summary.desiredReady != row.status.summary.ready" class="text-warning">
+          <span v-if="displayWarning(row)" class="text-warning">
             {{ row.status.summary.ready }}/{{ row.status.summary.desiredReady }}</span>
-          <span v-else>{{ row.status.summary.desiredReady }}</span>
+          <span v-else-if="row.status">{{ row.status.summary.desiredReady }}</span>
         </template>
       </ResourceTable>
     </div>

package/components/fleet/FleetSummary.vue

@@ -84,6 +84,12 @@ export default {
       const out = { ...getResourceDefaultState(this.$store.getters['i18n/withFallback'], this.stateKey) };
 
       resources.forEach(({ status, metadata }) => {
+        if (!status) {
+          out[STATES_ENUM.UNKNOWN].count += 1;
+
+          return;
+        }
+
         const k = status?.summary.ready > 0 && status?.summary.desiredReady === status.summary.ready;
 
         if (k) {

package/components/form/KeyValue.vue

@@ -12,6 +12,8 @@ import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { asciiLike } from '@shell/utils/string';
 
 export default {
+  name: 'KeyValue',
+
   components: {
     Select,
     TextAreaAutoGrow,
@@ -22,6 +24,10 @@ export default {
       type:     [Array, Object],
       default: null,
     },
+    defaultValue: {
+      type:     [Array, Object],
+      default: null,
+    },
     // If the user supplies this array, then it indicates which keys should be shown as binary
     binaryValueKeys: {
       type:    [Array, Object],
@@ -223,68 +229,13 @@ export default {
     }
   },
   data() {
-    const rows = [];
-
-    if ( this.asMap ) {
-      const input = this.value || {};
-
-      Object.keys(input).forEach((key) => {
-        let value = input[key];
-        const decodedValue = base64Decode(input[key]);
-        const asciiValue = asciiLike(decodedValue);
-
-        if ( this.handleBase64 && asciiValue) {
-          value = base64Decode(value);
-        }
-
-        rows.push({
-          key,
-          value,
-          binary:    this.displayValuesAsBinary || (this.handleBase64 && !asciiValue),
-          canEncode: this.handleBase64 && asciiValue,
-          supported: true,
-        });
-      });
-    } else {
-      const input = this.value || [];
-
-      for ( const row of input ) {
-        let value = row[this.valueName] || '';
-        const decodedValue = base64Decode(row[this.valueName]);
-        const asciiValue = asciiLike(decodedValue);
-
-        if ( this.handleBase64 && asciiValue) {
-          value = base64Decode(value);
-        }
-        const entry = {
-          [this.keyName]:   row[this.keyName] || '',
-          [this.valueName]: value,
-          binary:           this.displayValuesAsBinary || (this.handleBase64 && !asciiValue),
-          canEncode:        this.handleBase64 && asciiValue,
-          supported:        this.supported(row),
-        };
-
-        this.preserveKeys?.map((k) => {
-          if ( typeof row[k] !== 'undefined' ) {
-            entry[k] = row[k];
-          }
-        });
-        rows.push(entry);
-      }
-    }
-    if ( !rows.length && this.initialEmptyRow ) {
-      rows.push({
-        [this.keyName]:   '',
-        [this.valueName]: '',
-        binary:           false,
-        canEncode:        this.handleBase64,
-        supported:        true
-      });
-    }
+    const rows = this.getRows(this.value);
 
     return { rows };
   },
+
   computed: {
+
     isView() {
       return this.mode === _VIEW;
     },
@@ -315,7 +266,78 @@ export default {
   created() {
     this.queueUpdate = debounce(this.update, 500);
   },
+  watch: {
+    defaultValue(neu) {
+      if (Array.isArray(neu)) {
+        this.rows = this.getRows(neu);
+        this.$emit('input', neu);
+      }
+    }
+  },
   methods: {
+    getRows(value) {
+      const rows = [];
+
+      if ( this.asMap ) {
+        const input = value || {};
+
+        Object.keys(input).forEach((key) => {
+          let value = input[key];
+          const decodedValue = base64Decode(input[key]);
+          const asciiValue = asciiLike(decodedValue);
+
+          if ( this.handleBase64 && asciiValue) {
+            value = base64Decode(value);
+          }
+
+          rows.push({
+            key,
+            value,
+            binary:    this.displayValuesAsBinary || (this.handleBase64 && !asciiValue),
+            canEncode: this.handleBase64 && asciiValue,
+            supported: true,
+          });
+        });
+      } else {
+        const input = value || [];
+
+        for ( const row of input ) {
+          let value = row[this.valueName] || '';
+          const decodedValue = base64Decode(row[this.valueName]);
+          const asciiValue = asciiLike(decodedValue);
+
+          if ( this.handleBase64 && asciiValue) {
+            value = base64Decode(value);
+          }
+          const entry = {
+            [this.keyName]:   row[this.keyName] || '',
+            [this.valueName]: value,
+            binary:           this.displayValuesAsBinary || (this.handleBase64 && !asciiValue),
+            canEncode:        this.handleBase64 && asciiValue,
+            supported:        this.supported(row),
+          };
+
+          this.preserveKeys?.map((k) => {
+            if ( typeof row[k] !== 'undefined' ) {
+              entry[k] = row[k];
+            }
+          });
+          rows.push(entry);
+        }
+      }
+      if ( !rows.length && this.initialEmptyRow ) {
+        rows.push({
+          [this.keyName]:   '',
+          [this.valueName]: '',
+          binary:           false,
+          canEncode:        this.handleBase64,
+          supported:        true
+        });
+      }
+
+      return rows;
+    },
+
     add(key = '', value = '') {
       const obj = {
         ...this.defaultAddData,

package/components/form/NameNsDescription.vue

@@ -5,7 +5,7 @@ import { get, set } from '@shell/utils/object';
 import { sortBy } from '@shell/utils/sort';
 import { NAMESPACE } from '@shell/config/types';
 import { DESCRIPTION } from '@shell/config/labels-annotations';
-import { _VIEW, _EDIT } from '@shell/config/query-params';
+import { _VIEW, _EDIT, _CREATE } from '@shell/config/query-params';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 
@@ -224,15 +224,21 @@ export default {
       const namespaces = this.namespacesOverride || this.$store.getters[`${ currentStore }/all`](this.namespaceType);
 
       const filtered = namespaces.filter( this.namespaceFilter || ((namespace) => {
+        // By default, include the namespace in the dropdown.
+        let out = true;
+
         if (this.currentProduct?.hideSystemResources) {
           // Filter out the namespace
           // if it is a system namespace or if it is managed by
           // Fleet.
-          return !namespace.isSystem && !namespace.isFleetManaged;
+          out = !namespace.isSystem && !namespace.isFleetManaged;
         }
 
-        // By default, include the namespace in the dropdown.
-        return true;
+        if (this.mode === _CREATE) {
+          out = out && !!namespace.links.update;
+        }
+
+        return out;
       }));
 
       const withLabels = filtered.map(this.namespaceMapper || ((obj) => {

package/components/form/ResourceTabs/index.vue

@@ -85,7 +85,11 @@ export default {
     showConditions() {
       const inStore = this.$store.getters['currentStore'](this.value.type);
 
-      return this.isView && this.needConditions && this.value?.type && this.$store.getters[`${ inStore }/pathExistsInSchema`](this.value.type, 'status.conditions');
+      if ( this.$store.getters[`${ inStore }/schemaFor`](this.value.type) ) {
+        return this.isView && this.needConditions && this.value?.type && this.$store.getters[`${ inStore }/pathExistsInSchema`](this.value.type, 'status.conditions');
+      }
+
+      return false;
     },
     showEvents() {
       return this.isView && this.needEvents && this.hasEvents && (this.events.length || this.alwaysShowEvents);

package/components/formatter/ClusterLink.vue

@@ -25,12 +25,8 @@ export default {
       return this.row?.detailLocation;
     },
 
-    clusterHasIssues() {
-      return this.row.status?.conditions?.some(condition => condition.error === true);
-    },
-
     statusErrorConditions() {
-      if (this.clusterHasIssues) {
+      if (this.row.hasError) {
         return this.row?.status.conditions.filter(condition => condition.error === true);
       }
 
@@ -38,7 +34,7 @@ export default {
     },
 
     formattedConditions() {
-      if (this.clusterHasIssues) {
+      if (this.row.hasError) {
         const filteredConditions = this.statusErrorConditions;
         const formattedTooltip = [];
 
@@ -69,7 +65,7 @@ export default {
       class="template-upgrade-icon icon-alert icon"
     />
     <i
-      v-if="clusterHasIssues"
+      v-if="row.hasError"
       v-tooltip="{ content: `<div>${formattedConditions}</div>`, html: true }"
       class="conditions-alert-icon icon-error icon-lg"
     />

package/components/nav/NamespaceFilter.vue

@@ -1,6 +1,6 @@
 <script>
 import { mapGetters } from 'vuex';
-import { NAMESPACE_FILTERS, DEV } from '@shell/store/prefs';
+import { NAMESPACE_FILTERS, ALL_NAMESPACES } 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';
@@ -322,8 +322,8 @@ export default {
 
   methods: {
     filterNamespaces(namespaces) {
-      if (this.$store.getters['prefs/get'](DEV)) {
-        // If developer tools are turned on in the user preferences,
+      if (this.$store.getters['prefs/get'](ALL_NAMESPACES)) {
+        // If all namespaces options are turned on in the user preferences,
         // return all namespaces including system namespaces and RBAC
         // management namespaces.
         return namespaces;