From 5daaeff2c4dc4ede46f4ccccf9a6e707ed9ef695 Mon Sep 17 00:00:00 2001
From: Piyush Bhaskar <102078527+Piyush-r-bhaskar@users.noreply.github.com>
Date: Tue, 7 Jan 2025 22:59:30 +0530
Subject: [PATCH 1/4] implemented the functionality.

---
 ui/src/components/executions/Executions.vue |  81 ++++---
 ui/src/components/executions/Properties.vue | 242 ++++++++++++++++++++
 ui/src/components/flows/Flows.vue           |  87 ++++++-
 ui/src/translations/en.json                 |   8 +-
 4 files changed, 380 insertions(+), 38 deletions(-)
 create mode 100644 ui/src/components/executions/Properties.vue

diff --git a/ui/src/components/executions/Executions.vue b/ui/src/components/executions/Executions.vue
index b9a420230eb..08f0eaa60c4 100644
--- a/ui/src/components/executions/Executions.vue
+++ b/ui/src/components/executions/Executions.vue
@@ -26,6 +26,13 @@
                         />
                     </li>
                 </template>
+                <li>
+                    <Properties 
+                        :columns="optionalColumns" 
+                        v-model="displayColumns"
+                        :storage-key="storageKey"
+                    />
+                </li>
             </ul>
         </template>
     </top-nav-bar>
@@ -164,8 +171,8 @@
                         </el-table-column>
 
                         <el-table-column
-                            prop="state.startDate"
                             v-if="displayColumn('state.startDate')"
+                            prop="state.startDate"
                             sortable="custom"
                             :sort-orders="['ascending', 'descending']"
                             :label="$t('start date')"
@@ -176,8 +183,8 @@
                         </el-table-column>
 
                         <el-table-column
-                            prop="state.endDate"
                             v-if="displayColumn('state.endDate')"
+                            prop="state.endDate"
                             sortable="custom"
                             :sort-orders="['ascending', 'descending']"
                             :label="$t('end date')"
@@ -188,8 +195,8 @@
                         </el-table-column>
 
                         <el-table-column
-                            prop="state.duration"
                             v-if="displayColumn('state.duration')"
+                            prop="state.duration"
                             sortable="custom"
                             :sort-orders="['ascending', 'descending']"
                             :label="$t('duration')"
@@ -234,8 +241,8 @@
                         </el-table-column>
 
                         <el-table-column
-                            prop="state.current"
                             v-if="displayColumn('state.current')"
+                            prop="state.current"
                             sortable="custom"
                             :sort-orders="['ascending', 'descending']"
                             :label="$t('state')"
@@ -246,6 +253,7 @@
                         </el-table-column>
 
                         <el-table-column
+                            v-if="displayColumn('flowRevision')"
                             prop="flowRevision"
                             :label="$t('revision')"
                             class-name="shrink"
@@ -256,8 +264,8 @@
                         </el-table-column>
 
                         <el-table-column
-                            prop="inputs"
                             v-if="displayColumn('inputs')"
+                            prop="inputs"
                             :label="$t('inputs')"
                             align="center"
                         >
@@ -272,8 +280,8 @@
                         </el-table-column>
 
                         <el-table-column
-                            prop="taskRunList.taskId"
                             v-if="displayColumn('taskRunList.taskId')"
+                            prop="taskRunList.taskId"
                             :label="$t('task id')"
                         >
                             <template #header="scope">
@@ -291,7 +299,7 @@
                             </template>
                         </el-table-column>
 
-                        <el-table-column column-key="action" class-name="row-action">
+                        <el-table-column v-if="displayColumn('action')" column-key="action" class-name="row-action">
                             <template #default="scope">
                                 <router-link
                                     :to="{name: 'executions/update', params: {namespace: scope.row.namespace, flowId: scope.row.flowId, id: scope.row.id}, query: {revision: scope.row.flowRevision}}"
@@ -365,6 +373,7 @@
     import KestraFilter from "../filter/KestraFilter.vue"
     import QueueFirstInLastOut from "vue-material-design-icons/QueueFirstInLastOut.vue";
     import RunFast from "vue-material-design-icons/RunFast.vue";
+    import Properties from "./Properties.vue";
 </script>
 
 <script>
