@rancher/shell 0.1.4 → 0.1.21

package/components/SortableTable/index.vue

@@ -368,16 +368,19 @@ export default {
       immediate: true
     },
 
-    isManualRefreshLoading(neu, old) {
-      this.currentPhase = neu ? ASYNC_BUTTON_STATES.WAITING : ASYNC_BUTTON_STATES.ACTION;
-
-      // setTimeout is needed so that this is pushed further back on the JS computing queue
-      // because nextTick isn't enough to capture the DOM update for the manual refresh only scenario
-      if (old && !neu) {
-        this.manualRefreshTimer = setTimeout(() => {
-          this.watcherUpdateLiveAndDelayed(neu, old);
-        }, 1000);
-      }
+    isManualRefreshLoading: {
+      handler(neu, old) {
+        this.currentPhase = neu ? ASYNC_BUTTON_STATES.WAITING : ASYNC_BUTTON_STATES.ACTION;
+
+        // setTimeout is needed so that this is pushed further back on the JS computing queue
+        // because nextTick isn't enough to capture the DOM update for the manual refresh only scenario
+        if (old && !neu) {
+          this.manualRefreshTimer = setTimeout(() => {
+            this.watcherUpdateLiveAndDelayed(neu, old);
+          }, 1000);
+        }
+      },
+      immediate: true
     }
   },
 

package/components/Tabbed/index.vue

@@ -40,6 +40,12 @@ export default {
       default: false,
     },
 
