@rancher/shell 0.1.3 → 0.1.21

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/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/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,152 @@
+<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 { _EDIT, _VIEW } from '@shell/config/query-params';
+import KeyValue from '@shell/components/form/KeyValue';
+import { mapGetters } from 'vuex';
+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',
+  components: {
+    KeyValue,
+    Loading,
+    AsyncButton,
+    Banner,
+    DefaultLinksEditor,
+  },
+  async fetch() {
+    this.value = await fetchLinks(this.$store, this.hasSupport, false, str => this.t(str));
+  },
+
+  data() {
+    return {
+      defaultsDisabled:    true,
+      isRancherPrime:     isRancherPrime(),
+      uiCustomLinks:      {},
+      bannerVal:          {},
+      value:              [],
+      errors:             [],
+    };
+  },
+  computed: {
+    ...mapGetters({ multiWithFallback: 'i18n/multiWithFallback' }),
+
+    mode() {
+      const schema = this.$store.getters[`management/schemaFor`](MANAGEMENT.SETTING);
+
+      return schema?.resourceMethods?.includes('PUT') ? _EDIT : _VIEW;
+    },
+
+    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 = '';
+        this.uiCommunitySetting.value = '';
+
+        return this.uiIssuesSetting.save();
+      }
+    },
+
+    async save(btnCB) {
+      this.errors = [];
+      try {
+        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);
+        btnCB(false);
+      }
+    },
+  }
+};
+</script>
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else>
+    <h1 class="mb-20">
+      {{ t("customLinks.label") }}
+    </h1>
+    <div>
+      <label class="text-label">
+        {{ t(`customLinks.description`, {}, true) }}
+      </label>
+    </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" />
+    </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;
+  }
+}
+.action {
+  display: flex;
+  input {
+    margin-right: 5px;
+  }
+}
+</style>