@rancher/shell 3.0.7 → 3.0.8-rc.10

package/components/AutoscalerCard.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { computed, ComputedRef } from 'vue';
+import { useFetch } from '@shell/components/Resource/Detail/FetchLoader/composables';
+import { useInterval } from '@shell/composables/useInterval';
+import { useI18n } from '@shell/composables/useI18n';
+import { useStore } from 'vuex';
+
+export interface Props {
+  value: any;
+}
+
+export interface Detail {
+  label: string;
+  value?: string | { component: any; props: any };
+}
+
+const props = defineProps<Props>();
+
+const store = useStore();
+const i18n = useI18n(store);
+
+const fetch = useFetch(async() => {
+  return await props.value.loadAutoscalerDetails();
+});
+
+// The backend only updates the configmap every 10 seconds and we don't cache the configmap in the stores
+useInterval(() => fetch.value.refresh(), 10000);
+
+const details: ComputedRef<Detail[]> = computed(() => fetch.value.data);
+</script>
+
+<template>
+  <div class="autoscaler-card">
+    <div
+      v-if="fetch.loading && !fetch.refreshing"
+      class="loading"
+    >
+      <i
+        class="icon icon-lg icon-spinner icon-spin"
+        :alt="i18n.t('autoscaler.card.loadingAlt')"
+      />
+    </div>
+
+    <div
+      v-else-if="fetch.data"
+      class="details"
+    >
+      <div
+        v-for="(detail) in details"
+        :key="detail.label"
+        class="detail"
+      >
+        <label
+          v-if="detail.value"
+          class="label text-deemphasized"
+        >
+          {{ detail.label }}
+        </label>
+        <h5 v-else-if="detail.label">
+          {{ detail.label }}
+        </h5>
+        <div
+          v-if="detail.value"
+          class="value"
+        >
+          <component
+            :is="detail.value.component"
+            v-if="typeof detail.value === 'object'"
+            v-bind="detail.value.props"
+          />
+          <span v-else>{{ detail.value }}</span>
+        </div>
+      </div>
+    </div>
+    <div
+      v-else
+      class="text-warning"
+    >
+      {{ i18n.t('autoscaler.card.loadingError') }}
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.autoscaler-card {
+width: 240px;
+
+.loading {
+    display: flex;
+    justify-content: center;
+}
+.detail {
+    display: flex;
+    white-space: nowrap;
+    width: 244px;
+
+    &:not(:last-of-type) {
+    margin-bottom: 8px;
+    }
+
+    label, .value {
+    width: 50%;
+    }
+}
+
+h5 {
+    margin-bottom: 0;
+    margin-top: 12px;
+    font-size: 14px;
+    font-weight: 600;
+}
+}
+</style>