@@ -460,57 +469,52 @@
                 showChart: ["true", null].includes(localStorage.getItem(storageKeys.SHOW_CHART)),
                 optionalColumns: [
                     {
-                        label: "start date",
+                        label: this.$t("start date"),
                         prop: "state.startDate",
                         default: true
                     },
                     {
-                        label: "end date",
+                        label: this.$t("end date"),
                         prop: "state.endDate",
                         default: true
                     },
                     {
-                        label: "duration",
+                        label: this.$t("duration"),
                         prop: "state.duration",
                         default: true
                     },
                     {
-                        label: "state",
+                        label: this.$t("state"),
                         prop: "state.current",
                         default: true
                     },
                     {
-                        label: "triggers",
-                        prop: "triggers",
-                        default: true
-                    },
-                    {
-                        label: "labels",
+                        label: this.$t("labels"),
                         prop: "labels",
                         default: true
                     },
                     {
-                        label: "inputs",
-                        prop: "inputs",
-                        default: false
-                    },
-                    {
-                        label: "namespace",
+                        label: this.$t("namespace"),
                         prop: "namespace",
                         default: true
                     },
                     {
-                        label: "flow",
+                        label: this.$t("flow"),
                         prop: "flowId",
                         default: true
                     },
                     {
-                        label: "revision",
+                        label: this.$t("revision"),
                         prop: "flowRevision",
                         default: false
                     },
                     {
-                        label: "task id",
+                        label: this.$t("inputs"),
+                        prop: "inputs",
+                        default: false
+                    },
+                    {
+                        label: this.$t("task id"),
                         prop: "taskRunList.taskId",
                         default: false
                     }
@@ -532,8 +536,19 @@
                 this.storageKey = storageKeys.DISPLAY_FLOW_EXECUTIONS_COLUMNS;
                 this.optionalColumns = this.optionalColumns.filter(col => col.prop !== "namespace" && col.prop !== "flowId")
             }
-            this.displayColumns = localStorage.getItem(this.storageKey)?.split(",")
-                || this.optionalColumns.filter(col => col.default).map(col => col.prop);
+            
+            // Load saved columns from localStorage
+            const savedColumns = localStorage.getItem(this.storageKey)?.split(",");
+            if (savedColumns) {
+                this.displayColumns = savedColumns;
+            } else {
+                // Use default columns if nothing is saved
+                this.displayColumns = this.optionalColumns
+                    .filter(col => col.default)
+                    .map(col => col.prop);
+                localStorage.setItem(this.storageKey, this.displayColumns.join(","));
+            }
+
             if (this.isConcurrency) {
                 this.emitStateCount([State.RUNNING, State.PAUSED])
             }
@@ -646,7 +661,11 @@
                 this.displayColumns = event;
             },
             displayColumn(column) {
-                return this.hidden ? !this.hidden.includes(column) : this.displayColumns.includes(column);
+                // Mandate showing the id column
+                if (column === "id") {
+                    return true;
+                }
+                return this.displayColumns.includes(column);
             },
             onShowChartChange(value) {
                 this.showChart = value;
@@ -952,6 +971,10 @@
                 }, false)).then(() => {
                     this.$emit("state-count", this.total);
                 });
