Fix: Remove .env file from commit

kestra-io · Dec 29, 2024 · d9f440c · d9f440c
1 parent 93e7ff2
commit d9f440c
Show file tree

Hide file tree

Showing 4 changed files with 159 additions and 12 deletions.
diff --git a/ui/src/components/dashboard/Dashboard.vue b/ui/src/components/dashboard/Dashboard.vue
@@ -79,6 +79,7 @@
                     :label="t('dashboard.success_ratio')"
                     :tooltip="t('dashboard.success_ratio_tooltip')"
                     :value="stats.success"
+                    :loading="loadingExecutionsState"         
                     :redirect="{
                         name: 'executions/list',
                         query: {
@@ -97,6 +98,7 @@
                     :label="t('dashboard.failure_ratio')"
                     :tooltip="t('dashboard.failure_ratio_tooltip')"
                     :value="stats.failed"
+                    :loading="loadingExecutionsState"         
                     :redirect="{
                         name: 'executions/list',
                         query: {
@@ -114,6 +116,7 @@
                     :icon="FileTree"
                     :label="t('flows')"
                     :value="numbers.flows"
+                    :loading="loadingStateNumbers"         
                     :redirect="{
                         name: 'flows/list',
                         query: {scope: 'USER', size: 100, page: 1},
@@ -125,6 +128,7 @@
                 <Card
                     :icon="LightningBolt"
                     :label="t('triggers')"
+                    :loading="loadingStateNumbers"         
                     :value="numbers.triggers"
                     :redirect="{
                         name: 'admin/triggers',
@@ -141,6 +145,7 @@
                     :data="graphData"
                     :total="stats.total"
                     :class="{'me-2': !props.flow}"
+                    :loading="loadingExecutionsState"
                 />
             </el-col>
             <el-col v-if="!props.flow" :xs="24" :lg="8">
@@ -215,6 +220,7 @@
                 <ExecutionsNamespace
                     :data="filteredNamespaceExecutions"
                     :total="stats.total"
+                    :loading="loadingExecutionsState"
                 />
             </el-col>
         </el-row>
@@ -350,13 +356,18 @@
     });
 
     const defaultNumbers = {flows: 0, triggers: 0};
+    const loadingStateNumbers = ref(true);
     const numbers = ref({...defaultNumbers});
     const fetchNumbers = () => {
+        loadingStateNumbers.value = true
         store.$http
             .post(`${apiUrl(store)}/stats/summary`, route.query)
             .then((response) => {
                 if (!response.data) return;
                 numbers.value = {...defaultNumbers, ...response.data};
+            })
+            .finally(() => {
+                loadingStateNumbers.value = false; 
             });
     };
 
@@ -407,7 +418,9 @@
             return accumulator;
         }, null);
     };
+    const loadingExecutionsState = ref(true)
     const fetchExecutions = () => {
+        loadingExecutionsState.value = true
         store.dispatch("stat/daily", route.query).then((response) => {
             const sorted = response.sort(
                 (a, b) => new Date(b.date) - new Date(a.date),
@@ -419,7 +432,10 @@
                 yesterday: sorted.at(-2),
                 today: sorted.at(-1),
             };
-        });
+        }).finally(()=>{
+            loadingExecutionsState.value = false
+        })
+       
     };
 
     const graphData = computed(() => store.state.stat.daily || []);

diff --git a/ui/src/components/dashboard/components/Card.vue b/ui/src/components/dashboard/components/Card.vue
@@ -20,7 +20,10 @@
                 <TextSearchVariant class="fs-4 icons url" />
             </RouterLink>
         </div>
-        <p class="m-0 fs-2 fw-bold">
+        <div v-if="loading" class="loading-skeleton">
+            <div class="skeleton-line" />
+        </div>
+        <p v-else class="m-0 fs-2 fw-bold">
             {{ value }}
         </p>
     </div>
@@ -50,6 +53,10 @@
             type: Object,
             required: true,
         },
+        loading: {
+            type: Boolean,
+            default: false
+        }
     });
 </script>
 
@@ -72,11 +79,50 @@
             color: $gray-300;
         }
     }
+
+    & .loading-skeleton {
+        height: 2rem;
+        display: flex;
+        align-items: center;
+    }
+
+    & .skeleton-line {
+        height: 1.5rem;
+        width: 60%;
+        background: linear-gradient(
+            90deg,
+            rgba(190, 190, 190, 0.2) 25%,
+            rgba(129, 129, 129, 0.24) 37%,
+            rgba(190, 190, 190, 0.2) 63%
+        );
+        background-size: 400% 100%;
+        animation: shimmer 1.4s ease infinite;
+        border-radius: 4px;
+
+        html.dark & {
+            background: linear-gradient(
+                90deg,
+                rgba(255, 255, 255, 0.1) 25%,
+                rgba(255, 255, 255, 0.15) 37%,
+                rgba(255, 255, 255, 0.1) 63%
+            );
+            background-size: 400% 100%;
+        }
+    }
+}
+
+@keyframes shimmer {
+    0% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0 50%;
+    }
 }
 </style>
 
 <style lang="scss">
 .dashboard-card-tooltip {
     width: 300px;
 }
