@rancher/shell 3.0.12-rc.3 → 3.0.12-rc.4

package/pages/c/_cluster/fleet/application/suse-app-collection/chart.vue

@@ -0,0 +1,369 @@
+<script setup lang="ts">
+import { computed, ref, watch, onMounted } from 'vue';
+import { useStore } from 'vuex';
+import { useRoute, useRouter } from 'vue-router';
+import type { RouteLocationRaw } from 'vue-router';
+
+import { useI18n } from '@shell/composables/useI18n';
+import Loading from '@shell/components/Loading';
+import { Banner } from '@components/Banner';
+import { RcButton } from '@components/RcButton';
+import ChartDetailHeader from './ChartDetailHeader.vue';
+import ChartDetailBody from './ChartDetailBody.vue';
+
+import { REPO_TYPE, REPO, CHART, VERSION } from '@shell/config/query-params';
+import { FLEET, ZERO_TIME, CATALOG as CATALOG_TYPES } from '@shell/config/types';
+import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
+import { addParams } from '@shell/utils/url';
+import { compareChartVersions } from '@shell/utils/chart';
+import { isPrerelease } from '@shell/utils/version';
+import { LINUX } from '@shell/store/catalog';
+
+import isEqual from 'lodash/isEqual';
+import difference from 'lodash/difference';
+import day from 'dayjs';
+
+interface CatalogVersion {
+  version: string;
+  created?: string;
+  icon?: string;
+  description?: string;
+  appVersion?: string;
+  home?: string;
+  maintainers?: Array<{ name?: string; url?: string; email?: string }>;
+  sources?: string[];
+  urls?: string[];
+  keywords?: string[];
+  annotations?: Record<string, string>;
+}
+
+interface ChartData {
+  chartNameDisplay: string;
+  icon: string;
+  versions: CatalogVersion[];
+  repoNameDisplay: string;
+}
+
+interface MappedVersion {
+  label: string;
+  version: string;
+  originalVersion: string;
+  id: string;
+  created: string | null;
+  disabled: boolean;
+  keywords: string[];
+}
+
+interface VersionInfo {
+  appReadme?: string;
+  readme?: string;
+  chart?: {
+    appVersion?: string;
+    home?: string;
+    maintainers?: Array<{ name?: string; url?: string; email?: string }>;
+  };
+}
+
+interface RepoObj {
+  nameDisplay?: string;
+  detailLocation: RouteLocationRaw;
+  links: { info: string };
+  followLink: (rel: string, opts: { url: string }) => Promise<VersionInfo>;
+}
+
+const store = useStore();
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n(store);
+
+const loading = ref(true);
+const chart = ref<ChartData | null>(null);
+const version = ref<CatalogVersion | null>(null);
+const versionInfo = ref<VersionInfo | null>(null);
+const versionInfoError = ref('');
+const chartLoadError = ref(false);
+const activeVersionName = ref('');
+
+const currentCluster = computed(() => store.getters.currentCluster);
+
+const query = computed(() => ({
+  repoType:    (route.query[REPO_TYPE] as string) || '',
+  repoName:    (route.query[REPO] as string) || '',
+  chartName:   (route.query[CHART] as string) || '',
+  versionName: (route.query[VERSION] as string) || '',
+}));
+
+const secretName = computed(() => (route.query.secret as string) || '');
+
+const repoObj = ref<RepoObj | null>(null);
+
+const mappedVersions = computed((): MappedVersion[] => {
+  const versions = (chart.value?.versions || []).slice();
+
+  versions.sort((a, b) => compareChartVersions(b.version, a.version));
+
+  const OSs = currentCluster.value?.workerOSs;
+  const out: MappedVersion[] = [];
+  const seen = new Set<string>();
+
+  versions.forEach((v) => {
+    if (seen.has(v.version)) {
+      return;
+    }
+    seen.add(v.version);
+
+    if (isPrerelease(v.version)) {
+      return;
+    }
+
+    const nue: MappedVersion = {
+      label:           v.version,
+      version:         v.version,
+      originalVersion: v.version,
+      id:              v.version,
+      created:         v.created || null,
+      disabled:        false,
+      keywords:        v.keywords || [],
+    };
+
+    const permittedSystems = (v?.annotations?.[CATALOG_ANNOTATIONS.PERMITTED_OS] || LINUX).split(',');
+
+    if (difference(OSs, permittedSystems).length > 0) {
+      nue.disabled = true;
+    }
+
+    if (permittedSystems.length === 1) {
+      nue.label = t(`catalog.install.versions.${ permittedSystems[0] }`, { ver: v.version });
+    }
+
+    out.push(nue);
+  });
+
+  const selectedMatch = out.find((v) => v.id === query.value.versionName);
+
+  if (!selectedMatch && query.value.versionName) {
+    out.unshift({
+      label:           query.value.versionName,
+      version:         query.value.versionName,
+      originalVersion: query.value.versionName,
+      id:              query.value.versionName,
+      created:         null,
+      disabled:        false,
+      keywords:        [],
+    });
+  }
+
+  return out;
+});
+
+const headerSubItems = computed(() => {
+  if (!version.value) {
+    return [];
+  }
+
+  const items: { icon: string; iconTooltip: { key: string }; label: string }[] = [];
+
+  const versionLabel = activeVersionName.value || query.value.versionName;
+
+  if (versionLabel) {
+    items.push({
+      icon:        'icon-version-alt',
+      iconTooltip: { key: 'tableHeaders.version' },
+      label:       versionLabel,
+    });
+  }
+
+  if (version.value.created && version.value.created !== ZERO_TIME) {
+    items.push({
+      icon:        'icon-refresh-alt',
+      iconTooltip: { key: 'tableHeaders.lastUpdated' },
+      label:       day(version.value.created).format('MMM D, YYYY'),
+    });
+  }
+
+  return items;
+});
+
+const appVersion = computed(() => version.value?.appVersion || versionInfo.value?.chart?.appVersion);
+const home = computed(() => version.value?.home || versionInfo.value?.chart?.home);
+
+const maintainers = computed(() => {
+  const list = version.value?.maintainers || versionInfo.value?.chart?.maintainers || [];
+
+  return list.map((m, i) => {
+    const label = m.name || m.url || m.email || t('generic.unknown');
+    let href: string | null = null;
+
+    if (m.url) {
+      href = m.url;
+    } else if (m.email) {
+      href = `mailto:${ m.email }`;
+    }
+
+    return {
+      id: `${ m.name }-${ i }`, label, href, name: m.name
+    };
+  });
+});
+
+const fetchChartData = async(versionOverride?: string) => {
+  loading.value = true;
+  versionInfoError.value = '';
+  chartLoadError.value = false;
+
+  try {
+    await store.dispatch('catalog/loadRepo', { repoName: query.value.repoName });
+
+    const inStore = store.getters.currentCluster ? store.getters['currentProduct'].inStore : 'management';
+
+    repoObj.value = store.getters[`${ inStore }/byId`](CATALOG_TYPES.CLUSTER_REPO, query.value.repoName);
+
+    const catalogChart = store.getters['catalog/chart']({
+      repoType:      query.value.repoType,
+      repoName:      query.value.repoName,
+      chartName:     query.value.chartName,
+      includeHidden: true,
+    });
+
+    const chartVersions = catalogChart?.versions as CatalogVersion[] | undefined;
+
+    if (!chartVersions?.length) {
+      chartLoadError.value = true;
+
+      return;
+    }
+
+    chart.value = {
+      chartNameDisplay: catalogChart.chartNameDisplay || query.value.chartName,
+      icon:             catalogChart.icon || chartVersions[0]?.icon || '',
+      versions:         chartVersions,
+      repoNameDisplay:  repoObj.value?.nameDisplay || query.value.repoName,
+    };
+
+    let versionName = versionOverride || query.value.versionName;
+
+    if (!versionName) {
+      const firstRelease = chartVersions.find((v) => !isPrerelease(v.version));
+
+      versionName = firstRelease?.version || chartVersions[0].version;
+    }
+
+    const matchedVersion = chartVersions.find((v) => v.version === versionName);
+
+    version.value = matchedVersion || chartVersions[0];
+    activeVersionName.value = version.value.version;
+
+    if (repoObj.value) {
+      try {
+        versionInfo.value = await repoObj.value.followLink('info', {
+          url: addParams(repoObj.value.links.info, {
+            chartName: query.value.chartName,
+            version:   activeVersionName.value,
+          }),
+        });
+      } catch (e: unknown) {
+        versionInfoError.value = e instanceof Error ? e.message : String(e);
+      }
+    }
+  } finally {
+    loading.value = false;
+  }
+};
+
+const install = () => {
+  router.push({
+    name:   'c-cluster-fleet-application-resource-create',
+    params: {
+      cluster:  route.params.cluster as string,
+      resource: FLEET.HELM_OP,
+    },
+    query: {
+      type:    FLEET.SUSE_APP_COLLECTION,
+      chart:   query.value.chartName,
+      version: activeVersionName.value,
+      secret:  secretName.value,
+    },
+  });
+};
+
+const onSelectVersion = (vers: MappedVersion) => {
+  router.push({
+    name:   route.name as string,
+    params: route.params,
+    query:  {
+      ...route.query,
+      [VERSION]: vers.id,
+    },
+  });
+};
+
+watch(() => route.query, (neu, old) => {
+  if (!isEqual(neu, old) && Object.keys(neu).length > 0) {
+    const newVersion = neu[VERSION] as string;
+
+    fetchChartData(newVersion);
+  }
+});
+
+onMounted(() => fetchChartData());
+</script>
+
+<template>
+  <Loading v-if="loading" />
+  <div
+    v-else
+    class="appco-chart-detail"
+  >
+    <Banner
+      v-if="chartLoadError"
+      color="error"
+      :label="t('fleet.appCo.chart.loadError')"
+    />
+
+    <ChartDetailHeader
+      v-if="chart"
+      :icon="chart.icon"
+      :chart-name="chart.chartNameDisplay"
+      :sub-header-items="headerSubItems"
+      :description="version && version.description ? version.description : ''"
+    >
+      <template #back-link>
+        <router-link :to="{ name: 'c-cluster-fleet-application-appco-charts', params: { cluster: route.params.cluster }, query: { secret: secretName } }">
+          {{ t('fleet.appCo.chart.title') }}
+        </router-link>
+      </template>
+      <template #action>
+        <RcButton
+          data-testid="appco-chart-install-btn"
+          size="large"
+          @click.prevent="install"
+        >
+          <i class="icon icon-plus mmr-2" />
+          {{ t('catalog.chart.chartButton.action.install') }}
+        </RcButton>
+      </template>
+    </ChartDetailHeader>
+
+    <div class="dashed-spacer" />
+
+    <ChartDetailBody
+      :version="version"
+      :version-info="versionInfo"
+      :version-info-error="versionInfoError"
+      :versions="mappedVersions"
+      :repo="repoObj"
+      :chart="chart"
+      :app-version="appVersion || ''"
+      :home="home || ''"
+      :maintainers="maintainers"
+      @select-version="onSelectVersion"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.appco-chart-detail {
+  display: flex;
+  flex-direction: column;
+}
+</style>