+            },
+            updateDisplayColumns(columns) {
+                this.displayColumns = columns;
+                localStorage.setItem(this.storageKey, columns.join(","));
             }
         },
         watch: {
diff --git a/ui/src/components/executions/Properties.vue b/ui/src/components/executions/Properties.vue
new file mode 100644
index 00000000000..8de2b9b7fd8
--- /dev/null
+++ b/ui/src/components/executions/Properties.vue
@@ -0,0 +1,242 @@
+<template>
+    <el-button type="primary" :icon="TableColumn" @click.stop="toggleContainer">
+        {{ $t("properties.button") }}
+    </el-button>
+
+    <div 
+        class="position-absolute d-block p-3 rounded-3 container" 
+        :class="{visible: showContainer}" 
+        ref="containerRef"
+        @click.stop
+    >
+        <el-input
+            v-model="searchQuery"
+            size="large"
+            :placeholder="$t('properties.searchPlaceholder')"
+            :prefix-icon="Magnify"
+            class="rounded-2 w-100 mb-2"
+        />
+        <div class="pe-2 scrollable-container">
+            <div class="mt-2 shown-group" v-if="shownProperties.length > 0">
+                <div class="mb-2 group-title">
+                    {{ $t("properties.shownInTable") }}
+                </div>
+                <ul class="property-list list-style-none m-0 p-0" id="shown-list">
+                    <li v-for="property in filteredShownProperties" :key="property">
+                        <span class="property-name fw-bold">{{ getColumnLabel(property) }}</span>
+                        <div class="eye-icon" @click="toggleProperty(property, true)">
+                            <Eye />
+                        </div>
+                    </li>
+                </ul>
+            </div>
+            <el-divider />
+            <div class="hidden-group">
+                <div class="mb-2 group-title" id="hidden-title" v-if="hiddenProperties.length > 0">
+                    {{ $t("properties.hiddenInTable") }}
+                </div>
+                <ul class="property-list list-style-none m-0 p-0" id="hidden-list">
+                    <li v-for="property in filteredHiddenProperties" :key="property">
+                        <span class="property-name fw-bold">{{ getColumnLabel(property) }}</span>
+                        <div class="eye-icon" @click="toggleProperty(property, false)">
+                            <EyeOff />
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import {ref, computed, onMounted, onUnmounted} from "vue";
+    import TableColumn from "vue-material-design-icons/TableColumn.vue";
+    import Eye from "vue-material-design-icons/Eye.vue";
+    import Magnify from "vue-material-design-icons/Magnify.vue";
+    import EyeOff from "vue-material-design-icons/EyeOff.vue";
+
+    const props = defineProps({
+        columns: {
+            type: Array,
+            required: true
+        },
+        modelValue: {
+            type: Array,
+            required: true
+        },
+        storageKey: {
+            type: String,
+            required: true,
+            default: "default-storage-key"
+        }
+    });
+
+    const emit = defineEmits(["update:modelValue"]);
+
+    const containerRef = ref(null);
+    const showContainer = ref(false);
+    const searchQuery = ref("");
+
+    const handleClickOutside = (event) => {
+        if (containerRef.value && !containerRef.value.contains(event.target)) {
+            showContainer.value = false;
+        }
+    };
+
+    // Initialize from localStorage when component mounts
+    onMounted(() => {
+        const savedColumns = localStorage.getItem(props.storageKey)?.split(",") || [];
+        if (savedColumns.length > 0) {
+            emit("update:modelValue", savedColumns);
+        }
+        document.addEventListener("click", handleClickOutside);
+    });
+
+    onUnmounted(() => {
+        document.removeEventListener("click", handleClickOutside);
+    });
+
+    const shownProperties = computed(() => {
+        return props.modelValue;
+    });
+
+    const hiddenProperties = computed(() => {
+        return props.columns
+            .map(col => col.prop)
+            .filter(prop => !props.modelValue.includes(prop));
+    });
+
+    const toggleContainer = () => {
+        showContainer.value = !showContainer.value;
+    };
+
+    const toggleProperty = (prop, isShown) => {
+        const newValue = [...props.modelValue];
+        if (isShown) {
+            // Removing from shown
+            const index = newValue.indexOf(prop);
+            if (index > -1) {
+                newValue.splice(index, 1);
+            }
+        } else {
+            // Adding to shown
+            newValue.push(prop);
+        }
+        // Saving to localStorage immediately when changed
+        localStorage.setItem(props.storageKey, newValue.join(","));
+        emit("update:modelValue", newValue);
+    };
+
+    const filteredShownProperties = computed(() => {
+        return [...shownProperties.value].filter(prop =>
+            getColumnLabel(prop).toLowerCase().includes(searchQuery.value.toLowerCase())
+        );
+    });
+
+    const filteredHiddenProperties = computed(() => {
+        return [...hiddenProperties.value].filter(prop =>
+            getColumnLabel(prop).toLowerCase().includes(searchQuery.value.toLowerCase())
+        );
+    });
+
+    const getColumnLabel = (prop) => {
+        const column = props.columns.find(col => col.prop === prop);
+        return column ? column.label : prop;
+    };
+</script>
+
+<style scoped>
+.properties-button {
+  position: relative;
+}
+
+
+.container {
+  top: calc(100% + 2px);
+  right: 0;
+  width: 300px;
+  opacity: 0;
+  visibility: hidden;
+  background-color: var(--bs-gray-100);
+  border: 1px solid var(--ks-border-primary);
+  transform: translateY(-10px);
+  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; /* Add visibility to transition */
+}
+
+.container.visible {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.scrollable-container {
+  max-height: 350px;
+  overflow-y: scroll;
+  /* padding-right: 10px;  */
+}
+
+.scrollable-container::-webkit-scrollbar {
+  width: 6px;
+}
+
+.scrollable-container::-webkit-scrollbar-track {
+  background: var(--el-scrollbar-bg-color);
+  border-radius: 3px;
+}
+
+.scrollable-container::-webkit-scrollbar-thumb {
+  background: var(--el-color-primary);
+  border-radius: 3px;
+}
+
+.scrollable-container::-webkit-scrollbar-thumb:hover {
+  background: var(--el-color-primary-light-3);
+}
+
+.container-header {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.group-title {
+  color: var(--el-text-color-secondary);
+  font-size: var(--el-font-size-extra-small);
+}
+
+.property-list li {  
+  padding: 8px 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  line-height: 10px;
+}
+
+.property-name {
+  font-size: var(--el-font-size-small);
+  color: var(--el-text-color-regular);
+}
+
+:deep(.el-input__prefix-inner) {
+  color: var(--bs-gray-700);
+}
+
+.eye-icon {
+  cursor: pointer;
+  opacity: 0.8;
+  transition: opacity 0.2s;
+  color: var(--el-text-color-regular);
+  font-size: 16px;
+}
+
+.eye-icon:hover {
+  opacity: 1;
+}
+
+:deep(.el-input__inner::placeholder) {
+  color: var(--bs-gray-700);
+}
+
+</style>
diff --git a/ui/src/components/flows/Flows.vue b/ui/src/components/flows/Flows.vue
index 6a5f8ffa044..78ed1e52359 100644
--- a/ui/src/components/flows/Flows.vue
+++ b/ui/src/components/flows/Flows.vue
@@ -34,6 +34,13 @@
                         </el-button>
                     </router-link>
                 </li>
+                <li>
+                    <Properties 
+                        :columns="optionalColumns" 
+                        v-model="displayColumns"
+                        :storage-key="storageKey"
+                    />
+                </li>
             </ul>
         </template>
     </top-nav-bar>
@@ -122,13 +129,14 @@
                                 </template>
                             </el-table-column>
 
-                            <el-table-column :label="$t('labels')">
+                            <el-table-column v-if="displayColumn('labels')" :label="$t('labels')">
                                 <template #default="scope">
                                     <labels :labels="scope.row.labels" />
                                 </template>
                             </el-table-column>
 
                             <el-table-column
+                                v-if="displayColumn('namespace')"
                                 prop="namespace"
                                 sortable="custom"
                                 :sort-orders="['ascending', 'descending']"
@@ -137,9 +145,9 @@
                             />
 
                             <el-table-column
+                                v-if="displayColumn('state.startDate') && user.hasAny(permission.EXECUTION)"
                                 prop="state.startDate"
                                 :label="$t('last execution date')"
-                                v-if="user.hasAny(permission.EXECUTION)"
                             >
                                 <template #default="scope">
                                     <date-ago v-if="lastExecutionByFlowReady" :inverted="true" :date="getLastExecution(scope.row).startDate" />
@@ -147,9 +155,9 @@
                             </el-table-column>
 
                             <el-table-column
+                                v-if="displayColumn('state.current') && user.hasAny(permission.EXECUTION)"
                                 prop="state.current"
                                 :label="$t('last execution status')"
-                                v-if="user.hasAny(permission.EXECUTION)"
                             >
                                 <template #default="scope">
                                     <status v-if="lastExecutionByFlowReady && getLastExecution(scope.row).lastStatus" :status="getLastExecution(scope.row).lastStatus" size="small" />
@@ -157,9 +165,9 @@
                             </el-table-column>
 
                             <el-table-column
+                                v-if="displayColumn('state') && user.hasAny(permission.EXECUTION)"
                                 prop="state"
                                 :label="$t('execution statistics')"
-                                v-if="user.hasAny(permission.EXECUTION)"
                                 class-name="row-graph"
                             >
                                 <template #default="scope">
@@ -173,13 +181,13 @@
                                 </template>
                             </el-table-column>
 
-                            <el-table-column :label="$t('triggers')" class-name="row-action">
+                            <el-table-column v-if="displayColumn('triggers')" :label="$t('triggers')" class-name="row-action">
                                 <template #default="scope">
                                     <trigger-avatar :flow="scope.row" />
                                 </template>
                             </el-table-column>
 
-                            <el-table-column column-key="action" class-name="row-action">
+                            <el-table-column v-if="displayColumn('details')" column-key="action" class-name="row-action">
                                 <template #default="scope">
                                     <router-link
                                         :to="{name: 'flows/update', params : {namespace: scope.row.namespace, id: scope.row.id}}"
@@ -210,8 +218,8 @@
     import FileDocumentRemoveOutline from "vue-material-design-icons/FileDocumentRemoveOutline.vue";
     import FileDocumentCheckOutline from "vue-material-design-icons/FileDocumentCheckOutline.vue";
     import NoData from "../layout/NoData.vue";
-
-    import KestraFilter from "../filter/KestraFilter.vue"
+    import KestraFilter from "../filter/KestraFilter.vue";
+    import Properties from "../executions/Properties.vue"; // Import Properties component
 </script>
 
 <script>
@@ -274,8 +282,60 @@
                 dailyReady: false,
                 file: undefined,
                 showChart: ["true", null].includes(localStorage.getItem(storageKeys.SHOW_FLOWS_CHART)),
+                optionalColumns: [
+                    {
+                        label: this.$t("labels"),
+                        prop: "labels",
+                        default: true
+                    },
+                    {
+                        label: this.$t("namespace"),
+                        prop: "namespace",
+                        default: true
+                    },
+                    {
+                        label: this.$t("last execution date"),
+                        prop: "state.startDate",
+                        default: true
+                    },
+                    {
+                        label: this.$t("last execution status"),
+                        prop: "state.current",
+                        default: true
+                    },
+                    {
+                        label: this.$t("execution statistics"),
+                        prop: "state",
+                        default: true
+                    },
+                    {
+                        label: this.$t("triggers"),
+                        prop: "triggers",
+                        default: true
+                    },
+                    {
+                        label: this.$t("details"),
+                        prop: "details",
+                        default: true
+                    }
+                ],
+                displayColumns: [],
+                storageKey: storageKeys.DISPLAY_FLOWS_COLUMNS,
             };
         },
+        created() {
+            // Loading saved columns from localStorage
+            const savedColumns = localStorage.getItem(this.storageKey)?.split(",");
+            if (savedColumns) {
+                this.displayColumns = savedColumns;
+            } else {
+                // Using default columns if nothing is saved
+                this.displayColumns = this.optionalColumns
+                    .filter(col => col.default)
+                    .map(col => col.prop);
+                localStorage.setItem(this.storageKey, this.displayColumns.join(","));
+            }
+        },
         computed: {
             ...mapState("flow", ["flows", "total"]),
             ...mapState("stat", ["dailyGroupByFlow", "daily", "lastExecutions"]),
@@ -567,6 +627,17 @@
             },
             rowClasses(row) {
                 return row && row.row && row.row.disabled ? "disabled" : "";
+            },
+            displayColumn(column) {
+                // Mandate showing the id column
+                if (column === "id") {
+                    return true;
+                }
+                return this.displayColumns.includes(column);
+            },
+            updateDisplayColumns(columns) {
+                this.displayColumns = columns;
+                localStorage.setItem(this.storageKey, columns.join(","));
             }
         }
     };
