Merge pull request #101 from LCOGT/feature/better-progress-bar

rename session_id to camel case, loading bar button, immediate polling

src/components/DataSession/DataSession.vue

@@ -118,7 +118,7 @@ onMounted(() => {
     >
       <!-- The operations bar list goes here -->
       <operation-pipeline
-        :session_id="data.id"
+        :session-id="data.id"
         :operations="data.operations"
         :active="props.active"
         @operation-completed="addCompletedOperation"

src/components/DataSession/LoadBarButton.vue

@@ -0,0 +1,41 @@
+<script setup>
+defineProps({
+  progress: {
+    type: Number,
+    required: true,
+  }
+})
+
+</script>
+
+<template>
+  <v-btn class="loadBarButton">
+    <slot />
+    <div
+      class="progress-bar"
+      :style="{ width: progress + '%' }"
+    />
+  </v-btn>
+</template>
+<style scoped>
+.loadBarButton{
+  position: relative;
+  overflow: hidden;
+  background-color: var(--dark-blue);
+}
+:slotted(p) {
+  z-index: 2;
+}
+.progress-bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: var(--tan);
+  height: 100%;
+  transition: 0.3s;
+  }
+
+.selected .progress-bar {
+  background-color: var(--dark-green);
+}
+</style>

src/components/DataSession/OperationPipeline.vue

@@ -3,6 +3,7 @@ import { ref, watch, onBeforeUnmount } from 'vue'
 import { useConfigurationStore } from '@/stores/configuration'
 import { useAlertsStore } from '@/stores/alerts'
 import { fetchApiCall, handleError } from '@/utils/api'
+import LoadBarButton from '@/components/DataSession/LoadBarButton.vue'
 
 const store = useConfigurationStore()
 const alertStore = useAlertsStore()
@@ -13,7 +14,7 @@ const props = defineProps({
     type: Array,
     required: true
   },
-  session_id: {
+  sessionId: {
     type: Number,
     required: true
   },
@@ -69,18 +70,17 @@ async function pollOperationCompletion(operationID) {
       }
     }
     else{
-      console.error('No response on status for operation:', operationID)
+      alertStore.setAlert('error', 'Operation status not found')
     }
   }
 
-  const url = store.datalabApiBaseUrl + 'datasessions/' + props.session_id + '/operations/' + operationID + '/'
+  const url = store.datalabApiBaseUrl + 'datasessions/' + props.sessionId + '/operations/' + operationID + '/'
   await fetchApiCall({ url: url, method: 'GET', successCallback: updateOperationStatus, failCallback: handleError })
 }
 
 function clearPolling(operationID) {
   if (operationID in operationPollingTimers){
     clearInterval(operationPollingTimers[operationID])
-    delete operationPercentages.value[operationID]
     delete operationPollingTimers[operationID]
   }
 }
@@ -89,6 +89,8 @@ watch(() => props.operations, () => {
   if (props.active) {
     props.operations.forEach(operation => {
       if (!operationPollingTimers[operation.id]) {
+        // call once so buttons progress is updated immediately
+        operationPollingTimers[operation.id] = pollOperationCompletion(operation.id)
         operationPollingTimers[operation.id] = setInterval(() => pollOperationCompletion(operation.id), POLL_WAIT_TIME)
       }
     })
@@ -100,6 +102,8 @@ watch(
     if (active && !previousActive) {
       props.operations.forEach(operation => {
         if (!operationPollingTimers[operation.id]) {
+          // call once so buttons progress is updated immediately
+          operationPollingTimers[operation.id] = pollOperationCompletion(operation.id)
           operationPollingTimers[operation.id] = setInterval(() => pollOperationCompletion(operation.id), POLL_WAIT_TIME)
         }
       })
@@ -131,20 +135,16 @@ onBeforeUnmount(() => {
     justify="center"
     class="operation mb-2"
   >
-    <v-btn
+    <load-bar-button
       :class="{selected: index == selectedOperation}"
-      variant="outlined"
       class="operation_button"
+      :progress="operationPercentages[operation.id] ?? 0"
       @click="selectOperation(index)"
     >
-      {{ index }}: {{ operation.name }}
-    </v-btn>
-    <v-progress-linear
-      v-if="operationPercentages[operation.id] !== undefined"
-      class="operation_completion"
-      :model-value="operationPercentages[operation.id]"
-      :height="5"
-    />
+      <p>
+        {{ index }}: {{ operation.name }}
+      </p>
+    </load-bar-button>
   </v-row>
 </template>
 
@@ -165,14 +165,9 @@ onBeforeUnmount(() => {
   font-size: 1.2rem;
   font-weight: 600;
   border-style: none;
-  background-color: var(--tan);
   color: var(--metal);
 }
 
-.selected {
-  background-color: var(--light-blue)
-}
-
 @media (max-width: 1200px) {
   .operations {
     font-size: 1.3rem;