@rancher/shell 3.0.8-rc.1 → 3.0.8-rc.12

package/assets/styles/themes/_suse.scss

@@ -1,27 +1,119 @@
 .suse {
-  $primary: hsl(225, 100%, 57%);
-  $info:  mix($primary, $secondary, 50%);
-  $selected: rgba($primary, .5);
-
-  --primary                    : #{$primary};
-  --primary-text               : #fff;
-  --primary-hover-bg           : #{darken($primary, 10%)};
-  --primary-hover-text         : #{saturate($lightest, 20%)};
-  --primary-active-bg          : #{darken($primary, 25%)};
-  --primary-active-text        : #{contrast-color(darken($primary, 25%))};
-  --primary-border             : #{$primary};
-  --primary-banner-bg          : #{rgba($primary, 0.15)};
-  --primary-light-bg           : #{rgba($primary, 0.05)};
-  --primary-keyboard-focus     : hsl(from var(--primary) h s calc(l - 10));
-
-  --info                    : #{$info};
-  --info-text               : #{contrast-color($info)};
-  --info-hover-bg           : #{darken($info, 10%)};
-  --info-hover-text         : #{saturate($lightest, 20%)};
-  --info-active-bg          : #{darken($info, 25%)};
-  --info-active-text        : #{contrast-color(darken($info, 25%))};
-  --info-border             : #{$info};
-  --info-banner-bg          : #{rgba($info, 0.15)};
-  --info-light-bg           : #{rgba($info, 0.05)};
+  $green-jungle : #30BA78;
+  $light-green-jungle: #4DD192;
+  $lighter-green-jungle: #72EEB3;
 
+  $jungle-120: #008657;
+
+  --title-font-family : 'SUSE', 'Lato', sans-serif;
+  
+  &.theme-light {
+    --primary: #{$jungle-120};
+    --primary-text: #FFFFFF;
+    --primary-hover: #006B46;
+    --primary-hover-bg: #006B46;
+    --primary-border: #{$green-120};
+
+    --link: #4871C7;
+    --active-nav: #{$green-140};
+
+    --non-primary-text: #{$green-120};
+    --non-primary-hover: #{$green-20};
+
+    --secondary: var(--body-bg);
+    --secondary-border: var(--primary);
+    --on-secondary: var(--non-primary-text);
+    --secondary-hover: var(--non-primary-hover);
+
+    --tertiary: transparent;
+    --on-tertiary: var(--non-primary-text);
+    --on-tertiary-hover: var(--non-primary-text);
+    --on-tertiary-header: var(--non-primary-text);
+    --on-tertiary-header-hover: var(--non-primary-text);
+    --tertiary-hover: var(--non-primary-hover);
+    --tertiary-hover-app-bar: var(--non-primary-text);
+
+    $super-light-green: #F4F6F5;
+    --active: #{$green-140};
+    --on-active: #{$grey-0};
+    --active-hover: #{lighten($green-140, 5%)};
+    --category-active: #{$super-light-green};
+    --category-active-hover: #e8eeeb;
+
+    --checkbox-tick              : var(--on-active);
+    --checkbox-border            : var(--body-border);
+    --checkbox-tick-disabled     : #{darken($disabled, 40%)};
+    --checkbox-disabled-bg       : #{$disabled};
+    --checkbox-ticked-bg         : var(--active);
+  }
+
+  &.theme-dark {
+    --link: #9BBFFD;
+    --active-nav: #{$green-40};
+
+    --primary: #{$light-green-jungle};
+    --primary-text: #{$grey-90};
+    --primary-hover: #{$lighter-green-jungle};
+    --primary-hover-bg: #{$lighter-green-jungle};
+    --primary-border: #{$lighter-green-jungle};
+
+    --non-primary-text: #{$lighter-green-jungle};
+    --non-primary-hover: #1E372B;
+
+    --secondary: var(--body-bg);
+    --secondary-border: var(--non-primary-text);
+    --on-secondary: var(--non-primary-text);
+    --secondary-hover: var(--non-primary-hover);
+
+    --tertiary: transparent;
+    --on-tertiary: var(--non-primary-text);
+    --on-tertiary-hover: var(--non-primary-text);
+    --on-tertiary-header: var(--non-primary-text);
+    --on-tertiary-header-hover: var(--non-primary-text);
+    --tertiary-hover: var(--non-primary-hover);
+    --tertiary-hover-app-bar: var(--non-primary-text);
+
+    $category-active:#303633;
+    --active: #{$green-40};
+    --on-active: #{$grey-90};
+    --active-hover: #{$green-60};
+    --category-active: #{$category-active};
+    --category-active-hover: #{lighten($category-active, 10%)};
+
+    --toggle-off-bg: #{$grey-70};
+    --sortable-table-selected-bg: #3f4350;
+  }
+
+  // SUSE Theme uses a smaller banner graphic
+  --banner-graphic-height: 160px;
+
+  // SUSE Theme positions from right, so ship stays visible as browser width shrinks
+  .suse-banner-graphic {
+    > img {
+      object-position: right;
+    }
+  }
+
+  // SUSE Theme aligns graphic to left so that the container ship stays visible
+  .suse-login-banner-graphic {
+    object-position: left;
+  }
+
+  // Styling for logo image on the login screen
+  .suse-logo-login {
+    $suse-logo-width: 280px;
+
+    width: $suse-logo-width;
+    max-width: $suse-logo-width;
+    align-self: center;
+    margin-bottom: 30px;
+  }  
+}
+
+// Ensure that with a small window size, the banner centers, so that the text does not overlay
+// directly on the heavier part of the graphic
+@media (max-width: 860px) {
+  .suse .suse-banner-graphic > img {
+    object-position: center;
+  }  
 }

