@rancher/shell 0.1.4 → 0.2.1

package/pages/c/_cluster/settings/DefaultLinksEditor.vue

@@ -0,0 +1,108 @@
+<script>
+import Vue from 'vue';
+
+import { _VIEW } from '@shell/config/query-params';
+import { Checkbox } from '@components/Form/Checkbox';
+
+export default {
+  name: 'DefaultLinksEditor',
+
+  components: { Checkbox },
+
+  props: {
+    // Array of objects with key, label, value and enabled properties
+    value: {
+      type:    Array,
+      default: () => [],
+    },
+
+    mode: {
+      type:     String,
+      required: true
+    },
+  },
+
+  computed: {
+    isView() {
+      return this.mode === _VIEW;
+    }
+  },
+
+  methods: {
+    showhide(row, i, e) {
+      const value = this.value[i];
+
+      Vue.set(value, 'enabled', !!value.enabled);
+      this.$emit('input', this.value);
+    },
+  }
+};
+</script>
+
+<template>
+  <div class="key-value">
+    <div class="clearfix">
+      <h3>
+        {{ t('customLinks.settings.default') }}
+      </h3>
+    </div>
+
+    <div class="kv-container">
+      <label class="text-label">
+        {{ t('customLinks.settings.keyLabel') }}
+      </label>
+      <label class="text-label">
+        {{ t('customLinks.settings.valueLabel') }}
+      </label>
+      <label class="text-label">
+      </label>
+
+      <template v-for="(row,i) in value">
+        <div :key="i+'key'" class="kv-item key" :class="{'link-hidden': !row.enabled}">
+          <span>{{ row.label }}</span>
+        </div>
+
+        <div :key="i+'value'" class="kv-item value" :class="{'link-hidden': !row.enabled}">
+          <span>{{ row.value }}</span>
+        </div>
+
+        <div v-if="!row.readonly && !isView" :key="i+'show'">
+          <Checkbox v-if="!isView" v-model="row.enabled" label-key="customLinks.settings.showLabel" @input="showhide(row, i, $event)" />
+        </div>
+        <div v-else :key="i+'show'"></div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.key-value {
+  width: 100%;
+
+  .kv-container {
+    display: grid;
+    align-items: center;
+    grid-template-columns: 1fr 1fr 50px;
+    column-gap: $column-gutter;
+
+    .kv-item {
+      background-color: var(--disabled-bg);
+      border: 1px solid var(--border);
+      border-radius: 5px;
+      width: 100%;
+      margin: 10px 0px 10px 0px;
+      height: 40px;
+      line-height: 40px;
+      padding: 0 10px;
+
+      &.link-hidden {
+        color: var(--disabled-text);
+      }
+
+      &.key {
+        align-self: flex-start;
+      }
+    }
+  }
+}
+</style>

package/pages/c/_cluster/settings/links.vue

@@ -3,50 +3,13 @@ import Loading from '@shell/components/Loading';
 import AsyncButton from '@shell/components/AsyncButton';
 import Banner from '@components/Banner/Banner.vue';
 import { MANAGEMENT } from '@shell/config/types';
-import { fetchOrCreateSetting, SETTING } from '@shell/config/settings';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import KeyValue from '@shell/components/form/KeyValue';
-import { allHash } from '@shell/utils/promise';
 import { mapGetters } from 'vuex';