package/components/AutoscalerTab.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { useFetch } from '@shell/components/Resource/Detail/FetchLoader/composables';
+import Tab from '@shell/components/Tabbed/Tab.vue';
+import { useI18n } from '@shell/composables/useI18n';
+import { computed, onMounted, ref } from 'vue';
+import { useStore } from 'vuex';
+import SortableTable from '@shell/components/SortableTable/index.vue';
+import { useInterval } from '@shell/composables/useInterval';
+
+export interface Props {
+  value: any;
+}
+
+export interface Detail {
+  label: string;
+  values: (string | { component: any; props: any })[];
+}
+
+const props = withDefaults(defineProps<Props>(), { value: true });
+
+const store = useStore();
+const i18n = useI18n(store);
+
+const table = ref<any>(null);
+
+const eventHeaders = [
+  {
+    name:  'type',
+    label: i18n.t('tableHeaders.type'),
+    value: '_type',
+    sort:  '_type',
+  },
+  {
+    name:  'reason',
+    label: i18n.t('tableHeaders.reason'),
+    value: 'reason',
+    sort:  'reason',
+  },
+  {
+    name:          'date',
+    label:         i18n.t('tableHeaders.updated'),
+    value:         'firstTimestamp',
+    sort:          'date:desc',
+    formatter:     'LiveDate',
+    formatterOpts: { addSuffix: true },
+    width:         125
+  },
+  {
+    name:  'message',
+    label: i18n.t('tableHeaders.message'),
+    value: 'message',
+    sort:  'message',
+  },
+];
+
+const fetch = useFetch(async() => {
+  return await props.value.loadAutoscalerEvents();
+});
+
+// From the FAQ there appears to be a 20 second target between detecting scaling needs to happen to scaling beginning
+// so I don't see a reason to poll quicker than 20 seconds.
+// https://github.com/kubernetes/autoscaler/blob/9befb31fd94d73ae0b888bd9536ae085cd9304e1/cluster-autoscaler/FAQ.md#what-are-the-service-level-objectives-for-cluster-autoscaler
+useInterval(() => {
+  fetch.value.refresh();
+}, 20000);
+
+const rows = computed(() => {
+  return fetch.value.data || [];
+});
+
+onMounted(() => {
+  table.value?.changeSort('date', true);
+});
+
+</script>
+
+<template>
+  <Tab
+    name="autoscaler"
+    :label="i18n.t('autoscaler.tab.title')"
+  >
+    <SortableTable
+      ref="table"
+      :headers="eventHeaders"
+      :namespaced="false"
+      :row-actions="false"
+      default-sort-by="date"
+      :rows="rows"
+    />
+  </Tab>
+</template>
+
+<style lang="scss" scoped>
+</style>

package/components/BackLink.vue

