@rancher/shell 0.2.5 → 0.3.1

package/pages/c/_cluster/monitoring/alertmanagerconfig/_alertmanagerconfigid/receiver.vue

@@ -156,7 +156,7 @@ export default {
     // being saved. Therefore we take the save from the
     // AlertmanagerConfig resource and pass it into the
     // receiver config form.
-    saveOverride(buttonDone) {
+    async saveOverride(buttonDone) {
       if (this.alertmanagerConfigResource.yamlError) {
         this.alertmanagerConfigResource.errors = this.alertmanagerConfigResource.errors || [];
         this.alertmanagerConfigResource.errors.push(this.alertmanagerConfigResource.yamlError);
@@ -166,8 +166,18 @@ export default {
         return;
       }
 
-      this.alertmanagerConfigResource.save(...arguments);
-      this.redirectToAlertmanagerConfigDetail();
+      try {
+        await this.alertmanagerConfigResource.save(...arguments);
+
+        buttonDone(true);
+
+        this.redirectToAlertmanagerConfigDetail();
+      } catch (e) {
+        const msg = e?.message ? e.message : this.t('monitoring.alertmanagerConfig.error');
+
+        this.$refs.config.setError(msg);
+        buttonDone(false);
+      }
     },
     handleButtonGroupClick(event) {
       if (event === this.yaml) {
@@ -226,7 +236,7 @@ export default {
 
 <template>
   <div>
-    <header class="header-layout header">
+    <header class="header">
       <div class="title">
         <div class="primaryheader">
           <h1>
@@ -271,6 +281,7 @@ export default {
     />
     <ReceiverConfig
       v-if="(currentView === config || currentView === detail) && alertmanagerConfigResource"
+      ref="config"
       :value="receiverValue"
       :mode="mode"
       :alertmanager-config-id="alertmanagerConfigId"

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

@@ -140,7 +140,7 @@ export default {
 
 <template>
   <section>
-    <header class="header-layout row">
+    <header class="row">
       <div class="col span-12">
         <h1>
           <t k="monitoring.overview.title" />

package/pages/c/_cluster/navlinks/_group.vue

@@ -6,7 +6,7 @@ import SelectIconGrid from '@shell/components/SelectIconGrid';
 export default {
   components: { SelectIconGrid },
 
-  computed:   {
+  computed: {
     groupSlug() {
       return this.$route.params.group;
     },

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

@@ -27,7 +27,7 @@ export default {
         enabled:     true,
         iconSrc:     this.neuvectorImgSrc,
         label:       'neuvector.overview.linkedList.neuvector.label',
-        description:   'neuvector.overview.linkedList.neuvector.description',
+        description: 'neuvector.overview.linkedList.neuvector.description',
         link:        `/k8s/clusters/${ this.currentCluster.id }/api/v1/namespaces/${ NEU_VECTOR_NAMESPACE }/services/https:neuvector-service-webui:8443/proxy`
       },
     ];
@@ -37,7 +37,7 @@ export default {
 
 <template>
   <section>
-    <header class="header-layout row">
+    <header class="row">
       <div class="col span-12">
         <h1>
           <t k="neuvector.overview.title" />

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

@@ -16,40 +16,40 @@ import NotificationSettings from '@shell/components/form/NotificationSettings.vu
 
 const DEFAULT_BANNER_SETTING = {
   loginError:   { message: '', showMessage: 'false' },
-  bannerHeader:    {
-    background:      null,
-    color:           null,
-    textAlignment:   'center',
-    fontWeight:      null,
-    fontStyle:       null,
-    fontSize:        '14px',
-    textDecoration:  null,
-    text:            null,
+  bannerHeader: {
+    background:     null,
+    color:          null,
+    textAlignment:  'center',
+    fontWeight:     null,
+    fontStyle:      null,
+    fontSize:       '14px',
+    textDecoration: null,
+    text:           null,
   },
   bannerFooter: {
-    background:      null,
-    color:           null,
-    textAlignment:   'center',
-    fontWeight:      null,
-    fontStyle:       null,
-    fontSize:        '14px',
-    textDecoration:  null,
-    text:            null
+    background:     null,
+    color:          null,
+    textAlignment:  'center',
+    fontWeight:     null,
+    fontStyle:      null,
+    fontSize:       '14px',
+    textDecoration: null,
+    text:           null
   },
-  bannerConsent:  {
-    background:      null,
-    color:           null,
-    textAlignment:   'center',
-    fontWeight:      null,
-    fontStyle:       null,
-    fontSize:        '14px',
-    textDecoration:  null,
-    text:            null,
-    button:          null,
+  bannerConsent: {
+    background:     null,
+    color:          null,
+    textAlignment:  'center',
+    fontWeight:     null,
+    fontStyle:      null,
+    fontSize:       '14px',
+    textDecoration: null,
+    text:           null,
+    button:         null,
   },
-  showHeader:   'false',
-  showFooter:   'false',
-  showConsent:  'false'
+  showHeader:  'false',
+  showFooter:  'false',
+  showConsent: 'false'
 };
 
 export default {

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

@@ -28,12 +28,12 @@ export default {
 
   async fetch() {
     const hash = await allHash({
-      uiPLSetting:            this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.PL }),
-      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, ''),
-      uiFaviconSetting:       fetchOrCreateSetting(this.$store, SETTING.FAVICON, ''),
+      uiPLSetting:        this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.PL }),
+      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, ''),
+      uiFaviconSetting:   fetchOrCreateSetting(this.$store, SETTING.FAVICON, ''),
     });
 
     Object.assign(this, hash);
@@ -79,9 +79,9 @@ export default {
       uiLogoLight:        '',
       customizeLogo:      false,
 
-      uiFaviconSetting:   {},
-      uiFavicon:          '',
-      customizeFavicon:   false,
+      uiFaviconSetting: {},
+      uiFavicon:        '',
+      customizeFavicon: false,
 
       uiColorSetting:     {},
       uiColor:            null,

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

@@ -27,12 +27,12 @@ export default {
 
   data() {
     return {
-      defaultsDisabled:    true,
-      isRancherPrime:     isRancherPrime(),
-      uiCustomLinks:      {},
-      bannerVal:          {},
-      value:              [],
-      errors:             [],
+      defaultsDisabled: true,
+      isRancherPrime:   isRancherPrime(),
+      uiCustomLinks:    {},
+      bannerVal:        {},
+      value:            [],
+      errors:           [],
     };
   },
   computed: {

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

@@ -133,7 +133,7 @@ export default {
           <p>{{ t('performance.manualRefresh.description') }}</p>
           <Banner
             color="error"
-            label-key="performance.manualRefresh.banner"
+            label-key="performance.experimental"
           />
           <Checkbox
             v-model="value.manualRefresh.enabled"
@@ -163,7 +163,7 @@ export default {
           <p>{{ t('performance.gc.description') }}</p>
           <Banner
             color="error"
-            label-key="performance.gc.banner"
+            label-key="performance.experimental"
           />
           <Checkbox
             v-model="value.garbageCollection.enabled"
@@ -237,6 +237,52 @@ export default {
             </div>
           </div>
         </div>
+        <!-- Force NS filter -->
+        <div class="mt-40">
+          <h2>{{ t('performance.nsFiltering.label') }}</h2>
+          <p>{{ t('performance.nsFiltering.description') }}</p>
+          <Banner
+            color="error"
+            label-key="performance.experimental"
+          />
+          <Checkbox
+            v-model="value.forceNsFilter.enabled"
+            :mode="mode"
+            :label="t('performance.nsFiltering.checkboxLabel')"
+            class="mt-10 mb-20"
+            :primary="true"
+          />
+          <div class="ml-20">
+            <p :class="{ 'text-muted': !value.forceNsFilter.enabled }">
+              {{ t('performance.nsFiltering.count.description') }}
+            </p>
+            <LabeledInput
+              v-model="value.forceNsFilter.threshold"
+              :mode="mode"
+              :label="t('performance.nsFiltering.count.inputLabel')"
+              :disabled="!value.forceNsFilter.enabled"
+              class="input"
+              type="number"
+              min="0"
+            />
+          </div>
+        </div>
+        <!-- Advanced Websocket Worker -->
+        <div class="mt-40">
+          <h2>{{ t('performance.advancedWorker.label') }}</h2>
+          <p>{{ t('performance.advancedWorker.description') }}</p>
+          <Banner
+            color="error"
+            label-key="performance.experimental"
+          />
+          <Checkbox
+            v-model="value.advancedWorker.enabled"
+            :mode="mode"
+            :label="t('performance.advancedWorker.checkboxLabel')"
+            class="mt-10 mb-20"
+            :primary="true"
+          />
+        </div>
       </div>
     </div>
     <template v-for="err in errors">

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

@@ -95,7 +95,7 @@ export default {
             name,
             namespace: UI_PLUGIN_NAMESPACE
           },
-          spec:     {
+          spec: {
             plugin: {
               name:     crdName,
               version,

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

@@ -146,7 +146,7 @@ export default {
 
       try {
         const app = await this.$store.dispatch('management/find', {
-          type:  CATALOG.APP,
+          type: CATALOG.APP,
           id:   `${ UI_PLUGIN_NAMESPACE }/${ plugin.chart.chartName }`,
           opt:  { force: true },
         });

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

@@ -1,9 +1,22 @@
 <script>
+import { mapGetters } from 'vuex';
 import ChartReadme from '@shell/components/ChartReadme';
 import { Banner } from '@components/Banner';
 import LazyImage from '@shell/components/LazyImage';
+import { MANAGEMENT } from '@shell/config/types';
+import { SETTING } from '@shell/config/settings';
 
 export default {
+  async fetch() {
+    const bannerSetting = await this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.BANNERS);
+    const { showHeader, bannerHeader } = JSON.parse(bannerSetting.value);
+
+    if (showHeader === 'true') {
+      const headerBannerFontSize = Number(bannerHeader?.fontSize?.split('px')[0] ?? 0);
+
+      this.headerBannerSize = headerBannerFontSize * 2;
+    }
+  },
   components: {
     Banner,
     ChartReadme,
@@ -12,15 +25,28 @@ export default {
 
   data() {
     return {
-      showSlideIn:  false,
-      info:         undefined,
-      infoVersion:  undefined,
-      versionInfo:  undefined,
-      versionError: undefined,
-      defaultIcon:  require('~shell/assets/images/generic-plugin.svg'),
+      showSlideIn:      false,
+      info:             undefined,
+      infoVersion:      undefined,
+      versionInfo:      undefined,
+      versionError:     undefined,
+      defaultIcon:      require('~shell/assets/images/generic-plugin.svg'),
+      headerBannerSize: 0,
     };
   },
 
+  computed: {
+    ...mapGetters({ theme: 'prefs/theme' }),
+
+    applyDarkModeBg() {
+      if (this.theme === 'dark') {
+        return { 'dark-mode': true };
+      }
+
+      return {};
+    },
+  },
+
   methods: {
     show(info) {
       this.info = info;
@@ -80,7 +106,10 @@ export default {
 };
 </script>
 <template>
-  <div class="plugin-info-panel">
+  <div
+    class="plugin-info-panel"
+    :style="`--banner-top-offset: ${headerBannerSize}px`"
+  >
     <div
       v-if="showSlideIn"
       class="glass"
@@ -95,7 +124,10 @@ export default {
         class="plugin-info-content"
       >
         <div class="plugin-header">
-          <div class="plugin-icon">
+          <div
+            class="plugin-icon"
+            :class="applyDarkModeBg"
+          >
             <LazyImage
               v-if="info.icon"
               :initial-src="defaultIcon"
@@ -209,7 +241,8 @@ export default {
     $title-height: 50px;
     $padding: 5px;
     $slideout-width: 35%;
-    $header-height: 54px;
+    --banner-top-offset: 0;
+    $header-height: calc(54px + var(--banner-top-offset));
 
     .glass {
       z-index: 9;
@@ -237,6 +270,10 @@ export default {
 
       transition: right .5s ease;
 
+      &__header {
+        text-transform: capitalize;
+      }
+
       .plugin-info-content {
         display: flex;
         flex-direction: column;
@@ -268,10 +305,23 @@ export default {
         font-size: 40px;
         margin-right:10px;
         color: #888;
+        width: 44px;
+        height: 44px;
+
+        &.dark-mode {
+          border-radius: calc(2 * var(--border-radius));
+          overflow: hidden;
+          background-color: white;
+        }
 
         .plugin-icon-img {
           height: 40px;
           width: 40px;
+          -o-object-fit: contain;
+          object-fit: contain;
+          position: relative;
+          top: 2px;
+          left: 2px;
         }
       }
 

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

@@ -103,6 +103,15 @@ export default {
 
     ...mapGetters({ uiplugins: 'uiplugins/plugins' }),
     ...mapGetters({ uiErrors: 'uiplugins/errors' }),
+    ...mapGetters({ theme: 'prefs/theme' }),
+
+    applyDarkModeBg() {
+      if (this.theme === 'dark') {
+        return { 'dark-mode': true };
+      }
+
+      return {};
+    },
 
     menuActions() {
       const menuActions = [];
@@ -372,13 +381,13 @@ export default {
     this.$store.dispatch('management/forgetType', CATALOG.CLUSTER_REPO);
   },
 
-  methods:    {
+  methods: {
     async updateInstallStatus() {
       let hasService;
 
       try {
         const service = await this.$store.dispatch('management/find', {
-          type:  SERVICE,
+          type: SERVICE,
           id:   `${ UI_PLUGIN_NAMESPACE }/ui-plugin-operator`,
           opt:  { force: true },
         });
@@ -599,7 +608,10 @@ export default {
             class="plugin"
             @click="showPluginDetail(plugin)"
           >
-            <div class="plugin-icon">
+            <div
+              class="plugin-icon"
+              :class="applyDarkModeBg"
+            >
               <LazyImage
                 v-if="plugin.icon"
                 :initial-src="defaultIcon"
@@ -781,7 +793,7 @@ export default {
 
     > i {
       color: var(--success);
-      font-size: 20px;
+      font-size: 14px;
       font-weight: bold;
     }
 
@@ -841,10 +853,23 @@ export default {
       font-size: 40px;
       margin-right:10px;
       color: #888;
+      width: 44px;
+      height: 44px;
+
+      &.dark-mode {
+        border-radius: calc(2 * var(--border-radius));
+        overflow: hidden;
+        background-color: white;
+      }
 
       .plugin-icon-img {
         height: 40px;
         width: 40px;
+        -o-object-fit: contain;
+        object-fit: contain;
+        position: relative;
+        top: 2px;
+        left: 2px;
       }
     }
 
@@ -875,6 +900,7 @@ export default {
       font-size: 16px;
       font-weight: bold;
       margin-bottom: 5px;
+      text-transform: capitalize;
     }
 
     .plugin-badges {

package/pages/diagnostic.vue

@@ -284,12 +284,13 @@ export default {
     },
 
     promptDownload(btnCb) {
-      const resources = [{ downloadData: this.downloadData, gatherResponseTimes: this.gatherResponseTimes }];
-
       if ( !this.responseTimes ) {
         this.$store.dispatch('management/promptModal', {
-          component: 'DiagnosticTimingsDialog',
-          resources
+          component:      'DiagnosticTimingsDialog',
+          componentProps: {
+            downloadData:        this.downloadData,
+            gatherResponseTimes: this.gatherResponseTimes
+          }
         })
           .then(() => btnCb(true))
           .catch(() => btnCb(false));