+    // Remove padding and box-shadow
+    flat: {
+      type:    Boolean,
+      default: false,
+    },
+
     tabsOnly: {
       type:    Boolean,
       default: false,
@@ -257,7 +263,13 @@ export default {
       </ul>
       <slot name="tab-row-extras" />
     </ul>
-    <div :class="{ 'tab-container': !!tabs.length || !!sideTabs, 'no-content': noContent }">
+    <div
+      :class="{
+        'tab-container': !!tabs.length || !!sideTabs,
+        'no-content': noContent,
+        'tab-container--flat': !!flat,
+      }"
+    >
       <slot />
     </div>
   </div>
@@ -350,6 +362,15 @@ export default {
   &.no-content {
     padding: 0 0 3px 0;
   }
+
+  // Example case: Tabbed component within a tabbed component
+  &--flat {
+    padding: 0;
+
+    .side-tabs {
+      box-shadow: unset;
+    }
+  }
 }
 
 .tabs-only {
@@ -375,11 +396,6 @@ export default {
     padding: 20px;
   }
 
-  // Tabbed component within a tabbed component
-  .tab-container & {
-    box-shadow: unset;
-  }
-
   & .tabs {
     width: $sideways-tabs-width;
     min-width: $sideways-tabs-width;
@@ -451,7 +467,9 @@ export default {
     }
   }
 
-  & .tab-container {
+  &
+
+  .tab-container {
     width: calc(100% - #{$sideways-tabs-width});
     flex-grow: 1;
     background-color: var(--body-bg);

package/components/TypeDescription.vue

@@ -1,7 +1,9 @@
 <script>
+import { mapGetters } from 'vuex';
 import { Banner } from '@components/Banner';
 import { HIDE_DESC, mapPref } from '@shell/store/prefs';
 import { addObject } from '@shell/utils/array';
+import { CATALOG } from '@shell/config/types';
 
 export default {
   components: { Banner },
@@ -14,10 +16,17 @@ export default {
   },
 
   computed: {
+    ...mapGetters(['currentCluster']),
     hideDescriptions: mapPref(HIDE_DESC),
 
     typeDescriptionKey() {
-      const key = `typeDescription."${ this.resource }"`;
+      let key;
+
+      if (this.resource === CATALOG.CLUSTER_REPO) {
+        key = !this.currentCluster || this.currentCluster.isLocal ? 'typeDescription."catalog.cattle.io.clusterrepo.local"' : 'typeDescription."catalog.cattle.io.clusterrepo"';
+      } else {
+        key = `typeDescription."${ this.resource }"`;
+      }
 
       if ( this.hideDescriptions.includes(this.resource) || this.hideDescriptions.includes('ALL') ) {
         return false;

package/components/fleet/FleetClusters.vue

@@ -16,6 +16,11 @@ export default {
       type:    Object,
       default: null,
     },
+
+    loading: {
+      type:    Boolean,
+      default: false,
+    },
   },
 
   computed: {
@@ -80,6 +85,7 @@ export default {
     :schema="schema"
     :headers="headers"
     :rows="rows"
+    :loading="loading"
     key-field="_key"
     v-on="$listeners"
   >

package/components/fleet/FleetRepos.vue

@@ -28,6 +28,11 @@ export default {
       type:     Object,
       required: true,
     },
+
+    loading: {
+      type:     Boolean,
+      required: false,
+    },
   },
 
   computed: {
@@ -89,13 +94,14 @@ export default {
 
 <template>
   <div>
-    <FleetIntro v-if="noRows" />
+    <FleetIntro v-if="noRows && !loading" />
     <ResourceTable
       v-if="!noRows"
       v-bind="$attrs"
       :schema="schema"
       :headers="headers"
       :rows="rows"
+      :loading="loading"
       key-field="_key"
       v-on="$listeners"
     >

package/components/form/Command.vue

@@ -36,6 +36,10 @@ export default {
         return {};
       },
     },
+    loading: {
+      default: false,
+      type:    Boolean
+    },
   },
 
   data() {
@@ -200,6 +204,7 @@ export default {
       :config-maps="configMaps"
       :secrets="secrets"
       :value="value"
+      :loading="loading"
     />
   </div>
 </template>

package/components/form/EnvVars.vue

@@ -23,6 +23,10 @@ export default {
       type:     Array,
       required: true
     },
+    loading: {
+      default: false,
+      type:    Boolean
+    },
     /**
      * Container spec
      */
@@ -107,6 +111,7 @@ export default {
         :all-secrets="secrets"
         :all-config-maps="configMaps"
         :mode="mode"
+        :loading="loading"
         @remove="removeRow(i)"
         @input="updateRow"
       />

package/components/form/NameNsDescription.vue

@@ -342,7 +342,7 @@ export default {
       }
 
       if (this.namespaced) {
-        this.$emit('isNamespaceNew', this.namespaces && !this.namespaces.find(n => n.value === val));
+        this.$emit('isNamespaceNew', !val || (this.namespaces && !this.namespaces.find(n => n.value === val)));
       }
 
       if (this.namespaceKey) {
@@ -361,10 +361,12 @@ export default {
       if (!e || e.value === '') { // The blank value in the dropdown is labeled "Create a New Namespace"
         this.createNamespace = true;
         this.$parent.$emit('createNamespace', true);
+        this.$emit('isNamespaceNew', true);
         Vue.nextTick(() => this.$refs.namespace.focus());
       } else {
         this.createNamespace = false;
         this.$parent.$emit('createNamespace', false);
+        this.$emit('isNamespaceNew', false);
       }
     }
   },

package/components/form/NodeScheduling.vue

@@ -31,7 +31,11 @@ export default {
     mode: {
       type:    String,
       default: 'create'
-    }
+    },
+    loading: {
+      default: false,
+      type:    Boolean
+    },
   },
 
   data() {
@@ -177,6 +181,7 @@ export default {
             :options="nodes || []"
             :mode="mode"
             :multiple="false"
+            :loading="loading"
             @input="update"
           />
         </div>

package/components/form/PodAffinity.vue

@@ -40,6 +40,10 @@ export default {
       type:    Array,
       default: null
     },
+    loading: {
+      default: false,
+      type:    Boolean
+    },
   },
 
   data() {
@@ -305,6 +309,7 @@ export default {
                 :placeholder="t('workload.scheduling.affinity.topologyKey.placeholder')"
                 :options="existingNodeLabels"
                 :disabled="mode==='view'"
+                :loading="loading"
                 @input="update"
               />
               <LabeledInput

package/components/form/ServiceNameSelect.vue

@@ -60,6 +60,10 @@ export default {
       type:    Boolean,
       default: true,
     },
+    loading: {
+      type:    Boolean,
+      default: false,
+    },
   },
 
   data() {
@@ -134,6 +138,7 @@ export default {
         :option-label="optionLabel"
         :placement="$attrs.placement ? $attrs.placement : null"
         :v-bind="$attrs"
+        :loading="loading"
         @input="changeSelected"
       />
       <button

package/components/form/ValueFromResource.vue

@@ -34,7 +34,11 @@ export default {
     namespaced: {
       type:    Boolean,
       default: true
-    }
+    },
+    loading: {
+      default: false,
+      type:    Boolean
+    },
   },
 
   data() {
@@ -300,6 +304,7 @@ export default {
           :get-option-key="opt=>opt.id|| opt"
           :mode="mode"
           :label="sourceLabel"
+          :loading="loading"
         />
       </div>
       <div v-if="type!=='secretRef' && type!== 'configMapRef'">
@@ -310,6 +315,7 @@ export default {
           :mode="mode"
           option-label="label"
           :label="t('workload.container.command.fromResource.key.label')"
+          :loading="loading"
           @input="updateRow"
         />
       </div>

package/components/nav/TopLevelMenu.vue

@@ -12,6 +12,7 @@ import { getVersionInfo } from '@shell/utils/version';
 import { LEGACY } from '@shell/store/features';
 import { SETTING } from '@shell/config/settings';
 import { filterOnlyKubernetesClusters, filterHiddenLocalCluster } from '@shell/utils/cluster';
+import { isRancherPrime } from '@shell/config/version';
 
 const UNKNOWN = 'unknown';
 const UI_VERSION = process.env.VERSION || UNKNOWN;
@@ -162,7 +163,7 @@ export default {
     },
 
     hasSupport() {
-      return this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.SUPPORTED )?.value === 'true';
+      return isRancherPrime() || this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.SUPPORTED )?.value === 'true';
     },
   },
 

package/config/home-links.js

@@ -0,0 +1,155 @@
+import { DOCS_BASE } from '@shell/config/private-label';
+import { MANAGEMENT } from '@shell/config/types';
+import { SETTING } from '@shell/config/settings';
+import { allHash } from '@shell/utils/promise';
+
+const DEFAULT_LINKS = [
+  {
+    key:     'docs',
+    value:   DOCS_BASE,
+    enabled: true,
+  },
+  {
+    key:     'forums',
+    value:   'https://forums.rancher.com/',
+    enabled: true,
+  },
+  {
+    key:     'slack',
+    value:   'https://slack.rancher.io/',
+    enabled: true,
+  },
+  {
+    key:     'issues',
+    value:   'https://github.com/rancher/dashboard/issues/new/choose',
+    enabled: true,
+  },
+  {
+    key:     'getStarted',
+    value:   '/docs/getting-started',
+    enabled: true,
+  },
+];
+
+const SUPPORT_LINK = {
+  key:      'commercialSupport',
+  value:    '/support',
+  enabled:  true,
+  readonly: true
+};
+
+// We add a version attribute to the setting so we know what has been migrated and which version of the setting we have
+export const CUSTOM_LINKS_VERSION = 'v1';
+
+// Fetch the settings required for the links, taking into account legacy settings if we have not migrated
+export async function fetchLinks(store, hasSupport, isSupportPage, t) {
+  let uiLinks = {};
+
+  try {
+    const uiLinksSetting = await store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.UI_CUSTOM_LINKS });
+
+    uiLinks = JSON.parse(uiLinksSetting.value);
+  } catch (e) {
+    console.warn('Could not parse custom link settings', e); // eslint-disable-line no-console
+  }
+
+  // If uiLinks is set and has the correct version, then we are okay, otherwise we need to migrate from the old settings
+  if (uiLinks?.version === CUSTOM_LINKS_VERSION) {
+    // Map out the default settings, as we only store keys of the ones to show
+    if (uiLinks.defaults) {
+      const defaults = [...DEFAULT_LINKS];
+
+      // Map the link name stored to the default link, if it exists
+      defaults.forEach((link) => {
+        const enabled = uiLinks.defaults.find(linkName => linkName === link.key);
+
+        link.enabled = !!enabled;
+      });
+
+      uiLinks.defaults = defaults;
+    }
+
+    return ensureSupportLink(uiLinks, hasSupport, isSupportPage, t);
+  }
+
+  // No new setting, so return the required structure
+  // We don't migrate here, as we may not have permissions to create the setting
+  const links = {
+    version:  CUSTOM_LINKS_VERSION,
+    defaults: [...DEFAULT_LINKS],
+    custom:   []
+  };
+
+  // There are two legacy settings:
+  // SETTING.ISSUES - can specify a custom link to use for 'File an issue'
+  // SETTING.COMMUNITY_LINKS - can specify whether to hide all of the default links (other than 'File an issue')
+  try {
+    const { uiIssuesSetting, uiCommunitySetting } = await allHash({
+      uiIssuesSetting:    store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.ISSUES }),
+      uiCommunitySetting: store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.COMMUNITY_LINKS })
+    });
+
+    // Should we show the default set of links?
+    if (uiCommunitySetting?.value === 'false') {
+      // Hide all of the default links
+      links.defaults.forEach(link => (link.enabled = false));
+    }
+
+    // Do we have a custom 'File an issue' link ?
+    if (uiIssuesSetting?.value) {
+      links.custom.push({
+        label: t ? t('customLinks.defaults.issues') : 'Issues',
+        value: uiIssuesSetting.value
+      });
+
+      // Hide the default 'File an issue' link
+      const issueLink = links.defaults?.find(link => link.key === 'issues');
+
+      if (issueLink) {
+        issueLink.enabled = false;
+        issueLink.readOnly = true;
+      }
+    }
+  } catch (e) {
+    console.warn('Could not parse legacy link settings', e); // eslint-disable-line no-console
+  }
+
+  return ensureSupportLink(links, hasSupport, isSupportPage, t);
+}
+
+// Ensure the support link is added if needed
+function ensureSupportLink(links, hasSupport, isSupportPage, t) {
+  if (!hasSupport && !isSupportPage) {
+    const supportLink = links.defaults?.find(link => link.key === 'commercialSupport');
+
+    if (!supportLink) {
+      links.defaults.push(SUPPORT_LINK);
+    }
+  }
+
+  // Localise the default links
+  links.defaults = links.defaults.map((link) => {
+    return {
+      ...link,
+      label: t(`'customLinks.defaults.${ link.key }`)
+    };
+  });
+
+  // Ensure that if any custom links have the same name as a default link, we use the custom link
+  const customNamesMap = links.custom.reduce((linkMap, link) => {
+    linkMap[link.label] = link;
+
+    return linkMap;
+  }, {});
+
+  // If any custom links have the same name as a default link, then hide and mark readonly the default link
+  // Main use case if the 'File an Issue' link when migrating the old settings
+  links.defaults.forEach((link) => {
+    if (customNamesMap[link.label]) {
+      link.enabled = false;
+      link.readonly = true;
+    }
+  });
+
+  return links;
+}

package/config/private-label.js

@@ -7,7 +7,7 @@ export const DOCS_BASE = 'https://rancher.com/docs/rancher/v2.6/en';
 
 const STANDARD_VENDOR = 'Rancher';
 const STANDARD_PRODUCT = 'Explorer';
-const CUSTOM_VENDOR = { suse: 'SUSE Rancher' };
+const CUSTOM_VENDOR = { suse: 'Rancher Prime' };
 
 let mode = STANDARD;
 let vendor = STANDARD_VENDOR;

package/config/product/manager.js

@@ -120,8 +120,6 @@ export function init(store) {
   weightType(CAPI.MACHINE, 1, true);
   weightType(CATALOG.CLUSTER_REPO, 0, true);
 
-  configureType(CATALOG.CLUSTER_REPO, { showListMasthead: false });
-
   basicType([
     CAPI.MACHINE_DEPLOYMENT,
     CAPI.MACHINE_SET,

package/config/product/uiplugins.js

@@ -9,7 +9,7 @@ export function init(store) {
   product({
     ifHave:              IF_HAVE.ADMIN, // Only admins can see the UI Plugin Custom Resource by default
     inStore:             'management',
-    icon:                'gear',
+    icon:                'extension',
     removable:           false,
     showClusterSwitcher: false,
     category:            'configuration',

package/config/settings.js

@@ -1,4 +1,5 @@
 // Settings
+import { GC_DEFAULTS } from '../utils/gc/gc-types';
 import { MANAGEMENT } from './types';
 
 // Adapted from: https://github.com/rancher/ui/blob/08c379a9529f740666a704b52522a468986c3520/lib/shared/addon/utils/constants.js#L564
@@ -105,7 +106,8 @@ export const DEFAULT_PERF_SETTING = {
     enabled:   false,
     threshold: 1500,
   },
-  disableWebsocketNotification: true
+  disableWebsocketNotification: true,
+  garbageCollection:            GC_DEFAULTS
 };
 
 export const fetchOrCreateSetting = async(store, id, val, save = true) => {

package/config/uiplugins.js

@@ -2,6 +2,7 @@ import semver from 'semver';
 
 // Version of the plugin API supported
 export const UI_PLUGIN_API_VERSION = '1.0.0';
+export const UI_PLUGIN_HOST_APP = 'rancher-manager';
 
 export const UI_PLUGIN_BASE_URL = '/api/v1/namespaces/cattle-ui-plugin-system/services/http:ui-plugin-operator:80/proxy';
 
@@ -28,8 +29,19 @@ export const UI_PLUGINS_REPO_NAME = 'rancher-ui-plugins';
 export const UI_PLUGINS_REPO_URL = 'https://github.com/rancher/ui-plugin-charts';
 export const UI_PLUGINS_REPO_BRANCH = 'main';
 
+// Chart annotations
+export const UI_PLUGIN_CHART_ANNOTATIONS = {
+  RANCHER_VERSION:    'catalog.cattle.io/rancher-version',
+  EXTENSIONS_VERSION: 'catalog.cattle.io/ui-extenstions-version',
+  EXTENSIONS_HOST:    'catalog.cattle.io/ui-extenstions-host',
+};
+
 // Plugin Metadata properties
-const UI_PLUGIN_METADATA_API_VERSION = 'apiVersion';
+export const UI_PLUGIN_METADATA = {
+  RANCHER_VERSION:    'rancherVersion',
+  EXTENSION_VERSION:  'extVersion',
+  EXTENSIONS_HOST:    'host',
+};
 
 export function isUIPlugin(chart) {
   return !!chart?.versions.find((v) => {
@@ -44,16 +56,61 @@ export function uiPluginHasAnnotation(chart, name, value) {
 }
 
 // Should we load a plugin, based on the metadata returned by the backend?
-export function shouldLoadPlugin(plugin) {
+// Returns error key string or false
+export function shouldNotLoadPlugin(plugin, rancherVersion) {
   if (!plugin.name || !plugin.version || !plugin.endpoint) {
+    return 'plugins.error.generic';
+  }
+
+  // Plugin specified a required extension API version
+  const requiredAPI = plugin.metadata?.[UI_PLUGIN_METADATA.EXTENSION_VERSION];
+
+  if (requiredAPI && !semver.satisfies(UI_PLUGIN_API_VERSION, requiredAPI)) {
+    return 'plugins.error.api';
+  }
+
+  // Host application
+  const requiredHost = plugin.metadata?.[UI_PLUGIN_METADATA.EXTENSIONS_HOST];
+
+  if (requiredHost && requiredHost !== UI_PLUGIN_HOST_APP) {
+    return 'plugins.error.host';
+  }
+
+  // Rancher version
+  if (rancherVersion) {
+    const requiredRancherVersion = plugin.metadata?.[UI_PLUGIN_METADATA.RANCHER_VERSION];
+
+    if (requiredRancherVersion && !semver.satisfies(rancherVersion, requiredRancherVersion)) {
+      return 'plugins.error.version';
+    }
+  }
+
+  return false;
+}
+
+// Can a chart version be used for this Rancher (based on the annotations on the chart)?
+export function isSupportedChartVersion(chartVersion, rancherVersion) {
+  // Plugin specified a required extension API version
+  const requiredAPI = chartVersion.annotations?.[UI_PLUGIN_CHART_ANNOTATIONS.EXTENSIONS_VERSION];
+
+  if (requiredAPI && !semver.satisfies(UI_PLUGIN_API_VERSION, requiredAPI)) {
+    return false;
+  }
+
+  // Host application
+  const requiredHost = chartVersion.annotations?.[UI_PLUGIN_CHART_ANNOTATIONS.EXTENSIONS_HOST];
+
+  if (requiredHost && requiredHost !== UI_PLUGIN_HOST_APP) {
     return false;
   }
 
-  // Plugin specified a required API version
-  const requiredAPI = plugin.metadata?.[UI_PLUGIN_METADATA_API_VERSION];
+  // Rancher version
+  if (rancherVersion) {
+    const requiredRancherVersion = chartVersion.annotations?.[UI_PLUGIN_CHART_ANNOTATIONS.RANCHER_VERSION];
 
-  if (requiredAPI) {
-    return semver.satisfies(UI_PLUGIN_API_VERSION, requiredAPI);
+    if (requiredRancherVersion && !semver.satisfies(rancherVersion, requiredRancherVersion)) {
+      return false;
+    }
   }
 
   return true;

package/config/version.js

@@ -0,0 +1,17 @@
+/**
+ * Store version data retrieved from the backend /rancherversion API
+ */
+let _versionData = { RancherPrime: 'false' };
+
+export function isRancherPrime() {
+  return _versionData.RancherPrime?.toLowerCase() === 'true';
+}
+
+export function getVersionData() {
+  return _versionData;
+}
+
+export function setVersionData(v) {
+  // Remove any properties on 'v' we don't want
+  _versionData = JSON.parse(JSON.stringify(v));
+}

package/core/plugin.ts

@@ -45,6 +45,10 @@ export class Plugin implements IPlugin {
     this.name = this._metadata.name || this.id;
   }
 
+  get version() {
+    return this._metadata.version;
+  }
+
   get validators() {
     return this._validators;
   }
@@ -104,6 +108,14 @@ export class Plugin implements IPlugin {
     this.routes.push({ parent, route });
   }
 
+  setHomePage(component: any) {
+    this.addRoute({
+      name: 'home',
+      path: '/home',
+      component
+    });
+  }
+
   addUninstallHook(hook: Function) {
     this.uninstallHooks.push(hook);
   }