@rancher/shell 0.1.3 → 0.1.21

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

@@ -0,0 +1,232 @@
+<script>
+import AsyncButton from '@shell/components/AsyncButton';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
+import { UI_PLUGIN } from '@shell/config/types';
+import { UI_PLUGIN_NAMESPACE } from '@shell/config/uiplugins';
+
+export default {
+  components: {
+    AsyncButton,
+    Checkbox,
+    LabeledInput,
+  },
+
+  data() {
+    return {
+      name:              '',
+      location:          '',
+      persist:           false,
+      canModifyName:     true,
+      canModifyLocation: true,
+    };
+  },
+
+  watch: {
+    name(neu, old) {
+      if (this.canModifyLocation) {
+        this.location = `/pkg/${ neu }/${ neu }.umd.min.js`;
+      }
+    },
+    location(neu, old) {
+      if (this.canModifyName) {
+        const names = neu.split('/');
+        let last = names[names.length - 1];
+        let index = last.indexOf('.umd.min.js');
+
+        if (index !== -1) {
+          last = last.substr(0, index);
+        } else {
+          index = last.indexOf('.umd.js');
+          if (index !== -1) {
+            last = last.substr(0, index);
+          }
+        }
+
+        this.name = last;
+      }
+    }
+  },
+
+  methods: {
+    showDialog() {
+      this.$modal.show('developerInstallPluginDialog');
+    },
+    closeDialog(result) {
+      this.$modal.hide('developerInstallPluginDialog');
+      this.$emit('closed', result);
+    },
+
+    updateName(v) {
+      this.canModifyName = v.length === 0;
+    },
+
+    updateLocation(v) {
+      this.canModifyLocation = v.length === 0;
+    },
+
+    async loadPlugin(btnCb) {
+      let name = this.name;
+      const url = this.location;
+
+      if (!name) {
+        const parts = url.split('/');
+        const n = parts[parts.length - 1];
+
+        // Split on '.'
+        name = n.split('.')[0];
+      }
+
+      // Try and parse version number from the name
+      let version = '0.0.1';
+      let crdName = name;
+
+      const parts = name.split('-');
+
+      if (parts.length >= 2) {
+        version = parts.pop();
+        crdName = parts.join('-');
+      }
+
+      if (this.persist) {
+        const pluginCR = await this.$store.dispatch('management/create', {
+          type:     UI_PLUGIN,
+          metadata: {
+            name,
+            namespace: UI_PLUGIN_NAMESPACE
+          },
+          spec:     {
+            plugin: {
+              name:     crdName,
+              version,
+              endpoint: url,
+              noCache:  true,
+              metadata: {
+                developer: 'true',
+                direct:    'true'
+              }
+            }
+          }
+        });
+
+        try {
+          await pluginCR.save({ url: `/v1/${ UI_PLUGIN }`, method: 'POST' });
+        } catch (e) {
+          console.error('Could not create CRD for plugin', e); // eslint-disable-line no-console
+          btnCb(false);
+        }
+      }
+
+      this.$plugin.loadAsync(name, url).then(() => {
+        this.closeDialog(true);
+        this.$store.dispatch('growl/success', {
+          title:   this.t('plugins.success.title', { name }),
+          message: this.t('plugins.success.message'),
+          timeout: 3000,
+        }, { root: true });
+        btnCb(true);
+      }).catch((error) => {
+        btnCb(false);
+        // this.closeDialog(false);
+        const message = typeof error === 'object' ? this.t('plugins.error.message') : error;
+
+        this.$store.dispatch('growl/error', {
+          title:   this.t('plugins.error.title'),
+          message,
+          timeout: 5000
+        }, { root: true });
+      });
+    }
+  }
+};
+</script>
+
+<template>
+  <modal
+    name="developerInstallPluginDialog"
+    height="auto"
+    :scrollable="true"
+  >
+    <div class="plugin-install-dialog">
+      <h4>
+        {{ t('plugins.developer.title') }}
+      </h4>
+      <p>
+        {{ t('plugins.developer.prompt') }}
+      </p>
+      <div class="custom mt-10">
+        <div class="fields">
+          <LabeledInput v-model="location" v-focus label-key="plugins.developer.fields.url" @input="updateLocation" />
+        </div>
+      </div>
+      <div class="custom mt-10">
+        <div class="fields">
+          <LabeledInput v-model="name" label-key="plugins.developer.fields.name" @input="updateName" />
+        </div>
+        <div class="fields mt-10">
+          <Checkbox v-model="persist" label-key="plugins.developer.fields.persist" />
+        </div>
+        <div class="dialog-buttons mt-20">
+          <button class="btn role-secondary" @click="closeDialog()">
+            {{ t('generic.cancel') }}
+          </button>
+          <AsyncButton
+            mode="load"
+            @click="loadPlugin"
+          />
+        </div>
+      </div>
+    </div>
+  </modal>
+</template>
+
+<style lang="scss" scoped>
+  .plugin-install-dialog {
+    padding: 10px;
+
+    h4 {
+      font-weight: bold;
+    }
+
+    .dialog-panel {
+      display: flex;
+      flex-direction: column;
+      min-height: 100px;
+
+      p {
+        margin-bottom: 5px;
+      }
+
+      .dialog-info {
+        flex: 1;
+      }
+
+      .toggle-advanced {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        margin: 10px 0;
+
+        &:hover {
+          text-decoration: none;
+          color: var(--link);
+        }
+      }
+
+      .version-selector {
+        margin: 0 10px 10px 10px;
+        width: auto;
+      }
+    }
+
+    .dialog-buttons {
+      display: flex;
+      justify-content: flex-end;
+      margin-top: 10px;
+
+      > *:not(:last-child) {
+        margin-right: 10px;
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,293 @@
+<script>
+import AsyncButton from '@shell/components/AsyncButton';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+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';
+
+// Note: This dialog handles installation and update of a plugin
+
+export default {
+  components: {
+    AsyncButton,
+    Banner,
+    LabeledSelect,
+  },
+
+  async fetch() {
+    this.defaultRegistrySetting = await this.$store.dispatch('management/find', {
+      type: MANAGEMENT.SETTING,
+      id:   'system-default-registry'
+    });
+  },
+
+  data() {
+    return {
+      defaultRegistrySetting: null,
+      plugin:                 undefined,
+      busy:                   false,
+      version:                '',
+      update:                 false,
+      mode:                   '',
+    };
+  },
+
+  computed: {
+    showVersionSelector() {
+      return this.plugin?.versions.length > 1;
+    },
+
+    versionOptions() {
+      if (!this.plugin) {
+        return [];
+      }
+
+      return this.plugin.versions.map((version) => {
+        return {
+          label: version.version,
+          value: version.version,
+        };
+      });
+    },
+
+    buttonMode() {
+      return this.update ? 'update' : 'install';
+    }
+  },
+
+  methods: {
+    showDialog(plugin, mode) {
+      this.plugin = plugin;
+      this.mode = mode;
+
+      // Default to latest version on install (this is default on the plugin)
+      this.version = plugin.displayVersion;
+
+      if (mode === 'update') {
+        // Update to latest version, so take the first version
+        if (plugin.versions.length > 0) {
+          this.version = plugin.versions[0].version;
+        }
+      } else if (mode === 'rollback') {
+        // Find the newest version once we remove the current version
+        const versionNames = plugin.versions.filter(v => v.version !== plugin.displayVersion);
+
+        if (versionNames.length > 0) {
+          this.version = versionNames[0].version;
+        }
+      }
+
+      // Make sure we have the version available
+      const versionChart = plugin.versions?.find(v => v.version === this.version);
+
+      if (!versionChart) {
+        this.version = plugin.versions[0].version;
+      }
+
+      this.busy = false;
+      this.update = mode !== 'install';
+      this.$modal.show('installPluginDialog');
+    },
+
+    closeDialog(result) {
+      this.$modal.hide('installPluginDialog');
+      this.$emit('closed', result);
+    },
+
+    async install() {
+      this.busy = true;
+
+      const plugin = this.plugin;
+
+      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);
+
+      if (!version) {
+        this.busy = false;
+
+        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 });
+
+      const chart = {
+        chartName:   plugin.chart.chartName,
+        version:     this.version,
+        releaseName: plugin.chart.chartName,
+        annotations: {
+          [CATALOG_ANNOTATIONS.SOURCE_REPO_TYPE]: plugin.repoType,
+          [CATALOG_ANNOTATIONS.SOURCE_REPO_NAME]: plugin.repoName
+        },
+        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,
+        // wait:      this.cmdOptions.wait === true,
+        namespace: UI_PLUGIN_NAMESPACE,
+      };
+
+      // Helm action
+      const action = (exists || this.update) ? 'upgrade' : 'install';
+
+      try {
+        const res = await repo.doAction(action, input);
+        const operationId = `${ res.operationNamespace }/${ res.operationName }`;
+
+        this.closeDialog(plugin);
+
+        await repo.waitForOperation(operationId);
+
+        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 });
+
+        this.closeDialog(plugin);
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <modal
+    name="installPluginDialog"
+    height="auto"
+    :scrollable="true"
+  >
+    <div v-if="plugin" class="plugin-install-dialog">
+      <h4 class="mt-10">
+        {{ t(`plugins.${ mode }.title`, { name: plugin.name }) }}
+      </h4>
+      <div class="custom mt-10">
+        <div class="dialog-panel">
+          <p>
+            {{ t(`plugins.${ mode }.prompt`) }}
+          </p>
+          <Banner v-if="!plugin.certified" color="warning" :label="t('plugins.install.warnNotCertified')" />
+          <LabeledSelect
+            v-if="showVersionSelector"
+            v-model="version"
+            label-key="plugins.install.version"
+            :options="versionOptions"
+            class="version-selector mt-10"
+          />
+          <div v-else>
+            {{ t('plugins.install.version') }} {{ version }}
+          </div>
+        </div>
+        <div class="dialog-buttons">
+          <button :disabled="busy" class="btn role-secondary" @click="closeDialog(false)">
+            {{ t('generic.cancel') }}
+          </button>
+          <AsyncButton
+            :mode="buttonMode"
+            @click="install"
+          />
+        </div>
+      </div>
+    </div>
+  </modal>
+</template>
+
+<style lang="scss" scoped>
+  .plugin-install-dialog {
+    padding: 10px;
+
+    h4 {
+      font-weight: bold;
+    }
+
+    .dialog-panel {
+      display: flex;
+      flex-direction: column;
+      min-height: 100px;
+
+      p {
+        margin-bottom: 5px;
+      }
+
+      .dialog-info {
+        flex: 1;
+      }
+
+      .toggle-advanced {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        margin: 10px 0;
+
+        &:hover {
+          text-decoration: none;
+          color: var(--link);
+        }
+      }
+
+      .version-selector {
+        margin: 0 10px 10px 10px;
+        width: auto;
+      }
+    }
+
+    .dialog-buttons {
+      display: flex;
+      justify-content: flex-end;
+      margin-top: 10px;
+
+      > *:not(:last-child) {
+        margin-right: 10px;
+      }
+    }
+  }
+</style>