@rancher/shell 0.2.5 → 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/__tests__/create-edit-view.test.ts

@@ -7,7 +7,7 @@ describe('createEditView should', () => {
   it('add value', () => {
     const Component = {
       render() {},
-      mixins:    [CreateEditView],
+      mixins: [CreateEditView],
       props:  { value: { id: '123' } }
     };
 

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.
@@ -301,9 +301,9 @@ export default {
 
       try {
         this.version = this.$store.getters['catalog/version']({
-          repoType:      this.query.repoType,
-          repoName:      this.query.repoName,
-          chartName:     this.query.chartName,
+          repoType:    this.query.repoType,
+          repoName:    this.query.repoName,
+          chartName:   this.query.chartName,
           versionName: this.query.versionName
         });
       } catch (e) {
@@ -315,9 +315,9 @@ export default {
 
       try {
         this.versionInfo = await this.$store.dispatch('catalog/getVersionInfo', {
-          repoType:      this.query.repoType,
-          repoName:      this.query.repoName,
-          chartName:     this.query.chartName,
+          repoType:    this.query.repoType,
+          repoName:    this.query.repoName,
+          chartName:   this.query.chartName,
           versionName: this.query.versionName
         });
         // Here we set us versionInfo. The returned
@@ -367,8 +367,8 @@ export default {
       return {
         name:   install ? 'c-cluster-apps-charts-install' : 'c-cluster-apps-charts-chart',
         params: {
-          cluster:  this.$route.params.cluster,
-          product:  this.$store.getters['productId'],
+          cluster: this.$route.params.cluster,
+          product: this.$store.getters['productId'],
         },
         query: {
           [REPO_TYPE]: provider.repoType,
@@ -383,9 +383,9 @@ export default {
       return this.existing?.detailLocation || {
         name:   `c-cluster-product-resource`,
         params: {
-          product:   this.$store.getters['productId'],
-          cluster:   this.$store.getters['clusterId'],
-          resource:  CATALOG.APP,
+          product:  this.$store.getters['productId'],
+          cluster:  this.$store.getters['clusterId'],
+          resource: CATALOG.APP,
         }
       };
     },
@@ -394,9 +394,9 @@ export default {
       return {
         name:   `c-cluster-explorer-tools`,
         params: {
-          product:   EXPLORER,
-          cluster:   this.$store.getters['clusterId'],
-          resource:  CATALOG.APP,
+          product:  EXPLORER,
+          cluster:  this.$store.getters['clusterId'],
+          resource: CATALOG.APP,
         }
       };
     },

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,22 +1,24 @@
 import { _EDIT, _YAML } from '@shell/config/query-params';
+import Vue from 'vue';
+
 import impl from './impl';
 
-export default {
+export default Vue.extend({
   ...impl,
 
   props: {
     mode: {
-      type:     String,
+      type:    String,
       default: _EDIT,
     },
 
     realMode: {
-      type:     String,
+      type:    String,
       default: _EDIT,
     },
 
     as: {
-      type:     String,
+      type:    String,
       default: _YAML,
     },
 
@@ -28,13 +30,13 @@ export default {
 
     // A clone of the model before it's been changed, for conflict resolution
     initialValue: {
-      type:     Object,
+      type:    Object,
       default: null,
     },
 
     // The 'live' equivalent of this model in the store
     liveValue: {
-      type:     Object,
+      type:    Object,
       default: null,
     },
 
@@ -43,4 +45,4 @@ export default {
       default: false,
     },
   },
-};
+});

package/mixins/form-validation.js

@@ -146,7 +146,7 @@ export default {
 
           return {
             ...ruleset,
-            rules:               ruleset.rules.map(rule => formRules[rule] || nullValidator),
+            rules:              ruleset.rules.map(rule => formRules[rule] || nullValidator),
             formValidationRule: true
           };
         }),

package/mixins/labeled-form-element.ts

@@ -18,17 +18,17 @@ export default Vue.extend({
     },
 
     label: {
-      type:     String,
+      type:    String,
       default: null
     },
 
     labelKey: {
-      type:     String,
+      type:    String,
       default: null
     },
 
     placeholderKey: {
-      type:     String,
+      type:    String,
       default: null
     },
 
@@ -43,7 +43,7 @@ export default Vue.extend({
     },
 
     tooltipKey: {
-      type:     String,
+      type:    String,
       default: null
     },
 
@@ -68,8 +68,8 @@ export default Vue.extend({
     },
 
     options: {
-      default:   null,
-      type:      Array
+      default: null,
+      type:    Array
     },
 
     searchable: {

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();
+      }
+    }
+  }
+};