Development

.github/workflows/dashboard-build-extension.yml

@@ -105,7 +105,7 @@ jobs:
 
       - name: Upload charts artifact
         if: github.ref_type == 'tag' || (github.ref == 'refs/heads/main' && github.event_name != 'pull_request') || inputs.is_test == 'true'
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@v7
         with:
           name: charts
           path: ./dashboard/tmp
@@ -134,7 +134,7 @@ jobs:
           git config user.email 'github-actions[bot]@users.noreply.github.com'
 
       - name: Download build artifact
-        uses: actions/download-artifact@v7
+        uses: actions/download-artifact@v8
         with:
           name: charts
           path: ./dashboard

.github/workflows/release-next.yml

@@ -38,14 +38,14 @@ jobs:
         name: Install yarn
         run: npm install  --global yarn
       -
-        uses: anchore/sbom-action/download-syft@v0.21.1
+        uses: anchore/sbom-action/download-syft@v0.23.0
       -
         uses: sigstore/cosign-installer@v4.0.0
         with:
           cosign-release: 'v2.5.1'
       -
         name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+        uses: docker/setup-buildx-action@v4
       -
         name: Login to GitHub Docker Registry
         uses: docker/login-action@v3

.github/workflows/release.yml

@@ -38,14 +38,14 @@ jobs:
         name: Install yarn
         run: npm install  --global yarn
       -
-        uses: anchore/sbom-action/download-syft@v0.21.1
+        uses: anchore/sbom-action/download-syft@v0.23.0
       -
         uses: sigstore/cosign-installer@v4.0.0
         with:
           cosign-release: 'v2.5.1'
       -
         name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+        uses: docker/setup-buildx-action@v4
       -
         name: Login to GitHub Docker Registry
         uses: docker/login-action@v3

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "epinio",
-  "version": "v1.13.9",
+  "version": "v1.13.10",
   "engines": {
     "node": ">=20"
   },

dashboard/pkg/epinio/config/epinio.ts

@@ -137,29 +137,31 @@ export function init($plugin: any, store: any) {
     customRoute: createEpinioRoute('c-cluster-resource', { resource: EPINIO_TYPES.APP_CHARTS }),
   });
 
-  // Configuration resource
+  // Configuration resource (isCreatable: false so shell doesn't show Create; list shows it only when canCreateConfiguration)
   configureType(EPINIO_TYPES.CONFIGURATION, {
-    isCreatable: true,
-    isEditable:  true,
-    isRemovable: true,
-    showState:   false,
-    canYaml:     false,
-    customRoute: createEpinioRoute('c-cluster-resource', { resource: EPINIO_TYPES.CONFIGURATION }),
+    isCreatable:      true,
+    isEditable:       true,
+    isRemovable:      true,
+    showState:        false,
+    canYaml:          false,
+    customRoute:      createEpinioRoute('c-cluster-resource', { resource: EPINIO_TYPES.CONFIGURATION }),
+    showListMasthead: false
   });
 
   // Groups
   const ADVANCED_GROUP = 'Advanced';
   const SERVICE_GROUP = 'Services';
   const ABOUT = 'System';
 
-  // Service Instance
+  // Service Instance (isCreatable: false so shell doesn't show Create; our list/services.vue shows it only when canCreateService)
   configureType(EPINIO_TYPES.SERVICE_INSTANCE, {
-    isCreatable: true,
+    isCreatable: false,
     isEditable:  true,
     isRemovable: true,
     showState:   true,
     canYaml:     false,
     customRoute: createEpinioRoute('c-cluster-resource', { resource: EPINIO_TYPES.SERVICE_INSTANCE }),
+    showListMasthead: false, // Custom masthead with RBAC-gated Create button
   });
 
   // Catalog Service

dashboard/pkg/epinio/detail/applications.vue

@@ -34,7 +34,8 @@ const store = useStore();
 
 const t = store.getters['i18n/t'];
 
