tweak

jdbc-mysql/src/main/java/io/kestra/runner/mysql/MysqlQueue.java

@@ -36,7 +36,7 @@ public class MysqlQueue<T> extends JdbcQueue<T> {
                 AbstractJdbcRepository.field("offset")
             )
             // force using the dedicated index, or it made a scan of the PK index
-            .from(this.table.useIndex("ix_type__offset"))
+            .from(this.table.useIndex("ix_type__consumers"))
             .where(AbstractJdbcRepository.field("type").eq(queueType()))
             .and(DSL.or(List.of(
                 AbstractJdbcRepository.field("consumers").isNull(),

ui/src/components/admin/stats/EditionComparator.vue

@@ -1,6 +1,6 @@
 <template>
     <el-row :gutter="32">
-        <el-col :span="8" v-for="characteristics in editionCharacteristics" :key="characteristics.name">
+        <el-col :xs="24" :md="8" v-for="characteristics in editionCharacteristics" :key="characteristics.name" class="edition-col">
             <EditionCharacteristics
                 class="h-100"
                 :name="characteristics.name"
@@ -114,4 +114,18 @@
             }
         }
     ]
-</script>
+</script>
+
+<style scoped lang="scss">
+.edition-col {
+    margin-bottom: 2rem;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+
+    @media (min-width: 992px) {
+        margin-bottom: 0;
+    }
+}
+</style>

ui/src/components/admin/stats/Usages.vue

@@ -184,7 +184,9 @@
         display: flex;
         align-items: center;
         gap: 1rem;
-        height: 2rem;
+        min-height: 2rem;
+        padding-top: 0.25rem;
+        padding-bottom: 0.25rem;
 
         .usage-icon {
             display: flex;
@@ -192,6 +194,7 @@
             justify-content: center;
             width: 24px;
             height: 24px;
+            flex-shrink: 0;
 
             :deep(.material-design-icon__svg) {
                 font-size: 24px;
@@ -201,11 +204,9 @@
         }
 
         .usage-label {
-            line-height: 1;
-            display: flex;
-            align-items: center;
             font-size: 14px;
             color: var(--ks-content-primary);
+            line-height: 1.2;
         }
 
         .usage-divider {
@@ -215,15 +216,16 @@
         }
 
         .usage-value {
-            line-height: 1;
-            display: flex;
-            align-items: center;
+            font-size: 14px;
+            line-height: 1.2;
+            white-space: nowrap;
         }
 
         .el-button {
             color: var(--ks-content-primary);
             display: flex;
             align-items: center;
+            flex-shrink: 0;
         }
     }
 }

ui/src/components/flows/TriggerAvatar.vue

@@ -3,15 +3,17 @@
         <span v-for="trigger in triggers" :key="uid(trigger)" :id="uid(trigger)">
             <template v-if="trigger.disabled === undefined || trigger.disabled === false">
                 <el-popover
+                    :ref="(el: any) => setPopoverRef(el, trigger)"
                     placement="left"
                     :persistent="true"
                     :title="`${$t('trigger details')}: ${trigger ? trigger.id : ''}`"
                     :width="500"
                     transition=""
                     :hideAfter="0"
+                    @show="handlePopoverShow"
                 >
                     <template #reference>
-                        <el-button @click="copyLink(trigger)" size="small">
+                        <el-button class="trigger-icon" @click="copyLink(trigger)" size="small">
                             <TaskIcon :onlyIcon="true" :cls="trigger?.type" :icons="pluginsStore.icons" />
                         </el-button>
                     </template>
@@ -24,7 +26,7 @@
     </div>
 </template>
 <script setup lang="ts">
-    import {computed} from "vue";
+    import {computed, ref, nextTick} from "vue";
     import {useRoute} from "vue-router";
     import {usePluginsStore} from "../../stores/plugins";
     import Utils from "../../utils/utils";
@@ -61,6 +63,8 @@
     const pluginsStore = usePluginsStore();
     const route = useRoute();
 
+    const popoverRefs = ref<Map<string, any>>(new Map());
+
     const triggers = computed<Trigger[]>(() => {
         if (props.flow && props.flow.triggers) {
             return props.flow.triggers.filter(
@@ -77,6 +81,22 @@
         return (props.flow ? props.flow.namespace + "-" + props.flow.id : props.execution?.id) + "-" + trigger.id;
     }
 
+    function setPopoverRef(el: any, trigger: Trigger) {
+        if (el) {
+            popoverRefs.value.set(uid(trigger), el);
+        }
+    }
+
+    function handlePopoverShow() {
+        nextTick(() => {
+            popoverRefs.value.forEach((popover) => {
+                if (popover?.popperRef?.popperInstanceRef) {
+                    popover.popperRef.popperInstanceRef.update();
+                }
+            });
+        });
+    }
+
     const {t} = useI18n();
     const toast = useToast();
 
@@ -99,12 +119,18 @@
 <style scoped lang="scss">
     .trigger {
         max-width: 180px;
-        overflow-x: auto;
+        display: flex;
+        justify-content: center;
     }
 
-    .el-button {
+    .trigger-icon {
         display: inline-flex !important;
+        align-items: center;
         margin-right: .25rem;
+        border: none;
+        background-color: transparent;
+        padding: 2px;
+        cursor: default;
     }
 
     :deep(div.wrapper) {