package/assets/translations/en-us.yaml

@@ -125,6 +125,7 @@ generic:
   enable: Enable
   disable: Disable
   experimental: Experimental
+  primeOnly: Prime Only
 
   deprecated: Deprecated
   upgradeable: Upgradeable
@@ -158,6 +159,8 @@ generic:
     genericRow: row {index}
   showLess: Show less
   showMore: Show more
+  externalIps: External IPs
+  internalIps: Internal IPs
   opensInNewTab: Opens in a new tab
 
 tabs:
@@ -233,7 +236,7 @@ nav:
     workload: Workloads
     monitoring: Monitoring
     advanced: Advanced
-    drivers: Drivers
+    providers: Providers
     RKE1Configuration: RKE1 Configuration
     admission: Admission
     apps: Apps
@@ -370,9 +373,7 @@ layouts:
   unauthenticated: unauthenticated layout
   logout: logout layout
   verify: verify layout
-
-windowmanager:
-  closeTab: Close tab {tabId}
+  
 about:
   title: About
   versions:
@@ -1125,6 +1126,7 @@ catalog:
       home: Homepage
       repository: Repository Page
       maintainers: Maintainers
+      maintainerContactTooltip: Contact {maintainer}
       related: Related
       chartUrls: Chart
       keywords: Keywords
@@ -1578,6 +1580,7 @@ cluster:
       nodeLabel:
         title: Node Labels
         label: Add Label
+      ipv6: "It looks like this cluster uses IPv6 networking: <code>Node Private IP</code> should be set to the cluster's IPV6 address."
     registrationCommand:
       label: Registration Command
       linuxDetail: Run this command on each of the existing Linux machines you want to register.
@@ -2079,6 +2082,21 @@ cluster:
       httpEndpoint: Allow access to EC2 metadata
       httpTokens: Use tokens for metadata
       tagTitle: EC2 Tags
+      enableIpv6:
+        label: Enable IPv6
+        description: "Checking this automatically sets your <a aria-label='scroll to the networking section in cluster configuration' href=\"#networking\">Network Stack Preference Order</a> to <b>DUAL</b> stack, enabling both IPv4 and IPv6. For an IPv6-only cluster, you can manually change that setting to <b>IPv6</b>."
+      ipv6AddressCount:
+        label: IPv6 Address Count
+        tooltip: Specifies the number of IPv6 addresses to assign to the network interface
+        error: IPv6 Address Count must be greater than 0 when using an IPv6 vpc or subnet.
+      enablePrimaryIpv6:
+        label: Enable Static Primary Ipv6
+        description: This allows IPv6 communication for components and workloads.
+      ipv6AddressOnly:
+        label: Use IPv6 Only
+      httpProtocolIpv6: 
+        label: Use IPv6 for instance metadata service
+      ipv6ValidationWarning: When one pool uses an IPv6 or dual-stack subnet/vpc, all pools must use an IPv6 or dual-stack subnet/vpc.
     pnap:
       serverLocation:
         label: Location
