@rancher/shell 0.5.3 → 2.0.0

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

@@ -8,14 +8,12 @@ import { CATALOG, MONITORING } from '@shell/config/types';
 import { allHash } from '@shell/utils/promise';
 import { findBy } from '@shell/utils/array';
 import { getClusterPrefix } from '@shell/utils/grafana';
-import { Banner } from '@components/Banner';
 import LazyImage from '@shell/components/LazyImage';
 import SimpleBox from '@shell/components/SimpleBox';
-import { haveV1MonitoringWorkloads, canViewAlertManagerLink, canViewGrafanaLink, canViewPrometheusLink } from '@shell/utils/monitoring';
+import { canViewAlertManagerLink, canViewGrafanaLink, canViewPrometheusLink } from '@shell/utils/monitoring';
 
 export default {
   components: {
-    Banner,
     LazyImage,
     SimpleBox,
     AlertTable
@@ -39,7 +37,6 @@ export default {
         prometheus:   false,
       },
       resources:     [MONITORING.ALERTMANAGER, MONITORING.PROMETHEUS],
-      v1Installed:   false,
       externalLinks: [
         {
           enabled:     false,
@@ -92,8 +89,6 @@ export default {
   methods: {
     async fetchDeps() {
       const { $store, externalLinks } = this;
-
-      this.v1Installed = await haveV1MonitoringWorkloads($store);
       const hash = {};
 
       if ($store.getters['cluster/canList'](CATALOG.APP)) {
@@ -151,17 +146,6 @@ export default {
       </div>
     </header>
     <div>
-      <Banner
-        v-if="v1Installed"
-        color="warning"
-      >
-        <template #default>
-          <t
-            k="monitoring.v1Warning"
-            :raw="true"
-          />
-        </template>
-      </Banner>
       <div class="create-resource-container">
         <div class="subtypes-container">
           <a

package/pages/c/_cluster/monitoring/route-receiver/index.vue

@@ -100,9 +100,9 @@ export default {
       >
         <div v-if="secretTo">
           We don't support the current route format stored in alertmanager.yaml. Click
-          <nuxt-link :to="secretTo">
+          <router-link :to="secretTo">
             here
-          </nuxt-link> to update manually.
+          </router-link> to update manually.
         </div>
         <ResourceTable
           v-else

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

@@ -21,6 +21,7 @@ export default {
 
   computed: { ...mapGetters(['currentCluster']) },
 
+  // i18n-uses neuvector.overview.linkedList.neuvector.label, neuvector.overview.linkedList.neuvector.description
   mounted() {
     this.externalLinks = [
       {

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

@@ -76,6 +76,7 @@ export default {
         <div
           v-if="!row.readonly && !isView"
           :key="i+'show'"
+          class="link-show-hide-checkbox"
         >
           <Checkbox
             v-if="!isView"

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

@@ -13,6 +13,7 @@ import { SETTING } from '@shell/config/settings';
 import { clone } from '@shell/utils/object';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import NotificationSettings from '@shell/components/form/NotificationSettings.vue';
+import { getIndividualBanners, overlayIndividualBanners } from '@shell/utils/banners';
 
 const DEFAULT_BANNER_SETTING = {
   loginError:   { message: '', showMessage: 'false' },
@@ -63,20 +64,24 @@ export default {
   },
 
   async fetch() {
+    // We fetch all settings, so we can check for individual banner setting resources
+    // We will have already fetched all settings, so there is no performance impact doing this versus fetching individual settings
     const hash = await allHash({ uiBannerSetting: this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.BANNERS }) });
 
     Object.assign(this, hash);
+
+    this.uiBannerIndividual = getIndividualBanners(this.$store);
   },
 
   data() {
     return {
       vendor: getVendor(),
 
-      uiBannerSetting: null,
-      bannerVal:       {},
+      uiBannerSetting:    null,
+      uiBannerIndividual: {},
+      bannerVal:          {},
 
       errors: [],
-
     };
   },
 
@@ -88,12 +93,27 @@ export default {
     },
 
     headerMode() {
+      // If the individual setting is used, then always view mode
+      if (this.uiBannerIndividual.bannerHeader) {
+        return _VIEW;
+      }
+
       return this.bannerVal?.showHeader === 'true' ? _EDIT : _VIEW;
     },
     footerMode() {
+      // If the individual setting is used, then always view mode
+      if (this.uiBannerIndividual.bannerFooter) {
+        return _VIEW;
+      }
+
       return this.bannerVal?.showFooter === 'true' ? _EDIT : _VIEW;
     },
     consentMode() {
+      // If the individual setting is used, then always view mode
+      if (this.uiBannerIndividual.bannerConsent) {
+        return _VIEW;
+      }
+
       return this.bannerVal?.showConsent === 'true' ? _EDIT : _VIEW;
     }
   },
@@ -105,6 +125,8 @@ export default {
           const parsedBanner = JSON.parse(neu.value);
 
           this.bannerVal = this.checkOrUpdateLegacyUIBannerSetting(parsedBanner);
+
+          overlayIndividualBanners(this.bannerVal, this.uiBannerIndividual);
         } catch {}
       }
     }
@@ -185,12 +207,27 @@ export default {
 
       <template>
         <!-- Header Settings -->
-        <h2 class="mt-40 mb-40">
+        <h2 class="mt-40 mb-10 setting-title">
           {{ t('banner.headerBanner') }}
+          <i
+            v-if="!!uiBannerIndividual.bannerHeader"
+            class="icon icon-lock"
+          />
         </h2>
+        <div
+          v-if="!!uiBannerIndividual.bannerHeader"
+          class="row mb-10"
+        >
+          <Banner
+            color="warning"
+            class="mt-0"
+            :label="t('banner.individualSetting', {name: 'ui-banner-header'}, true)"
+          />
+        </div>
         <div class="row mb-20">
           <div class="col span-6">
             <Checkbox
+              :disabled="!!uiBannerIndividual.bannerHeader"
               :value="bannerVal.showHeader === 'true'"
               :label="t('banner.showHeader')"
               :mode="mode"
@@ -205,12 +242,27 @@ export default {
         />
 
         <!-- Footer settings -->
-        <h2 class="mt-40 mb-40">
+        <h2 class="mt-40 mb-10 setting-title">
           {{ t('banner.footerBanner') }}
+          <i
+            v-if="!!uiBannerIndividual.bannerFooter"
+            class="icon icon-lock"
+          />
         </h2>
-        <div class="row mt-40 mb-20">
+        <div
+          v-if="!!uiBannerIndividual.bannerFooter"
+          class="row mb-10"
+        >
+          <Banner
+            color="warning"
+            class="mt-0"
+            :label="t('banner.individualSetting', {name: 'ui-banner-footer'}, true)"
+          />
+        </div>
+        <div class="row mb-20">
           <div class="col span-6">
             <Checkbox
+              :disabled="!!uiBannerIndividual.bannerFooter"
               :value="bannerVal.showFooter === 'true'"
               :label="t('banner.showFooter')"
               :mode="mode"
@@ -226,13 +278,28 @@ export default {
       </template>
 
       <!-- Consent settings -->
-      <h2 class="mt-40 mb-40">
+      <h2 class="mt-40 mb-10 setting-title">
         {{ t('banner.loginScreenBanner') }}
+        <i
+          v-if="!!uiBannerIndividual.bannerConsent"
+          class="icon icon-lock"
+        />
       </h2>
+      <div
+        v-if="!!uiBannerIndividual.bannerConsent"
+        class="row mb-10"
+      >
+        <Banner
+          color="warning"
+          class="mt-0"
+          :label="t('banner.individualSetting', {name: 'ui-banner-login-consent'}, true)"
+        />
+      </div>
       <template>
-        <div class="row mt-40 mb-20">
+        <div class="row mb-20">
           <div class="col span-6">
             <Checkbox
+              :disabled="!!uiBannerIndividual.bannerConsent"
               :value="bannerVal.showConsent === 'true'"
               :label="t('banner.showConsent')"
               :mode="mode"
@@ -282,4 +349,15 @@ export default {
   background-color: var(--overlay-bg);
   z-index: 1;
 }
+
+// Ensure setting titles have the icon vertically aligned when present, with spacing between
+// the icon and the text
+h2.setting-title {
+  align-items: center;
+  display: flex;
+
+  > i {
+    padding-left: 5px;
+  }
+}
 </style>

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

@@ -16,22 +16,27 @@ import { fetchOrCreateSetting } from '@shell/utils/settings';
 import { SETTING } from '@shell/config/settings';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { setFavIcon } from '@shell/utils/favicon';
+import TabTitle from '@shell/components/TabTitle';
 
 const Color = require('color');
 
 export default {
   components: {
-    LabeledInput, Checkbox, FileImageSelector, Loading, SimpleBox, AsyncButton, Banner, ColorInput, TypeDescription
+    LabeledInput, Checkbox, FileImageSelector, Loading, SimpleBox, AsyncButton, Banner, ColorInput, TypeDescription, TabTitle
   },
 
   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, ''),
+      uiBannerDarkSetting:           fetchOrCreateSetting(this.$store, SETTING.BANNER_DARK, ''),
+      uiBannerLightSetting:          fetchOrCreateSetting(this.$store, SETTING.BANNER_LIGHT, ''),
+      uiLoginBackgroundDarkSetting:  fetchOrCreateSetting(this.$store, SETTING.LOGIN_BACKGROUND_DARK, ''),
+      uiLoginBackgroundLightSetting: fetchOrCreateSetting(this.$store, SETTING.LOGIN_BACKGROUND_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);
@@ -49,6 +54,32 @@ export default {
         this.customizeLogo = true;
       } catch {}
     }
+    if (hash.uiBannerDarkSetting.value) {
+      try {
+        this.uiBannerDark = hash.uiBannerDarkSetting.value;
+        this.customizeBanner = true;
+      } catch {}
+    }
+    if (hash.uiBannerLightSetting.value) {
+      try {
+        this.uiBannerLight = hash.uiBannerLightSetting.value;
+
+        this.customizeBanner = true;
+      } catch {}
+    }
+    if (hash.uiLoginBackgroundDarkSetting.value) {
+      try {
+        this.uiLoginBackgroundDark = hash.uiLoginBackgroundDarkSetting.value;
+        this.customizeLoginBackground = true;
+      } catch {}
+    }
+    if (hash.uiLoginBackgroundLightSetting.value) {
+      try {
+        this.uiLoginBackgroundLight = hash.uiLoginBackgroundLightSetting.value;
+
+        this.customizeLoginBackground = true;
+      } catch {}
+    }
     if (hash.uiFaviconSetting.value) {
       try {
         this.uiFavicon = hash.uiFaviconSetting.value;
@@ -77,6 +108,18 @@ export default {
       uiLogoLight:        '',
       customizeLogo:      false,
 
+      uiBannerDarkSetting:  {},
+      uiBannerDark:         '',
+      uiBannerLightSetting: {},
+      uiBannerLight:        '',
+      customizeBanner:      false,
+
+      uiLoginBackgroundDarkSetting:  {},
+      uiLoginBackgroundDark:         '',
+      uiLoginBackgroundLightSetting: {},
+      uiLoginBackgroundLight:        '',
+      customizeLoginBackground:      false,
+
       uiFaviconSetting: {},
       uiFavicon:        '',
       customizeFavicon: false,
@@ -117,7 +160,7 @@ export default {
   },
 
   methods: {
-    updateLogo(img, key) {
+    updateBranding(img, key) {
       this[key] = img;
     },
 
@@ -137,6 +180,22 @@ export default {
         this.uiLogoDarkSetting.value = '';
       }
 
+      if (this.customizeBanner) {
+        this.uiBannerLightSetting.value = this.uiBannerLight;
+        this.uiBannerDarkSetting.value = this.uiBannerDark;
+      } else {
+        this.uiBannerLightSetting.value = '';
+        this.uiBannerDarkSetting.value = '';
+      }
+
+      if (this.customizeLoginBackground) {
+        this.uiLoginBackgroundLightSetting.value = this.uiLoginBackgroundLight;
+        this.uiLoginBackgroundDarkSetting.value = this.uiLoginBackgroundDark;
+      } else {
+        this.uiLoginBackgroundLightSetting.value = '';
+        this.uiLoginBackgroundDarkSetting.value = '';
+      }
+
       if (this.customizeFavicon) {
         this.uiFaviconSetting.value = this.uiFavicon;
       } else {
@@ -162,6 +221,10 @@ export default {
           this.uiPLSetting.save(),
           this.uiLogoDarkSetting.save(),
           this.uiLogoLightSetting.save(),
+          this.uiBannerDarkSetting.save(),
+          this.uiBannerLightSetting.save(),
+          this.uiLoginBackgroundDarkSetting.save(),
+          this.uiLoginBackgroundLightSetting.save(),
           this.uiColorSetting.save(),
           this.uiLinkColorSetting.save(),
           this.uiFaviconSetting.save()
@@ -185,7 +248,7 @@ export default {
   <Loading v-if="$fetchState.pending" />
   <div v-else>
     <h1 class="mb-20">
-      {{ t('branding.label') }}
+      <TabTitle>{{ t('branding.label') }}</TabTitle>
     </h1>
     <TypeDescription resource="branding" />
     <div>
@@ -218,7 +281,7 @@ export default {
         v-if="customizeLogo"
         class="row mb-20"
       >
-        <div class="col logo-container span-6">
+        <div class="col preview-container logo span-6">
           <div class="mb-10">
             <FileImageSelector
               :byte-limit="20000"
@@ -228,7 +291,7 @@ export default {
               :mode="mode"
               accept="image/jpeg,image/png,image/svg+xml"
               @error="setError"
-              @input="updateLogo($event, 'uiLogoLight')"
+              @input="updateBranding($event, 'uiLogoLight')"
             />
           </div>
           <SimpleBox
@@ -237,13 +300,13 @@ export default {
           >
             <label class="text-muted">{{ t('branding.logos.lightPreview') }}</label>
             <img
-              class="logo-preview"
+              class="img-preview"
               data-testid="branding-logo-light-preview"
               :src="uiLogoLight ? uiLogoLight : uiLogoDark"
             >
           </SimpleBox>
         </div>
-        <div class="col logo-container span-6">
+        <div class="col preview-container logo span-6">
           <div class="mb-10">
             <FileImageSelector
               :byte-limit="20000"
@@ -253,7 +316,7 @@ export default {
               :mode="mode"
               accept="image/jpeg,image/png,image/svg+xml"
               @error="setError"
-              @input="updateLogo($event, 'uiLogoDark')"
+              @input="updateBranding($event, 'uiLogoDark')"
             />
           </div>
           <SimpleBox
@@ -262,7 +325,7 @@ export default {
           >
             <label class="text-muted">{{ t('branding.logos.darkPreview') }}</label>
             <img
-              class="logo-preview"
+              class="img-preview"
               data-testid="branding-logo-dark-preview"
               :src="uiLogoDark ? uiLogoDark : uiLogoLight"
             >
@@ -270,6 +333,148 @@ export default {
         </div>
       </div>
 
+      <h3 class="mt-20 mb-5 pb-5">
+        {{ t('branding.banner.label') }}
+      </h3>
+      <label class="text-label">
+        {{ t('branding.banner.tip', {}, true) }}
+      </label>
+
+      <div class="row mt-10 mb-20">
+        <Checkbox
+          v-model="customizeBanner"
+          :label="t('branding.banner.useCustom')"
+          :mode="mode"
+        />
+      </div>
+
+      <div
+        v-if="customizeBanner"
+        class="row mb-20"
+      >
+        <div class="col preview-container banner span-6">
+          <div class="mb-10">
+            <FileImageSelector
+              :byte-limit="200000"
+              :read-as-data-url="true"
+              class="role-secondary"
+              :label="t('branding.banner.uploadLight')"
+              :mode="mode"
+              accept="image/jpeg,image/png,image/svg+xml"
+              @error="setError"
+              @input="updateBranding($event, 'uiBannerLight')"
+            />
+          </div>
+          <SimpleBox
+            v-if="uiBannerLight || uiBannerDark"
+            class="theme-light mb-10"
+          >
+            <label class="text-muted">{{ t('branding.banner.lightPreview') }}</label>
+            <img
+              class="img-preview"
+              data-testid="branding-banner-light-preview"
+              :src="uiBannerLight ? uiBannerLight : uiBannerDark"
+            >
+          </SimpleBox>
+        </div>
+        <div class="col preview-container banner span-6">
+          <div class="mb-10">
+            <FileImageSelector
+              :byte-limit="200000"
+              :read-as-data-url="true"
+              class="role-secondary"
+              :label="t('branding.banner.uploadDark')"
+              :mode="mode"
+              accept="image/jpeg,image/png,image/svg+xml"
+              @error="setError"
+              @input="updateBranding($event, 'uiBannerDark')"
+            />
+          </div>
+          <SimpleBox
+            v-if="uiBannerDark || uiBannerLight"
+            class="theme-dark  mb-10"
+          >
+            <label class="text-muted">{{ t('branding.banner.darkPreview') }}</label>
+            <img
+              class="img-preview"
+              data-testid="branding-banner-dark-preview"
+              :src="uiBannerDark ? uiBannerDark : uiBannerLight"
+            >
+          </SimpleBox>
+        </div>
+      </div>
+
+      <h3 class="mt-20 mb-5 pb-5">
+        {{ t('branding.loginBackground.label') }}
+      </h3>
+      <label class="text-label">
+        {{ t('branding.loginBackground.tip', {}, true) }}
+      </label>
+
+      <div class="row mt-10 mb-20">
+        <Checkbox
+          v-model="customizeLoginBackground"
+          :label="t('branding.loginBackground.useCustom')"
+          :mode="mode"
+        />
+      </div>
+
+      <div
+        v-if="customizeLoginBackground"
+        class="row mb-20"
+      >
+        <div class="col preview-container login-background span-6">
+          <div class="mb-10">
+            <FileImageSelector
+              :byte-limit="200000"
+              :read-as-data-url="true"
+              class="role-secondary"
+              :label="t('branding.loginBackground.uploadLight')"
+              :mode="mode"
+              accept="image/jpeg,image/png,image/svg+xml"
+              @error="setError"
+              @input="updateBranding($event, 'uiLoginBackgroundLight')"
+            />
+          </div>
+          <SimpleBox
+            v-if="uiLoginBackgroundLight || uiLoginBackgroundDark"
+            class="theme-light mb-10"
+          >
+            <label class="text-muted">{{ t('branding.loginBackground.lightPreview') }}</label>
+            <img
+              class="img-preview"
+              data-testid="branding-login-background-light-preview"
+              :src="uiLoginBackgroundLight ? uiLoginBackgroundLight : uiLoginBackgroundDark"
+            >
+          </SimpleBox>
+        </div>
+        <div class="col preview-container login-background span-6">
+          <div class="mb-10">
+            <FileImageSelector
+              :byte-limit="200000"
+              :read-as-data-url="true"
+              class="role-secondary"
+              :label="t('branding.loginBackground.uploadDark')"
+              :mode="mode"
+              accept="image/jpeg,image/png,image/svg+xml"
+              @error="setError"
+              @input="updateBranding($event, 'uiLoginBackgroundDark')"
+            />
+          </div>
+          <SimpleBox
+            v-if="uiLoginBackgroundDark || uiLoginBackgroundLight"
+            class="theme-dark  mb-10"
+          >
+            <label class="text-muted">{{ t('branding.loginBackground.darkPreview') }}</label>
+            <img
+              class="img-preview"
+              data-testid="branding-login-background-dark-preview"
+              :src="uiLoginBackgroundDark ? uiLoginBackgroundDark : uiLoginBackgroundLight"
+            >
+          </SimpleBox>
+        </div>
+      </div>
+
       <h3 class="mt-20 mb-5 pb-5">
         {{ t('branding.favicon.label') }}
       </h3>
@@ -289,7 +494,7 @@ export default {
         v-if="customizeFavicon"
         class="row mb-20"
       >
-        <div class="col logo-container span-12">
+        <div class="col favicon-container span-12">
           <div class="mb-10">
             <FileImageSelector
               :byte-limit="20000"
@@ -299,13 +504,13 @@ export default {
               :mode="mode"
               accept="image/jpeg,image/png,image/svg+xml"
               @error="setError"
-              @input="updateLogo($event, 'uiFavicon')"
+              @input="updateBranding($event, 'uiFavicon')"
             />
           </div>
           <SimpleBox v-if="uiFavicon">
             <label class="text-muted">{{ t('branding.favicon.preview') }}</label>
             <img
-              class="logo-preview"
+              class="favicon-preview"
               data-testid="branding-favicon-preview"
               :src="uiFavicon"
             >
@@ -393,29 +598,46 @@ export default {
   }
 }
 
-.logo-container {
-    display: flex;
-    flex-direction: column;
+::v-deep.preview-container {
+  display: flex;
+  flex-direction: column;
 
-    ::v-deep.simple-box {
-        position: relative;
-        flex: 1;
-        max-height: 120px;
+  .simple-box {
+    position: relative;
+    flex: 1;
 
-        .content {
-          height: 100%;
-          display: flex;
-        }
+    .content {
+      height: 100%;
+      display: flex;
+    }
 
-        .logo-preview {
-          max-width: 100%;
-        }
+    .logo-preview {
+      max-width: 100%;
+    }
+  }
+
+  &.logo {
+    .simple-box {
+      max-height: 120px;
+    }
+  }
+
+  &.banner {
+    .simple-box {
+      max-height: 200px;
     }
+  }
 
-    & LABEL {
-      position: absolute;
-      top: 10px;
-      left: 10px;
+  &.login-background {
+    .simple-box {
+      max-height: 300px;
     }
+  }
+
+  & LABEL {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+  }
 }
 </style>