diff --git a/ui/src/translations/en.json b/ui/src/translations/en.json
index 9cce7a229a1..dc460fd09fd 100644
--- a/ui/src/translations/en.json
+++ b/ui/src/translations/en.json
@@ -1052,6 +1052,12 @@
         "show_chart": "Show main chart"
       }
     },
-    "custom value": "Custom value"
+    "custom value": "Custom value",
+    "properties": {
+      "button": "Select Columns",
+      "searchPlaceholder": "Search for a property...",
+      "shownInTable": "Shown in Table",
+      "hiddenInTable": "Hidden in Table"
+    }
   }
 }
\ No newline at end of file

From 927805730a9717486c88a7f0f7d0eea5b3976e69 Mon Sep 17 00:00:00 2001
From: Piyush Bhaskar <102078527+Piyush-r-bhaskar@users.noreply.github.com>
Date: Wed, 8 Jan 2025 23:31:23 +0530
Subject: [PATCH 2/4] some more implementation.

---
 ui/src/components/executions/Executions.vue |  26 ++-
 ui/src/components/executions/Properties.vue | 233 +++++++++++---------
 ui/src/components/flows/Flows.vue           |  24 +-
 ui/src/components/layout/DataTable.vue      |   4 +-
 4 files changed, 160 insertions(+), 127 deletions(-)

