@rancher/shell 0.2.5 → 0.3.1

package/components/Questions/Question.js

@@ -8,7 +8,7 @@ export default {
     },
 
     mode: {
-      type:     String,
+      type:    String,
       default: _EDIT,
     },
 

package/components/ResourceCancelModal.vue

@@ -1,12 +1,12 @@
 <script>
 export default {
-  props:      {
+  props: {
     isCancelModal: {
-      type:     Boolean,
+      type:    Boolean,
       default: false
     },
     isForm: {
-      type:     Boolean,
+      type:    Boolean,
       default: false
     },
   },

package/components/ResourceDetail/Masthead.vue

@@ -23,7 +23,7 @@ export default {
   components: {
     BadgeState, Banner, ButtonGroup
   },
-  props:      {
+  props: {
     value: {
       type:    Object,
       default: () => {
@@ -82,6 +82,10 @@ export default {
     },
   },
 
+  data() {
+    return { DETAIL_VIEW: _DETAIL };
+  },
+
   computed: {
     schema() {
       const inStore = this.storeOverride || this.$store.getters['currentStore'](this.resource);
@@ -125,6 +129,10 @@ export default {
       return null;
     },
 
+    detailsAction() {
+      return this.value?.detailsAction;
+    },
+
     shouldHifenize() {
       return (this.mode === 'view' || this.mode === 'edit') && this.resourceSubtype?.length && this.value?.nameDisplay?.length;
     },
@@ -354,6 +362,10 @@ export default {
 
       return parent?.location;
     },
+
+    hideNamespaceLocation() {
+      return this.$store.getters['currentProduct'].hideNamespaceLocation;
+    },
   },
 
   methods: {
@@ -368,6 +380,18 @@ export default {
 
     toggleSensitiveData(e) {
       this.$store.dispatch('prefs/set', { key: HIDE_SENSITIVE, value: !!e });
+    },
+
+    invokeDetailsAction() {
+      const action = this.detailsAction;
+
+      if (action) {
+        const fn = this.value[action.action];
+
+        if (fn) {
+          fn.apply(this.value, []);
+        }
+      }
     }
   }
 };
@@ -375,7 +399,7 @@ export default {
 
 <template>
   <div class="masthead">
-    <header class="header-layout">
+    <header>
       <div class="title">
         <div class="primaryheader">
           <h1>
@@ -407,7 +431,18 @@ export default {
         >
           <span v-if="isNamespace && project">{{ t("resourceDetail.masthead.project") }}: <nuxt-link :to="project.detailLocation">{{ project.nameDisplay }}</nuxt-link></span>
           <span v-else-if="isWorkspace">{{ t("resourceDetail.masthead.workspace") }}: <nuxt-link :to="workspaceLocation">{{ namespace }}</nuxt-link></span>
-          <span v-else-if="namespace && !hasMultipleNamespaces">{{ t("resourceDetail.masthead.namespace") }}: <nuxt-link :to="namespaceLocation">{{ namespace }}</nuxt-link></span>
+          <span v-else-if="namespace && !hasMultipleNamespaces">
+            {{ t("resourceDetail.masthead.namespace") }}:
+            <nuxt-link
+              v-if="!hideNamespaceLocation"
+              :to="namespaceLocation"
+            >
+              {{ namespace }}
+            </nuxt-link>
+            <span v-else>
+              {{ namespace }}
+            </span>
+          </span>
           <span v-if="parent.showAge">{{ t("resourceDetail.masthead.age") }}: <LiveDate
             class="live-date"
             :value="value.creationTimestamp"
@@ -418,11 +453,21 @@ export default {
       <slot name="right">
         <div class="actions-container">
           <div class="actions">
+            <button
+              v-if="detailsAction && currentView === DETAIL_VIEW && isView"
+              type="button"
+              class="btn role-primary actions mr-10"
+              :disabled="!detailsAction.enabled"
+              @click="invokeDetailsAction"
+            >
+              {{ detailsAction.label }}
+            </button>
             <ButtonGroup
               v-if="showSensitiveToggle"
               :value="!!hideSensitiveData"
               icon-size="lg"
               :options="sensitiveOptions"
+              class="mr-10"
               @input="toggleSensitiveData"
             />
 
@@ -430,6 +475,7 @@ export default {
               v-if="viewOptions && isView"
               v-model="currentView"
               :options="viewOptions"
+              class="mr-10"
             />
 
             <button
@@ -522,4 +568,10 @@ export default {
     }
   }
 
+  div.actions-container > div.actions {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+
 </style>

package/components/ResourceDetail/index.vue

@@ -26,7 +26,8 @@ function modeFor(route) {
   }
 }
 
-async function getYaml(model) {
+async function getYaml(store, model) {
+  const inStore = store.getters['currentStore'](model.type);
   let yaml;
   const opt = { headers: { accept: 'application/yaml' } };
 
@@ -34,7 +35,9 @@ async function getYaml(model) {
     yaml = (await model.followLink('view', opt)).data;
   }
 
-  return yaml;
+  const cleanedYaml = await store.dispatch(`${ inStore }/cleanForDownload`, yaml);
+
+  return cleanedYaml;
 }
 
 export default {
@@ -146,6 +149,11 @@ export default {
       initialModel = await store.dispatch(`${ inStore }/clone`, { resource: liveModel });
       model = await store.dispatch(`${ inStore }/clone`, { resource: liveModel });
 
+      if (model.forceYaml === true) {
+        as = _YAML;
+        this.as = as;
+      }
+
       if ( as === _YAML ) {
         yaml = createYaml(schemas, resource, data);
       }
@@ -182,7 +190,7 @@ export default {
       initialModel = await store.dispatch(`${ inStore }/clone`, { resource: liveModel });
 
       if ( as === _YAML ) {
-        yaml = await getYaml(liveModel);
+        yaml = await getYaml(this.$store, liveModel);
       }
 
       if ( as === _GRAPH ) {
@@ -222,7 +230,6 @@ export default {
       this.value.applyDefaults(this, realMode);
     }
   },
-
   data() {
     return {
       chartData:       null,
@@ -306,7 +313,7 @@ export default {
     // Auto refresh YAML when the model changes
     async 'value.metadata.resourceVersion'(a, b) {
       if ( this.mode === _VIEW && this.as === _YAML && a && b && a !== b) {
-        this.yaml = await getYaml(this.liveModel);
+        this.yaml = await getYaml(this.$store, this.liveModel);
       }
     }
   },

package/components/ResourceList/Masthead.vue

@@ -24,7 +24,7 @@ export default {
       required: true,
     },
     favoriteResource: {
-      type:     String,
+      type:    String,
       default: null
     },
     schema: {
@@ -65,6 +65,11 @@ export default {
       default: false
     },
 
+    loadNamespace: {
+      type:    String,
+      default: null
+    },
+
     showIncrementalLoadingIndicator: {
       type:    Boolean,
       default: false
@@ -163,7 +168,7 @@ export default {
 </script>
 
 <template>
-  <header class="header-layout">
+  <header>
     <slot name="typeDescription">
       <TypeDescription :resource="resource" />
     </slot>
@@ -178,6 +183,7 @@ export default {
         v-if="showIncrementalLoadingIndicator"
         :resources="loadResources"
         :indeterminate="loadIndeterminate"
+        :namespace="loadNamespace"
       />
     </div>
     <div class="actions-container">
@@ -217,4 +223,8 @@ export default {
       margin: 0;
     }
   }
+
+  header {
+    margin-bottom: 20px;
+  }
 </style>

package/components/ResourceList/ResourceLoadingIndicator.vue

@@ -16,7 +16,11 @@ export default {
     indeterminate: {
       type:    Boolean,
       default: false,
-    }
+    },
+    namespace: {
+      type:    String,
+      default: undefined
+    },
   },
 
   data() {
@@ -40,6 +44,10 @@ export default {
     // Have we loaded all resources for the types that are needed
     haveAll() {
       return this.resources.reduce((acc, r) => {
+        if (this.namespace) {
+          return acc && this.$store.getters[`${ this.inStore }/haveAllNamespace`](r, this.namespace);
+        }
+
         return acc && this.$store.getters[`${ this.inStore }/haveAll`](r);
       }, true);
     },
@@ -49,7 +57,9 @@ export default {
       const clusterCounts = this.$store.getters[`${ this.inStore }/all`](COUNT);
 
       return this.resources.reduce((acc, r) => {
-        const count = clusterCounts?.[0]?.counts?.[r]?.summary?.count || 0;
+        const resourceCounts = clusterCounts?.[0]?.counts?.[r];
+        const resourceCount = this.namespace ? resourceCounts?.namespaces?.[this.namespace]?.count : resourceCounts?.summary?.count;
+        const count = resourceCount || 0;
 
         return acc + count;
       }, 0);

package/components/ResourceList/index.vue

@@ -4,13 +4,18 @@ import Loading from '@shell/components/Loading';
 import Masthead from './Masthead';
 import ResourceLoadingIndicator from './ResourceLoadingIndicator';
 import ResourceFetch from '@shell/mixins/resource-fetch';
+import IconMessage from '@shell/components/IconMessage.vue';
+import { ResourceListComponentName } from './resource-list.config';
 
 export default {
+  name: ResourceListComponentName,
+
   components: {
     Loading,
     ResourceTable,
     Masthead,
-    ResourceLoadingIndicator
+    ResourceLoadingIndicator,
+    IconMessage
   },
   mixins: [ResourceFetch],
 
@@ -28,19 +33,16 @@ export default {
       default: false
     },
   },
+
   async fetch() {
     const store = this.$store;
     const resource = this.resource;
 
-    let hasFetch = false;
-
-    const inStore = store.getters['currentStore'](resource);
-
-    const schema = store.getters[`${ inStore }/schemaFor`](resource);
+    const schema = this.schema;
 
     if ( this.hasListComponent ) {
       // If you provide your own list then call its asyncData
-      const importer = store.getters['type-map/importList'](resource);
+      const importer = this.listComponent;
       const component = (await importer())?.default;
 
       if ( component?.typeDisplay ) {
@@ -49,7 +51,7 @@ export default {
 
       // If your list page has a fetch then it's responsible for populating rows itself
       if ( component?.fetch ) {
-        hasFetch = true;
+        this.hasFetch = true;
       }
 
       // If the custom component supports it, ask it what resources it loads, so we can
@@ -62,14 +64,17 @@ export default {
       }
     }
 
-    if ( !hasFetch ) {
+    if ( !this.hasFetch ) {
       if ( !schema ) {
         store.dispatch('loadingError', new Error(`Type ${ resource } not found, unable to display list`));
 
         return;
       }
 
-      await this.$fetchType(resource);
+      // See comment for `namespaceFilterRequired` watcher, skip fetch if we don't have a valid NS
+      if (!this.namespaceFilterRequired) {
+        await this.$fetchType(resource);
+      }
     }
   },
 
@@ -91,6 +96,8 @@ export default {
       hasListComponent,
       showMasthead:                     showMasthead === undefined ? true : showMasthead,
       resource,
+      loadResources:                    [resource], // List of resources that will be loaded, this could be many (`Workloads`)
+      hasFetch:                         false,
       // manual refresh
       manualRefreshInit:                false,
       watch:                            false,
@@ -98,7 +105,6 @@ export default {
       // Provided by fetch later
       customTypeDisplay:                null,
       // incremental loading
-      loadResources:                    [resource],
       loadIndeterminate:                false,
       // query param for simple filtering
       useQueryParamsForSimpleFiltering: true
@@ -124,6 +130,23 @@ export default {
     }
   },
 
+  watch: {
+    /**
+     * When a NS filter is required and the user selects a different one, kick off a new set of API requests
+     *
+     * ResourceList has two modes
+     * 1) ResourceList component handles API request to fetch resources
+     * 2) Custom list component handles API request to fetch resources
+     *
+     * This covers case 1
+     */
+    namespaceFilter(neu) {
+      if (neu && !this.hasFetch) {
+        this.$fetchType(this.resource);
+      }
+    }
+  },
+
   created() {
     let listComponent = false;
 
@@ -140,7 +163,20 @@ export default {
 </script>
 
 <template>
-  <div>
+  <IconMessage
+    v-if="namespaceFilterRequired"
+    :vertical="true"
+    :subtle="false"
+    icon="icon-filter_alt"
+  >
+    <template #message>
+      <span
+        class="filter"
+        v-html="t('resourceList.nsFiltering', { resource: $store.getters['type-map/labelFor'](schema, 2) || customTypeDisplay }, true)"
+      />
+    </template>
+  </IconMessage>
+  <div v-else>
     <Masthead
       v-if="showMasthead"
       :type-display="customTypeDisplay"
@@ -149,6 +185,7 @@ export default {
       :show-incremental-loading-indicator="showIncrementalLoadingIndicator"
       :load-resources="loadResources"
       :load-indeterminate="loadIndeterminate"
+      :load-namespace="namespaceFilter"
     >
       <template slot="extraActions">
         <slot name="extraActions" />
@@ -173,6 +210,7 @@ export default {
       :adv-filter-hide-labels-as-cols="advFilterHideLabelsAsCols"
       :adv-filter-prevent-filtering-labels="advFilterPreventFilteringLabels"
       :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
+      :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
     />
   </div>
 </template>
@@ -185,6 +223,9 @@ export default {
       position: relative;
       margin: 0 0 20px 0;
     }
+    .filter{
+      line-height: 45px;
+    }
     .right-action {
       position: absolute;
       top: 10px;

package/components/ResourceList/resource-list.config.js

@@ -0,0 +1,7 @@
+/**
+ * Component name of the `ResourceList`
+ *
+ * This needs to be a in separate file to avoid circular dependency of
+ * index.vue --> resource-fetch mixin --> resource-fetch-namespaced mixin --> index.vue
+ */
+export const ResourceListComponentName = 'ResourceList';

package/components/ResourceSummary.vue

@@ -42,9 +42,9 @@ export function resourceCounts(store, resource) {
 export default {
   components: { SimpleBox },
 
-  props:      {
+  props: {
     resource: {
-      type:     String,
+      type:    String,
       default: ''
     },
 
@@ -74,8 +74,8 @@ export default {
       }
 
       const route = {
-        name:     'c-cluster-product-resource',
-        params:   {
+        name:   'c-cluster-product-resource',
+        params: {
           product:  this.$store.getters['currentProduct'].name,
           resource: this.resource,
         }

package/components/ResourceTable.vue

@@ -140,9 +140,30 @@ export default {
     useQueryParamsForSimpleFiltering: {
       type:    Boolean,
       default: false
+    },
+    /**
+     * Manaul force the update of live and delayed cells. Change this number to kick off the update
+     */
+    forceUpdateLiveAndDelayed: {
+      type:    Number,
+      default: 0
     }
   },
 
+  mounted() {
+    /**
+     * v-shortkey prevents the event's propagation:
+     * https://github.com/fgr-araujo/vue-shortkey/blob/55d802ea305cadcc2ea970b55a3b8b86c7b44c05/src/index.js#L156-L157
+     *
+     * 'Enter' key press is handled via event listener in order to allow the event propagation
+     */
+    window.addEventListener('keyup', this.handleEnterKeyPress);
+  },
+
+  beforeDestroy() {
+    window.removeEventListener('keyup', this.handleEnterKeyPress);
+  },
+
   data() {
     const options = this.$store.getters[`type-map/optionsFor`](this.schema);
     const listGroups = options?.listGroups || [];
@@ -232,11 +253,16 @@ export default {
         return [];
       }
 
+      const haveAllNamespace = this.$store.getters['haveAllNamespace'];
+
       return this.rows.filter((row) => {
         if (this.currentProduct?.hideSystemResources && this.isNamespaced) {
           return !!includedNamespaces[row.metadata.namespace] && !row.isSystemResource;
         } else if (!this.isNamespaced) {
           return true;
+        } else if (haveAllNamespace) {
+          // `rows` only contains resource from a single namespace
+          return true;
         } else {
           return !!includedNamespaces[row.metadata.namespace];
         }
@@ -375,8 +401,11 @@ export default {
 
     handleActionButtonClick(event) {
       this.$emit('clickedActionButton', event);
-    }
+    },
 
+    handleEnterKeyPress(event) {
+      this.keyAction('detail');
+    }
   }
 };
 </script>
@@ -406,6 +435,7 @@ export default {
     key-field="_key"
     :sort-generation-fn="safeSortGenerationFn"
     :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
+    :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
     @clickedActionButton="handleActionButtonClick"
     @group-value-change="group = $event"
     v-on="$listeners"
@@ -447,11 +477,6 @@ export default {
     </template>
 
     <template #shortkeys>
-      <button
-        v-shortkey.once="['enter']"
-        class="hide detail"
-        @shortkey="keyAction('detail')"
-      />
       <button
         v-shortkey.once="['e']"
         class="hide"

package/components/RoleBindings.vue

@@ -131,18 +131,18 @@ export default {
           search:   'subjectKind',
         },
         {
-          name:      'subject',
-          labelKey:  'tableHeaders.subject',
-          value:     'userObj.labelForSelect',
-          sort:      'userObj.labelForSelect',
-          search:    'userObj.labelForSelect',
+          name:     'subject',
+          labelKey: 'tableHeaders.subject',
+          value:    'userObj.labelForSelect',
+          sort:     'userObj.labelForSelect',
+          search:   'userObj.labelForSelect',
         },
         {
-          name:      'role',
-          labelKey:  'tableHeaders.role',
-          value:     'roleObj.nameWithinProduct',
-          sort:      'roleObj.nameWithinProduct',
-          search:    'roleObj.nameWithinProduct',
+          name:     'role',
+          labelKey: 'tableHeaders.role',
+          value:    'roleObj.nameWithinProduct',
+          sort:     'roleObj.nameWithinProduct',
+          search:   'roleObj.nameWithinProduct',
         },
       ];
     },
@@ -219,15 +219,15 @@ export default {
           }
 
           return {
-            subjectKind:      subject.kind,
-            subject:          subject.name,
-            userObj:          findBy(this.allUsers, 'id', subject.name),
-            roleKind:         binding.roleRef.kind,
-            role:             binding.roleRef.name,
-            roleObj:          findBy(this.allRoles, 'id', binding.roleRef.name),
-            existing:         binding,
-            existingIdx:      i,
-            remove:           false,
+            subjectKind: subject.kind,
+            subject:     subject.name,
+            userObj:     findBy(this.allUsers, 'id', subject.name),
+            roleKind:    binding.roleRef.kind,
+            role:        binding.roleRef.name,
+            roleObj:     findBy(this.allRoles, 'id', binding.roleRef.name),
+            existing:    binding,
+            existingIdx: i,
+            remove:      false,
           };
         }
       });

package/components/SimpleBox.vue

@@ -38,13 +38,17 @@ export default {
       class="top"
     >
       <slot name="title">
-        <h2 v-if="title">
+        <h2
+          v-if="title"
+          data-testid="simple-box-title"
+        >
           {{ title }}
         </h2>
       </slot>
       <div
         v-if="canClose || pref"
         class="close-button"
+        data-testid="simple-box-close"
         @click="closeBox($event)"
       >
         <i class="icon icon-close" />
@@ -70,7 +74,7 @@ export default {
   justify-content: center;
   padding: 2px;
   > i {
-    font-size: 20px;
+    font-size: 14px;
     opacity: 0.5;
   }
   &:hover {

package/components/SingleClusterInfo.vue

@@ -42,11 +42,11 @@ export default {
 
     totalCountGaugeInput() {
       const totalInput = {
-        name:            this.t('clusterIndexPage.resourceGauge.totalResources'),
-        total:           0,
-        useful:          0,
-        warningCount:    0,
-        errorCount:      0
+        name:         this.t('clusterIndexPage.resourceGauge.totalResources'),
+        total:        0,
+        useful:       0,
+        warningCount: 0,
+        errorCount:   0
       };
 
       this.accessibleResources.forEach((resource) => {