package/pages/c/_cluster/fleet/application/suse-app-collection/charts.vue

@@ -0,0 +1,248 @@
+<script setup lang="ts">
+import {
+  computed, ref, shallowRef, onMounted, onBeforeUnmount
+} from 'vue';
+import { useStore } from 'vuex';
+import { useRoute, useRouter } from 'vue-router';
+
+import { SECRET, CATALOG as CATALOG_TYPES } from '@shell/config/types';
+import {
+  FLEET_APPCO_AUTH_GENERATE_NAME, fetchAppCoCharts, deriveRepoName, ensureAppCoResources, ensureAppCoImagePullSecret
+} from '@shell/utils/fleet-appco';
+import { CATALOG } from '@shell/config/labels-annotations';
+import { REPO_TYPE, REPO, CHART } from '@shell/config/query-params';
+import AppCoPageHeader from '@shell/components/fleet/AppCoPageHeader.vue';
+import AppCoChartGrid from '@shell/components/fleet/AppCoChartGrid.vue';
+import AppCoEmptyState from '@shell/components/fleet/AppCoEmptyState.vue';
+import Loading from '@shell/components/Loading';
+import { useI18n } from '@shell/composables/useI18n';
+import type { RepoState } from '@shell/utils/fleet-appco';
+import { RcIcon } from '@components/RcIcon';
+
+interface ChartVersion {
+  version: string;
+  description?: string;
+  icon?: string;
+  appVersion?: string;
+  created?: string;
+}
+
+const store = useStore();
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n(store);
+const chartEntries = ref<Record<string, ChartVersion[]>>({});
+const chartsLoading = ref(true);
+const chartsFetchError = ref(false);
+const repoState = ref<RepoState | null>(null);
+const secretName = ref((route.query.secret as string) || '');
+const abortController = shallowRef<AbortController | null>(null);
+const repoCreationAttempted = ref(false);
+
+onBeforeUnmount(() => {
+  abortController.value?.abort();
+});
+
+const namespace = computed(() => store.getters.workspace);
+const repoName = computed(() => deriveRepoName(secretName.value));
+
+const getSecrets = () => store.getters[`${ CATALOG._MANAGEMENT }/all`](SECRET) || [];
+
+const secretUsername = computed(() => {
+  if (!secretName.value) {
+    return '';
+  }
+
+  const ns = namespace.value;
+  const match = getSecrets().find((s: any) => s.metadata?.namespace === ns && s.metadata?.name === secretName.value);
+
+  return match?.decodedData?.username || '';
+});
+
+const repoListRoute = computed(() => ({
+  name:   'c-cluster-product-resource-id',
+  params: {
+    cluster:  'local',
+    product:  'apps',
+    resource: CATALOG_TYPES.CLUSTER_REPO,
+    id:       repoName.value,
+  },
+}));
+
+const repoBadgeState = computed(() => repoState.value || undefined);
+
+const isRepoTransitioning = computed(() => repoState.value?.transitioning && !chartsFetchError.value);
+const isRepoError = computed(() => repoState.value?.error && !chartsFetchError.value);
+
+const editCredentials = () => {
+  router.push({
+    name:   'c-cluster-fleet-application-appco-credentials',
+    params: { cluster: route.params.cluster as string },
+    query:  { secret: secretName.value },
+  });
+};
+
+const loadCharts = async() => {
+  abortController.value?.abort();
+  abortController.value = new AbortController();
+  chartsLoading.value = true;
+  chartsFetchError.value = false;
+  repoState.value = null;
+
+  try {
+    const result = await fetchAppCoCharts(store, repoName.value, (state) => {
+      repoState.value = state;
+    }, abortController.value.signal);
+
+    repoState.value = result.repoState;
+
+    if (!result.entries) {
+      if (result.repoState?.error || result.repoState?.transitioning) {
+        chartsFetchError.value = false;
+      } else if (result.notFound && !repoCreationAttempted.value && !abortController.value?.signal.aborted) {
+        // The repo genuinely doesn't exist (404) but a secret was supplied: create
+        // the image-pull secret + ClusterRepo (same as the credentials page) and
+        // retry. A real connection error (non-404) falls through to the error state
+        // below instead of being mistaken for an absent repo.
+        repoCreationAttempted.value = true;
+
+        const ensured = await ensureAppCoResources(store, secretName.value, namespace.value, t);
+
+        if (ensured) {
+          return loadCharts();
+        }
+
+        chartsFetchError.value = true;
+      } else {
+        chartsFetchError.value = true;
+      }
+
+      return;
+    }
+
+    chartEntries.value = result.entries;
+
+    // The repo exists, but its image-pull secret may have been removed (or never
+    // created if the repo was added outside this flow). Ensure it idempotently so
+    // chart installs can still pull images. A failure here must not block listing.
+    try {
+      await ensureAppCoImagePullSecret(store, secretName.value, namespace.value);
+    } catch (e) {
+      console.error('Failed to ensure AppCo image-pull secret:', e); // eslint-disable-line no-console
+    }
+
+    await store.dispatch('catalog/loadRepo', { repoName: repoName.value });
+  } catch (e) {
+    console.error('Failed to fetch AppCo chart list:', e); // eslint-disable-line no-console
+    chartsFetchError.value = true;
+  } finally {
+    chartsLoading.value = false;
+  }
+};
+
+const selectChart = (chartValue: { name: string }) => {
+  if (!chartValue) {
+    return;
+  }
+
+  router.push({
+    name:   'c-cluster-fleet-application-appco-chart',
+    params: { cluster: route.params.cluster as string },
+    query:  {
+      [REPO_TYPE]: 'cluster',
+      [REPO]:      repoName.value,
+      [CHART]:     chartValue.name,
+      secret:      secretName.value,
+    },
+  });
+};
+
+onMounted(async() => {
+  if (!secretName.value) {
+    const ns = namespace.value;
+    const match = getSecrets().find((s: any) => s.metadata?.namespace === ns && s.metadata?.name?.startsWith(FLEET_APPCO_AUTH_GENERATE_NAME));
+
+    if (match) {
+      secretName.value = match.metadata.name;
+    } else {
+      router.replace({
+        name:   'c-cluster-fleet-application-appco-credentials',
+        params: { cluster: route.params.cluster as string },
+      });
+
+      return;
+    }
+  }
+
+  await loadCharts();
+});
+</script>
+
+<template>
+  <div class="appco-charts-page">
+    <AppCoPageHeader
+      :subtitle="false"
+      :show-secret-info="true"
+      :secret-label="secretUsername"
+      @edit-credentials="editCredentials"
+    />
+
+    <AppCoEmptyState
+      v-if="isRepoTransitioning"
+      :title="t('fleet.helmOp.add.steps.selection.repoLoading.title')"
+      :badge-state="repoBadgeState"
+      data-testid="appco-charts-repo-loading"
+    >
+      {{ t('fleet.helmOp.add.steps.selection.repoLoading.description') }}
+    </AppCoEmptyState>
+
+    <Loading
+      v-else-if="chartsLoading"
+    />
+
+    <AppCoEmptyState
+      v-else-if="isRepoError"
+      :title="t('fleet.helmOp.add.steps.selection.repoLoading.title')"
+      :badge-state="repoBadgeState"
+      data-testid="appco-charts-repo-error"
+    >
+      {{ t('fleet.helmOp.add.steps.selection.repoError.description') }}
+      <router-link :to="repoListRoute">
+        {{ t('fleet.helmOp.add.steps.selection.repoError.link') }}
+        <RcIcon
+          type="external-link"
+          size="small"
+        />
+      </router-link>
+    </AppCoEmptyState>
+
+    <AppCoEmptyState
+      v-else-if="chartsFetchError"
+      :title="t('fleet.helmOp.add.steps.selection.emptyState.connectionError.title')"
+      data-testid="appco-charts-fetch-error"
+    >
+      {{ t('fleet.helmOp.add.steps.selection.emptyState.connectionError.descriptionPre') }}<br>
+      {{ t('fleet.helmOp.add.steps.selection.emptyState.connectionError.please') }}
+      <a
+        href="#"
+        @click.prevent="loadCharts"
+      >{{ t('fleet.helmOp.add.steps.selection.emptyState.connectionError.tryAgain') }}</a>
+      {{ t('fleet.helmOp.add.steps.selection.emptyState.connectionError.descriptionPost') }}
+    </AppCoEmptyState>
+
+    <AppCoChartGrid
+      v-else
+      :charts="chartEntries"
+      :search-placeholder="t('fleet.helmOp.add.steps.selection.searchPlaceholder')"
+      @select-chart="selectChart"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.appco-charts-page {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+}
+</style>