diff --git a/ui/src/components/executions/Executions.vue b/ui/src/components/executions/Executions.vue
index 08f0eaa60c4..b5ddbca7bbe 100644
--- a/ui/src/components/executions/Executions.vue
+++ b/ui/src/components/executions/Executions.vue
@@ -26,13 +26,6 @@
                         />
                     </li>
                 </template>
-                <li>
-                    <Properties 
-                        :columns="optionalColumns" 
-                        v-model="displayColumns"
-                        :storage-key="storageKey"
-                    />
-                </li>
             </ul>
         </template>
     </top-nav-bar>
@@ -60,6 +53,15 @@
                 <el-card v-if="showStatChart()" shadow="never" class="mb-4">
                     <ExecutionsBar v-if="daily" :data="daily" :total="executionsCount" />
                 </el-card>
+                
+                <!-- Properties component moved here -->
+                <div v-if="executions.length" class="text-end mb-3">
+                    <Properties 
+                        :columns="optionalColumns" 
+                        v-model="displayColumns"
+                        :storage-key="storageKey"
+                    />
+                </div>
             </template>
 
             <template #table v-if="executions.length">
@@ -156,6 +158,7 @@
                     </template>
                     <template #default>
                         <el-table-column
+                            v-if="displayColumn('id')"
                             prop="id"
                             sortable="custom"
                             :sort-orders="['ascending', 'descending']"
