@rancher/shell 0.3.0 → 0.3.2

package/components/ResourceDetail/Masthead.vue

@@ -10,6 +10,8 @@ import { HIDE_SENSITIVE } from '@shell/store/prefs';
 import {
   AS, _DETAIL, _CONFIG, _YAML, MODE, _CREATE, _EDIT, _VIEW, _UNFLAG, _GRAPH
 } from '@shell/config/query-params';
+import { ExtensionPoint, PanelLocation } from '@shell/core/types';
+import ExtensionPanel from '@shell/components/ExtensionPanel';
 
 /**
  * Resource Detail Masthead component.
@@ -21,7 +23,7 @@ export default {
   name: 'MastheadResourceDetail',
 
   components: {
-    BadgeState, Banner, ButtonGroup
+    BadgeState, Banner, ButtonGroup, ExtensionPanel
   },
   props: {
     value: {
@@ -82,6 +84,14 @@ export default {
     },
   },
 
+  data() {
+    return {
+      DETAIL_VIEW:       _DETAIL,
+      extensionType:     ExtensionPoint.PANEL,
+      extensionLocation: PanelLocation.DETAILS_MASTHEAD,
+    };
+  },
+
   computed: {
     schema() {
       const inStore = this.storeOverride || this.$store.getters['currentStore'](this.resource);
@@ -125,6 +135,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 +368,10 @@ export default {
 
       return parent?.location;
     },
+
+    hideNamespaceLocation() {
+      return this.$store.getters['currentProduct'].hideNamespaceLocation;
+    },
   },
 
   methods: {
@@ -368,6 +386,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 +405,7 @@ export default {
 
 <template>
   <div class="masthead">
-    <header class="header-layout">
+    <header>
       <div class="title">
         <div class="primaryheader">
           <h1>
@@ -407,7 +437,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"
@@ -416,13 +457,23 @@ export default {
         </div>
       </div>
       <slot name="right">
-        <div class="actions-container">
+        <div class="actions-container align-start">
           <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 +481,7 @@ export default {
               v-if="viewOptions && isView"
               v-model="currentView"
               :options="viewOptions"
+              class="mr-10"
             />
 
             <button
@@ -447,6 +499,13 @@ export default {
       </slot>
     </header>
 
+    <!-- Extension area -->
+    <ExtensionPanel
+      :resource="value"
+      :type="extensionType"
+      :location="extensionLocation"
+    />
+
     <Banner
       v-if="banner && isView && !parent.hideBanner"
       class="state-banner mb-10"
@@ -522,4 +581,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

@@ -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,21 @@ 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';
+import { PanelLocation, ExtensionPoint } from '@shell/core/types';
+import ExtensionPanel from '@shell/components/ExtensionPanel';
 
 export default {
+  name: ResourceListComponentName,
+
   components: {
     Loading,
     ResourceTable,
     Masthead,
-    ResourceLoadingIndicator
+    ResourceLoadingIndicator,
+    IconMessage,
+    ExtensionPanel
   },
   mixins: [ResourceFetch],
 
@@ -28,19 +36,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 +54,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 +67,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 +99,10 @@ export default {
       hasListComponent,
       showMasthead:                     showMasthead === undefined ? true : showMasthead,
       resource,
+      extensionType:                    ExtensionPoint.PANEL,
+      extensionLocation:                PanelLocation.RESOURCE_LIST,
+      loadResources:                    [resource], // List of resources that will be loaded, this could be many (`Workloads`)
+      hasFetch:                         false,
       // manual refresh
       manualRefreshInit:                false,
       watch:                            false,
@@ -98,7 +110,6 @@ export default {
       // Provided by fetch later
       customTypeDisplay:                null,
       // incremental loading
-      loadResources:                    [resource],
       loadIndeterminate:                false,
       // query param for simple filtering
       useQueryParamsForSimpleFiltering: true
@@ -121,6 +132,24 @@ export default {
 
     showIncrementalLoadingIndicator() {
       return this.perfConfig?.incrementalLoading?.enabled;
+    },
+
+  },
+
+  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);
+      }
     }
   },
 
@@ -140,7 +169,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,11 +191,19 @@ export default {
       :show-incremental-loading-indicator="showIncrementalLoadingIndicator"
       :load-resources="loadResources"
       :load-indeterminate="loadIndeterminate"
+      :load-namespace="namespaceFilter"
     >
       <template slot="extraActions">
         <slot name="extraActions" />
       </template>
     </Masthead>
+    <!-- Extensions area -->
+    <ExtensionPanel
+      :resource="{}"
+      :type="extensionType"
+      :location="extensionLocation"
+    />
+
     <div v-if="hasListComponent">
       <component
         :is="listComponent"
@@ -173,6 +223,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 +236,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/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,13 @@ export default {
 
     handleActionButtonClick(event) {
       this.$emit('clickedActionButton', event);
-    }
+    },
 
+    handleEnterKeyPress(event) {
+      if (event.key === 'Enter') {
+        this.keyAction('detail');
+      }
+    }
   }
 };
 </script>
@@ -406,6 +437,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 +479,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/SimpleBox.vue

@@ -74,7 +74,7 @@ export default {
   justify-content: center;
   padding: 2px;
   > i {
-    font-size: 20px;
+    font-size: 14px;
     opacity: 0.5;
   }
   &:hover {

package/components/SortableTable/THead.vue

@@ -191,6 +191,16 @@ export default {
         value
       });
     },
+
+    tooltip(col) {
+      if (!col.tooltip) {
+        return null;
+      }
+
+      const exists = this.$store.getters['i18n/exists'];
+
+      return exists(col.tooltip) ? this.t(col.tooltip) : col.tooltip;
+    },
   }
 
 };
@@ -230,7 +240,7 @@ export default {
         >
           <span
             v-if="col.sort"
-            v-tooltip="col.tooltip"
+            v-tooltip="tooltip(col)"
           >
             <span v-html="labelFor(col)" />
             <i
@@ -252,7 +262,7 @@ export default {
           </span>
           <span
             v-else
-            v-tooltip="col.tooltip"
+            v-tooltip="tooltip(col)"
           >{{ labelFor(col) }}</span>
         </div>
       </th>
@@ -338,7 +348,7 @@ export default {
         }
       }
       .table-options-container {
-        width: 320px;
+        width: 350px;
         border: 1px solid var(--primary);
         background-color: var(--body-bg);
         padding: 20px;
@@ -359,11 +369,10 @@ export default {
           list-style: none;
           margin: 0;
           padding: 0;
-          display: flex;
-          flex-wrap: wrap;
+          max-height: 200px;
+          overflow-y: auto;
 
           li {
-            flex: 1 1 136px;
             margin: 0;
             padding: 0;
 
@@ -405,11 +414,11 @@ export default {
       color: var(--body-text);
 
       .table-header-container {
-        display: flex;
-        align-items: center;
+        display: inherit;
 
         > span {
-          display: contents;
+          display: flex;
+          align-items: center;
         }
 
         &.not-filterable {
@@ -476,12 +485,10 @@ export default {
     }
   </style>
   <style lang="scss">
+    .table-options-checkbox .checkbox-custom {
+      min-width: 14px;
+    }
     .table-options-checkbox .checkbox-label {
       color: var(--body-text);
-      text-overflow: ellipsis;
-      width: 100px;
-      display: inline-block;
-      white-space: nowrap;
-      overflow: hidden;
     }
   </style>

package/components/SortableTable/filtering.js

@@ -254,7 +254,7 @@ function matches(fields, token, item) {
     }
 
     if ( !modifier ) {
-      if ( val.includes(token) ) {
+      if ( val.includes((`${ token }`).toLowerCase()) ) {
         return true;
       }
     } else if ( modifier === 'exact' ) {