@@ -34,8 +34,16 @@ export default {
     display: flex;
     font-size: 16px;
     margin: 10px 0 20px 0;
+    padding: 0 4px 2px 0;
     outline: 0;
     width: fit-content;
+    border-bottom: 2px solid transparent;
+
+    &:hover {
+      text-decoration: none;
+      border-bottom: 2px solid;
+      border-bottom-color: inherit;
+    }
 
     &:focus-visible {
       @include focus-outline;

package/components/BannerGraphic.vue

@@ -1,6 +1,7 @@
 <script>
 import Closeable from '@shell/mixins/closeable';
 import BrandImage from '@shell/components/BrandImage';
+import { getBrandMeta } from '@shell/utils/brand';
 
 export default {
   components: { BrandImage },
@@ -15,22 +16,29 @@ export default {
       type:    String,
       default: null,
     },
-
-    small: {
-      type:    Boolean,
-      default: false
-    }
   },
+
+  data() {
+    const brandMeta = getBrandMeta(this.$store.getters['management/brand']);
+    const banner = brandMeta?.banner || {};
+    const align = banner.textAlign || 'center';
+    const bannerClass = banner.bannerClass || '';
+
+    return { alignClass: `banner-text-${ align }`, bannerClass };
+  }
 };
 </script>
 
 <template>
   <div
     v-if="shown"
-    class="banner-graphic"
-    :class="{'small': small}"
+    class="banner-graphic-area"
+    :class="{[alignClass]: true}"
   >
-    <div class="graphic">
+    <div
+      :class="bannerClass"
+      class="graphic banner-graphic-height"
+    >
       <BrandImage
         class="banner"
         data-testid="banner-brand__img"
@@ -55,17 +63,15 @@ export default {
   </div>
 </template>
 
-<style lang="scss">
-  $banner-height: 240px;
-  $banner-height-small: 200px;
+<style lang="scss" scoped>
+  $banner-height: 200px;
 
-  .banner-graphic {
+  .banner-graphic-area {
     position: relative;
 
     .graphic {
       display: flex;
       flex-direction: column;
-      height: $banner-height;
       overflow: hidden;
       > img.banner {
         flex: 1;
@@ -74,22 +80,31 @@ export default {
     }
     .title {
       display: flex;
-      justify-content: center;
       align-items: center;
       position: absolute;
       text-align: center;
       top: 0;
       height: 100%;
       width: 100%;
-      margin-top: -20px;
     }
-    &.small {
-      .graphic {
-        height: $banner-height-small;
-        img.banner {
-          margin-top: math.div(($banner-height-small - $banner-height), 2);
-        }
+
+    &.banner-text-center {
+      .title {
+        justify-content: center;
+        margin-top: -20px;
+      }
+    }
+
+    &.banner-text-left {
+      .title {
+        justify-content: left;
+        padding-left: 20px;
       }
     }
   }
+
+  // Use top-level style so that a theme style can easily override via its own style without having to worry about specificity of CSS styles
+  .banner-graphic-height {
+    height: var(--banner-graphic-height, $banner-height);
+  }
 </style>

package/components/BrandImage.vue

@@ -36,9 +36,9 @@ export default {
     };
   },
   computed: {
-    ...mapGetters({ theme: 'prefs/theme' }),
+    ...mapGetters({ theme: 'prefs/theme', brand: 'management/brand' }),
 
-    brand() {
+    brandBase() {
       const setting = this.managementSettings.filter((setting) => setting.id === SETTING.BRAND)[0] || {};
 
       return setting.value;
@@ -78,19 +78,30 @@ export default {
       }
     },
 
+    isDark() {
+      return this.theme === 'dark';
+    },
+
     pathToBrandedImage() {
       if (this.fileName === 'rancher-logo.svg' || this.supportCustomLogo) {
-        if (this.theme === 'dark' && this.uiLogoDark) {
+        if (this.isDark && this.uiLogoDark) {
           return this.uiLogoDark;
         }
 
         if (this.uiLogoLight) {
           return this.uiLogoLight;
         }
+
+        // csp, rgs, and federal map to SUSE, but have their own custom logos
+        if (this.brandBase !== this.brand) {
+          try {
+            return require(`~shell/assets/brand/${ this.brandBase }/${ this.isDark ? 'dark/' : '' }${ this.fileName }`);
+          } catch { }
+        }
       }
 
       if (this.fileName === 'banner.svg') {
-        if (this.theme === 'dark' && this.uiBannerDark) {
+        if (this.isDark && this.uiBannerDark) {
           return this.uiBannerDark;
         }
 
@@ -100,7 +111,7 @@ export default {
       }
 
       if (this.fileName === 'login-landscape.svg') {
-        if (this.theme === 'dark' && this.uiLoginBackgroundDark) {
+        if (this.isDark && this.uiLoginBackgroundDark) {
           return this.uiLoginBackgroundDark;
         }
 
@@ -112,7 +123,7 @@ export default {
       if (!this.brand) {
         return this.defaultPathToBrandedImage;
       } else {
-        if (this.theme === 'dark' || this.dark) {
+        if (this.isDark || this.dark) {
           try {
             return require(`~shell/assets/brand/${ this.brand }/dark/${ this.fileName }`);
           } catch {}

package/components/ClusterIconMenu.vue

@@ -119,7 +119,7 @@ export default {
 
 <style lang="scss" scoped>
   .rancher-icon-fill {
-    fill: var(--link, var(--primary));
+    fill: var(--on-tertiary, var(--primary));
   }
 
   .cluster-icon-menu {

package/components/ClusterProviderIcon.vue

@@ -79,7 +79,7 @@ export default {
 
 <style lang="scss" scoped>
   .rancher-icon-fill {
-    fill: var(--link, var(--primary));
+    fill: var(--on-tertiary, var(--primary));
   }
   .cluster-icon {
     align-items: center;

package/components/Cron/CronExpressionEditor.vue

@@ -268,7 +268,7 @@ const handleBlur = (field: CronField) => {
 </template>
 
 <style scoped lang="scss">
-$input-max-width: 110px;
+$input-max-width: 120px;
 
 .cron-row {
   display: flex;

package/components/Cron/CronExpressionEditorModal.vue

@@ -207,7 +207,7 @@ onBeforeUnmount(() => {
 
   .custom-cron-editor {
     margin: 64px auto;
-    max-width: 600px;
+    max-width: 660px;
   }
 
   .cron-info {

package/components/Drawer/Chrome.vue

@@ -1,13 +1,9 @@
-<script lang="ts">
+<script setup lang="ts">
 import { useI18n } from '@shell/composables/useI18n';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
-export interface Props {
-  ariaTarget: string;
-}
-</script>
+import { Props } from './types';
 
-<script setup lang="ts">
 const props = defineProps<Props>();
 const emit = defineEmits(['close']);
 

package/components/Drawer/ResourceDetailDrawer/ConfigTab.vue

@@ -1,17 +1,11 @@
-<script lang="ts">
+<script setup lang="ts">
 import { useI18n } from '@shell/composables/useI18n';
 import { _VIEW } from '@shell/config/query-params';
 import { useStore } from 'vuex';
 import Tab from '@shell/components/Tabbed/Tab.vue';
+import { ConfigProps } from '@shell/components/Drawer/ResourceDetailDrawer/types';
 
-export interface Props {
-  resource: any;
-  component: any;
-  resourceType: string;
-}
-</script>
-<script setup lang="ts">
-const props = defineProps<Props>();
+const props = defineProps<ConfigProps>();
 const store = useStore();
 const i18n = useI18n(store);
 </script>
@@ -31,6 +25,7 @@ const i18n = useI18n(store);
         :real-mode="_VIEW"
         :initial-value="props.resource"
         :use-tabbed-hash="false /* Have to disable hashing on child components or it modifies the url and closes the drawer */"
+        :default-tab="props.defaultTab"
         as="config"
       />
     </div>

package/components/Drawer/ResourceDetailDrawer/YamlTab.vue

@@ -1,18 +1,13 @@
-<script lang="ts">
+<script setup lang="ts">
 import { useI18n } from '@shell/composables/useI18n';
 import { _VIEW } from '@shell/config/query-params';
 import { useStore } from 'vuex';
 import Tab from '@shell/components/Tabbed/Tab.vue';
 import { useTemplateRef } from 'vue';
 import ResourceYaml from '@shell/components/ResourceYaml.vue';
+import { YamlProps } from '@shell/components/Drawer/ResourceDetailDrawer/types';
 
-export interface Props {
-  resource: any;
-  yaml: string;
-}
-</script>
-<script setup lang="ts">
-const props = defineProps<Props>();
+const props = defineProps<YamlProps>();
 const store = useStore();
 const i18n = useI18n(store);
 const yamlComponent: any = useTemplateRef('yaml');

package/components/Drawer/ResourceDetailDrawer/composables.ts

@@ -1,9 +1,8 @@
-import { Props as YamlTabProps } from '@shell/components/Drawer/ResourceDetailDrawer/YamlTab.vue';
-import { Props as ConfigTabProps } from '@shell/components/Drawer/ResourceDetailDrawer/ConfigTab.vue';
 import { useStore } from 'vuex';
 import { getYaml } from '@shell/components/Drawer/ResourceDetailDrawer/helpers';
+import { ConfigProps, YamlProps } from '@shell/components/Drawer/ResourceDetailDrawer/types';
 
-export async function useDefaultYamlTabProps(resource: any): Promise<YamlTabProps> {
+export async function useDefaultYamlTabProps(resource: any): Promise<YamlProps> {
   const yaml = await getYaml(resource);
 
   return {
@@ -12,7 +11,7 @@ export async function useDefaultYamlTabProps(resource: any): Promise<YamlTabProp
   };
 }
 
-export function useDefaultConfigTabProps(resource: any): ConfigTabProps | undefined {
+export function useDefaultConfigTabProps(resource: any): ConfigProps | undefined {
   const store = useStore();
 
   // You don't want to show the Config tab if there isn't a an edit page to show and you don't want to show it if there isn't

package/components/Drawer/ResourceDetailDrawer/index.vue

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script setup lang="ts">
 import Drawer from '@shell/components/Drawer/Chrome.vue';
 import { useI18n } from '@shell/composables/useI18n';
 import { useStore } from 'vuex';
@@ -9,17 +9,11 @@ import ConfigTab from '@shell/components/Drawer/ResourceDetailDrawer/ConfigTab.v
 import { computed, ref } from 'vue';
 import RcButton from '@components/RcButton/RcButton.vue';
 import StateDot from '@shell/components/StateDot/index.vue';
+import { ResourceDetailDrawerProps } from '@shell/components/Drawer/ResourceDetailDrawer/types';
 
-export interface Props {
-  resource: any;
-
-  onClose?: () => void;
-}
-</script>
-<script setup lang="ts">
 const editBttnDataTestId = 'save-configuration-bttn';
 const componentTestid = 'configuration-drawer-tabbed';
-const props = defineProps<Props>();
+const props = defineProps<ResourceDetailDrawerProps>();
 const emit = defineEmits(['close']);
 const store = useStore();
 const i18n = useI18n(store);
@@ -85,6 +79,7 @@ const canEdit = computed(() => {
         <ConfigTab
           v-if="configTabProps"
           v-bind="configTabProps"
+          :default-tab="props.defaultTab"
         />
         <YamlTab
           v-if="yamlTabProps"

package/components/Drawer/ResourceDetailDrawer/types.ts

@@ -0,0 +1,17 @@
+export interface YamlProps {
+    resource: any;
+    yaml: string;
+}
+
+export interface ConfigProps {
+    resource: any;
+    component: any;
+    resourceType: string;
+    defaultTab?: string;
+}
+
+export interface ResourceDetailDrawerProps {
+    resource: any;
+    defaultTab?: string;
+    onClose?: () => void;
+}

package/components/Drawer/types.ts

@@ -0,0 +1,3 @@
+export interface Props {
+    ariaTarget: string;
+}

package/components/DynamicContent/DynamicContentBanner.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+/**
+ * Component top render an announcement as a banner
+ */
+import DynamicContentIcon from './DynamicContentIcon.vue';
+import DynamicContentCloseButton from './DynamicContentCloseButton.vue';
+import Markdown from '@shell/components/Markdown.vue';
+import { useDynamicContent, DynamicInputProps } from './content';
+
+const props = defineProps<DynamicInputProps>();
+const {
+  dynamicContent,
+  invokeAction,
+  primaryButtonStyle,
+} = useDynamicContent(props, 'banner');
+
+</script>
+<template>
+  <div
+    v-if="dynamicContent"
+    class="home-page-dynamic-content"
+  >
+    <template v-if="dynamicContent.data">
+      <DynamicContentIcon
+        v-if="dynamicContent.data.icon"
+        :icon="dynamicContent.data.icon"
+        :class="{'mr-10': dynamicContent.data.icon }"
+      />
+    </template>
+    <div class="dc-content">
+      <div class="dc-title">
+        {{ dynamicContent.title }}
+      </div>
+      <div class="dc-message">
+        <Markdown
+          v-if="dynamicContent.message"
+          v-model:value="dynamicContent.message"
+        />
+      </div>
+    </div>
+    <div class="dc-actions">
+      <button
+        v-if="dynamicContent.primaryAction"
+        role="button"
+        class="btn btn-sm"
+        :aria-label="t('dynamicContent.action.openPrimary')"
+        :class="primaryButtonStyle"
+        @click.stop.prevent="invokeAction(dynamicContent.primaryAction)"
+      >
+        {{ dynamicContent.primaryAction.label }}
+      </button>
+      <button
+        v-if="dynamicContent.secondaryAction"
+        role="button"
+        class="btn btn-sm role-secondary"
+        :aria-label="t('dynamicContent.action.openSecondary')"
+        @click.stop.prevent="invokeAction(dynamicContent.secondaryAction)"
+      >
+        {{ dynamicContent.secondaryAction.label }}
+      </button>
+      <DynamicContentCloseButton
+        :id="dynamicContent.id"
+        class="dc-close-button"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .home-page-dynamic-content {
+    background-color: var(--box-bg);
+    border-top: 1px solid var(--border);
+    border-bottom: 1px solid var(--border);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 10px;
+
+    .dc-content {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+    }
+
+    .dc-title {
+      font-weight: bold;
+      font-size: 1.1em;
+      margin-bottom: 4px;
+    }
+
+    .dc-message {
+      font-size: 1em;
+    }
+
+    .dc-actions {
+      display: flex;
+      align-items: center;
+      margin: 0 8px;
+      gap: 10px;
+    }
+  }
+</style>