@rancher/shell 0.3.0 → 0.3.1

package/machine-config/pnap.vue

@@ -0,0 +1,288 @@
+<script>
+import { NORMAN } from '@shell/config/types';
+import { exceptionToErrorsArray, stringify } from '@shell/utils/error';
+import { _CREATE } from '@shell/config/query-params';
+import CreateEditView from '@shell/mixins/create-edit-view';
+import Loading from '@shell/components/Loading';
+import { Banner } from '@components/Banner';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { LabeledInput } from '@components/Form/LabeledInput';
+
+export default {
+  components: {
+    Loading,
+    Banner,
+    LabeledSelect,
+    LabeledInput,
+  },
+
+  mixins: [CreateEditView],
+
+  props: {
+    credentialId: {
+      type:     String,
+      required: true,
+    },
+    disabled: {
+      type:    Boolean,
+      default: false,
+    },
+  },
+
+  async fetch() {
+    this.errors = [];
+
+    try {
+      if (this.credentialId) {
+        this.credential = await this.$store.dispatch('rancher/find', {
+          type: NORMAN.CLOUD_CREDENTIAL,
+          id:   this.credentialId,
+        });
+        this.$set(this.value, 'clientIdentifier', this.credential.decodedData.clientIdentifier);
+      }
+    } catch (e) {
+      this.credential = null;
+    }
+
+    try {
+      this.allProducts = await this.$store.dispatch('pnap/allProducts', { credentialId: this.credentialId });
+
+      this.osChoices = await this.$store.dispatch('pnap/osChoices', { credentialId: this.credentialId });
+
+      const serverOs = this.osChoices[0].value;
+
+      if (!this.value.serverOs) {
+        this.value.serverOs = serverOs;
+      }
+      if (!this.value.serverLocation) {
+        this.value.serverLocation = 'PHX';
+      }
+      if (!this.value.serverType) {
+        this.value.serverType = 's1.c1.medium';
+      }
+      this.updateInterfaces();
+    } catch (e) {
+      this.errors = exceptionToErrorsArray(e);
+    }
+  },
+
+  data() {
+    return {
+      credential:  null,
+      allProducts: null,
+      osChoices:   null,
+    };
+  },
+
+  watch: {
+    'credentialId'() {
+      this.$fetch();
+    },
+  },
+
+  computed: {
+    isCreate() {
+      return this.mode === _CREATE;
+    },
+    locationChoices() {
+      const products = this.allProducts;
+      const result = [];
+
+      if (Array.isArray(products)) {
+        const map = new Map();
+
+        for (const prod of products) {
+          for (const plan of prod.plans) {
+            if (!map.has(plan.location)) {
+              map.set(plan.location, true);
+              result.push({ value: plan.location, label: plan.location });
+            }
+          }
+        }
+      } else {
+        result.push({ value: products.message });
+      }
+
+      return result;
+    },
+    typeChoices() {
+      const products = this.allProducts;
+      const result = [];
+
+      if (Array.isArray(products)) {
+        const map = new Map();
+        const serverLocation = this.value.serverLocation;
+
+        for (const prod of products) {
+          for (const plan of prod.plans) {
+            if (
+              !map.has(prod.productCode) &&
+              plan.location === serverLocation
+            ) {
+              map.set(prod.productCode, true);
+              result.push({
+                value: prod.productCode,
+                label: `${ prod.productCode } - $${ plan.price }/hour`,
+              });
+            }
+          }
+        }
+        if (!map.has(this.value.serverType) && products.length > 0) {
+          this.preselectFirst(result[0].value);
+        }
+      } else {
+        result.push({ value: products.message });
+      }
+
+      return result;
+    },
+    type() {
+      const products = this.allProducts;
+
+      if (Array.isArray(products)) {
+        const serverLocation = this.value.serverLocation;
+        const serverType = this.value.serverType;
+
+        for (const prod of products) {
+          for (const plan of prod.plans) {
+            if (prod.productCode === serverType && plan.location === serverLocation) {
+              return prod;
+            }
+          }
+        }
+      }
+
+      return products.message;
+    },
+  },
+
+  methods: {
+    stringify,
+
+    updateInterfaces() {
+      if (!this.value.interfaces) {
+        this.value.interfaces = [];
+      }
+    },
+
+    preselectFirst(val) {
+      this.value.serverType = val;
+    },
+  },
+};
+</script>
+
+<template>
+  <Loading
+    v-if="$fetchState.pending"
+    :delayed="true"
+  />
+  <div v-else-if="errors.length">
+    <div
+      v-for="(err, idx) in errors"
+      :key="idx"
+    >
+      <Banner
+        color="error"
+        :label="stringify(err)"
+      />
+    </div>
+  </div>
+  <div v-else>
+    <div class="row mt-20">
+      <div class="col span-6">
+        <LabeledSelect
+          v-model="value.serverLocation"
+          :mode="mode"
+          :options="locationChoices"
+          :searchable="true"
+          :required="true"
+          :disabled="disabled"
+          :label="t('cluster.machineConfig.pnap.serverLocation.label')"
+        />
+      </div>
+      <div class="col span-6">
+        <LabeledSelect
+          v-model="value.serverType"
+          :mode="mode"
+          :options="typeChoices"
+          :searchable="true"
+          :required="true"
+          :disabled="disabled"
+          :label="t('cluster.machineConfig.pnap.serverType.label')"
+        />
+      </div>
+    </div>
+    <div class="row mt-20">
+      <div class="col span-3">
+        <LabeledInput
+          v-model="type.metadata.cpu"
+          :mode="mode"
+          :disabled="true"
+          :label="t('cluster.machineConfig.pnap.serverCpu.label')"
+        />
+      </div>
+      <div class="col span-3">
+        <LabeledInput
+          v-model="type.metadata.coresPerCpu"
+          :mode="mode"
+          :disabled="true"
+          :label="t('cluster.machineConfig.pnap.serverCoresPerCpu.label')"
+        />
+      </div>
+      <div class="col span-3">
+        <LabeledInput
+          v-model="type.metadata.cpuCount"
+          :mode="mode"
+          :disabled="true"
+          :label="t('cluster.machineConfig.pnap.serverCpuCount.label')"
+        />
+      </div>
+      <div class="col span-3">
+        <LabeledInput
+          v-model="type.metadata.cpuFrequency"
+          :mode="mode"
+          :disabled="true"
+          :label="t('cluster.machineConfig.pnap.serverCpuFrequency.label')"
+        />
+      </div>
+    </div>
+    <div class="row mt-20">
+      <div class="col span-3">
+        <LabeledInput
+          v-model="type.metadata.ramInGb"
+          :mode="mode"
+          :disabled="true"
+          :label="t('cluster.machineConfig.pnap.serverRam.label')"
+        />
+      </div>
+      <div class="col span-3">
+        <LabeledInput
+          v-model="type.metadata.storage"
+          :mode="mode"
+          :disabled="true"
+          :label="t('cluster.machineConfig.pnap.serverStorage.label')"
+        />
+      </div>
+      <div class="col span-3">
+        <LabeledInput
+          v-model="type.metadata.network"
+          :mode="mode"
+          :disabled="true"
+          :label="t('cluster.machineConfig.pnap.serverNetwork.label')"
+        />
+      </div>
+      <div class="col span-3">
+        <LabeledSelect
+          v-model="value.serverOs"
+          :mode="mode"
+          :options="osChoices"
+          :searchable="true"
+          :required="true"
+          :disabled="disabled"
+          :label="t('cluster.machineConfig.pnap.serverOs.label')"
+        />
+      </div>
+    </div>
+  </div>
+</template>

