@rancher/shell 0.1.2 → 0.1.4

package/pages/c/_cluster/explorer/index.vue

@@ -24,8 +24,9 @@ import {
   COUNT,
   CATALOG,
   POD,
+  PSP,
 } from '@shell/config/types';
-import { mapPref, CLUSTER_TOOLS_TIP } from '@shell/store/prefs';
+import { mapPref, CLUSTER_TOOLS_TIP, PSP_DEPRECATION_BANNER } from '@shell/store/prefs';
 import { haveV1Monitoring, monitoringStatus } from '@shell/utils/monitoring';
 import Tabbed from '@shell/components/Tabbed';
 import Tab from '@shell/components/Tabbed/Tab';
@@ -111,12 +112,12 @@ export default {
 
     return {
       nodeHeaders,
-      constraints:         [],
-      events:              [],
-      nodeMetrics:         [],
-      showClusterMetrics: false,
-      showK8sMetrics:     false,
-      showEtcdMetrics:    false,
+      constraints:                 [],
+      events:                      [],
+      nodeMetrics:                 [],
+      showClusterMetrics:          false,
+      showK8sMetrics:              false,
+      showEtcdMetrics:             false,
       CLUSTER_METRICS_DETAIL_URL,
       CLUSTER_METRICS_SUMMARY_URL,
       K8S_METRICS_DETAIL_URL,
@@ -124,7 +125,7 @@ export default {
       ETCD_METRICS_DETAIL_URL,
       ETCD_METRICS_SUMMARY_URL,
       clusterCounts,
-      selectedTab:         'cluster-events',
+      selectedTab:                 'cluster-events',
     };
   },
 
@@ -142,6 +143,20 @@ export default {
     ...mapGetters(['currentCluster']),
     ...monitoringStatus(),
 
+    displayPspDeprecationBanner() {
+      const cluster = this.currentCluster;
+      const major = cluster.status?.version?.major ? parseInt(cluster.status?.version?.major) : 0;
+      const minor = cluster.status?.version?.minor ? parseInt(cluster.status?.version?.minor) : 0;
+
+      if (major === 1 && minor >= 21 && minor < 25) {
+        const clusterCounts = this.$store.getters[`cluster/all`](COUNT)?.[0]?.counts;
+
+        return !!clusterCounts?.[PSP]?.summary?.count;
+      }
+
+      return false;
+    },
+
     nodes() {
       return this.$store.getters['cluster/all'](NODE);
     },
@@ -150,7 +165,8 @@ export default {
       return this.$store.getters['management/all'](MANAGEMENT.CLUSTER);
     },
 
-    hideClusterToolsTip: mapPref(CLUSTER_TOOLS_TIP),
+    hideClusterToolsTip:      mapPref(CLUSTER_TOOLS_TIP),
+    hidePspDeprecationBanner: mapPref(PSP_DEPRECATION_BANNER),
 
     hasV1Monitoring() {
       return haveV1Monitoring(this.$store.getters);
@@ -324,6 +340,16 @@ export default {
 
     hasDescription() {
       return !!this.currentCluster?.spec?.description;
+    },
+
+    allEventsLink() {
+      return {
+        name:   'c-cluster-product-resource',
+        params: {
+          product:  'explorer',
+          resource: 'event',
+        }
+      };
     }
   },
 
@@ -378,6 +404,14 @@ export default {
         </div>
       </div>
     </header>
+    <Banner
+      v-if="displayPspDeprecationBanner && !hidePspDeprecationBanner"
+      :closable="true"
+      color="warning"
+      @close="hidePspDeprecationBanner = true"
+    >
+      <t k="landing.deprecatedPsp" :raw="true" />
+    </Banner>
     <Banner
       v-if="!hideClusterToolsTip"
       :closable="true"
@@ -403,6 +437,14 @@ export default {
         <label>{{ t('glance.created') }}: </label>
         <span><LiveDate :value="currentCluster.metadata.creationTimestamp" :add-suffix="true" :show-tooltip="true" /></span>
       </div>
+      <p
+        v-if="displayPspDeprecationBanner && hidePspDeprecationBanner"
+        v-tooltip="t('landing.deprecatedPsp')"
+        class="alt-psp-deprecation-info"
+      >
+        <span>{{ t('landing.psps') }}</span>
+        <i class="icon icon-warning" />
+      </p>
       <div :style="{'flex':1}" />
       <div v-if="!monitoringStatus.v2 && !monitoringStatus.v1">
         <n-link :to="{name: 'c-cluster-explorer-tools'}" class="monitoring-install">
@@ -446,6 +488,11 @@ export default {
     <div class="mt-30">
       <Tabbed @changed="tabChange">
         <Tab name="cluster-events" :label="t('clusterIndexPage.sections.events.label')" :weight="2">
+          <span class="events-table-link">
+            <n-link :to="allEventsLink">
+              <span>{{ t('glance.eventsTable') }}</span>
+            </n-link>
+          </span>
           <EventsTable />
         </Tab>
         <Tab v-if="hasMonitoring" name="cluster-alerts" :label="t('clusterIndexPage.sections.alerts.label')" :weight="1">
@@ -534,6 +581,16 @@ export default {
   margin-top: 0;
 }
 
+.alt-psp-deprecation-info {
+  display: flex;
+  align-items: center;
+  color: var(--warning);
+
+  span {
+    margin-right: 4px;
+  }
+}
+
 .monitoring-install {
   display: flex;
   margin-left: 10px;
@@ -548,6 +605,12 @@ export default {
   }
 }
 
+.events-table-link {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 20px;
+}
+
 .k8s-component-status {
   align-items: center;
   display: inline-flex;

package/pages/c/_cluster/explorer/tools/index.vue

@@ -121,13 +121,15 @@ export default {
         showTypes:        [CATALOG_ANNOTATIONS._CLUSTER_TOOL],
       });
 
+      charts = charts.filter(c => c.sideLabel !== 'Experimental');
+
       //  If legacy support is enabled, show V1 charts for some V1 Cluster tools
       if (this.legacyEnabled) {
         charts = charts.concat(this.legacyCharts);
         charts = sortBy(charts, ['certifiedSort', 'chartNameDisplay']);
       }
 
-      const chartsWithApps = charts.map((chart) => {
+      let chartsWithApps = charts.map((chart) => {
         return {
           chart,
           app: this.installedAppForChart[chart.id],
@@ -136,9 +138,9 @@ export default {
 
       // V1 Legacy support
       if (this.legacyEnabled) {
-        this.checkLegacyApp(chartsWithApps, this.v1Apps, 'v1-monitoring', 'rancher-monitoring', 'cluster-monitoring');
-        this.checkLegacyApp(chartsWithApps, this.v1Apps, 'v1-istio', 'rancher-istio', 'cluster-istio');
-        this.checkLegacyApp(chartsWithApps, this.v1Apps, 'v1-logging', 'rancher-logging', 'rancher-logging');
+        chartsWithApps = this.checkLegacyApp(chartsWithApps, this.v1Apps, 'v1-monitoring', 'rancher-monitoring', 'cluster-monitoring', false);
+        chartsWithApps = this.checkLegacyApp(chartsWithApps, this.v1Apps, 'v1-istio', 'rancher-istio', 'cluster-istio', true);
+        chartsWithApps = this.checkLegacyApp(chartsWithApps, this.v1Apps, 'v1-logging', 'rancher-logging', 'rancher-logging', true);
       }
 
       return chartsWithApps;
@@ -231,7 +233,7 @@ export default {
       return versions;
     },
 
-    checkLegacyApp(chartsWithApps, v1Apps, v1ChartName, v2ChartName, v1AppName) {
+    checkLegacyApp(chartsWithApps, v1Apps, v1ChartName, v2ChartName, v1AppName, showOnlyIfInstalled) {
       const v1 = chartsWithApps.find(a => a.chart.chartName === v1ChartName);
       const v2 = chartsWithApps.find(a => a.chart.chartName === v2ChartName);
 
@@ -251,6 +253,9 @@ export default {
               v1.app.upgradeAvailable = latest;
             }
           }
+        } else if (showOnlyIfInstalled) {
+          // Remove the v1 chart if it is not already installed for charts which we no longer support
+          chartsWithApps = chartsWithApps.filter(c => c !== v1);
         }
 
         if (v2) {
@@ -262,6 +267,8 @@ export default {
           }
         }
       }
+
+      return chartsWithApps;
     }
   }
 };

package/pages/c/_cluster/mcapps/index.vue

@@ -8,7 +8,7 @@ export default {
       params: {
         ...route.params,
         product:  NAME,
-        page:    'apps'
+        page:    'catalogs'
       }
     });
   }

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

@@ -17,7 +17,6 @@ import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { setFavIcon } from '@shell/utils/favicon';
 
 const Color = require('color');
-const parse = require('url-parse');
 
 export default {
   layout: 'authenticated',
@@ -29,12 +28,10 @@ export default {
   async fetch() {
     const hash = await allHash({
       uiPLSetting:            this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.PL }),
-      uiIssuesSetting:        this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.ISSUES }),
       uiLogoDarkSetting:      fetchOrCreateSetting(this.$store, SETTING.LOGO_DARK, ''),
       uiLogoLightSetting:     fetchOrCreateSetting(this.$store, SETTING.LOGO_LIGHT, ''),
       uiColorSetting:         fetchOrCreateSetting(this.$store, SETTING.PRIMARY_COLOR, ''),
       uiLinkColorSetting:     fetchOrCreateSetting(this.$store, SETTING.LINK_COLOR, ''),
-      uiCommunitySetting:     fetchOrCreateSetting(this.$store, SETTING.COMMUNITY_LINKS, 'true'),
       uiFaviconSetting:       fetchOrCreateSetting(this.$store, SETTING.FAVICON, ''),
     });
 
@@ -75,8 +72,6 @@ export default {
       vendor:      getVendor(),
       uiPLSetting: {},
 
-      uiIssuesSetting: {},
-
       uiLogoDarkSetting:  {},
       uiLogoDark:         '',
       uiLogoLightSetting: {},
@@ -94,8 +89,6 @@ export default {
       uiLinkColor:        null,
       customizeLinkColor: false,
 
-      uiCommunitySetting: {},
-
       errors: [],
 
     };
@@ -134,22 +127,7 @@ export default {
       this.errors.push(e);
     },
 
-    validateUrl(url) {
-      const parsed = parse(url, {});
-
-      if (!parsed.protocol) {
-        this.errors.push(this.t('branding.uiIssues.invalidUrl'));
-
-        return false;
-      }
-
-      return true;
-    },
-
     async save(btnCB) {
-      if (this.uiIssuesSetting.value && !this.validateUrl(this.uiIssuesSetting.value)) {
-        return btnCB(false);
-      }
       this.uiPLSetting.value = this.uiPLSetting.value.replaceAll(/[\<>&=#()"]/gm, '');
 
       if (this.customizeLogo) {
@@ -183,12 +161,10 @@ export default {
       try {
         await Promise.all([
           this.uiPLSetting.save(),
-          this.uiIssuesSetting.save(),
           this.uiLogoDarkSetting.save(),
           this.uiLogoLightSetting.save(),
           this.uiColorSetting.save(),
           this.uiLinkColorSetting.save(),
-          this.uiCommunitySetting.save(),
           this.uiFaviconSetting.save()
         ]);
         if (this.uiPLSetting.value !== this.vendor) {
@@ -219,22 +195,6 @@ export default {
           <LabeledInput v-model="uiPLSetting.value" :label="t('branding.uiPL.label')" :mode="mode" :maxlength="100" />
         </div>
       </div>
-
-      <h3 class="mt-20 mb-5 pb-5">
-        {{ t('branding.uiIssues.label') }}
-      </h3>
-      <label class="text-label">
-        {{ t(`advancedSettings.descriptions.${ 'ui-issues' }`, {}, true) }}
-      </label>
-      <div :style="{'align-items':'center'}" class="row mt-10">
-        <div class="col span-6 pb-5">
-          <LabeledInput v-model="uiIssuesSetting.value" :label="t('branding.uiIssues.issuesUrl')" :mode="mode" />
-        </div>
-        <div class="col span-6">
-          <Checkbox :value="uiCommunitySetting.value === 'true'" :label="t('branding.uiIssues.communityLinks')" :mode="mode" @input="e=>$set(uiCommunitySetting, 'value', e.toString())" />
-        </div>
-      </div>
-
       <h3 class="mt-20 mb-5 pb-5">
         {{ t('branding.logos.label') }}
       </h3>

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

@@ -0,0 +1,200 @@
+<script>
+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'
+  }
+];
+
+export default {
+  layout:     'authenticated',
+  components: {
+    KeyValue,
+    Loading,
+    AsyncButton,
+    Banner,
+  },
+  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);
+  },
+
+  data() {
+    return {
+      uiCustomLinks:      {},
+      defaultValues:      undefined,
+      bannerVal:          {},
+      value:              {},
+      errors:             [],
+      showRestoredBanner: false
+    };
+  },
+  computed: {
+    ...mapGetters({ multiWithFallback: 'i18n/multiWithFallback' }),
+
+    mode() {
+      const schema = this.$store.getters[`management/schemaFor`](MANAGEMENT.SETTING);
+
+      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);
+    },
+
+    deprecateIssueLinks() {
+      if (this.uiIssuesSetting.value || this.uiIssuesSetting.value) {
+        this.uiIssuesSetting.value = '';
+        this.uiCommunitySetting.value = '';
+
+        return this.uiIssuesSetting.save();
+      }
+    },
+
+    async save(btnCB) {
+      this.uiCustomLinks.value = JSON.stringify(this.value);
+      this.errors = [];
+      try {
+        await this.uiCustomLinks.save();
+        btnCB(true);
+      } catch (err) {
+        this.errors.push(err);
+        btnCB(false);
+      }
+    },
+  }
+};
+</script>
+<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"
+    >
+      {{ 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>
+    <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>
+<style scoped lang='scss'>
+.overlay {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: var(--overlay-bg);
+  z-index: 1;
+}
+.ui-links-setting {
+  P {
+    line-height: 1.25;
+    margin-bottom: 10px;
+  }
+
+  .underline {
+    text-decoration: underline;
+  }
+}
+.input {
+  max-width: 25%;
+}
+</style>

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

@@ -5,18 +5,8 @@ import AsyncButton from '@shell/components/AsyncButton';
 import { Banner } from '@components/Banner';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { MANAGEMENT } from '@shell/config/types';
-import { SETTING } from '@shell/config/settings';
+import { DEFAULT_PERF_SETTING, SETTING } from '@shell/config/settings';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
-const DEFAULT_PERF_SETTING = {
-  incrementalLoading: {
-    enabled:   false,
-    threshold: 2500,
-  },
-  manualRefresh: {
-    enabled:   false,
-    threshold: 2500,
-  }
-};
 
 export default {
   layout:     'authenticated',
@@ -27,6 +17,7 @@ export default {
     Banner,
     LabeledInput,
   },
+
   async fetch() {
     try {
       this.uiPerfSetting = await this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.UI_PERFORMANCE });
@@ -41,6 +32,7 @@ export default {
 
     this.value = JSON.parse(sValue);
   },
+
   data() {
     return {
       uiPerfSetting: DEFAULT_PERF_SETTING,
@@ -49,6 +41,7 @@ export default {
       errors:        [],
     };
   },
+
   computed: {
     mode() {
       const schema = this.$store.getters[`management/schemaFor`](MANAGEMENT.SETTING);
@@ -56,10 +49,12 @@ export default {
       return schema?.resourceMethods?.includes('PUT') ? _EDIT : _VIEW;
     },
   },
+
   methods: {
     async save(btnCB) {
       this.uiPerfSetting.value = JSON.stringify(this.value);
       this.errors = [];
+
       try {
         await this.uiPerfSetting.save();
         btnCB(true);
@@ -78,12 +73,19 @@ export default {
       {{ t('performance.label') }}
     </h1>
     <div>
-      <label class="text-label">
-        {{ t(`performance.description`, {}, true) }}
-      </label>
-      <Banner color="error" label-key="performance.banner" />
-      <!-- Incremental Loading -->
       <div class="ui-perf-setting">
+        <!-- Websocket Notifications -->
+        <div class="mt-40">
+          <h2>{{ t('performance.websocketNotification.label') }}</h2>
+          <p>{{ t('performance.websocketNotification.description') }}</p>
+          <Checkbox
+            v-model="value.disableWebsocketNotification"
+            :label="t('performance.websocketNotification.checkboxLabel')"
+            class="mt-10 mb-20"
+            :primary="true"
+          />
+        </div>
+        <!-- Incremental Loading -->
         <div class="mt-40">
           <h2>{{ t('performance.incrementalLoad.label') }}</h2>
           <p>{{ t('performance.incrementalLoad.description') }}</p>
@@ -111,6 +113,7 @@ export default {
         <div class="mt-40">
           <h2 v-t="'performance.manualRefresh.label'" />
           <p>{{ t('performance.manualRefresh.description') }}</p>
+          <Banner color="error" label-key="performance.manualRefresh.banner" />
           <Checkbox
             v-model="value.manualRefresh.enabled"
             :label="t('performance.manualRefresh.checkboxLabel')"