From fd517a54a9f37c5dfc6e60e13f14012e52348904 Mon Sep 17 00:00:00 2001
From: Mradul <mradul9936@gmail.com>
Date: Fri, 18 Oct 2024 02:39:00 +0530
Subject: [PATCH 1/5] made changes to ui/src/components/plugins/toe.vue inside
 ui

---
 ui/src/components/plugins/Toc.vue | 135 +++++++++++++++++-------------
 1 file changed, 79 insertions(+), 56 deletions(-)

diff --git a/ui/src/components/plugins/Toc.vue b/ui/src/components/plugins/Toc.vue
index eaf8b24c72..86b5c1cb41 100644
--- a/ui/src/components/plugins/Toc.vue
+++ b/ui/src/components/plugins/Toc.vue
@@ -7,26 +7,24 @@
             clearable
         />
         <el-collapse accordion v-model="activeNames">
-            <template
-                :key="plugin.title"
-                v-for="(plugin) in sortedPlugins(pluginsList)"
-            >
+            <template :key="plugin.title" v-for="(plugin) in sortedPlugins(pluginsList)">
                 <el-collapse-item
                     v-if="isVisible(plugin)"
                     :name="plugin.group"
                     :title="plugin.title.capitalize()"
                     :key="plugin.group"
+                    :ref="`plugin-${plugin.group}`"
                 >
                     <ul class="toc-h3">
                         <li v-for="(types, namespace) in group(plugin, plugin.tasks)" :key="namespace">
                             <h6>{{ namespace }}</h6>
                             <ul class="toc-h4">
-                                <li v-for="(classes, type) in types" :key="type+'-'+ namespace">
+                                <li v-for="(classes, type) in types" :key="type + '-' + namespace">
                                     <h6>{{ $filters.cap(type) }}</h6>
                                     <ul class="section-nav toc-h5">
                                         <li v-for="cls in classes" :key="cls">
                                             <router-link
-                                                @click="$emit('routerChange')"
+                                                @click="$emit('routerChange'); handlePluginChange(namespace)"
                                                 :to="{name: 'plugins/view', params: {cls: namespace + '.' + cls}}"
                                             >
                                                 <div class="icon">
@@ -38,7 +36,8 @@
                                                 </div>
                                                 <span
                                                     :class="$route.params.cls === (namespace + '.' + cls) ? 'selected mx-2' : 'mx-2'"
-                                                >{{ cls }}</span>
+                                                >{{
+                                                    cls }}</span>
                                             </router-link>
                                         </li>
                                     </ul>
