@rancher/shell 1.2.3 → 2.0.1

package/components/AssignTo.vue

@@ -25,6 +25,7 @@ export default {
       moveTo:        this.workspace,
       loaded:        false,
       allWorkspaces: [],
+      showModal:     false,
     };
   },
 
@@ -51,9 +52,9 @@ export default {
         this.allWorkspaces = await this.$store.dispatch('management/findAll', { type: FLEET.WORKSPACE });
         this.moveTo = this.workspace;
         this.loaded = true;
-        this.$modal.show('assignTo');
+        this.showModal = true;
       } else {
-        this.$modal.hide('assignTo');
+        this.showModal = false;
       }
     }
   },
@@ -105,12 +106,14 @@ export default {
 </script>
 
 <template>
-  <modal
+  <app-modal
+    v-if="showModal"
     class="assign-modal"
     name="assignTo"
     styles="background-color: var(--nav-bg); border-radius: var(--border-radius); max-height: 100vh;"
     height="auto"
     :scrollable="true"
+    @close="close"
   >
     <Card
       v-if="loaded"
@@ -165,7 +168,7 @@ export default {
         />
       </div>
     </Card>
-  </modal>
+  </app-modal>
 </template>
 
 <style lang='scss'>

package/components/AsyncButton.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent, PropType, inject } from 'vue';
 import typeHelper from '@shell/utils/type-helpers';
 
 export const ASYNC_BUTTON_STATES = {
@@ -14,7 +14,14 @@ const TOOLTIP = 'tooltip';
 
 export type AsyncButtonCallback = (success: boolean) => void;
 
-export default Vue.extend<{ phase: string}, any, any, any>({
+interface NonReactiveProps {
+  timer: NodeJS.Timeout | undefined;
+}
+
+const provideProps: NonReactiveProps = { timer: undefined };
+
+// i18n-uses asyncButton.*
+export default defineComponent({
   props: {
     /**
      * Mode maps to keys in asyncButton.* translations
@@ -37,7 +44,7 @@ export default Vue.extend<{ phase: string}, any, any, any>({
       default: false,
     },
     type: {
-      type:    String,
+      type:    String as PropType<'button' | 'submit' | 'reset' | undefined>,
       default: 'button'
     },
     tabIndex: {
@@ -113,7 +120,13 @@ export default Vue.extend<{ phase: string}, any, any, any>({
 
   },
 
-  data(): { phase: string, timer?: NodeJS.Timeout} {
+  setup() {
+    const timer = inject('timer', provideProps.timer);
+
+    return { timer };
+  },
+
+  data() {
     return { phase: this.currentPhase };
   },
 
@@ -245,7 +258,7 @@ export default Vue.extend<{ phase: string}, any, any, any>({
         this.phase = (success ? ASYNC_BUTTON_STATES.SUCCESS : ASYNC_BUTTON_STATES.ERROR );
         this.timer = setTimeout(() => {
           this.timerDone();
-        }, this.delay );
+        }, this.delay);
       }
     },
 
@@ -273,6 +286,7 @@ export default Vue.extend<{ phase: string}, any, any, any>({
     :data-testid="componentTestid + '-async-button'"
     @click="clicked"
   >
+    <span v-if="mode === 'manual-refresh'">{{ t('action.refresh') }}</span>
     <i
       v-if="displayIcon"
       v-clean-tooltip="tooltip"
@@ -285,3 +299,11 @@ export default Vue.extend<{ phase: string}, any, any, any>({
     />
   </button>
 </template>
+
+<style lang="scss" scoped>
+// refresh mode has icon + text. We need to fix the positioning of the icon and sizing
+.manual-refresh i {
+  margin: 0 0 0 8px !important;
+  font-size: 1rem !important;
+}
+</style>

package/components/BackLink.vue

@@ -9,20 +9,20 @@ export default {
 };
 </script>
 <template>
-  <nuxt-link
+  <router-link
     v-if="link && link.name"
     :to="link"
     class="back-link"
   >
     <i class="icon icon-chevron-left" /> {{ t('generic.back') }}
-  </nuxt-link>
-  <nuxt-link
+  </router-link>
+  <router-link
     v-else
     to="/"
     class="back-link"
   >
     <i class="icon icon-chevron-left" /> {{ t('nav.home') }}
-  </nuxt-link>
+  </router-link>
 </template>
 
 <style lang="scss" scoped>

package/components/BannerGraphic.vue

@@ -33,6 +33,7 @@ export default {
     <div class="graphic">
       <BrandImage
         class="banner"
+        data-testid="banner-brand__img"
         file-name="banner.svg"
         :draggable="false"
       />

package/components/BrandImage.vue

@@ -15,7 +15,21 @@ export default {
     }
   },
   data() {
-    return { managementSettings: this.$store.getters['management/all'](MANAGEMENT.SETTING) };
+    const managementSettings = this.$store.getters['management/all'](MANAGEMENT.SETTING);
+
+    const uiLoginBackgroundLight = managementSettings?.filter((setting) => setting.id === SETTING.LOGIN_BACKGROUND_LIGHT)?.[0]?.value;
+    const uiLoginBackgroundDark = managementSettings?.filter((setting) => setting.id === SETTING.LOGIN_BACKGROUND_DARK)?.[0]?.value;
+
+    return {
+      managementSettings,
+
+      /**
+       * Login settings fields don't require reactivity; the correct value for those fields is the initial one.
+       * This will avoid side effects after the management store is reset when landing on login page.
+       */
+      uiLoginBackgroundLight,
+      uiLoginBackgroundDark,
+    };
   },
   computed: {
     ...mapGetters({ theme: 'prefs/theme' }),
@@ -38,6 +52,18 @@ export default {
       return setting.value;
     },
 
+    uiBannerLight() {
+      const setting = this.managementSettings.filter((setting) => setting.id === SETTING.BANNER_LIGHT)[0] || {};
+
+      return setting.value;
+    },
+
+    uiBannerDark() {
+      const setting = this.managementSettings.filter((setting) => setting.id === SETTING.BANNER_DARK)[0] || {};
+
+      return setting.value;
+    },
+
     defaultPathToBrandedImage() {
       const themePrefix = this.theme === 'dark' ? 'dark/' : '';
 
@@ -59,6 +85,26 @@ export default {
         }
       }
 
+      if (this.fileName === 'banner.svg') {
+        if (this.theme === 'dark' && this.uiBannerDark) {
+          return this.uiBannerDark;
+        }
+
+        if (this.uiBannerLight) {
+          return this.uiBannerLight;
+        }
+      }
+
+      if (this.fileName === 'login-landscape.svg') {
+        if (this.theme === 'dark' && this.uiLoginBackgroundDark) {
+          return this.uiLoginBackgroundDark;
+        }
+
+        if (this.uiLoginBackgroundLight) {
+          return this.uiLoginBackgroundLight;
+        }
+      }
+
       if (!this.brand) {
         return this.defaultPathToBrandedImage;
       } else {

package/components/Carousel.vue

@@ -121,17 +121,23 @@ export default {
     const slideTrack = document.getElementById('slide-track');
 
     if (this.slider.length === 1) {
-      // singleSlide.style = 'width: 100%; max-width: 100%';
       slideTrack.style = 'transform:translateX(0%); width:100%; left:0';
     } else {
       const node = document.getElementById('slide0');
-      const clone = node.cloneNode(true);
+
+      if (node) {
+        const clone = node.cloneNode(true);
+
+        slideTrack.appendChild(clone);
+      }
 
       const nodeLast = document.getElementById(`slide${ this.slider.length - 1 }`);
-      const cloneLast = nodeLast.cloneNode(true);
 
-      slideTrack.appendChild(clone);
-      slideTrack.insertBefore(cloneLast, slideTrack.children[0]);
+      if (nodeLast) {
+        const cloneLast = nodeLast.cloneNode(true);
+
+        slideTrack.insertBefore(cloneLast, slideTrack.children[0]);
+      }
     }
 
     const lastSeenCluster = sessionStorage.getItem(carouselSeenStorageKey);
@@ -142,7 +148,7 @@ export default {
     }
 
     this.autoScrollSlideInterval = setInterval(this.autoScrollSlide, 5000);
-  },
+  }
 
 };
 
@@ -159,7 +165,7 @@ export default {
       :style="trackStyle"
       class="slide-track"
     >
-      <div
+      <component
         :is="asLink ? 'a' : 'div'"
         v-for="(slide, i) in sliders"
         :id="`slide` + i"
@@ -185,7 +191,7 @@ export default {
             <p>{{ slide.chartDescription }}</p>
           </div>
         </div>
-      </div>
+      </component>
     </div>
     <div
       class="controls"
@@ -282,6 +288,7 @@ export default {
   .slide-content {
     display: flex;
     padding: 30px;
+    height: 100%;
 
     .slide-img {
       width: 150px;

package/components/Certificates.vue

@@ -0,0 +1,161 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+import ResourceTable from '@shell/components/ResourceTable.vue';
+import { SECRET } from '@shell/config/types';
+import { NAME as NAME_COL, NAMESPACE as NAMESPACE_COL, AGE, STATE } from '@shell/config/table-headers';
+import Secret, { TYPES } from '@shell/models/secret';
+import { Banner } from '@components/Banner';
+import { STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
+import { BadgeState } from '@components/BadgeState';
+
+interface Data {
+  schema: Object,
+  headers: Object[],
+  certs: Secret[],
+  pagingParams: {
+    pluralLabel: string,
+    singularLabel: string
+  }
+}
+
+export default defineComponent({
+  components: {
+    ResourceTable, Banner, BadgeState
+  },
+
+  async fetch() {
+    // We're fetching secrets with a filter, this will clash with secrets in other contexts
+    this.$store.dispatch('cluster/forgetType', SECRET);
+
+    this.certs = await this.$store.dispatch('cluster/findAll', {
+      type: SECRET,
+      opt:  {
+        watch:  false,
+        // Note - urlOptions handles filter in a weird way
+        filter: { 'metadata.fields.1': TYPES.TLS }
+      }
+    });
+  },
+
+  data(): Data {
+    return {
+      schema:  this.$store.getters['cluster/schemaFor'](SECRET),
+      headers: [
+        {
+          ...STATE,
+          formatter: null,
+          name:      'certState',
+          sort:      ['certState', 'nameSort'],
+          value:     'certState',
+        },
+        NAME_COL,
+        NAMESPACE_COL,
+        {
+          name:     'cn',
+          labelKey: 'secret.certificate.cn',
+          value:    (row: Secret) => {
+            if (!row.cn) {
+              return;
+            }
+
+            return row.cn + (row.unrepeatedSans.length ? ` ${ this.t('secret.certificate.plusMore', { n: row.unrepeatedSans.length }) }` : '');
+          },
+          sort:   ['cn'],
+          search: ['cn'],
+        }, {
+          name:        'cert-expires2',
+          labelKey:    'secret.certificate.expiresDuration',
+          value:       (row: Secret) => row.timeTilExpirationDate,
+          formatter:   'LiveDate',
+          sort:        ['timeTilExpiration'],
+          search:      ['timeTilExpiration'],
+          defaultSort: true,
+          width:       100
+        }, {
+          name:      'cert-expires',
+          labelKey:  'secret.certificate.expiresOn',
+          value:     'cachedCertInfo.notAfter',
+          formatter: 'Date',
+          sort:      ['cachedCertInfo.notAfter'],
+          search:    ['cachedCertInfo.notAfter'],
+        }, {
+          name:     'cert-lifetime',
+          labelKey: 'secret.certificate.lifetime',
+          value:    (row: Secret) => row.certLifetime,
+          sort:     ['certLifetime'],
+          search:   ['certLifetime'],
+        },
+        AGE
+      ],
+      certs:        [],
+      pagingParams: {
+        pluralLabel:   this.t('secret.certificate.certificates'),
+        singularLabel: this.t('secret.certificate.certificate')
+      }
+    };
+  },
+
+  computed: {
+    expiredData(): any {
+      let expiring = 0;
+      let expired = 0;
+
+      for (let i = 0; i < this.certs.length; i++) {
+        const cert = this.certs[i];
+
+        if (cert.certState === STATES_ENUM.EXPIRING) {
+          expiring++;
+        }
+        if (cert.certState === STATES_ENUM.EXPIRED) {
+          expired++;
+        }
+      }
+
+      return {
+        expiring: expiring ? this.t('secret.certificate.warnings.expiring', { count: expiring }) : '',
+        expired:  expired ? this.t('secret.certificate.warnings.expired', { count: expired }) : '',
+      };
+    }
+  },
+
+  beforeDestroy() {
+    // We're fetching secrets with a filter, clear it so as to not clash with other contexts
+    this.$store.dispatch('cluster/forgetType', SECRET);
+  },
+
+});
+</script>
+
+<template>
+  <div>
+    <Banner
+      v-if="expiredData.expiring"
+      data-testid="cert-expiring-banner"
+      color="warning"
+      :label="expiredData.expiring"
+    />
+    <Banner
+      v-if="expiredData.expired"
+      color="error"
+      :label="expiredData.expired"
+    />
+    <ResourceTable
+      :loading="$fetchState.pending"
+      :schema="schema"
+      :headers="headers"
+      :rows="certs"
+      :paging-label="'secret.certificate.paging'"
+      :paging-params="pagingParams"
+      :ignore-filter="true"
+    >
+      <template #col:certState="{row}">
+        <td>
+          <BadgeState
+            :color="row.certStateBackground"
+            :label="row.certStateDisplay"
+          />
+        </td>
+      </template>
+    </ResourceTable>
+  </div>
+</template>

package/components/ClusterBadge.vue

@@ -6,11 +6,13 @@ export default {
       required: true,
     },
   },
-
   computed: {
     hasBadge() {
-      return !!this.cluster?.badge;
-    }
+      return !!this.cluster?.badge?.text;
+    },
+    showBorders() {
+      return this.cluster?.badge?.color === 'transparent';
+    },
   }
 };
 </script>
@@ -20,6 +22,7 @@ export default {
     v-if="hasBadge"
     :style="{ backgroundColor: cluster.badge.color, color: cluster.badge.textColor }"
     class="cluster-badge"
+    :class="{'cluster-badge-border': showBorders}"
   >
     {{ cluster.badge.text }}
   </div>
@@ -34,5 +37,11 @@ export default {
     max-width: 250px;
     text-overflow: ellipsis;
     overflow: hidden;
+
+     &-border {
+      border: 1px solid var(--border);
+      border-radius: 5px;
+      color: var(--body-text) !important; // !important is needed to override the color set by the badge when there's a transparent background.
+    }
   }
 </style>

package/components/ClusterIconMenu.vue

@@ -7,20 +7,28 @@ export default {
       type:     Object,
       required: true,
     },
+    routeCombo: {
+      type:    Boolean,
+      default: false
+    },
   },
   computed: {
     isEnabled() {
       return !!this.cluster?.ready;
     },
     showLocalIcon() {
+      if (this.cluster.isLocal && this.cluster.removePreviewColor) {
+        return true;
+      }
+
       return this.cluster.isLocal && !this.cluster.isHarvester && !this.cluster.badge?.iconText;
     },
-    badgeLogoBorderBottom() {
-      const color = this.cluster.badge?.color;
 
-      return color ? `4px solid ${ color }` : '';
-    }
+    customColor() {
+      return !this.cluster.removePreviewColor && this.cluster.badge?.iconText ? this.cluster.badge?.color : '';
+    },
   },
+
   methods: {
     smallIdentifier(input) {
       if (this.cluster.badge?.iconText) {
@@ -45,13 +53,17 @@ export default {
     <div
       class="cluster-badge-logo"
       :class="{ 'disabled': !isEnabled }"
-      :style="{ borderBottom: badgeLogoBorderBottom }"
     >
       <span
+        v-if="!showLocalIcon"
         class="cluster-badge-logo-text"
       >
         {{ smallIdentifier(cluster.label) }}
       </span>
+      <span
+        class="custom-color-decoration"
+        :style="{'background': customColor}"
+      />
       <svg
         v-if="showLocalIcon"
         class="cluster-local-logo"
@@ -92,30 +104,47 @@ export default {
       </svg>
     </div>
     <i
-      v-if="cluster.pinned"
+      v-if="!routeCombo && cluster.pinned"
       class="icon icon-pin cluster-pin-icon"
     />
+    <i
+      v-else-if="routeCombo"
+      class="icon icon-keyboard_tab key-combo-icon"
+    />
   </div>
 </template>
 
 <style lang="scss" scoped>
+  .rancher-icon-fill {
+    fill: var(--primary);
+  }
 
   .cluster-icon-menu {
     position: relative;
     align-items: center;
     display: flex;
-    height: 28px;
+    height: 32px;
     justify-content: center;
     width: 42px;
   }
   .cluster-pin-icon {
     position: absolute;
     top: -6px;
-    right: -4px;
-    font-size: 12px;
+    right: -7px;
+    font-size: 14px;
     transform: scaleX(-1);
     color: var(--body-text);
   }
+  .key-combo-icon {
+    position: absolute;
+    top: -7px;
+    right: -8px;
+    font-size: 14px;
+    color: var(--body-text);
+    background-color: #dddee6;
+    padding: 2px;
+    border-radius: 2px;
+  }
 
   .cluster-local-logo {
     width: 20px;
@@ -123,21 +152,35 @@ export default {
 
   .cluster-badge-logo {
     width: 42px;
-    height: 28px;
+    height: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--default-active-text);
     font-weight: bold;
     background: var(--nav-icon-badge-bg);
-    border: 1px solid var(--default-border);
+    border: 1px solid var(--border);
     border-radius: 5px;
     font-size: 12px;
     text-transform: uppercase;
 
+    .custom-color-decoration {
+      height: 4px;
+      width: 100%;
+      margin: 0 auto;
+      position: absolute;
+      bottom: 0px;
+      border-radius: 0px 0px 5px 5px;
+    }
+
     &.disabled {
-      filter: grayscale(1);
       color: var(--muted);
     }
   }
 </style>
+
+<style lang="scss">
+  .theme-dark .key-combo-icon  {
+    color: var(--body-bg);
+  }
+</style>

package/components/ClusterProviderIcon.vue

@@ -14,7 +14,10 @@ export default {
   computed: {
     useForIcon() {
       return !!this.cluster?.badge?.iconText;
-    }
+    },
+    showBorders() {
+      return this.cluster?.badge?.color === 'transparent';
+    },
   }
 };
 </script>
@@ -28,6 +31,7 @@ export default {
     <div
       v-if="useForIcon"
       class="cluster-badge-logo"
+      :class="{ 'cluster-icon-border': showBorders}"
       :style="{ backgroundColor: cluster.badge.color, color: cluster.badge.textColor }"
     >
       {{ cluster.badge.iconText }}
@@ -69,7 +73,13 @@ export default {
     display: flex;
     height: 32px;
     justify-content: center;
-    width: 32px;
+    width: 42px;
+
+    &-border {
+      border: 1px solid var(--border);
+      border-radius: 5px;
+      color: var(--body-text) !important; // !important is needed to override the color set by the badge when there's a transparent background.
+    }
   }
 
   .cluster-icon-small {
@@ -96,8 +106,9 @@ export default {
     width: 25px;
   }
   .cluster-badge-logo {
-    width: 32px;
+    min-width: 42px;
     height: 32px;
+    padding: 0px 5px;
     display: flex;
     align-items: center;
     justify-content: center;