@rancher/shell 3.0.5-rc.3 → 3.0.5-rc.5

package/models/fleet.cattle.io.helmop.js

@@ -0,0 +1,228 @@
+import { parse } from '@shell/utils/url';
+import { insertAt } from '@shell/utils/array';
+import { set } from '@shell/utils/object';
+import { SOURCE_TYPE } from '@shell/config/product/fleet';
+import FleetUtils from '@shell/utils/fleet';
+import { FLEET } from '@shell/config/types';
+import { FLEET as FLEET_ANNOTATIONS } from '@shell/config/labels-annotations';
+import FleetApplication from '@shell/models/fleet-application';
+
+export default class HelmOp extends FleetApplication {
+  applyDefaults() {
+    const spec = this.spec || {};
+    const meta = this.metadata || {};
+
+    meta.namespace = this.$rootGetters['workspace'];
+
+    spec.helm = spec.helm || {};
+
+    spec['correctDrift'] = { enabled: false };
+
+    set(this, 'spec', spec);
+    set(this, 'metadata', meta);
+  }
+
+  get _availableActions() {
+    const out = super._availableActions;
+
+    insertAt(out, 0, {
+      action:   'pause',
+      label:    this.t('fleet.helmOp.actions.pause.label'),
+      icon:     'icon icon-pause',
+      bulkable: true,
+      enabled:  !!this.links.update && !this.spec?.paused
+    });
+
+    insertAt(out, 1, {
+      action:   'unpause',
+      label:    this.t('fleet.helmOp.actions.unpause.label'),
+      icon:     'icon icon-play',
+      bulkable: true,
+      enabled:  !!this.links.update && this.spec?.paused === true
+    });
+
+    insertAt(out, 2, {
+      action:   'enablePollingAction',
+      label:    this.t('fleet.helmOp.actions.enablePolling.label'),
+      icon:     'icon icon-endpoints_connected',
+      bulkable: true,
+      enabled:  !!this.links.update && !!this.spec?.disablePolling
+    });
+
+    insertAt(out, 3, {
+      action:   'disablePollingAction',
+      label:    this.t('fleet.helmOp.actions.disablePolling.label'),
+      icon:     'icon icon-endpoints_disconnected',
+      bulkable: true,
+      enabled:  !!this.links.update && !this.spec?.disablePolling
+    });
+
+    insertAt(out, 4, {
+      action:     'forceUpdate',
+      label:      this.t('fleet.helmOp.actions.forceUpdate.label'),
+      icon:       'icon icon-refresh',
+      bulkable:   true,
+      bulkAction: 'forceUpdateBulk',
+      enabled:    !!this.links.update
+    });
+
+    insertAt(out, 5, { divider: true });
+
+    return out;
+  }
+
+  forceUpdate(resources = [this]) {
+    this.$dispatch('promptModal', {
+      componentProps: { helmOps: resources },
+      component:      'HelmOpForceUpdateDialog'
+    });
+  }
+
+  forceUpdateBulk(resources) {
+    this.$dispatch('promptModal', {
+      componentProps: { helmOps: resources },
+      component:      'HelmOpForceUpdateDialog'
+    });
+  }
+
+  get dashboardIcon() {
+    return FleetUtils.dashboardIcons[FLEET.HELM_OP];
+  }
+
+  get resourceIcon() {
+    return FleetUtils.resourceIcons[FLEET.HELM_OP];
+  }
+
+  github(value) {
+    const url = (value || '');
+
+    const matchHttps = url.match(FleetUtils.GIT_HTTPS_REGEX);
+
+    if (matchHttps) {
+      return matchHttps[1];
+    }
+
+    const matchSSH = url.match(FleetUtils.GIT_SSH_REGEX);
+
+    if (matchSSH) {
+      return FleetUtils.parseSSHUrl(matchSSH[0]).repoPath;
+    }
+
+    return false;
+  }
+
+  repoDisplay(repo) {
+    if (!repo) {
+      return null;
+    }
+
+    const github = this.github(repo);
+
+    if (github) {
+      return github;
+    }
+
+    repo = repo.replace(/.git$/, '');
+    repo = repo.replace(/^https:\/\//, '');
+    repo = repo.replace(/^oci:\/\//, '');
+    repo = repo.replace(/\/+$/, '');
+
+    return repo;
+  }
+
+  /**
+   *  Source type examples:
+   *
+   *  tarball:
+   *    chart: https://github.com/rancher/fleet-helm-charts/releases/download/fleet-0.12.1-beta.2/fleet-0.12.1-beta.2.tgz
+   *  repo:
+   *    repo: https://rancher.github.io/fleet-helm-charts/
+   *    chart: fleet-agent
+   *    version: 0.12.1-beta.2
+   *  oci:
+   *    chart: oci://ghcr.io/rancher/fleet-test-configmap-chart
+   *    version: the-tag
+   */
+  get sourceType() {
+    if (this.spec.helm?.repo && this.spec.helm?.chart) {
+      return SOURCE_TYPE.REPO;
+    }
+
+    if (this.spec.helm?.chart?.startsWith('oci://')) {
+      return SOURCE_TYPE.OCI;
+    }
+
+    if (this.spec.helm?.chart) {
+      return SOURCE_TYPE.TARBALL;
+    }
+
+    return null;
+  }
+
+  get source() {
+    let value = '';
+
+    switch (this.sourceType) {
+    case SOURCE_TYPE.REPO:
+      value = this.spec.helm?.repo || '';
+      break;
+    case SOURCE_TYPE.OCI: {
+      const parsed = parse(this.spec.helm?.chart || '');
+
+      value = parsed?.host ? `oci://${ parsed?.host }` : '';
+      break;
+    }
+    case SOURCE_TYPE.TARBALL:
+      value = this.spec.helm?.chart || ''; // TODO ellipsis and tooltip
+    }
+
+    const matchHttps = value.match(FleetUtils.HTTP_REGEX);
+    const matchOCI = value.match(FleetUtils.OCI_REGEX);
+    const matchSSH = value.match(FleetUtils.GIT_SSH_REGEX);
+
+    if (matchSSH) {
+      const { sshUserAndHost, repoPath } = FleetUtils.parseSSHUrl(matchSSH[0]);
+
+      value = `https://${ sshUserAndHost.replace('git@', '') }/${ repoPath }`;
+    }
+
+    return {
+      value,
+      display:  this.repoDisplay(value),
+      icon:     'icon icon-application',
+      showLink: matchHttps || matchSSH || matchOCI
+    };
+  }
+
+  get sourceSub() {
+    let chart = '';
+    const version = this.spec.helm.version || '';
+
+    switch (this.sourceType) {
+    case SOURCE_TYPE.REPO:
+      chart = this.spec.helm.chart || '';
+      break;
+    case SOURCE_TYPE.OCI: {
+      const parsed = parse(this.spec.helm.chart || '');
+
+      chart = parsed?.path ? parsed?.path.substring(1) : '';
+      break;
+    }
+    }
+
+    const value = chart && version ? chart.concat(':', version) : chart;
+
+    return {
+      value,
+      display: value,
+    };
+  }
+
+  get bundles() {
+    return this.$getters['matching'](FLEET.BUNDLE, { [FLEET_ANNOTATIONS.HELM_NAME]: this.name }, this.namespace);
+  }
+
+  get bundleDeployments() {
+    return this.$getters['matching'](FLEET.BUNDLE_DEPLOYMENT, { [FLEET_ANNOTATIONS.HELM_NAME]: this.name });
+  }
+}

package/models/management.cattle.io.authconfig.js

@@ -16,6 +16,7 @@ export const configType = {
   github:          'oauth',
   keycloakoidc:    'oidc',
   genericoidc:     'oidc',
+  cognito:         'oidc',
 };
 
 const imageOverrides = { keycloakoidc: 'keycloak', genericoidc: 'openid' };

package/models/management.cattle.io.fleetworkspace.js

@@ -1,6 +1,7 @@
 import { COUNT, FLEET, NORMAN } from '@shell/config/types';
 import { filterBy } from '@shell/utils/array';
 import HybridModel from '@shell/plugins/steve/hybrid-class';
+import { FLEET as FLEET_ANNOTATIONS } from '@shell/config/labels-annotations';
 
 export default class Workspace extends HybridModel {
   get isLocal() {
@@ -41,6 +42,13 @@ export default class Workspace extends HybridModel {
     return forWorkspace;
   }
 
+  get helmOps() {
+    const all = this.$getters['all'](FLEET.HELM_OP);
+    const forWorkspace = filterBy(all, 'namespace', this.id);
+
+    return forWorkspace;
+  }
+
   get basicNorman() {
     if (this.id) {
       return this.$dispatch(`rancher/find`, { id: this.id, type: NORMAN.FLEET_WORKSPACES }, { root: true });
@@ -87,4 +95,8 @@ export default class Workspace extends HybridModel {
   get confirmRemove() {
     return true;
   }
+
+  get systemAnnotations() {
+    return [FLEET_ANNOTATIONS.OCI_STORAGE_SECRET_DEFAULT];
+  }
 }

package/models/workload.js

@@ -1,5 +1,5 @@
 import { findBy, insertAt } from '@shell/utils/array';
-import { TIMESTAMP, CATTLE_PUBLIC_ENDPOINTS } from '@shell/config/labels-annotations';
+import { CATTLE_PUBLIC_ENDPOINTS } from '@shell/config/labels-annotations';
 import { WORKLOAD_TYPES, SERVICE, POD } from '@shell/config/types';
 import { get, set } from '@shell/utils/object';
 import day from 'dayjs';
@@ -48,11 +48,12 @@ export default class Workload extends WorkloadService {
       });
 
       insertAt(out, 0, {
-        action:   'redeploy',
-        label:    this.t('action.redeploy'),
-        icon:     'icon icon-refresh',
-        enabled:  !!this.links.update,
-        bulkable: true,
+        action:     'redeploy',
+        label:      this.t('action.redeploy'),
+        icon:       'icon icon-refresh',
+        enabled:    !!this.links.update,
+        bulkable:   true,
+        bulkAction: 'redeploy'
       });
 
       insertAt(out, 0, {
@@ -444,19 +445,14 @@ export default class Workload extends WorkloadService {
     return out;
   }
 
-  redeploy() {
-    const now = (new Date()).toISOString().replace(/\.\d+Z$/, 'Z');
+  redeploy(resources = this) {
+    const workloads = Array.isArray(resources) ? resources : [resources];
 
-    if ( !this.spec.template.metadata ) {
-      set(this.spec.template, 'metadata', {});
-    }
-
-    const annotations = this.spec.template.metadata.annotations || {};
-
-    annotations[TIMESTAMP] = now;
-    set(this.spec.template.metadata, 'annotations', annotations);
-
-    this.save();
+    this.$dispatch('promptModal', {
+      modalWidth:     '500px',
+      componentProps: { workloads },
+      component:      'RedeployWorkloadDialog'
+    });
   }
 
   // match existing container ports with services created for this workload

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "3.0.5-rc.3", 
+  "version": "3.0.5-rc.5",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",
@@ -56,6 +56,7 @@
     "babel-plugin-module-resolver": "4.0.0",
     "babel-preset-vue": "2.0.2",
     "cache-loader": "4.1.0",
+    "chart.js": "4.4.8",
     "clipboard-polyfill": "4.0.1",
     "codemirror-editor-vue3": "2.8.0",
     "codemirror": ">=5.64.0 <6",

package/pages/auth/verify.vue

@@ -6,6 +6,7 @@ import { get } from '@shell/utils/object';
 import { base64Decode } from '@shell/utils/crypto';
 import loadPlugins from '@shell/plugins/plugin';
 import { LOGIN_ERRORS } from '@shell/store/auth';
+import { AUTH_BROADCAST_CHANNEL_NAME } from '@shell/utils/auth';
 
 const samlProviders = ['ping', 'adfs', 'keycloak', 'okta', 'shibboleth'];
 
@@ -13,11 +14,22 @@ const oauthProviders = ['github', 'googleoauth', 'azuread'];
 
 function reply(err, code) {
   try {
-    window.opener.window.onAuthTest(err, code);
+    // If we have access to the opener, then use the `onAuthTest` callback
+    if (window.opener) {
+      window.opener.window.onAuthTest(err, code);
+    } else {
+      // Otherwise, use a broadcast channel
+      const bc = new BroadcastChannel(AUTH_BROADCAST_CHANNEL_NAME);
+      const msg = { err, code };
+
+      bc.postMessage(JSON.stringify(msg));
+      bc.close();
+    }
     setTimeout(() => {
       window.close();
     }, 250);
   } catch (e) {
+    console.error('Error replying to authentication verification', e); // eslint-disable-line no-console
     window.close();
   }
 }

package/pages/c/_cluster/apps/charts/AddRepoLink.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+
+defineProps<{
+  clusterId: string;
+}>();
+
+</script>
+
+<template>
+  <router-link
+    :to="`/c/${clusterId}/apps/catalog.cattle.io.clusterrepo/create`"
+    target="_blank"
+    class="add-repo-link"
+    tabindex="0"
+    :aria-label="t('catalog.charts.addNewRepo.ariaLabel')"
+  >
+    <span class="sr-only">{{ t('generic.opensInNewTab') }}</span>
+    + <span class="secondary-text-link">{{ t('catalog.charts.addNewRepo.label') }}</span>
+  </router-link>
+</template>
+
+<style scoped lang="scss">
+.add-repo-link {
+  all: unset;
+  cursor: pointer;
+  color: var(--link-text-secondary);
+  margin-left: 4px;
+
+  &:focus-visible, &:focus {
+    @include focus-outline;
+  }
+
+  span {
+    margin-left: 4px;
+  }
+}
+</style>

package/pages/c/_cluster/apps/charts/AppChartCardFooter.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { RcItemCardAction } from '@components/RcItemCard';
+
+interface FooterItem {
+  icon?: string;
+  iconTooltip?: Record<{key?: string, text?: string}>;
+  labels: string[];
+}
+
+const emit = defineEmits<{(e: 'click:item', type: string, label: string): void; }>();
+
+defineProps<{
+  items: FooterItem[];
+}>();
+
+function onClickItem(type: string, label: string) {
+  emit('click:item', type, label);
+}
+
+</script>
+
+<template>
+  <div class="app-chart-card-footer">
+    <div
+      v-for="(footerItem, i) in items"
+      :key="i"
+      class="app-chart-card-footer-item"
+      data-testid="app-chart-card-footer-item"
+    >
+      <i
+        v-if="footerItem.icon"
+        v-clean-tooltip="t(footerItem.iconTooltip?.key)"
+        :class="['icon', 'app-chart-card-footer-item-icon', footerItem.icon]"
+      />
+      <rc-item-card-action
+        v-for="(label, j) in footerItem.labels"
+        :key="j"
+        class="app-chart-card-footer-item-text secondary-text-link"
+        data-testid="app-chart-card-footer-item-text"
+        tabindex="0"
+        :aria-label="t('catalog.charts.appChartCard.footerItem.ariaLabel')"
+        @click="onClickItem(footerItem.type, label)"
+        @keydown.enter="onClickItem(footerItem.type, label)"
+        @keydown.space.prevent="onClickItem(footerItem.type, label)"
+      >
+        {{ label }}<span v-if="footerItem.labels.length > 1 && j !== footerItem.labels.length - 1">, </span>
+      </rc-item-card-action>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.app-chart-card-footer {
+  display: flex;
+  flex-wrap: wrap;
+
+  &-item {
+    display: flex;
+    align-items: center;
+    color: var(--link-text-secondary);
+    margin-top: 8px;
+    margin-right: 8px;
+
+    &-text {
+      text-transform: capitalize;
+      margin-right: 8px;
+    }
+
+    &-icon {
+      width: 20px;
+      height: 20px;
+      display: flex;
+      font-size: 19px;
+      align-items: center;
+      justify-content: center;
+      margin-right: 8px;
+    }
+  }
+}
+</style>

package/pages/c/_cluster/apps/charts/AppChartCardSubHeader.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+
+interface SubHeaderItem {
+  icon: string;
+  iconTooltip?: Record<{key?: string, text?: string}>;
+  label: string;
+}
+
+defineProps<{
+  items: SubHeaderItem[];
+}>();
+
+</script>
+
+<template>
+  <div class="app-chart-card-sub-header">
+    <div
+      v-for="(subHeaderItem, i) in items"
+      :key="i"
+      class="app-chart-card-sub-header-item"
+      data-testid="app-chart-card-version"
+    >
+      <i
+        v-clean-tooltip="t(subHeaderItem.iconTooltip.key)"
+        :class="['icon', 'app-chart-card-sub-header-item-icon', subHeaderItem.icon]"
+      />
+      <p>{{ subHeaderItem.label }}</p>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.app-chart-card-sub-header {
+  display: flex;
+  gap: var(--gap-md);
+  color: var(--link-text-secondary);
+  margin-bottom: 8px;
+
+  &-item {
+    display: flex;
+    align-items: center;
+  }
+
+  &-item-icon {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    font-size: 19px;
+    align-items: center;
+    justify-content: center;
+    margin-right: 8px;
+  }
+}
+</style>

package/pages/c/_cluster/apps/charts/StatusLabel.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+
+defineProps<{
+  label: string;
+  icon: string;
+  iconColor?: string;
+  tooltip?: string;
+}>();
+
+</script>
+
+<template>
+  <div class="status-label">
+    {{ label }}
+    <i
+      v-clean-tooltip.right="tooltip"
+      :class="['icon', icon, iconColor]"
+    />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.status-label {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--gap);
+  margin-left: 4px;
+
+  .icon {
+    &.warning  { color: var(--warning); }
+  }
+}
+</style>