@@ -2251,6 +2269,18 @@ cluster:
     rkeTemplate: RKE Template
 
   machinePool:
+    automation:
+      label: Automation
+    autoscaler:
+      heading: Autoscaler
+      enable: Enable autoscaler and override "Machine Count" value
+      machineCountValueOverride: Controlled by autoscaler
+      baseUnit: Machines
+      min: Min
+      max: Max
+      validation:
+        isAutoscalerMaxGreaterThanMin: The max machines count must be equal or exceed the min machine count.
+      etcdControlPlaneWarning: We don't recommend using Autoscaler with machine pools that have the etcd or Control Plane roles. You can modify the yaml if you want to override the current value.
     name:
       label: Pool Name
       placeholder: A random one will be generated by default
@@ -2315,6 +2345,7 @@ cluster:
       placeholder: Search for a member to provide cluster access
       searchPlaceholder: Start typing to search
       noResults: No results found
+      minCharacters: Type at least {count} characters to search
   privateRegistry:
     header: Registry for Rancher System Container Images
     label: Enable cluster scoped container registry for Rancher system container images
@@ -2390,8 +2421,8 @@ cluster:
   providerGroup:
     create-custom1: Use existing nodes and create a cluster using RKE
     create-custom2: Use existing nodes and create a cluster using RKE2/K3s
-    create-kontainer: Create a cluster in a hosted Kubernetes provider
-    register-kontainer: Register an existing cluster in a hosted Kubernetes provider
+    create-hosted: Create a cluster in a hosted Kubernetes provider
+    register-hosted: Register an existing cluster in a hosted Kubernetes provider
     create-rke1: Provision new nodes and create a cluster using RKE
     create-rke2: Provision new nodes and create a cluster using RKE2/K3s
     create-template: Use a Catalog Template to create a cluster
@@ -2525,6 +2556,14 @@ cluster:
           label: Accept any certificate (insecure)
         endpointCA:
           label: Endpoint CA Cert
+    stackPreference:
+      label: Stack Preference
+      description: "Stack preference determines the networking stack used by the cluster. The selected value configures the address used for health and readiness probes of calico, etcd, kube-apiserver, kube-scheduler, kube-controller-manager, and kubelet. It also defines the server URL in the <code>authentication-token-webhook-config-file</code> for the Authorized Cluster Endpoint and the advertise-client-urls for etcd during snapshot restore. When set to <code>dual</code>, the cluster uses <code>localhost</code>; when set to <code>ipv6</code>, it uses <code>[::1]</code>; and when set to <code>ipv4</code>, it uses <code>127.0.0.1</code>."
+      options:
+        ipv4: IPv4
+        ipv6: IPv6
+        dual: Dual-Stack
+      errorNeedsIpv6: Stack preference must be set to dual-stack or ipv6 if using ipv6 networking in nodepools.
   k3s:
     systemService:
       coredns: 'CoreDNS'
@@ -2681,6 +2720,11 @@ cruResource:
   previewYaml: Edit as YAML
   showYaml: View as YAML
 
+providers:
+  hosted: 
+    title: Hosted Providers
+    prime: Prime only
+    warning: Disabling providers will make any clusters that use them uneditable
 drivers:
   kontainer:
     title: Cluster Drivers
@@ -2764,6 +2808,10 @@ drainNode:
     custom: "Give up after:"
 
 dynamicContent:
+  action:
+    close: Hide and Mark Announcement as read
+    openPrimary: Open announcement's primary action
+    openSecondary: Open announcement's secondary action
   newRelease:
     title: A new Rancher release is available!
     message: Rancher {version} has been released!
@@ -3621,6 +3669,7 @@ internalExternalIP:
   none: None
   copyInternalIp: Copy internal IP address to clipboard
   copyExternalIp: Copy external IP address to clipboard
+  clickToShowMoreIps: "Click to show {count} more {count, plural, one {IP} other {IPs}}"
 
 istio:
   links:
@@ -4627,6 +4676,7 @@ namespaceFilter:
   button:
     clear: Remove applied namespace filters
     clearFilter: Clear namespace options filter
+  removeNamespace: 'Remove {name} from filter'
 
 namespaceList:
   selectLabel: Namespace
@@ -5201,6 +5251,7 @@ inactivity:
 # Rancher Extensions
 plugins:
   altIcon: Icon for {extension} extension card