-</style>
+</style>
diff --git a/ui/src/components/dashboard/components/charts/executions/Bar.vue b/ui/src/components/dashboard/components/charts/executions/Bar.vue
@@ -1,24 +1,23 @@
 <template>
     <div class="p-4 responsive-container">
-        <div
-            class="d-flex flex-wrap justify-content-between pb-4 info-container"
-        >
+        <div class="d-flex flex-wrap justify-content-between pb-4 info-container">
             <div class="info-block">
                 <p class="m-0 fs-6">
                     <span class="fw-bold">{{ t("executions") }}</span>
                     <span class="fw-light small">
                         {{ t("dashboard.per_day") }}
                     </span>
                 </p>
-                <p class="m-0 fs-2">
+                <div v-if="loading" class="loading-skeleton">
+                    <div class="skeleton-line" />
+                </div>
+                <p v-else class="m-0 fs-2 fw-bold">
                     {{ total }}
                 </p>
             </div>
 
             <div class="switch-container">
-                <div
-                    class="d-flex justify-content-end align-items-center switch-content"
-                >
+                <div class="d-flex justify-content-end align-items-center switch-content">
                     <span class="pe-2 fw-light small">{{ t("duration") }}</span>
                     <el-switch
                         v-model="duration"
@@ -41,7 +40,6 @@
         <NoData v-else />
     </div>
 </template>
-
 <script setup>
     import {computed, ref, onMounted, onUnmounted} from "vue";
     import {useI18n} from "vue-i18n";
@@ -71,6 +69,11 @@
             type: Number,
             required: true,
         },
+        loading:{
+            type:Boolean , 
+            required:true , 
+            default: false
+        }
     });
 
     const parsedData = computed(() => {
@@ -292,4 +295,41 @@ $height: 200px;
         padding-right: 0.5rem;
     }
 }
+.loading-skeleton {
+    height: 2rem;
+    display: flex;
+    align-items: center;
+}
+
+.skeleton-line {
+    height: 1.5rem;
+    width: 60px;
+    background: linear-gradient(
+        90deg,
+        rgba(190, 190, 190, 0.2) 25%,
+        rgba(129, 129, 129, 0.24) 37%,
+        rgba(190, 190, 190, 0.2) 63%
+    );
+    background-size: 400% 100%;
+    animation: shimmer 1.4s ease infinite;
+    border-radius: 4px;
+
+    html.dark & {
+        background: linear-gradient(
+            90deg,
+            rgba(255, 255, 255, 0.1) 25%,
+            rgba(255, 255, 255, 0.15) 37%,
+            rgba(255, 255, 255, 0.1) 63%
+        );
+    }
+}
+
+@keyframes shimmer {
+    0% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0 50%;
+    }
+}
 </style>
diff --git a/ui/src/components/dashboard/components/charts/executions/Namespace.vue b/ui/src/components/dashboard/components/charts/executions/Namespace.vue
@@ -8,7 +8,10 @@
                         {{ t("dashboard.per_namespace") }}
                     </span>
                 </p>
-                <p class="m-0 fs-2">
+                <div v-if="loading" class="loading-skeleton">
+                    <div class="skeleton-line" />
+                </div>
+                <p v-else class="m-0 fs-2 fw-bold">
                     {{ total }}
                 </p>
             </div>
@@ -52,6 +55,11 @@
             type: Number,
             required: true,
         },
+        loading:{
+            type:Boolean , 
+            required:true , 
+            default: false
+        }
     });
 
     const parsedData = computed(() => {
@@ -162,4 +170,41 @@ $height: 200px;
         color: $gray-300;
     }
 }
+.loading-skeleton {
+    height: 2rem;
+    display: flex;
+    align-items: center;
+}
+
+.skeleton-line {
+    height: 1.5rem;
+    width: 60px;
+    background: linear-gradient(
+        90deg,
+        rgba(190, 190, 190, 0.2) 25%,
+        rgba(129, 129, 129, 0.24) 37%,
+        rgba(190, 190, 190, 0.2) 63%
+    );
+    background-size: 400% 100%;
+    animation: shimmer 1.4s ease infinite;
+    border-radius: 4px;
+
+    html.dark & {
+        background: linear-gradient(
+            90deg,
+            rgba(255, 255, 255, 0.1) 25%,
+            rgba(255, 255, 255, 0.15) 37%,
+            rgba(255, 255, 255, 0.1) 63%
+        );
+    }
+}
+
+@keyframes shimmer {
+    0% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0 50%;
+    }
+}
 </style>