package/mixins/auth-config.js

@@ -214,7 +214,7 @@ export default {
       }
     },
 
-    async disable(btnCb) {
+    async disable() {
       try {
         if (this.model.hasAction('disable')) {
           await this.model.doAction('disable');
@@ -233,10 +233,8 @@ export default {
           opt:  { url: '/v3/principals', force: true }
         });
         this.showLdap = false;
-        btnCb(true);
       } catch (err) {
         this.errors = [err];
-        btnCb(false);
       }
     },
 

package/mixins/browser-tab-visibility.js

@@ -5,33 +5,27 @@ export default {
   computed: { ...mapGetters(['isSingleProduct']) },
   methods:  {
     setTabVisibilityListener(isAdd) {
-      const method = isAdd ? 'addEventListener' : 'removeEventListener';
+      if ((!this.isSingleProduct || this.isSingleProduct?.enableSessionCheck) && this.$config.rancherEnv !== 'desktop') {
+        const method = isAdd ? 'addEventListener' : 'removeEventListener';
 
-      document[method]('visibilitychange', this.visibilityChange, true);
+        document[method]('visibilitychange', this.visibilityChange, true);
+      }
     },
 
     async visibilityChange() {
       if (!document.hidden) {
-        await this.$store.dispatch('rancher/findAll', {
+        await this.$store.dispatch('rancher/request', {
           type: NORMAN.USER,
-          opt:  {
-            url:    '/v3/users',
-            filter: { me: true },
-            force:  true
-          }
+          opt:  { url: '/v3/users?me=true' }
         });
       }
     },
   },
 
   mounted() {
-    if ((!this.isSingleProduct || this.isSingleProduct?.enableSessionCheck) && this.$config.rancherEnv !== 'desktop') {
-      this.setTabVisibilityListener(true);
-    }
+    this.setTabVisibilityListener(true);
   },
   beforeDestroy() {
-    if ((!this.isSingleProduct || this.isSingleProduct?.enableSessionCheck) && this.$config.rancherEnv !== 'desktop') {
-      this.setTabVisibilityListener(false);
-    }
+    this.setTabVisibilityListener(false);
   },
 };

package/mixins/chart.js

@@ -242,7 +242,7 @@ export default {
 
   methods: {
     async fetchChart() {
-      await this.$store.dispatch('catalog/load');
+      await this.$store.dispatch('catalog/load', { force: true, reset: true }); // not the problem
 
       if ( this.query.appNamespace && this.query.appName ) {
         // First check the URL query for an app name and namespace.

package/mixins/create-edit-view/impl.js

@@ -187,6 +187,10 @@ export default {
       } else {
         await this.value.save();
       }
+    },
+
+    setErrors(errors) {
+      this.errors = errors;
     }
   },
 };

package/mixins/create-edit-view/index.js

@@ -1,7 +1,9 @@
 import { _EDIT, _YAML } from '@shell/config/query-params';
+import Vue from 'vue';
+
 import impl from './impl';
 
-export default {
+export default Vue.extend({
   ...impl,
 
   props: {
@@ -43,4 +45,4 @@ export default {
       default: false,
     },
   },
-};
+});

package/mixins/resource-fetch-namespaced.js

@@ -0,0 +1,98 @@
+import { mapGetters } from 'vuex';
+import { ResourceListComponentName } from '../components/ResourceList/resource-list.config';
+
+/**
+ * Companion mixin used with `resource-fetch` for `ResourceList` to determine if the user needs to filter the list by a single namespace
+ */
+export default {
+
+  data() {
+    return { forceUpdateLiveAndDelayed: 0 };
+  },
+
+  computed: {
+    ...mapGetters(['currentProduct', 'currentCluster', 'isSingleNamespace']),
+
+    /**
+     * Does the user need to update the filter to supply a single namespace?
+     */
+    namespaceFilterRequired() {
+      return this.__namespaceRequired && !this.__singleNamespaceFilter;
+    },
+
+    /**
+     * Returns the namespace that requests should be filtered by
+     */
+    namespaceFilter() {
+      return this.__namespaceRequired ? this.__singleNamespaceFilter : '';
+    },
+
+    /**
+     * If the Project/Namespace filter from the header contains a single NS... return it
+     */
+    __singleNamespaceFilter() {
+      const ns = this.isSingleNamespace;
+
+      return ns ? ns.replace('ns://', '') : '';
+    },
+
+    /**
+     * Do we need to filter the list by a namespace?
+     */
+    __namespaceRequired() {
+      if (!this.forceNsFilter?.enabled || this.perfConfig.forceNsFilter.threshold === undefined) {
+        return false;
+      }
+
+      return !this.currentProduct.showWorkspaceSwitcher && this.__areResourcesNamespaced && this.__areResourcesTooMany;
+    },
+
+    /**
+     * Are all core list resources namespaced?
+     */
+    __areResourcesNamespaced() {
+      return (this.loadResources || []).every((type) => {
+        const schema = this.$store.getters['cluster/schemaFor'](type);
+
+        return schema?.attributes?.namespaced;
+      });
+    },
+
+    /**
+     * Are there too many core list resources to show in the list?
+     */
+    __areResourcesTooMany() {
+      // __getCountForResources is defined on resource-fetch mixin...
+      const count = this.__getCountForResources(this.loadResources);
+
+      return count > this.perfConfig.forceNsFilter.threshold;
+    },
+
+  },
+
+  watch: {
+    __namespaceRequired: {
+      handler(neu) {
+        this.$store.dispatch('setNamespaceFilterMode', neu ? 'namespace' : null, { root: true });
+      },
+      immediate: true,
+    },
+
+    async namespaceFilter(neu) {
+      if (neu) {
+        // 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 2
+        if (this.$options.name !== ResourceListComponentName && !!this.$fetch) {
+          await this.$fetch();
+        }
+        // Ensure any live/delayed columns get updated
+        this.forceUpdateLiveAndDelayed = new Date().getTime();
+      }
+    }
+  }
+};

package/mixins/resource-fetch.js

@@ -1,11 +1,15 @@
 import { mapGetters } from 'vuex';
 import { COUNT, MANAGEMENT } from '@shell/config/types';
 import { SETTING, DEFAULT_PERF_SETTING } from '@shell/config/settings';
+import ResourceFetchNamespaced from '@shell/mixins/resource-fetch-namespaced';
 
 // Number of pages to fetch when loading incrementally
 const PAGES = 4;
 
 export default {
+
+  mixins: [ResourceFetchNamespaced],
+
   data() {
     // fetching the settings related to manual refresh from global settings
     const perfSetting = this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.UI_PERFORMANCE);
@@ -24,16 +28,21 @@ export default {
     return {
       perfConfig,
       init:                       false,
-      counts:                     {},
       multipleResources:          [],
+      loadResources:              [this.resource],
       // manual refresh vars
       hasManualRefresh:           false,
       watch:                      true,
       isTooManyItemsToAutoUpdate: false,
       force:                      false,
       // incremental loading vars
-      incremental:                0,
+      incremental:                false,
       fetchedResourceType:        [],
+      // force ns filtering
+      forceNsFilter:              {
+        ...perfConfig.forceNsFilter,
+        threshold: parseInt(perfConfig?.forceNsFilter?.threshold || '0', 10)
+      }
     };
   },
   beforeDestroy() {
@@ -42,10 +51,8 @@ export default {
       // clear up the store to make sure we aren't storing anything that might interfere with the next rendered list view
       this.$store.dispatch('resource-fetch/clearData');
 
-      const inStore = this.$store.getters['currentStore'](COUNT);
-
-      this.fetchedResourceType.forEach((type) => {
-        this.$store.dispatch(`${ inStore }/incrementLoadCounter`, type);
+      this.fetchedResourceType.forEach((item) => {
+        this.$store.dispatch(`${ item.currStore }/incrementLoadCounter`, item.type);
       });
     }
   },
@@ -53,9 +60,13 @@ export default {
   computed: {
     ...mapGetters({ refreshFlag: 'resource-fetch/refreshFlag' }),
     rows() {
-      const inStore = this.$store.getters['currentStore'](this.resource);
+      const currResource = this.fetchedResourceType.find(item => item.type === this.resource);
 
-      return this.$store.getters[`${ inStore }/all`](this.resource);
+      if (currResource) {
+        return this.$store.getters[`${ currResource.currStore }/all`](this.resource);
+      } else {
+        return [];
+      }
     },
     loading() {
       return this.rows.length ? false : this.$fetchState.pending;
@@ -70,11 +81,15 @@ export default {
     }
   },
   methods: {
-    $fetchType(type, multipleResources = []) {
-      const inStore = this.$store.getters['currentStore'](COUNT);
-
+    // this defines all the flags needed for the mechanism
+    // to work. They should be defined based on the main list view
+    // resource that is to be displayed. The secondary resources
+    // fetched should follow what was defined (if it is manual and/or incremental)
+    $initializeFetchData(type, multipleResources = [], storeType) {
       if (!this.init) {
-        this.__gatherResourceFetchData(type, multipleResources);
+        const currStore = storeType || this.$store.getters['currentStore']();
+
+        this.__gatherResourceFetchData(type, multipleResources, currStore);
 
         // make sure after init that, if we have a manual refresh, we always set the force = true
         if (!this.watch) {
@@ -85,31 +100,61 @@ export default {
           this.hasManualRefresh = true;
         }
       }
+    },
+    // data fetching for the mechanism
+    $fetchType(type, multipleResources = [], storeType) {
+      const currStore = storeType || this.$store.getters['currentStore']();
+
+      this.$initializeFetchData(type, multipleResources, currStore);
 
-      if (!this.fetchedResourceType.includes(type)) {
-        this.fetchedResourceType.push(type);
+      if (!this.fetchedResourceType.find(item => item.type === type)) {
+        this.fetchedResourceType.push({
+          type,
+          currStore
+        });
       }
 
-      return this.$store.dispatch(`${ inStore }/findAll`, {
+      let incremental = 0;
+
+      if (this.incremental) {
+        const resourceCount = this.__getCountForResources([type], this.namespaceFilter, currStore);
+
+        incremental = Math.ceil(resourceCount / PAGES);
+      }
+
+      const opt = {
+        incremental,
+        watch:            this.watch,
+        force:            this.force,
+        hasManualRefresh: this.hasManualRefresh
+      };
+
+      const schema = this.$store.getters[`${ currStore }/schemaFor`](type);
+
+      if (schema?.attributes?.namespaced) {
+        opt.namespaced = this.namespaceFilter;
+      }
+
+      return this.$store.dispatch(`${ currStore }/findAll`, {
         type,
-        opt: {
-          incremental:      this.incremental,
-          watch:            this.watch,
-          force:            this.force,
-          hasManualRefresh: this.hasManualRefresh
-        }
+        opt
       });
     },
-    __getCountForResource(resourceName) {
-      let resourceCount;
 
-      if (this.counts[`${ resourceName }`]) {
-        resourceCount = this.counts[`${ resourceName }`].summary?.count;
-      }
+    __getCountForResources(resourceNames, namespace, storeType) {
+      const currStore = storeType || this.$store.getters['currentStore']();
+
+      return resourceNames.reduce((res, type) => res + this.__getCountForResource(type, namespace, currStore), 0);
+    },
+
+    __getCountForResource(resourceName, namespace, storeType) {
+      const resourceCounts = this.$store.getters[`${ storeType }/all`](COUNT)[0]?.counts[`${ resourceName }`]; // NB `rancher` store behaves differently, lacks counts but has resource
+      const resourceCount = namespace && resourceCounts?.namespaces ? resourceCounts?.namespaces[namespace]?.count : resourceCounts?.summary?.count;
 
       return resourceCount || 0;
     },
-    __gatherResourceFetchData(type, multipleResources) {
+
+    __gatherResourceFetchData(resourceName, multipleResources, currStore) {
       // flag to prevent a first data update being triggered from the requestData watcher
       this.init = true;
 
@@ -123,8 +168,6 @@ export default {
 
       // other vars
       this.multipleResources = multipleResources;
-      const resourceName = type;
-      const inStore = this.$store.getters['currentStore'](resourceName);
       let resourceCount = 0;
 
       // manual refresh vars
@@ -132,30 +175,21 @@ export default {
       let isTooManyItemsToAutoUpdate = false;
 
       // incremental loading vars
-      let incremental = 0;
+      let incremental = false;
 
       // get resource counts
-      if ( this.$store.getters[`${ inStore }/haveAll`](COUNT) ) {
-        this.counts = this.$store.getters[`${ inStore }/all`](COUNT)[0].counts;
-
-        if (this.multipleResources.length) {
-          this.multipleResources.forEach((item) => {
-            resourceCount = resourceCount + this.__getCountForResource(item);
-          });
-        } else {
-          resourceCount = this.__getCountForResource(resourceName);
-        }
-      }
+      const resourcesForCount = this.multipleResources.length ? this.multipleResources : [resourceName];
+
+      resourceCount = this.__getCountForResources(resourcesForCount, this.namespaceFilter, currStore);
 
       // manual refresh check
       if (manualDataRefreshEnabled && resourceCount >= manualDataRefreshThreshold) {
         watch = false;
         isTooManyItemsToAutoUpdate = true;
       }
-      // manual refresh check
-      if (incrementalLoadingEnabled && incrementalLoadingThreshold > 0 && resourceCount >= incrementalLoadingThreshold) {
-        incremental = Math.ceil(resourceCount / PAGES);
-      }
+
+      // incremental loading check
+      incremental = incrementalLoadingEnabled && incrementalLoadingThreshold > 0 && resourceCount >= incrementalLoadingThreshold;
 
       // pass on the flag that controls the appearance of the manual refresh button on the sortable table
       this.$store.dispatch('resource-fetch/updateIsTooManyItems', isTooManyItemsToAutoUpdate);