-
-const DEFAULT_CUSTOM_LINKS = [
-  {
-    order: 1,
-    key:   'customLinks.defaults.docs',
-    value: 'https://rancher.com/docs/rancher/v2.6/en'
-  },
-  {
-    order: 2,
-    key:   'customLinks.defaults.forums',
-    value: 'https://forums.rancher.com/'
-
-  },
-  {
-    order: 3,
-    key:   'customLinks.defaults.slack',
-    value: 'https://slack.rancher.io/'
-  },
-  {
-    order: 5,
-    key:   'customLinks.defaults.getStarted',
-    value: '/docs/getting-started'
-  }
-
-];
-
-const DEFAULT_SUPPORT_LINK = {
-  order: 4,
-  key:   'customLinks.defaults.issues',
-  value: 'https://github.com/rancher/dashboard/issues/new'
-};
-
-const COMMUNITY_LINKS = [
-  {
-    order: 99,
-    key:   'customLinks.defaults.commercialSupport',
-    value: '/support'
-  }
-];
+import { isRancherPrime } from '@shell/config/version';
+import DefaultLinksEditor from './DefaultLinksEditor';
+import { CUSTOM_LINKS_VERSION, fetchLinks } from '@shell/config/home-links';
+import { SETTING, fetchOrCreateSetting } from '@shell/config/settings';
 
 export default {
   layout:     'authenticated',
@@ -55,40 +18,20 @@ export default {
     Loading,
     AsyncButton,
     Banner,
+    DefaultLinksEditor,
   },
   async fetch() {
-    try {
-      const { uiIssuesSetting, uiCommunitySetting } = await allHash({
-        uiIssuesSetting:    this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.ISSUES }),
-        uiCommunitySetting: this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.COMMUNITY_LINKS })
-      });
-
-      this.uiIssuesSetting = uiIssuesSetting;
-      this.uiCommunitySetting = uiCommunitySetting;
-    } catch {}
-
-    try {
-      const defaultIssueLink = !!this.uiIssuesSetting.value ? { key: this.t('customLinks.defaults.issues'), value: this.uiIssuesSetting.value } : DEFAULT_SUPPORT_LINK;
-      const defaultLinks = this.multiWithFallback([...DEFAULT_CUSTOM_LINKS, defaultIssueLink, ...COMMUNITY_LINKS]);
-
-      this.uiCustomLinks = await fetchOrCreateSetting(this.$store, SETTING.UI_CUSTOM_LINKS, JSON.stringify(defaultLinks));
-
-      await this.deprecateIssueLinks();
-    } catch {}
-
-    const sValue = this.uiCustomLinks?.value || JSON.stringify(this.multiWithFallback([...DEFAULT_CUSTOM_LINKS]));
-
-    this.value = JSON.parse(sValue);
+    this.value = await fetchLinks(this.$store, this.hasSupport, false, str => this.t(str));
   },
 
   data() {
     return {
+      defaultsDisabled:    true,
+      isRancherPrime:     isRancherPrime(),
       uiCustomLinks:      {},
-      defaultValues:      undefined,
       bannerVal:          {},
-      value:              {},
+      value:              [],
       errors:             [],
-      showRestoredBanner: false
     };
   },
   computed: {
@@ -99,20 +42,20 @@ export default {
 
       return schema?.resourceMethods?.includes('PUT') ? _EDIT : _VIEW;
     },
-  },
-  methods: {
-    useDefaults() {
-      const nonCommercialRancherLinks = this.isCommercial ? [] : COMMUNITY_LINKS;
 
-      this.defaultValues = this.multiWithFallback([...DEFAULT_CUSTOM_LINKS, DEFAULT_SUPPORT_LINK, ...nonCommercialRancherLinks]);
-
-      this.showRestoredBanner = true;
-
-      setTimeout(() => {
-        this.showRestoredBanner = false;
-      }, 10000);
+    allValues() {
+      return {
+        version:  CUSTOM_LINKS_VERSION,
+        defaults: this.value.defaults.filter(obj => obj.enabled).map(obj => obj.key),
+        custom:   this.value.custom
+      };
     },
 
+    hasSupport() {
+      return isRancherPrime() || this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.SUPPORTED )?.value === 'true';
+    },
+  },
+  methods: {
     deprecateIssueLinks() {
       if (this.uiIssuesSetting.value || this.uiIssuesSetting.value) {
         this.uiIssuesSetting.value = '';
@@ -123,10 +66,15 @@ export default {
     },
 
     async save(btnCB) {
-      this.uiCustomLinks.value = JSON.stringify(this.value);
       this.errors = [];
       try {
-        await this.uiCustomLinks.save();
+        const uiCustomLinks = await fetchOrCreateSetting(this.$store, SETTING.UI_CUSTOM_LINKS, '');
+
+        uiCustomLinks.value = JSON.stringify(this.allValues);
+
+        await uiCustomLinks.save();
+
+        this.value = await fetchLinks(this.$store, this.hasSupport, false, str => this.t(str));
         btnCB(true);
       } catch (err) {
         this.errors.push(err);
@@ -139,38 +87,39 @@ export default {
 <template>
   <Loading v-if="$fetchState.pending" />
   <div v-else>
-    <Banner v-if="showRestoredBanner" :color="'success'" label="Default restored" :closable="true" :label-key="'customLinks.restoreSuccess'" />
-    <h1
-      class="mb-20"
-    >
+    <h1 class="mb-20">
       {{ t("customLinks.label") }}
     </h1>
     <div>
       <label class="text-label">
         {{ t(`customLinks.description`, {}, true) }}
       </label>
-      <div class="ui-links-setting mt-20">
-        <KeyValue
-          v-model="value"
-          :default-value="defaultValues"
-          :as-map="false"
-          :key-label="t('customLinks.settings.keyLabel')"
-          :value-label="t('customLinks.settings.valueLabel')"
-          :add-label="t('customLinks.addLink')"
-          :mode="mode"
-          :read-allowed="false"
-          :protip="false"
-        />
-      </div>
+    </div>
+    <div class="mt-20">
+      <KeyValue
+        v-model="value.custom"
+        :title="'Custom Links'"
+        :as-map="false"
+        key-name="label"
+        :key-label="t('customLinks.settings.keyLabel')"
+        :value-label="t('customLinks.settings.valueLabel')"
+        :add-label="t('customLinks.addLink')"
+        :read-allowed="false"
+        :protip="false"
+        :mode="mode"
+      />
+    </div>
+    <div class="ui-links-setting mt-20">
+      <DefaultLinksEditor
+        v-model="value.defaults"
+        :mode="mode"
+      />
     </div>
     <template v-for="err in errors">
       <Banner :key="err" color="error" :label="err" />
     </template>
     <div v-if="mode === 'edit'" class="mt-20">
       <AsyncButton class="pull-right" mode="apply" @click="save" />
-      <button class="pull-right btn role-secondary mr-10" @click="useDefaults">
-        {{ t('customLinks.restoreDefaults') }}
-      </button>
     </div>
   </div>
 </template>
@@ -194,7 +143,10 @@ export default {
     text-decoration: underline;
   }
 }
-.input {
-  max-width: 25%;
+.action {
+  display: flex;
+  input {
+    margin-right: 5px;
+  }
 }
 </style>

package/pages/c/_cluster/settings/performance.vue

@@ -7,6 +7,7 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import { MANAGEMENT } from '@shell/config/types';
 import { DEFAULT_PERF_SETTING, SETTING } from '@shell/config/settings';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
+import UnitInput from '@shell/components/form/UnitInput';
 
 export default {
   layout:     'authenticated',
@@ -16,6 +17,7 @@ export default {
     AsyncButton,
     Banner,
     LabeledInput,
+    UnitInput
   },
 
   async fetch() {
@@ -30,15 +32,21 @@ export default {
 
     const sValue = this.uiPerfSetting?.value || JSON.stringify(DEFAULT_PERF_SETTING);
 
-    this.value = JSON.parse(sValue);
+    this.value = {
+      ...DEFAULT_PERF_SETTING,
+      ...JSON.parse(sValue),
+    };
+
+    this.gcStartedEnabled = this.value.garbageCollection.enabled;
   },
 
   data() {
     return {
-      uiPerfSetting: DEFAULT_PERF_SETTING,
-      bannerVal:     {},
-      value:         {},
-      errors:        [],
+      uiPerfSetting:    DEFAULT_PERF_SETTING,
+      bannerVal:        {},
+      value:            {},
+      errors:           [],
+      gcStartedEnabled: null
     };
   },
 
@@ -57,12 +65,19 @@ export default {
 
       try {
         await this.uiPerfSetting.save();
+
+        this.$store.dispatch('gcPreferencesUpdated', {
+          previouslyEnabled: this.gcStartedEnabled,
+          newPreferences:    this.value.garbageCollection
+        }, { root: true });
+
+        this.gcStartedEnabled = this.value.garbageCollection.enabled;
         btnCB(true);
       } catch (err) {
         this.errors.push(err);
         btnCB(false);
       }
-    },
+    }
   }
 };
 </script>
@@ -75,7 +90,7 @@ export default {
     <div>
       <div class="ui-perf-setting">
         <!-- Websocket Notifications -->
-        <div class="mt-40">
+        <div class="mt-20">
           <h2>{{ t('performance.websocketNotification.label') }}</h2>
           <p>{{ t('performance.websocketNotification.description') }}</p>
           <Checkbox
@@ -134,6 +149,74 @@ export default {
             />
           </div>
         </div>
+        <!-- Enable GC of resources from store -->
+        <div class="mt-40">
+          <h2 v-t="'performance.gc.label'" />
+          <p>{{ t('performance.gc.description') }}</p>
+          <Banner color="error" label-key="performance.gc.banner" />
+          <Checkbox
+            v-model="value.garbageCollection.enabled"
+            :label="t('performance.gc.checkboxLabel')"
+            class="mt-10 mb-20"
+            :primary="true"
+          />
+          <div class="ml-20">
+            <h3>{{ t('performance.gc.whenRun.description') }}</h3>
+            <div class="ml-20 mb-10">
+              <Checkbox
+                v-model="value.garbageCollection.enabledInterval"
+                :class="{ 'text-muted': !value.garbageCollection.enabled }"
+                :label="t('performance.gc.whenRun.intervalCheckBox.label')"
+                class="mt-10 mb-10"
+                :disabled="!value.garbageCollection.enabled"
+                :primary="true"
+              />
+              <div class="ml-20">
+                <UnitInput
+                  v-model="value.garbageCollection.interval"
+                  :suffix="t('suffix.seconds', { count: value.garbageCollection.interval })"
+                  :label="t('performance.gc.whenRun.interval.inputLabel')"
+                  :disabled="!value.garbageCollection.enabled || !value.garbageCollection.enabledInterval"
+                  min="30"
+                  class="input"
+                />
+              </div>
+              <Checkbox
+                v-model="value.garbageCollection.enabledOnNavigate"
+                :class="{ 'text-muted': !value.garbageCollection.enabled }"
+                :label="t('performance.gc.whenRun.route.description')"
+                class="mt-20 mb-10"
+                :disabled="!value.garbageCollection.enabled"
+                :primary="true"
+              />
+            </div>
+            <h3>{{ t('performance.gc.howRun.description') }}</h3>
+            <div class="ml-20">
+              <p :class="{ 'text-muted': !value.garbageCollection.enabled }">
+                {{ t('performance.gc.howRun.age.description', {}, true) }}
+              </p>
+              <UnitInput
+                v-model="value.garbageCollection.ageThreshold"
+                :suffix="t('suffix.seconds', { count: value.garbageCollection.ageThreshold })"
+                :label="t('performance.gc.howRun.age.inputLabel')"
+                :disabled="!value.garbageCollection.enabled"
+                min="30"
+                class="input"
+              />
+              <p class="mt-20" :class="{ 'text-muted': !value.garbageCollection.enabled }">
+                {{ t('performance.gc.howRun.count.description') }}
+              </p>
+              <LabeledInput
+                v-model.number="value.garbageCollection.countThreshold"
+                :label="t('performance.gc.howRun.count.inputLabel')"
+                :disabled="!value.garbageCollection.enabled"
+                class="input"
+                type="number"
+                min="0"
+              />
+            </div>
+          </div>
+        </div>
       </div>
     </div>
     <template v-for="err in errors">

package/pages/c/_cluster/uiplugins/DeveloperInstallDialog.vue

@@ -83,9 +83,9 @@ export default {
 
       const parts = name.split('-');
 
-      if (parts.length === 2) {
-        crdName = parts[0];
-        version = parts[1];
+      if (parts.length >= 2) {
+        version = parts.pop();
+        crdName = parts.join('-');
       }
 
       if (this.persist) {

package/pages/c/_cluster/uiplugins/InstallDialog.vue

@@ -1,7 +1,7 @@
 <script>
 import AsyncButton from '@shell/components/AsyncButton';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
-import { CATALOG } from '@shell/config/types';
+import { CATALOG, MANAGEMENT } from '@shell/config/types';
 import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
 import { UI_PLUGIN_NAMESPACE } from '@shell/config/uiplugins';
 import Banner from '@components/Banner/Banner.vue';
@@ -15,13 +15,21 @@ export default {
     LabeledSelect,
   },
 
+  async fetch() {
+    this.defaultRegistrySetting = await this.$store.dispatch('management/find', {
+      type: MANAGEMENT.SETTING,
+      id:   'system-default-registry'
+    });
+  },
+
   data() {
     return {
-      plugin:   undefined,
-      busy:     false,
-      version:  '',
-      update:   false,
-      mode:      '',
+      defaultRegistrySetting: null,
+      plugin:                 undefined,
+      busy:                   false,
+      version:                '',
+      update:                 false,
+      mode:                   '',
     };
   },
 
@@ -92,7 +100,7 @@ export default {
 
       const plugin = this.plugin;
 
-      this.$emit(plugin.name, 'install');
+      this.$emit('update', plugin.name, 'install');
 
       // Find the version that the user wants to install
       const version = plugin.versions?.find(v => v.version === this.version);
@@ -103,6 +111,35 @@ export default {
         return;
       }
 
+      // is the image used by the chart in the rancher org?
+      let isRancherImage = false;
+
+      try {
+        const chartVersionInfo = await this.$store.dispatch('catalog/getVersionInfo', {
+          repoType:    version.repoType,
+          repoName:    version.repoName,
+          chartName:   plugin.chart.chartName,
+          versionName: this.version,
+        });
+
+        const image = chartVersionInfo?.values?.image?.repository || '';
+
+        isRancherImage = image.startsWith('rancher/');
+      } catch (e) {}
+
+      // See if there is already a plugin with this name
+      let exists = false;
+
+      try {
+        const app = await this.$store.dispatch('management/find', {
+          type:  CATALOG.APP,
+          id:   `${ UI_PLUGIN_NAMESPACE }/${ plugin.chart.chartName }`,
+          opt:  { force: true },
+        });
+
+        exists = !!app;
+      } catch (e) {}
+
       const repoType = version.repoType;
       const repoName = version.repoName;
       const repo = this.$store.getters['catalog/repo']({ repoType, repoName });
@@ -118,6 +155,15 @@ export default {
         values: {}
       };
 
+      // Pass in the system default registry property if set - only if the image is in the rancher org
+      const defaultRegistry = this.defaultRegistrySetting?.value || '';
+
+      if (isRancherImage && defaultRegistry) {
+        chart.values.global = chart.values.global || {};
+        chart.values.global.cattle = chart.values.global.cattle || {};
+        chart.values.global.cattle.systemDefaultRegistry = defaultRegistry;
+      }
+
       const input = {
         charts:    [chart],
         // timeout:   this.cmdOptions.timeout > 0 ? `${ this.cmdOptions.timeout }s` : null,
@@ -126,24 +172,29 @@ export default {
       };
 
       // Helm action
-      const action = this.update ? 'upgrade' : 'install';
+      const action = (exists || this.update) ? 'upgrade' : 'install';
 
-      // const name = plugin.chart.chartName;
+      try {
+        const res = await repo.doAction(action, input);
+        const operationId = `${ res.operationNamespace }/${ res.operationName }`;
 
-      // const res = await this.repo.doAction((isUpgrade ? 'upgrade' : 'install'), input);
-      const res = await repo.doAction(action, input);
-      const operationId = `${ res.operationNamespace }/${ res.operationName }`;
+        this.closeDialog(plugin);
 
-      // Vue.set(this.installing, this.selected.chart.chartName, operationId);
+        await repo.waitForOperation(operationId);
 
-      this.closeDialog(plugin);
+        await this.$store.dispatch(`management/find`, {
+          type: CATALOG.OPERATION,
+          id:   operationId
+        });
+      } catch (e) {
+        this.$store.dispatch('growl/error', {
+          title:   this.t('plugins.error.generic'),
+          message: e.message ? e.message : e,
+          timeout: 10000
+        }, { root: true });
 
-      await repo.waitForOperation(operationId);
-
-      await this.$store.dispatch(`management/find`, {
-        type: CATALOG.OPERATION,
-        id:   operationId
-      });
+        this.closeDialog(plugin);
+      }
     }
   }
 };
@@ -157,7 +208,7 @@ export default {
   >
     <div v-if="plugin" class="plugin-install-dialog">
       <h4 class="mt-10">
-        {{ t(`plugins.${ mode }.title`, { name: plugin.name }) }}
+        {{ t(`plugins.${ mode }.title`, { name: plugin.label }) }}
       </h4>
       <div class="custom mt-10">
         <div class="dialog-panel">