-const saving = ref(false);
+const scalingInFlight = ref(false);
+const debouncePending = ref(false);
 const gitSource = ref<any>(null);
 const gitDeployment = ref({
   deployedCommit: { short: '', long: '' },
@@ -124,6 +125,10 @@ const commitActions = [{
   enabled: true
 }];
 
+// Debounce settings for scaling instances
+const UPDATE_INSTANCES_DEBOUNCE_MS = 2000; // 2s; adjust as needed
+let updateInstancesTimeout: number | null = null;
+
 onMounted(async () => {
   await store.dispatch('epinio/findAll', { type: EPINIO_TYPES.SERVICE_INSTANCE });
   await store.dispatch('epinio/findAll', { type: EPINIO_TYPES.CONFIGURATION });
@@ -135,17 +140,35 @@ onMounted(async () => {
 });
 
 async function updateInstances(newInstances: number) {
-  saving.value = true;
-  try {
-    props.value.configuration.instances = newInstances;
-    await props.value.update();
-    await props.value.forceFetch();
-  } catch (err) {
-    console.error(`Failed to scale Application: `, epinioExceptionToErrorsArray(err));
+  // Update desired and configured instances immediately so the UI reflects the target
+  props.value.desiredInstances = newInstances;
+  props.value.configuration.instances = newInstances;
+
+  // Debounce the API call so rapid clicks collapse into one request
+  if (updateInstancesTimeout !== null) {
+    clearTimeout(updateInstancesTimeout);
   }
-  saving.value = false;
+  debouncePending.value = true;
+
+  updateInstancesTimeout = window.setTimeout(async () => {
+    debouncePending.value = false;
+    scalingInFlight.value = true;
+
+    try {
+      await props.value.update();
+      await props.value.forceFetch();
+    } catch (err) {
+      console.error('[Epinio instances] Failed to scale Application', epinioExceptionToErrorsArray(err));
+    } finally {
+      scalingInFlight.value = false;
+      debouncePending.value = false;
+      updateInstancesTimeout = null;
+    }
+  }, UPDATE_INSTANCES_DEBOUNCE_MS);
 }
 
+const showScaleSpinner = computed(() => debouncePending.value || scalingInFlight.value);
+
 function formatURL(str: string) {
   const matchGit = str.match('^(https|git)(:\/\/|@)([^\/:]+)[\/:]([^\/:]+)\/(.+)(.git)*$'); // eslint-disable-line no-useless-escape
   return `${matchGit?.[4]}/${matchGit?.[5]}`;
@@ -333,10 +356,16 @@ const commitPosition = computed(() => {
                 <PlusMinus
                   v-model:value="value.desiredInstances"
                   class="mt-15 mb-10"
-                  :disabled="saving"
+                  :disabled="scalingInFlight"
                   @minus="updateInstances(value.desiredInstances - 1)"
                   @plus="updateInstances(value.desiredInstances + 1)"
                 />
+                <div
+                  v-if="showScaleSpinner"
+                  class="scale-instances__spinner mt-5"
+                >
+                  <i class="icon-spinner animate-spin" />
+                </div>
               </div>
 
               <div class="deployment__origin__row">
@@ -746,6 +775,13 @@ const commitPosition = computed(() => {
   }
 }
 
+.scale-instances__spinner {
+  display: inline-flex;
+  align-items: center;
+  font-size: 12px;
+  color: var(--muted-text);
+}
+
 .deployment__origin__list {
   ul {
     margin: 0;

dashboard/pkg/epinio/dialog/ExportAppDialog.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useStore } from 'vuex'
-import {ref, computed, onMounted, onBeforeUnmount } from 'vue';
+import { ref, onMounted, onBeforeUnmount } from 'vue';
 
 import JSZip from 'jszip';
 
@@ -10,7 +10,6 @@ import Tab from '@shell/components/Tabbed/Tab.vue';
 import { downloadFile } from '@shell/utils/download';
 import GenericPrompt from '@shell/dialog/GenericPrompt';
 import Tabbed from '@shell/components/Tabbed/index.vue';
-import PercentageBar from '@shell/components/PercentageBar';
 
 const store = useStore();
 const t = store.getters['i18n/t'];
@@ -23,18 +22,10 @@ const props = defineProps<{
 }>();
 
 const showProgressBar = ref<boolean>(false);
-const percentages = ref<object>({});
 const step = ref<any>(null);
 const cancelTokenSources:object = {};
-const colorStops:object = { 0: '--primary', 100: '--primary' };
 const genericPrompt = ref<HTMLElement>(null);
 
-const partsWeight = {
-  [APPLICATION_PARTS.VALUES]: 0.1,
-  [APPLICATION_PARTS.CHART]:  0.1,
-  [APPLICATION_PARTS.IMAGE]:  0.7
-};
-
 const zipParts = props.resources[0]?.applicationParts.filter(
   (part) => part !== APPLICATION_PARTS.MANIFEST
 );
@@ -51,16 +42,6 @@ onBeforeUnmount(() => {
   }, 2000);
 });
 
-const progressBar = computed({
-  get() {
-    return Object.keys(percentages.value).reduce(
-      (acc, part) => acc + (percentages.value[part] * (partsWeight[part] || 1)), 0);
-  },
-  set(value) {
-    percentages.value = { value };
-  }
-}, { immediate: true });
-
 const exportApplicationManifest = async () => {
   enableDownload();
   const resource = props.resources[0];
@@ -93,6 +74,19 @@ const exportApplicationManifest = async () => {
   if (store.$router.currentRoute._value.hash === '#manifest') {
     await resource.createManifest();
   } else {
+    // Prefer server-side archive (one download, no client zip) when backend supports it
+    const archiveBlob = await fetchPartArchive(resource);
+    if (archiveBlob) {
+      await downloadFile(
+        `${ resource.meta.name }-helm-chart.zip`,
+        archiveBlob,
+        'application/zip',
+      );
+      await delayBeforeClose(1500);
+      return;
+    }
+
+    // Fallback: fetch three parts and zip in browser (slower, especially in Rancher extension)
     const partsData = await zipParts.reduce(async(acc, part) => ({
       ...await acc,
       [part]: await fetchPart(resource, part),
@@ -106,7 +100,6 @@ const exportApplicationManifest = async () => {
 
     await chartZip(partsData);
 
-    progressBar.value = 100;
     await delayBeforeClose(1500);
   }
 }
@@ -121,20 +114,32 @@ const getCancelToken = () => {
   return store.$axios.CancelToken;
 }
 
+// Fetches server-side archive (one zip). Returns blob or null if backend does not support it.
+const fetchPartArchive = async (resource) => {
+  toggleStep('archive', true);
+  cancelTokenSources.archive = getCancelToken().source();
+  try {
+    const blob = await resource.fetchPart('archive', {
+      onDownloadProgress: (progressEvent) => {
+        if (progressEvent.loaded > 0) {
+          toggleStep('archive');
+        }
+      },
+      cancelToken: cancelTokenSources.archive?.token,
+    });
+    return blob;
+  } catch {
+    return null;
+  }
+};
+
 const fetchPart = async (resource, part) => {
   toggleStep(part, true);
   cancelTokenSources[part] = getCancelToken().source();
 
   return await resource.fetchPart(
     part, {
       onDownloadProgress: (progressEvent) => {
-        const total = progressEvent.event.srcElement.getResponseHeader('content-length') ||
-          progressEvent.event.srcElement.getResponseHeader('proxy-content-length');
-
-        if (total) {
-          percentages.value[part] = Math.round(progressEvent.loaded * 100 / total);
-        }
-
         if (progressEvent.loaded > 0) {
           toggleStep(part);
         }
@@ -159,8 +164,7 @@ const fetchPart = async (resource, part) => {
 const fetchCancel = () => {
   // Cancel pending api requests, see https://axios-http.com/docs/cancellation
   Object.keys(cancelTokenSources).forEach(
-    (part) => cancelTokenSources[part].
-      cancel(`${ part } part: download cancelled.`)
+    (part) => cancelTokenSources[part]?.cancel?.(`${ part } part: download cancelled.`)
   );
 }
 
@@ -192,7 +196,6 @@ const enableDownload = () => {
 const disableDownload = () => {
   fetchCancel();
   showProgressBar.value = false;
-  progressBar.value = 0;
   toggleStep(null);
 }
 
@@ -251,15 +254,10 @@ const toggleStep = (part, isPreparing = false) => {
             v-if="showProgressBar"
             class="progress-info text info mb-10 mt-20"
           >
+            <i class="icon-spinner animate-spin mr-5" />
             <span v-if="step">
               {{ t(`epinio.applications.export.chartValuesImages.steps.${ step }`) }}
             </span>
-            <PercentageBar
-              class="progress-bar"
-              :modelValue="progressBar"
-              :color-stops="colorStops"
-              preferred-direction="MORE"
-            />
           </div>
         </Tab>
       </Tabbed>
@@ -277,9 +275,8 @@ const toggleStep = (part, isPreparing = false) => {
 }
 
 .progress-info {
-  span {
-    display: block;
-    margin-bottom: 10px;
-  }
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 </style>