+  incompatiblePrimeOnly: "The latest version of this extension ({ version }) needs Rancher Prime in order to be installed."
   incompatibleRancherVersion: "The latest version of this extension ({ version }) is not compatible with the current Rancher version ({ required })."
   incompatibleKubeVersion: "The latest version of this extension ({ version }) is not compatible with the current Kube version ({ required })."
   incompatibleUiExtensionsApiVersionMissing: 'The latest version of this extension ({ version }) is missing the mandatory annotation catalog.cattle.io/ui-extensions-version from Rancher 2.10 and onwards.'
@@ -5210,6 +5261,8 @@ plugins:
   closePluginPanel: Close plugin description panel
   viewVersionDetails: View extension {name} version {version} details/Readme
   labels:
+    isDeveloper: Developer Load
+    primeOnly: Prime only
     builtin: Built-In
     experimental: Experimental
     third-party: Third-Party
@@ -5226,10 +5279,13 @@ plugins:
     third-party: This Extension is provided by a Third-Party
     built-in: This Extension is built-in
     image: This Extension Image has been loaded manually
+  tooltips:
+    installing: Installing...
   error:
     title: Error loading extension
     message: Could not load extension code
     generic: Extension error
+    primeOnly: Unable to load Rancher Prime Extension in Rancher Community
     apiAnnotationMissing: 'Unable to load Extension. The version installed is not compatible with the current Extensions API Version (Extension is missing the annotation catalog.cattle.io/ui-extensions-version which implies incompatibility with Rancher 2.10 and onwards)'
     api: Unable to load Extension. The version installed is not compatible with the current Extensions API version
     host: Unable to load Extension. The version installed is not compatible with this application host
@@ -5254,6 +5310,7 @@ plugins:
     detail: Detail
     versions: Versions
     versionError: Could not load version information
+    requiresRancherPrime: "Requires Rancher Prime"
     requiresRancherVersion: "Requires Rancher {required}"
     requiresKubeVersion: "Requires Kube version {required}"
     requiresExtensionApiVersionMissing: 'Missing the annotation catalog.cattle.io/ui-extensions-version which implies incompatibility with Rancher 2.10 and onwards'
@@ -5273,7 +5330,7 @@ plugins:
   warnNoAuth: This version of the extension will be loaded before authentication and will have access to the login process.
   manageCatalog:
     label: Manage Extension Catalogs
-    title: Extension
+    title: Extensions
     subtitle: Catalogs
     imageLoad:
       load: Import Extension Catalog
@@ -6589,6 +6646,7 @@ storageClass:
 
 tableHeaders:
   assuredConcurrencyShares: Assured Concurrency Shares
+  autoscaler: Autoscaler
   accessKey: Access Key
   addressType: Address Type
   accessModes: Access Modes
@@ -7078,7 +7136,15 @@ wizard:
   install: Install
   upgrade: Upgrade
   downgrade: Downgrade
+
+sideWindow:
+  secondary:
+    resize: Resize secondary window
+
 wm:
+  resize: Resize Window - use arrow keys {arrow1} and {arrow2} to resize with keyboard
+  tabIcon: Window tab icon
+  closeTab: Close tab - {tabId}
   connection:
     connected: Connected
     connecting: Connecting&hellip;
@@ -7115,9 +7181,6 @@ wm:
     timestamps: Show Timestamps
     wrap: Wrap Lines
   containerShell:
-    resizeShellWindow: Resize Shell window - use arrow keys {arrow1} and {arrow2} to resize with keyboard
-    tabIcon: Shell tab icon
-    closeShellTab: Close Shell tab - {tab}
     escapeText: Press Shift+Escape to blur from terminal
     clear: Clear
     containerName: "Container: {label}"
@@ -9148,3 +9211,24 @@ component:
         marchToMayHourly: "Every hour, only in March, April, and May"
         every4Hours9to17: "At 0 minutes past the hour, every 4 hours, between 09:00 AM and 05:00 PM"
 
+autoscaler:
+  card:
+    title: Autoscaler
+    pause: Pause
+    resume: Resume
+    loadingError: There was a problem loading details
+    loadingAlt: Details Loading
+    details:
+      status: Status
+      health: Health
+      scaleDown: Scale Down
+      scaleUp: Scale Up
+      nodes: Nodes
+      ready: Ready
+      notStarted: Not Started
+      inTotal: In Total
+      provisioning: Provisioning
+      paused: Paused
+      unavailable: Unavailable
+  tab:
+    title: Autoscaler

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;