@@ -66,11 +65,14 @@
             }
         },
         mounted() {
+
             this.plugins.forEach(plugin => {
                 if (plugin.tasks.includes(this.$route.params.cls)) {
                     this.activeNames = [plugin.group]
+                    localStorage.setItem("activePlugin", plugin.group);
                 }
             })
+            this.scrollToActivePlugin();
         },
         components: {
             TaskIcon
@@ -117,6 +119,26 @@
             }
         },
         methods: {
+
+            scrollToActivePlugin() {
+                const activePlugin = localStorage.getItem("activePlugin");
+                if (activePlugin) {
+                    // Use Vue's $refs to scroll to the specific plugin group
+                    this.$nextTick(() => {
+                        const pluginElement = this.$refs[`plugin-${activePlugin}`];
+                        if (pluginElement && pluginElement[0]) {
+                            pluginElement[0].$el.scrollIntoView({behavior: "smooth", block: "start"});
+                        }
+                    });
+                }
+            },
+
+            // When user navigates to a different plugin, save the new plugin group to localStorage
+            handlePluginChange(pluginGroup) {
+                this.activeNames = [pluginGroup];
+                localStorage.setItem("activePlugin", pluginGroup); // Save to localStorage
+            },
+
             sortedPlugins(plugins) {
                 return plugins
                     .sort((a, b) => {
@@ -158,70 +180,71 @@
 </script>
 
 <style lang="scss">
-    .plugins-list {
-        &.enhance-readability {
-            padding: calc(var(--spacer) * 1.5);
-            background-color: var(--bs-gray-100);
-        }
+.plugins-list {
+    &.enhance-readability {
+        padding: calc(var(--spacer) * 1.5);
+        background-color: var(--bs-gray-100);
+    }
 
-        &::-webkit-scrollbar {
-            width: 2px;
-        }
+    &::-webkit-scrollbar {
+        width: 2px;
+    }
 
-        &::-webkit-scrollbar-track {
-            -webkit-border-radius: 10px;
-        }
+    &::-webkit-scrollbar-track {
+        -webkit-border-radius: 10px;
+    }
 
-        &::-webkit-scrollbar-thumb {
-            -webkit-border-radius: 10px;
-            background: var(--bs-gray-600);
-        }
+    &::-webkit-scrollbar-thumb {
+        -webkit-border-radius: 10px;
+        background: var(--bs-gray-600);
+    }
 
-        .el-collapse-item__header {
-            font-size: 0.875rem;
-        }
+    .el-collapse-item__header {
+        font-size: 0.875rem;
+    }
+
+    ul {
+        list-style: none;
+        padding-inline-start: 0;
+        margin-bottom: 0;
+        font-size: var(--font-size-xs);
+        margin-left: calc(var(--spacer) / 2);
+    }
+
+    h6,
+    a {
+        word-break: break-all;
+        color: var(--el-collapse-header-text-color);
+    }
 
-        ul {
-            list-style: none;
-            padding-inline-start: 0;
-            margin-bottom: 0;
-            font-size: var(--font-size-xs);
-            margin-left: calc(var(--spacer) / 2);
+    .toc-h3 {
+        .icon {
+            width: var(--font-size-sm);
+            height: var(--font-size-sm);
+            display: inline-block;
+            position: relative;
         }
 
-        h6, a {
-            word-break: break-all;
-            color: var(--el-collapse-header-text-color);
+        h6 {
+            font-size: 1.1em;
         }
 
-        .toc-h3 {
-            .icon {
-                width: var(--font-size-sm);
-                height: var(--font-size-sm);
-                display: inline-block;
-                position: relative;
-            }
+        .toc-h4 {
+            margin-left: var(--spacer);
 
             h6 {
-                font-size: 1.1em;
+                font-size: var(--font-size-sm);
+                margin-bottom: calc(var(--spacer) / 2);
             }
 
-            .toc-h4 {
-                margin-left: var(--spacer);
-
-                h6 {
-                    font-size: var(--font-size-sm);
-                    margin-bottom: calc(var(--spacer) / 2);
-                }
-
-                li {
-                    margin-bottom: calc(var(--spacer) / 2);
-                }
+            li {
+                margin-bottom: calc(var(--spacer) / 2);
             }
         }
     }
+}
 
-    .selected {
-        color: var(--bs-purple);
-    }
+.selected {
+    color: var(--bs-purple);
+}
 </style>

From ed892123a7edb8aa471929d0e075df7252cce356 Mon Sep 17 00:00:00 2001
From: Mradul <mradul9936@gmail.com>
Date: Sun, 20 Oct 2024 02:10:14 +0530
Subject: [PATCH 2/5] made changes to trigger.vue

---
 ui/src/components/admin/Triggers.vue | 125 ++++++++++-----------------
 1 file changed, 47 insertions(+), 78 deletions(-)

diff --git a/ui/src/components/admin/Triggers.vue b/ui/src/components/admin/Triggers.vue
index 62a4d8439c..1e6fca2739 100644
--- a/ui/src/components/admin/Triggers.vue
+++ b/ui/src/components/admin/Triggers.vue
@@ -80,18 +80,14 @@
                             </bulk-select>
                         </template>
                         <el-table-column
-                            prop="triggerId"
+                            v-for="column in visibleColumns"
+                            :key="column.prop"
+                            :prop="column.prop"
                             sortable="custom"
                             :sort-orders="['ascending', 'descending']"
-                            :label="$t('id')"
-                        />
-                        <el-table-column
-                            prop="flowId"
-                            sortable="custom"
-                            :sort-orders="['ascending', 'descending']"
-                            :label="$t('flow')"
+                            :label="column.label"
                         >
-                            <template #default="scope">
+                            <template v-if="column.prop === 'flowId'" #default="scope">
                                 <router-link
                                     :to="{name: 'flows/update', params: {namespace: scope.row.namespace, id: scope.row.flowId}}"
                                 >
@@ -103,20 +99,7 @@
                                     :title="scope.row.namespace + '.' + scope.row.flowId"
                                 />
                             </template>
-                        </el-table-column>
-                        <el-table-column
-                            prop="namespace"
-                            sortable="custom"
-                            :sort-orders="['ascending', 'descending']"
-                            :label="$t('namespace')"
-                        >
-                            <template #default="scope">
-                                {{ $filters.invisibleSpace(scope.row.namespace) }}
-                            </template>
-                        </el-table-column>
-
-                        <el-table-column :label="$t('current execution')">
-                            <template #default="scope">
+                            <template v-else-if="column.prop === 'executionId'" #default="scope">
                                 <router-link
                                     v-if="scope.row.executionId"
                                     :to="{name: 'executions/update', params: {namespace: scope.row.namespace, flowId: scope.row.flowId, id: scope.row.executionId}}"
@@ -124,44 +107,41 @@
                                     <id :value="scope.row.executionId" :shrink="true" />
                                 </router-link>
                             </template>
-                        </el-table-column>
-
-                        <el-table-column :label="$t('state')">
-                            <template #default="scope">
+                            <template v-else-if="column.prop === 'executionCurrentState'" #default="scope">
                                 <status
                                     v-if="scope.row.executionCurrentState"
                                     :status="scope.row.executionCurrentState"
                                     size="small"
                                 />
                             </template>
-                        </el-table-column>
-                        <el-table-column prop="workerId" :label="$t('workerId')">
-                            <template #default="scope">
-                                <id
-                                    :value="scope.row.workerId"
-                                    :shrink="true"
-                                />
+                            <template v-else-if="column.prop === 'workerId'" #default="scope">
+                                <id :value="scope.row.workerId" :shrink="true" />
                             </template>
-                        </el-table-column>
-                        <el-table-column :label="$t('date')">
-                            <template #default="scope">
+                            <template v-else-if="column.prop === 'date'" #default="scope">
                                 <date-ago :inverted="true" :date="scope.row.date" />
                             </template>
-                        </el-table-column>
-                        <el-table-column :label="$t('updated date')">
-                            <template #default="scope">
+                            <template v-else-if="column.prop === 'updatedDate'" #default="scope">
                                 <date-ago :inverted="true" :date="scope.row.updatedDate" />
                             </template>
-                        </el-table-column>
-                        <el-table-column :label="$t('next execution date')">
-                            <template #default="scope">
+                            <template v-else-if="column.prop === 'nextExecutionDate'" #default="scope">
                                 <date-ago :inverted="true" :date="scope.row.nextExecutionDate" />
                             </template>
-                        </el-table-column>
-                        <el-table-column :label="$t('evaluation lock date')">
-                            <template #default="scope">
+                            <template v-else-if="column.prop === 'evaluateRunningDate'" #default="scope">
                                 <date-ago :inverted="true" :date="scope.row.evaluateRunningDate" />
                             </template>
+                            <template v-else-if="column.prop === 'backfill'" #default="scope">
+                                <span v-if="scope.row.backfill">
+                                    <el-tooltip v-if="!scope.row.backfill.paused" :content="$t('backfill running')" effect="light">
+                                        <play-box />
+                                    </el-tooltip>
+                                    <el-tooltip v-else :content="$t('backfill paused')">
+                                        <pause-box />
+                                    </el-tooltip>
+                                </span>
+                            </template>
+                            <template v-else #default="scope">
+                                {{ scope.row[column.prop] }}
+                            </template>
                         </el-table-column>
                         <el-table-column
                             v-if="user.hasAnyAction(permission.EXECUTION, action.UPDATE)"
@@ -197,36 +177,6 @@
                                 </el-button>
                             </template>
                         </el-table-column>
-
-                        <el-table-column :label="$t('backfill')" column-key="backfill">
-                            <template #default="scope">
-                                <span v-if="scope.row.backfill">
-                                    <el-tooltip v-if="!scope.row.backfill.paused" :content="$t('backfill running')" effect="light">
-                                        <play-box />
-                                    </el-tooltip>
-                                    <el-tooltip v-else :content="$t('backfill paused')">
-                                        <pause-box />
-                                    </el-tooltip>
-                                </span>
-                            </template>
-                        </el-table-column>
-
-                        <el-table-column column-key="disable" class-name="row-action">
-                            <template #default="scope">
-                                <el-switch
-                                    v-if="!scope.row.missingSource"
-                                    size="small"
-                                    :active-text="$t('enabled')"
-                                    :model-value="!scope.row.disabled"
-                                    @change="setDisabled(scope.row, $event)"
-                                    class="switch-text"
-                                    :active-action-icon="Check"
-                                />
-                                <el-tooltip v-else :content="'flow source not found'" effect="light">
-                                    <AlertCircle class="trigger-issue-icon" />
-                                </el-tooltip>
-                            </template>
-                        </el-table-column>
                     </select-table>
                 </template>
             </data-table>
@@ -253,8 +203,8 @@
     import permission from "../../models/permission";
     import action from "../../models/action";
     import TopNavBar from "../layout/TopNavBar.vue";
-    import Check from "vue-material-design-icons/Check.vue";
-    import AlertCircle from "vue-material-design-icons/AlertCircle.vue";
+                        // import Check from "vue-material-design-icons/Check.vue";
+                        // import AlertCircle from "vue-material-design-icons/AlertCircle.vue";
     import SelectTable from "../layout/SelectTable.vue";
     import BulkSelect from "../layout/BulkSelect.vue";
     import Restart from "vue-material-design-icons/Restart.vue";
@@ -475,6 +425,25 @@
 
                 const disabled = this.state === "DISABLED" ? true : false;
                 return all.filter(trigger => trigger.disabled === disabled);
+            },
+            visibleColumns() {
+                const columns = [
+                    {prop: "triggerId", label: this.$t("id")},
+                    {prop: "flowId", label: this.$t("flow")},
+                    {prop: "namespace", label: this.$t("namespace")},
+                    {prop: "executionId", label: this.$t("current execution")},
+                    {prop: "executionCurrentState", label: this.$t("state")},
+                    {prop: "workerId", label: this.$t("workerId")},
+                    {prop: "date", label: this.$t("date")},
+                    {prop: "updatedDate", label: this.$t("updated date")},
+                    {prop: "nextExecutionDate", label: this.$t("next execution date")},
+                    {prop: "evaluateRunningDate", label: this.$t("evaluation lock date")},
+                    {prop: "backfill", label: this.$t("backfill")}
+                ];
+
+                return columns.filter(column => {
+                    return this.triggersMerged.some(trigger => trigger[column.prop]);
+                });
             }
         }
     };

From 57c0b6547a31cc327f05ca264ffa35b69a976824 Mon Sep 17 00:00:00 2001
From: Mradul <mradul9936@gmail.com>
Date: Thu, 24 Oct 2024 03:00:28 +0530
Subject: [PATCH 3/5] Revert "made changes to trigger.vue"

This reverts commit ed892123a7edb8aa471929d0e075df7252cce356.
---
 ui/src/components/admin/Triggers.vue | 125 +++++++++++++++++----------
 1 file changed, 78 insertions(+), 47 deletions(-)

diff --git a/ui/src/components/admin/Triggers.vue b/ui/src/components/admin/Triggers.vue
index 1e6fca2739..62a4d8439c 100644
--- a/ui/src/components/admin/Triggers.vue
+++ b/ui/src/components/admin/Triggers.vue
@@ -80,14 +80,18 @@
                             </bulk-select>
                         </template>
                         <el-table-column
-                            v-for="column in visibleColumns"
-                            :key="column.prop"
-                            :prop="column.prop"
+                            prop="triggerId"
                             sortable="custom"
                             :sort-orders="['ascending', 'descending']"
-                            :label="column.label"
+                            :label="$t('id')"
+                        />
+                        <el-table-column
+                            prop="flowId"
+                            sortable="custom"
+                            :sort-orders="['ascending', 'descending']"
+                            :label="$t('flow')"
                         >
-                            <template v-if="column.prop === 'flowId'" #default="scope">
+                            <template #default="scope">
                                 <router-link
                                     :to="{name: 'flows/update', params: {namespace: scope.row.namespace, id: scope.row.flowId}}"
                                 >
@@ -99,7 +103,20 @@
                                     :title="scope.row.namespace + '.' + scope.row.flowId"
                                 />
                             </template>
-                            <template v-else-if="column.prop === 'executionId'" #default="scope">
+                        </el-table-column>
+                        <el-table-column
+                            prop="namespace"
+                            sortable="custom"
+                            :sort-orders="['ascending', 'descending']"
+                            :label="$t('namespace')"
+                        >
+                            <template #default="scope">
+                                {{ $filters.invisibleSpace(scope.row.namespace) }}
+                            </template>
+                        </el-table-column>
+
+                        <el-table-column :label="$t('current execution')">
+                            <template #default="scope">
                                 <router-link
                                     v-if="scope.row.executionId"
                                     :to="{name: 'executions/update', params: {namespace: scope.row.namespace, flowId: scope.row.flowId, id: scope.row.executionId}}"
@@ -107,41 +124,44 @@
                                     <id :value="scope.row.executionId" :shrink="true" />
                                 </router-link>
                             </template>
-                            <template v-else-if="column.prop === 'executionCurrentState'" #default="scope">
+                        </el-table-column>
+
+                        <el-table-column :label="$t('state')">
+                            <template #default="scope">
                                 <status
                                     v-if="scope.row.executionCurrentState"
                                     :status="scope.row.executionCurrentState"
                                     size="small"
                                 />
                             </template>
-                            <template v-else-if="column.prop === 'workerId'" #default="scope">
-                                <id :value="scope.row.workerId" :shrink="true" />
+                        </el-table-column>
+                        <el-table-column prop="workerId" :label="$t('workerId')">
+                            <template #default="scope">
+                                <id
+                                    :value="scope.row.workerId"
+                                    :shrink="true"
+                                />
                             </template>
-                            <template v-else-if="column.prop === 'date'" #default="scope">
+                        </el-table-column>
+                        <el-table-column :label="$t('date')">
+                            <template #default="scope">
                                 <date-ago :inverted="true" :date="scope.row.date" />
                             </template>
-                            <template v-else-if="column.prop === 'updatedDate'" #default="scope">
+                        </el-table-column>
+                        <el-table-column :label="$t('updated date')">
+                            <template #default="scope">
                                 <date-ago :inverted="true" :date="scope.row.updatedDate" />
                             </template>
-                            <template v-else-if="column.prop === 'nextExecutionDate'" #default="scope">
+                        </el-table-column>
+                        <el-table-column :label="$t('next execution date')">
+                            <template #default="scope">
                                 <date-ago :inverted="true" :date="scope.row.nextExecutionDate" />
                             </template>
-                            <template v-else-if="column.prop === 'evaluateRunningDate'" #default="scope">
+                        </el-table-column>
+                        <el-table-column :label="$t('evaluation lock date')">
+                            <template #default="scope">
                                 <date-ago :inverted="true" :date="scope.row.evaluateRunningDate" />
                             </template>
-                            <template v-else-if="column.prop === 'backfill'" #default="scope">
-                                <span v-if="scope.row.backfill">
-                                    <el-tooltip v-if="!scope.row.backfill.paused" :content="$t('backfill running')" effect="light">
-                                        <play-box />
-                                    </el-tooltip>
-                                    <el-tooltip v-else :content="$t('backfill paused')">
-                                        <pause-box />
-                                    </el-tooltip>
-                                </span>
-                            </template>
-                            <template v-else #default="scope">
-                                {{ scope.row[column.prop] }}
-                            </template>
                         </el-table-column>
                         <el-table-column
                             v-if="user.hasAnyAction(permission.EXECUTION, action.UPDATE)"
@@ -177,6 +197,36 @@
                                 </el-button>
                             </template>
                         </el-table-column>
+
+                        <el-table-column :label="$t('backfill')" column-key="backfill">
+                            <template #default="scope">
+                                <span v-if="scope.row.backfill">
+                                    <el-tooltip v-if="!scope.row.backfill.paused" :content="$t('backfill running')" effect="light">
+                                        <play-box />
+                                    </el-tooltip>
+                                    <el-tooltip v-else :content="$t('backfill paused')">
+                                        <pause-box />
+                                    </el-tooltip>
+                                </span>
+                            </template>
+                        </el-table-column>
+
+                        <el-table-column column-key="disable" class-name="row-action">
+                            <template #default="scope">
+                                <el-switch
+                                    v-if="!scope.row.missingSource"
+                                    size="small"
+                                    :active-text="$t('enabled')"
+                                    :model-value="!scope.row.disabled"
+                                    @change="setDisabled(scope.row, $event)"
+                                    class="switch-text"
+                                    :active-action-icon="Check"
+                                />
+                                <el-tooltip v-else :content="'flow source not found'" effect="light">
+                                    <AlertCircle class="trigger-issue-icon" />
+                                </el-tooltip>
+                            </template>
+                        </el-table-column>
                     </select-table>
                 </template>
             </data-table>
@@ -203,8 +253,8 @@
     import permission from "../../models/permission";
     import action from "../../models/action";
     import TopNavBar from "../layout/TopNavBar.vue";
-                        // import Check from "vue-material-design-icons/Check.vue";
-                        // import AlertCircle from "vue-material-design-icons/AlertCircle.vue";
+    import Check from "vue-material-design-icons/Check.vue";
+    import AlertCircle from "vue-material-design-icons/AlertCircle.vue";
     import SelectTable from "../layout/SelectTable.vue";
     import BulkSelect from "../layout/BulkSelect.vue";
     import Restart from "vue-material-design-icons/Restart.vue";
@@ -425,25 +475,6 @@
 
                 const disabled = this.state === "DISABLED" ? true : false;
                 return all.filter(trigger => trigger.disabled === disabled);
-            },
-            visibleColumns() {
-                const columns = [
-                    {prop: "triggerId", label: this.$t("id")},
-                    {prop: "flowId", label: this.$t("flow")},
-                    {prop: "namespace", label: this.$t("namespace")},
-                    {prop: "executionId", label: this.$t("current execution")},
-                    {prop: "executionCurrentState", label: this.$t("state")},
-                    {prop: "workerId", label: this.$t("workerId")},
-                    {prop: "date", label: this.$t("date")},
-                    {prop: "updatedDate", label: this.$t("updated date")},
-                    {prop: "nextExecutionDate", label: this.$t("next execution date")},
-                    {prop: "evaluateRunningDate", label: this.$t("evaluation lock date")},
-                    {prop: "backfill", label: this.$t("backfill")}
-                ];
-
-                return columns.filter(column => {
-                    return this.triggersMerged.some(trigger => trigger[column.prop]);
-                });
             }
         }
     };

From b4b14739771ca8f148e0a40e48dc29123ae830ab Mon Sep 17 00:00:00 2001
From: Mradul <mradul9936@gmail.com>
Date: Thu, 24 Oct 2024 03:45:49 +0530
Subject: [PATCH 4/5] updated  ui/src/componenets/admin

---
 ui/src/components/admin/Triggers.vue | 37 ++++++++++++++++++++++------
 1 file changed, 30 insertions(+), 7 deletions(-)

diff --git a/ui/src/components/admin/Triggers.vue b/ui/src/components/admin/Triggers.vue
index 62a4d8439c..f37c2760da 100644
--- a/ui/src/components/admin/Triggers.vue
+++ b/ui/src/components/admin/Triggers.vue
@@ -80,12 +80,14 @@
                             </bulk-select>
                         </template>
                         <el-table-column
+                            v-if="visibleColumns.triggerId"
                             prop="triggerId"
                             sortable="custom"
                             :sort-orders="['ascending', 'descending']"
                             :label="$t('id')"
                         />
                         <el-table-column
+                            v-if="visibleColumns.flowId"
                             prop="flowId"
                             sortable="custom"
                             :sort-orders="['ascending', 'descending']"
@@ -105,6 +107,7 @@
                             </template>
                         </el-table-column>
                         <el-table-column
+                            v-if="visibleColumns.namespace"
                             prop="namespace"
                             sortable="custom"
                             :sort-orders="['ascending', 'descending']"
@@ -115,7 +118,7 @@
                             </template>
                         </el-table-column>
 
-                        <el-table-column :label="$t('current execution')">
+                        <el-table-column v-if="visibleColumns.executionId" :label="$t('current execution')">
                             <template #default="scope">
                                 <router-link
                                     v-if="scope.row.executionId"
@@ -126,7 +129,7 @@
                             </template>
                         </el-table-column>
 
-                        <el-table-column :label="$t('state')">
+                        <el-table-column v-if="visibleColumns.executionCurrentState" :label="$t('state')">
                             <template #default="scope">
                                 <status
                                     v-if="scope.row.executionCurrentState"
@@ -135,7 +138,7 @@
                                 />
                             </template>
                         </el-table-column>
-                        <el-table-column prop="workerId" :label="$t('workerId')">
+                        <el-table-column v-if="visibleColumns.workerId" prop="workerId" :label="$t('workerId')">
                             <template #default="scope">
                                 <id
                                     :value="scope.row.workerId"
@@ -143,22 +146,22 @@
                                 />
                             </template>
                         </el-table-column>
-                        <el-table-column :label="$t('date')">
+                        <el-table-column v-if="visibleColumns.date" :label="$t('date')">
                             <template #default="scope">
                                 <date-ago :inverted="true" :date="scope.row.date" />
                             </template>
                         </el-table-column>
-                        <el-table-column :label="$t('updated date')">
+                        <el-table-column v-if="visibleColumns.updatedDate" :label="$t('updated date')">
                             <template #default="scope">
                                 <date-ago :inverted="true" :date="scope.row.updatedDate" />
                             </template>
                         </el-table-column>
-                        <el-table-column :label="$t('next execution date')">
+                        <el-table-column v-if="visibleColumns.nextExecutionDate" :label="$t('next execution date')">
                             <template #default="scope">
                                 <date-ago :inverted="true" :date="scope.row.nextExecutionDate" />
                             </template>
                         </el-table-column>
-                        <el-table-column :label="$t('evaluation lock date')">
+                        <el-table-column v-if="visibleColumns.evaluateRunningDate" :label="$t('evaluation lock date')">
                             <template #default="scope">
                                 <date-ago :inverted="true" :date="scope.row.evaluateRunningDate" />
                             </template>
@@ -475,6 +478,26 @@
 
                 const disabled = this.state === "DISABLED" ? true : false;
                 return all.filter(trigger => trigger.disabled === disabled);
+            },
+            visibleColumns() {
+                const columns = [
+                    {prop: "triggerId", label: this.$t("id")},
+                    {prop: "flowId", label: this.$t("flow")},
+                    {prop: "namespace", label: this.$t("namespace")},
+                    {prop: "executionId", label: this.$t("current execution")},
+                    {prop: "executionCurrentState", label: this.$t("state")},
+                    {prop: "workerId", label: this.$t("workerId")},
+                    {prop: "date", label: this.$t("date")},
+                    {prop: "updatedDate", label: this.$t("updated date")},
+                    {prop: "nextExecutionDate", label: this.$t("next execution date")},
+                    {prop: "evaluateRunningDate", label: this.$t("evaluation lock date")},
+                    {prop: "backfill", label: this.$t("backfill")}
+                ];
+
+                return columns.reduce((acc, column) => {
+                    acc[column.prop] = this.triggersMerged.some(trigger => trigger[column.prop]);
+                    return acc;
+                }, {});
             }
         }
     };

From 2a0793d8d1326ba89fb4b41c4d46dfa2e70b3d50 Mon Sep 17 00:00:00 2001
From: Mradul <mradul9936@gmail.com>
Date: Thu, 24 Oct 2024 03:52:40 +0530
Subject: [PATCH 5/5] update ui/src/compoenents/admin/triggers.vue

---
 ui/src/components/admin/Triggers.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui/src/components/admin/Triggers.vue b/ui/src/components/admin/Triggers.vue
index f37c2760da..090cb714d1 100644
--- a/ui/src/components/admin/Triggers.vue
+++ b/ui/src/components/admin/Triggers.vue
@@ -491,7 +491,6 @@
                     {prop: "updatedDate", label: this.$t("updated date")},
                     {prop: "nextExecutionDate", label: this.$t("next execution date")},
                     {prop: "evaluateRunningDate", label: this.$t("evaluation lock date")},
-                    {prop: "backfill", label: this.$t("backfill")}
                 ];
 
                 return columns.reduce((acc, column) => {