@@ -468,6 +471,11 @@
                 recomputeInterval: false,
                 showChart: ["true", null].includes(localStorage.getItem(storageKeys.SHOW_CHART)),
                 optionalColumns: [
+                    {
+                        label: this.$t("id"),
+                        prop: "id",
+                        default: true
+                    },
                     {
                         label: this.$t("start date"),
                         prop: "state.startDate",
@@ -661,10 +669,6 @@
                 this.displayColumns = event;
             },
             displayColumn(column) {
-                // Mandate showing the id column
-                if (column === "id") {
-                    return true;
-                }
                 return this.displayColumns.includes(column);
             },
             onShowChartChange(value) {
diff --git a/ui/src/components/executions/Properties.vue b/ui/src/components/executions/Properties.vue
index 8de2b9b7fd8..79c7db66b34 100644
--- a/ui/src/components/executions/Properties.vue
+++ b/ui/src/components/executions/Properties.vue
@@ -1,48 +1,49 @@
 <template>
-    <el-button type="primary" :icon="TableColumn" @click.stop="toggleContainer">
-        {{ $t("properties.button") }}
-    </el-button>
-
-    <div 
-        class="position-absolute d-block p-3 rounded-3 container" 
-        :class="{visible: showContainer}" 
-        ref="containerRef"
-        @click.stop
-    >
-        <el-input
-            v-model="searchQuery"
-            size="large"
-            :placeholder="$t('properties.searchPlaceholder')"
-            :prefix-icon="Magnify"
-            class="rounded-2 w-100 mb-2"
-        />
-        <div class="pe-2 scrollable-container">
-            <div class="mt-2 shown-group" v-if="shownProperties.length > 0">
-                <div class="mb-2 group-title">
-                    {{ $t("properties.shownInTable") }}
+    <div class="properties-wrapper">
+        <el-button :icon="TableColumn" @click.stop="toggleContainer" class="animated-button">
+            {{ $t("properties.button") }}
+        </el-button>
+
+        <div 
+            class="properties-container" 
+            :class="{visible: showContainer}" 
+            ref="containerRef"
+            @click.stop
+        >
+            <el-input
+                v-model="searchQuery"
+                :placeholder="$t('properties.searchPlaceholder')"
+                :prefix-icon="Magnify"
+                class="rounded-2 w-100 mb-2"
+            />
+            <div class="pe-2 scrollable-container">
+                <div class="mt-2 shown-group" v-if="shownProperties.length > 0">
+                    <div class="text-start mb-1 group-title">
+                        {{ $t("properties.shownInTable") }}
+                    </div>
+                    <ul class="property-list list-style-none m-0 p-0" id="shown-list">
+                        <li v-for="property in filteredShownProperties" :key="property">
+                            <span class="property-name fw-bold">{{ getColumnLabel(property) }}</span>
+                            <div class="eye-icon" @click="toggleProperty(property, true)">
+                                <Eye />
+                            </div>
+                        </li>
+                    </ul>
                 </div>
-                <ul class="property-list list-style-none m-0 p-0" id="shown-list">
-                    <li v-for="property in filteredShownProperties" :key="property">
-                        <span class="property-name fw-bold">{{ getColumnLabel(property) }}</span>
-                        <div class="eye-icon" @click="toggleProperty(property, true)">
-                            <Eye />
-                        </div>
-                    </li>
-                </ul>
-            </div>
-            <el-divider />
-            <div class="hidden-group">
-                <div class="mb-2 group-title" id="hidden-title" v-if="hiddenProperties.length > 0">
-                    {{ $t("properties.hiddenInTable") }}
+                <el-divider />
+                <div class="hidden-group">
+                    <div class="text-start mb-1 group-title" id="hidden-title" v-if="hiddenProperties.length > 0">
+                        {{ $t("properties.hiddenInTable") }}
+                    </div>
+                    <ul class="property-list list-style-none m-0 p-0" id="hidden-list">
+                        <li v-for="property in filteredHiddenProperties" :key="property">
+                            <span class="property-name fw-bold">{{ getColumnLabel(property) }}</span>
+                            <div class="eye-icon" @click="toggleProperty(property, false)">
+                                <EyeOff />
+                            </div>
+                        </li>
+                    </ul>
                 </div>
-                <ul class="property-list list-style-none m-0 p-0" id="hidden-list">
-                    <li v-for="property in filteredHiddenProperties" :key="property">
-                        <span class="property-name fw-bold">{{ getColumnLabel(property) }}</span>
-                        <div class="eye-icon" @click="toggleProperty(property, false)">
-                            <EyeOff />
-                        </div>
-                    </li>
-                </ul>
             </div>
         </div>
     </div>
@@ -145,98 +146,124 @@
     };
 </script>
 
-<style scoped>
-.properties-button {
-  position: relative;
+<style scoped lang="scss">
+.properties-wrapper {
+    position: relative;
+    display: inline-block;
 }
 
+.properties-container {
+    position: absolute;
+    z-index: 1000;
+    background-color: var(--bs-gray-100);
+    border: 1px solid var(--ks-border-primary);
+    border-radius: 8px;
+    padding: 1rem;
+    width: 280px;
+    opacity: 0;
+    visibility: hidden;
+    bottom: 100%;
+    right: 0;
+    margin-bottom: 7px;
+    transform: translateY(-10px);
+    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+
+    &.visible {
+        opacity: 1;
+        visibility: visible;
+        transform: translateY(0);
+    }
+}
 
-.container {
-  top: calc(100% + 2px);
-  right: 0;
-  width: 300px;
-  opacity: 0;
-  visibility: hidden;
-  background-color: var(--bs-gray-100);
-  border: 1px solid var(--ks-border-primary);
-  transform: translateY(-10px);
-  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; /* Add visibility to transition */
+.animated-button {
+    animation: color-change 1.5s infinite;
 }
 
-.container.visible {
-  opacity: 1;
-  visibility: visible;
-  transform: translateY(0);
+@keyframes color-change {
+    0% {
+        background-color: #8405ff;
+        color: white;
+    }
+    50% {
+        background-color: #a64dff;
+        color: white;
+    }
+    100% {
+        background-color: #8405ff;
+        color: white;
+    }
 }
 
 .scrollable-container {
-  max-height: 350px;
-  overflow-y: scroll;
-  /* padding-right: 10px;  */
-}
+    max-height: 300px;
+    overflow-y: scroll;
 
-.scrollable-container::-webkit-scrollbar {
-  width: 6px;
-}
+    &::-webkit-scrollbar {
+        width: 6px;
+    }
 
-.scrollable-container::-webkit-scrollbar-track {
-  background: var(--el-scrollbar-bg-color);
-  border-radius: 3px;
-}
+    &::-webkit-scrollbar-track {
+        background: var(--el-scrollbar-bg-color);
+        border-radius: 3px;
+    }
 
-.scrollable-container::-webkit-scrollbar-thumb {
-  background: var(--el-color-primary);
-  border-radius: 3px;
-}
+    &::-webkit-scrollbar-thumb {
+        background: var(--el-color-primary);
+        border-radius: 3px;
 
-.scrollable-container::-webkit-scrollbar-thumb:hover {
-  background: var(--el-color-primary-light-3);
+        &:hover {
+            background: var(--el-color-primary-light-3);
+        }
+    }
 }
 
 .container-header {
-  position: relative;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 15px;
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
 }
 
 .group-title {
-  color: var(--el-text-color-secondary);
-  font-size: var(--el-font-size-extra-small);
+    color: var(--el-text-color-secondary);
+    font-size: var(--el-font-size-extra-small);
 }
 
-.property-list li {  
-  padding: 8px 0;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  line-height: 10px;
+.property-list {
+    li {  
+        padding: 8px 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        line-height: 10px;
+    }
 }
 
 .property-name {
-  font-size: var(--el-font-size-small);
-  color: var(--el-text-color-regular);
+    font-size: var(--el-font-size-small);
+    color: var(--el-text-color-regular);
 }
 
 :deep(.el-input__prefix-inner) {
-  color: var(--bs-gray-700);
+    color: var(--bs-gray-700);
+    font-size: var(--el-font-size-large);
 }
 
 .eye-icon {
-  cursor: pointer;
-  opacity: 0.8;
-  transition: opacity 0.2s;
-  color: var(--el-text-color-regular);
-  font-size: 16px;
-}
-
-.eye-icon:hover {
-  opacity: 1;
+    cursor: pointer;
+    transition: opacity 0.2s;
+    color: var(--el-text-color-regular);
+    font-size: 16px;
+
+    &:hover {
+        color: var(--el-text-color-secondary);
+    }
 }
 
 :deep(.el-input__inner::placeholder) {
-  color: var(--bs-gray-700);
+    color: var(--bs-gray-700);
+    font-size: var(--el-font-size-small);
 }
-
 </style>
diff --git a/ui/src/components/flows/Flows.vue b/ui/src/components/flows/Flows.vue
index 78ed1e52359..8f2bf977976 100644
--- a/ui/src/components/flows/Flows.vue
+++ b/ui/src/components/flows/Flows.vue
@@ -34,13 +34,6 @@
                         </el-button>
                     </router-link>
                 </li>
-                <li>
-                    <Properties 
-                        :columns="optionalColumns" 
-                        v-model="displayColumns"
-                        :storage-key="storageKey"
-                    />
-                </li>
             </ul>
         </template>
     </top-nav-bar>
@@ -66,6 +59,13 @@
                     <el-card v-if="showStatChart()" shadow="never" class="mb-4">
                         <ExecutionsBar :data="daily" :total="executionsCount" />
                     </el-card>
+                    <div v-if="flows.length" class="text-end mb-3">
+                        <Properties 
+                            :columns="optionalColumns" 
+                            v-model="displayColumns"
+                            :storage-key="storageKey"
+                        />
+                    </div>
                 </template>
 
                 <template #table>
@@ -107,6 +107,7 @@
                         </template>
                         <template #default>
                             <el-table-column
+                                v-if="displayColumn('id')"
                                 prop="id"
                                 sortable="custom"
                                 :sort-orders="['ascending', 'descending']"
@@ -283,6 +284,11 @@
                 file: undefined,
                 showChart: ["true", null].includes(localStorage.getItem(storageKeys.SHOW_FLOWS_CHART)),
                 optionalColumns: [
+                    {
+                        label: this.$t("id"),
+                        prop: "id",
+                        default: true
+                    },
                     {
                         label: this.$t("labels"),
                         prop: "labels",
@@ -629,10 +635,6 @@
                 return row && row.row && row.row.disabled ? "disabled" : "";
             },
             displayColumn(column) {
-                // Mandate showing the id column
-                if (column === "id") {
-                    return true;
-                }
                 return this.displayColumns.includes(column);
             },
             updateDisplayColumns(columns) {
diff --git a/ui/src/components/layout/DataTable.vue b/ui/src/components/layout/DataTable.vue
index 1623f532577..7c999ad8988 100644
--- a/ui/src/components/layout/DataTable.vue
+++ b/ui/src/components/layout/DataTable.vue
@@ -9,11 +9,11 @@
         <el-container data-component="FILENAME_PLACEHOLDER#container" direction="vertical" v-loading="isLoading">
             <slot name="top" data-component="FILENAME_PLACEHOLDER#top" />
 
-            <pagination v-if="!embed" :size="size" :top="true" :page="page" :total="total" :max="max" @page-changed="onPageChanged">
+            <!-- <pagination v-if="!embed" :size="size" :top="true" :page="page" :total="total" :max="max" @page-changed="onPageChanged">
                 <template #search>
                     <slot name="search" />
                 </template>
-            </pagination>
+            </pagination> -->
 
             <slot name="table" data-component="FILENAME_PLACEHOLDER#table" />
 

From c62659f5a5122dd3053beb54d846499fa686f917 Mon Sep 17 00:00:00 2001
From: Piyush Bhaskar <102078527+Piyush-r-bhaskar@users.noreply.github.com>
Date: Thu, 9 Jan 2025 11:30:51 +0530
Subject: [PATCH 3/4] remove button animation

---
 .../{executions => }/Properties.vue           | 21 +------------------
 ui/src/components/executions/Executions.vue   |  2 +-
 ui/src/components/flows/Flows.vue             |  2 +-
 3 files changed, 3 insertions(+), 22 deletions(-)
 rename ui/src/components/{executions => }/Properties.vue (94%)

diff --git a/ui/src/components/executions/Properties.vue b/ui/src/components/Properties.vue
similarity index 94%
rename from ui/src/components/executions/Properties.vue
rename to ui/src/components/Properties.vue
index 79c7db66b34..8cd90224fa3 100644
--- a/ui/src/components/executions/Properties.vue
+++ b/ui/src/components/Properties.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="properties-wrapper">
-        <el-button :icon="TableColumn" @click.stop="toggleContainer" class="animated-button">
+        <el-button type="primary" :icon="TableColumn" @click.stop="toggleContainer">
             {{ $t("properties.button") }}
         </el-button>
 
@@ -176,25 +176,6 @@
     }
 }
 
-.animated-button {
-    animation: color-change 1.5s infinite;
-}
-
-@keyframes color-change {
-    0% {
-        background-color: #8405ff;
-        color: white;
-    }
-    50% {
-        background-color: #a64dff;
-        color: white;
-    }
-    100% {
-        background-color: #8405ff;
-        color: white;
-    }
-}
-
 .scrollable-container {
     max-height: 300px;
     overflow-y: scroll;
diff --git a/ui/src/components/executions/Executions.vue b/ui/src/components/executions/Executions.vue
index b5ddbca7bbe..fb09d2f280c 100644
--- a/ui/src/components/executions/Executions.vue
+++ b/ui/src/components/executions/Executions.vue
@@ -376,7 +376,7 @@
     import KestraFilter from "../filter/KestraFilter.vue"
     import QueueFirstInLastOut from "vue-material-design-icons/QueueFirstInLastOut.vue";
     import RunFast from "vue-material-design-icons/RunFast.vue";
-    import Properties from "./Properties.vue";
+    import Properties from "../Properties.vue";
 </script>
 
 <script>
diff --git a/ui/src/components/flows/Flows.vue b/ui/src/components/flows/Flows.vue
index 8f2bf977976..0896d5dc28e 100644
--- a/ui/src/components/flows/Flows.vue
+++ b/ui/src/components/flows/Flows.vue
@@ -220,7 +220,7 @@
     import FileDocumentCheckOutline from "vue-material-design-icons/FileDocumentCheckOutline.vue";
     import NoData from "../layout/NoData.vue";
     import KestraFilter from "../filter/KestraFilter.vue";
-    import Properties from "../executions/Properties.vue"; // Import Properties component
+    import Properties from "../Properties.vue"; // Import Properties component
 </script>
 
 <script>

From b7b3f7ebc0fc0b145176d6c6f0492bd3f04ebf7c Mon Sep 17 00:00:00 2001
From: Piyush Bhaskar <102078527+Piyush-r-bhaskar@users.noreply.github.com>
Date: Thu, 9 Jan 2025 17:29:42 +0530
Subject: [PATCH 4/4] fix merge conflict

---
 ui/src/components/flows/Flows.vue | 5 +----
 ui/src/translations/en.json       | 8 +++++++-
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/ui/src/components/flows/Flows.vue b/ui/src/components/flows/Flows.vue
index 0896d5dc28e..9b09ad44bf1 100644
--- a/ui/src/components/flows/Flows.vue
+++ b/ui/src/components/flows/Flows.vue
@@ -201,8 +201,6 @@
                             </el-table-column>
                         </template>
                     </select-table>
-
-                    <NoData v-else />
                 </template>
             </data-table>
         </div>
@@ -218,9 +216,8 @@
     import TrashCan from "vue-material-design-icons/TrashCan.vue";
     import FileDocumentRemoveOutline from "vue-material-design-icons/FileDocumentRemoveOutline.vue";
     import FileDocumentCheckOutline from "vue-material-design-icons/FileDocumentCheckOutline.vue";
-    import NoData from "../layout/NoData.vue";
     import KestraFilter from "../filter/KestraFilter.vue";
-    import Properties from "../Properties.vue"; // Import Properties component
+    import Properties from "../Properties.vue";
 </script>
 
 <script>
diff --git a/ui/src/translations/en.json b/ui/src/translations/en.json
index dc460fd09fd..cc8eb9fb423 100644
--- a/ui/src/translations/en.json
+++ b/ui/src/translations/en.json
@@ -126,6 +126,7 @@
       "demo": "Get a demo"
     },
     "source": "Source",
+    "source only": "Source only",
     "home": "Home",
     "create": "Create",
     "create_flow": "Create Flow",
@@ -933,7 +934,8 @@
       "trigger_disabled": "This trigger can only be enabled through code.",
       "description": "Description",
       "no_flow_description": "This flow has no description.",
-      "not_auth": "You don't have the necessary permissions to view this widget."
+      "not_auth": "You don't have the necessary permissions to view this widget.",
+      "preview": "Dashboard preview"
     },
     "docs": "Docs",
     "active-slots": "Active slots",
@@ -988,6 +990,8 @@
     "execution failed header": "Execution failed!",
     "execution failed message": "With last error: <code>{message}</code>",
     "execution restarted": "This execution has been restarted {nbRestart} time(s).",
+    "execution replay": "This execution is a replay of <code>{originalId}</code>.",
+    "execution replayed": "This execution has been replayed.",
     "task run id": "TaskRun ID",
     "active": "Active",
     "flows imported": "Flows imported",
@@ -1053,6 +1057,8 @@
       }
     },
     "custom value": "Custom value",
+    "chart": "Chart",
+    "chart preview": "Chart preview",
     "properties": {
       "button": "Select Columns",
       "searchPlaceholder": "Search for a property...",