download experiment results in json

lumigator/frontend/src/components/molecules/LExperimentDetails.vue

@@ -116,6 +116,15 @@
           || selectedExperiment.status === 'FAILED')"
         @click="emit('l-results', selectedExperiment)"
       />
+      <Button
+        rounded
+        severity="secondary"
+        size="small"
+        icon="pi pi-download"
+        label="Download Results"
+        :disabled="selectedExperiment.status !== 'SUCCEEDED'"
+        @click="emit('l-dnld-results', selectedExperiment)"
+      />
     </div>
   </div>
 </template>
@@ -129,7 +138,7 @@ import { formatDate, calculateDuration } from '@/helpers/index'
 import Button from 'primevue/button';
 import Tag from 'primevue/tag';
 
-const emit = defineEmits(['l-close-details', 'l-results', 'l-show-logs']);
+const emit = defineEmits(['l-close-details', 'l-results', 'l-show-logs', 'l-dnld-results']);
 
 const experimentStore = useExperimentStore();
 const { selectedExperiment } = storeToRefs(experimentStore);
@@ -235,6 +244,8 @@ watch(experimentStatus, (newStatus) => {
 
   &__actions {
     padding: $l-spacing-1 0;
+    display: flex;
+    gap: $l-spacing-1;
   }
 }
 </style>

lumigator/frontend/src/components/pages/LExperiments.vue

@@ -39,6 +39,7 @@
         <l-experiment-details
           v-if="selectedExperiment !== null"
           @l-results="onShowResults($event)"
+          @l-dnld-results="onDnldResults($event)"
           @l-show-logs="onShowLogs"
           @l-close-details="onCloseDetails"
         />
@@ -113,6 +114,10 @@ const onShowResults = (experiment) => {
   showDrawer.value = true;
 }
 
+const onDnldResults = (experiment) => {
+  experimentStore.loadResultsFile(experiment.id);
+}
+
 const onShowLogs = () => {
   showLogs.value = true;
   showDrawer.value = true;

lumigator/frontend/src/helpers/index.js

@@ -59,3 +59,15 @@ export function calculateDuration(start, finish) {
   ${String(seconds).padStart(2, '0')}`;
   return duration;
 }
+
+export function dowloadContent(blob, filename) {
+  const downloadUrl = URL.createObjectURL(blob);
+  const anchor = document.createElement('a');
+  anchor.className = 'hidden';
+  anchor.href = downloadUrl;
+  anchor.download = filename;
+  document.body.appendChild(anchor);
+  anchor.click();
+  URL.revokeObjectURL(downloadUrl);
+  document.body.removeChild(anchor);
+}

lumigator/frontend/src/services/experiments/experimentService.js

@@ -48,14 +48,34 @@ async function fetchResults(job_id) {
     const jsonData = await http.get(download_url)
     return {
       resultsData: jsonData.data,
-      id
+      id,
+      download_url
     }
   } catch (error) {
     console.error("Error fetching experiment results:", error.message || error);
     return error;
   }
 }
 
+async function downloadResults(experiment_id) {
+  try {
+    const response = await http.get(PATH_EXPERIMENT_RESULTS(experiment_id));
+    const { download_url } = response.data;
+    if (!download_url) {
+      console.error("No download_url found in the response.");
+      return;
+    }
+    const fileResponse = await http.get(download_url, {
+      responseType: 'blob', // Important: Receive the file as a binary blob
+    })
+    const blob = fileResponse.data;
+    return blob;
+  } catch (error) {
+    console.error("Error downloading experiment results:", error.message || error);
+    return error;
+  }
+}
+
 async function fetchLogs(id) {
   try {
     const logsResponse = await http.get(PATH_EXPERIMENT_LOGS(id));
@@ -68,6 +88,7 @@ async function fetchLogs(id) {
 export default {
   fetchExperiments,
   fetchResults,
+  downloadResults,
   fetchExperimentDetails,
   triggerExperiment,
   fetchLogs

lumigator/frontend/src/stores/experiments/store.js

@@ -1,7 +1,7 @@
 import { ref, watch } from 'vue';
 import { defineStore } from 'pinia'
 import experimentService from "@/services/experiments/experimentService";
-import { retrieveEntrypoint, calculateDuration } from '@/helpers/index'
+import { retrieveEntrypoint, calculateDuration, dowloadContent } from '@/helpers/index'
 
 export const useExperimentStore = defineStore('experiment', () => {
   const experiments = ref([]);
@@ -46,6 +46,11 @@ export const useExperimentStore = defineStore('experiment', () => {
     retrieveLogs();
   }
 
+  async function loadResultsFile(experiment_id) {
+    const blob = await experimentService.downloadResults(experiment_id);
+    dowloadContent(blob, `${selectedExperiment.value.name}_results`)
+  }
+
   async function loadResults(experiment_id) {
     const results = await experimentService.fetchResults(experiment_id);
     if (results?.id) {
@@ -134,6 +139,7 @@ export const useExperimentStore = defineStore('experiment', () => {
     experiments,
     loadDetails,
     loadResults,
+    loadResultsFile,
     selectedExperiment,
     experimentLogs,
     selectedExperimentRslts,

lumigator/frontend/src/styles/_icons.scss

@@ -22,3 +22,16 @@
     -webkit-mask-size: contain;
     mask-size: contain;
 }
+
+
+.pi.pi-download::before {
+    content: "";
+    display: inline-block;
+    width: 1.25em;
+    height: 1.25em;
+    background-color: currentColor; /* Use currentColor for SVG fill */
+    -webkit-mask: url('@/assets/icons/DownloadIcon.svg') no-repeat center;
+    mask: url('@/assets/icons/DownloadIcon.svg') no-repeat center;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+}

lumigator/frontend/src/styles/_lumigator-theme.scss

@@ -25,4 +25,8 @@
   color: $l-text-color;
   padding: $l-spacing-1 / 2;
   border-radius: $l-input-border-radius;
-}
+}
+
+.hidden {
+  visibility: hidden!important;
+}