From d90bcc0f89a5647774aa00d32130d4c0cbebfb1a Mon Sep 17 00:00:00 2001
From: "brian.mulier" <bmmulier@hotmail.fr>
Date: Mon, 7 Aug 2023 10:23:36 +0200
Subject: [PATCH 1/3] feat(ui): bulk select is no longer at bottom but replaces
 the table header on select

closes #1333
---
 ui/src/components/executions/Executions.vue   | 810 ++++++++---------
 ui/src/components/flows/Flows.vue             | 845 +++++++++---------
 .../components/layout/BottomLineCounter.vue   |  37 -
 ui/src/components/layout/BulkSelect.vue       |  58 ++
 ui/src/components/layout/SelectTable.vue      |  63 ++
 ui/src/components/templates/Templates.vue     | 493 +++++-----
 ui/src/mixins/selectTableActions.js           |  33 +
 7 files changed, 1231 insertions(+), 1108 deletions(-)
 delete mode 100644 ui/src/components/layout/BottomLineCounter.vue
 create mode 100644 ui/src/components/layout/BulkSelect.vue
 create mode 100644 ui/src/components/layout/SelectTable.vue
 create mode 100644 ui/src/mixins/selectTableActions.js

diff --git a/ui/src/components/executions/Executions.vue b/ui/src/components/executions/Executions.vue
index 1a6364437d0..5470da3330b 100644
--- a/ui/src/components/executions/Executions.vue
+++ b/ui/src/components/executions/Executions.vue
@@ -1,432 +1,438 @@
 <template>
-    <div v-if="ready">
-        <data-table @page-changed="onPageChanged" ref="dataTable" :total="total" :size="pageSize" :page="pageNumber">
-            <template #navbar v-if="embed === false">
-                <el-form-item>
-                    <search-field />
-                </el-form-item>
-                <el-form-item>
-                    <namespace-select
-                        data-type="flow"
-                        v-if="$route.name !== 'flows/update'"
-                        :value="$route.query.namespace"
-                        @update:model-value="onDataTableValue('namespace', $event)"
-                    />
-                </el-form-item>
-                <el-form-item>
-                    <status-filter-buttons
-                        :value="Utils.asArray($route.query.state)"
-                        @update:model-value="onDataTableValue('state', $event)"
-                    />
-                </el-form-item>
-                <el-form-item>
-                    <date-range
-                        :start-date="$route.query.startDate"
-                        :end-date="$route.query.endDate"
-                        @update:model-value="onDataTableValue($event)"
-                    />
-                </el-form-item>
-                <el-form-item>
-                    <label-filter
-                        :model-value="$route.query.labels"
-                        @update:model-value="onDataTableValue('labels', $event)"
-                    />
-                </el-form-item>
-                <el-form-item>
-                    <refresh-button class="float-right" @refresh="load" />
-                </el-form-item>
-            </template>
+  <div v-if="ready">
+    <data-table @page-changed="onPageChanged" ref="dataTable" :total="total" :size="pageSize" :page="pageNumber">
+      <template #navbar v-if="embed === false">
+        <el-form-item>
+          <search-field/>
+        </el-form-item>
+        <el-form-item>
+          <namespace-select
+              data-type="flow"
+              v-if="$route.name !== 'flows/update'"
+              :value="$route.query.namespace"
+              @update:model-value="onDataTableValue('namespace', $event)"
+          />
+        </el-form-item>
+        <el-form-item>
+          <status-filter-buttons
+              :value="Utils.asArray($route.query.state)"
+              @update:model-value="onDataTableValue('state', $event)"
+          />
+        </el-form-item>
+        <el-form-item>
+          <date-range
+              :start-date="$route.query.startDate"
+              :end-date="$route.query.endDate"
+              @update:model-value="onDataTableValue($event)"
+          />
+        </el-form-item>
+        <el-form-item>
+          <label-filter
+              :model-value="$route.query.labels"
+              @update:model-value="onDataTableValue('labels', $event)"
+          />
+        </el-form-item>
+        <el-form-item>
+          <refresh-button class="float-right" @refresh="load"/>
+        </el-form-item>
+      </template>
 
-            <template #top v-if="embed === false">
-                <state-global-chart
-                    v-if="daily"
-                    class="mb-4"
-                    :ready="dailyReady"
-                    :data="daily"
-                    :start-date="startDate"
-                    :end-date="endDate"
-                />
-            </template>
+      <template #top v-if="embed === false">
+        <state-global-chart
+            v-if="daily"
+            class="mb-4"
+            :ready="dailyReady"
+            :data="daily"
+            :start-date="startDate"
+            :end-date="endDate"
+        />
+      </template>
 
-            <template #table>
-                <el-table
-                    :data="executions"
-                    ref="table"
-                    :default-sort="{prop: 'state.startDate', order: 'descending'}"
-                    stripe
-                    table-layout="auto"
-                    fixed
-                    @row-dblclick="onRowDoubleClick"
-                    @sort-change="onSort"
-                    @selection-change="handleSelectionChange"
-                >
-                    <el-table-column type="selection" v-if="!hidden.includes('selection') && (canCheck)" />
+      <template #table>
+        <select-table
+            ref="selectTable"
+            :data="executions"
+            :default-sort="{prop: 'state.startDate', order: 'descending'}"
+            stripe
+            table-layout="auto"
+            fixed
+            @row-dblclick="onRowDoubleClick"
+            @sort-change="onSort"
+            @selection-change="handleSelectionChange"
+            :selectable="!hidden.includes('selection') && canCheck"
+        >
+          <template #select-actions>
+            <bulk-select v-model="queryBulkAction" :selections="selection" :total="total"
+                         @update:model-value="toggleAllSelection()">
+              <el-button v-if="canUpdate" :icon="Restart" @click="restartExecutions()">
+                {{ $t('restart') }}
+              </el-button>
+              <el-button v-if="canUpdate" :icon="StopCircleOutline" @click="killExecutions()">
+                {{ $t('kill') }}
+              </el-button>
+              <el-button v-if="canDelete" :icon="Delete" type="default" @click="deleteExecutions()">
+                {{ $t('delete') }}
+              </el-button>
+            </bulk-select>
+          </template>
+          <template #default>
+            <el-table-column prop="id" v-if="!hidden.includes('id')" sortable="custom"
+                             :sort-orders="['ascending', 'descending']" :label="$t('id')">
+              <template #default="scope">
+                <id :value="scope.row.id" :shrink="true"/>
+              </template>
+            </el-table-column>
 
-                    <el-table-column prop="id" v-if="!hidden.includes('id')" sortable="custom" :sort-orders="['ascending', 'descending']" :label="$t('id')">
-                        <template #default="scope">
-                            <id :value="scope.row.id" :shrink="true" />
-                        </template>
-                    </el-table-column>
+            <el-table-column prop="state.startDate" v-if="!hidden.includes('state.startDate')" sortable="custom"
+                             :sort-orders="['ascending', 'descending']" :label="$t('start date')">
+              <template #default="scope">
+                <date-ago :inverted="true" :date="scope.row.state.startDate"/>
+              </template>
+            </el-table-column>
 
-                    <el-table-column prop="state.startDate" v-if="!hidden.includes('state.startDate')" sortable="custom" :sort-orders="['ascending', 'descending']" :label="$t('start date')">
-                        <template #default="scope">
-                            <date-ago :inverted="true" :date="scope.row.state.startDate" />
-                        </template>
-                    </el-table-column>
+            <el-table-column prop="state.endDate" v-if="!hidden.includes('state.endDate')" sortable="custom"
+                             :sort-orders="['ascending', 'descending']" :label="$t('end date')">
+              <template #default="scope">
+                <date-ago :inverted="true" :date="scope.row.state.endDate"/>
+              </template>
+            </el-table-column>
 
-                    <el-table-column prop="state.endDate" v-if="!hidden.includes('state.endDate')" sortable="custom" :sort-orders="['ascending', 'descending']" :label="$t('end date')">
-                        <template #default="scope">
-                            <date-ago :inverted="true" :date="scope.row.state.endDate" />
-                        </template>
-                    </el-table-column>
+            <el-table-column prop="state.duration" v-if="!hidden.includes('state.duration')" sortable="custom"
+                             :sort-orders="['ascending', 'descending']" :label="$t('duration')">
+              <template #default="scope">
+                <span v-if="isRunning(scope.row)">{{ $filters.humanizeDuration(durationFrom(scope.row)) }}</span>
+                <span v-else>{{ $filters.humanizeDuration(scope.row.state.duration) }}</span>
+              </template>
+            </el-table-column>
 
-                    <el-table-column prop="state.duration" v-if="!hidden.includes('state.duration')" sortable="custom" :sort-orders="['ascending', 'descending']" :label="$t('duration')">
-                        <template #default="scope">
-                            <span v-if="isRunning(scope.row)">{{ $filters.humanizeDuration(durationFrom(scope.row)) }}</span>
-                            <span v-else>{{ $filters.humanizeDuration(scope.row.state.duration) }}</span>
-                        </template>
-                    </el-table-column>
+            <el-table-column v-if="$route.name !== 'flows/update' && !hidden.includes('namespace')" prop="namespace"
+                             sortable="custom" :sort-orders="['ascending', 'descending']" :label="$t('namespace')"
+                             :formatter="(_, __, cellValue) => $filters.invisibleSpace(cellValue)"/>
 
-                    <el-table-column v-if="$route.name !== 'flows/update' && !hidden.includes('namespace')" prop="namespace" sortable="custom" :sort-orders="['ascending', 'descending']" :label="$t('namespace')" :formatter="(_, __, cellValue) => $filters.invisibleSpace(cellValue)" />
+            <el-table-column v-if="$route.name !== 'flows/update' && !hidden.includes('flowId')" prop="flowId"
+                             sortable="custom" :sort-orders="['ascending', 'descending']" :label="$t('flow')">
+              <template #default="scope">
+                <router-link
+                    :to="{name: 'flows/update', params: {namespace: scope.row.namespace, id: scope.row.flowId}}">
+                  {{ $filters.invisibleSpace(scope.row.flowId) }}
+                </router-link>
+              </template>
+            </el-table-column>
 
-                    <el-table-column v-if="$route.name !== 'flows/update' && !hidden.includes('flowId')" prop="flowId" sortable="custom" :sort-orders="['ascending', 'descending']" :label="$t('flow')">
-                        <template #default="scope">
-                            <router-link :to="{name: 'flows/update', params: {namespace: scope.row.namespace, id: scope.row.flowId}}">
-                                {{ $filters.invisibleSpace(scope.row.flowId) }}
-                            </router-link>
-                        </template>
-                    </el-table-column>
+            <el-table-column v-if="!hidden.includes('labels')" :label="$t('labels')">
+              <template #default="scope">
+                <labels :labels="scope.row.labels"/>
+              </template>
+            </el-table-column>
 
-                    <el-table-column v-if="!hidden.includes('labels')" :label="$t('labels')">
-                        <template #default="scope">
-                            <labels :labels="scope.row.labels" />
-                        </template>
-                    </el-table-column>
+            <el-table-column prop="state.current" v-if="!hidden.includes('state.current')" sortable="custom"
+                             :sort-orders="['ascending', 'descending']" :label="$t('state')">
+              <template #default="scope">
+                <status :status="scope.row.state.current" size="small"/>
+              </template>
+            </el-table-column>
 
-                    <el-table-column prop="state.current" v-if="!hidden.includes('state.current')" sortable="custom" :sort-orders="['ascending', 'descending']" :label="$t('state')">
-                        <template #default="scope">
-                            <status :status="scope.row.state.current" size="small" />
-                        </template>
-                    </el-table-column>
+            <el-table-column prop="triggers" v-if="!hidden.includes('triggers')" :label="$t('triggers')"
+                             class-name="shrink">
+              <template #default="scope">
+                <trigger-avatar :execution="scope.row"/>
+              </template>
+            </el-table-column>
 
-                    <el-table-column prop="triggers" v-if="!hidden.includes('triggers')" :label="$t('triggers')" class-name="shrink">
-                        <template #default="scope">
-                            <trigger-avatar :execution="scope.row" />
-                        </template>
-                    </el-table-column>
+            <el-table-column 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}}">
+                  <kicon :tooltip="$t('details')" placement="left">
+                    <eye/>
+                  </kicon>
+                </router-link>
+              </template>
+            </el-table-column>
+          </template>
+        </select-table>
+      </template>
+    </data-table>
 
-                    <el-table-column 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}}">
-                                <kicon :tooltip="$t('details')" placement="left">
-                                    <eye />
-                                </kicon>
-                            </router-link>
-                        </template>
-                    </el-table-column>
-                </el-table>
+    <bottom-line v-if="displayBottomBar">
+      <ul>
+        <template v-if="$route.name === 'flows/update'">
+          <li>
+            <template v-if="isAllowedEdit">
+              <el-button :icon="Pencil" size="large" @click="editFlow">
+                {{ $t('edit flow') }}
+              </el-button>
             </template>
-        </data-table>
-
-        <bottom-line v-if="displayBottomBar">
-            <ul>
-                <li v-if="executionsSelection.length !== 0 && (canUpdate || canDelete)">
-                    <bottom-line-counter v-model="queryBulkAction" :selections="executionsSelection" :total="total" @update:model-value="selectAll()">
-                        <el-button v-if="canUpdate" :icon="Restart" size="large" @click="restartExecutions()">
-                            {{ $t('restart') }}
-                        </el-button>
-                        <el-button v-if="canUpdate" :icon="StopCircleOutline" size="large" @click="killExecutions()">
-                            {{ $t('kill') }}
-                        </el-button>
-                        <el-button v-if="canDelete" :icon="Delete" size="large" type="default" @click="deleteExecutions()">
-                            {{ $t('delete') }}
-                        </el-button>
-                    </bottom-line-counter>
-                </li>
-
-                <li class="spacer" />
-
-                <template v-if="$route.name === 'flows/update'">
-                    <li>
-                        <template v-if="isAllowedEdit">
-                            <el-button :icon="Pencil" size="large" @click="editFlow">
-                                {{ $t('edit flow') }}
-                            </el-button>
-                        </template>
-                    </li>
-                    <li>
-                        <trigger-flow v-if="flow" :disabled="flow.disabled" :flow-id="flow.id" :namespace="flow.namespace" />
-                    </li>
-                </template>
-            </ul>
-        </bottom-line>
-    </div>
+          </li>
+          <li>
+            <trigger-flow v-if="flow" :disabled="flow.disabled" :flow-id="flow.id" :namespace="flow.namespace"/>
+          </li>
+        </template>
+      </ul>
+    </bottom-line>
+  </div>
 </template>
 
 <script setup>
-    import Restart from "vue-material-design-icons/Restart.vue";
-    import Delete from "vue-material-design-icons/Delete.vue";
-    import StopCircleOutline from "vue-material-design-icons/StopCircleOutline.vue";
-    import Pencil from "vue-material-design-icons/Pencil.vue";
-    import Utils from "../../utils/utils";
+  import BulkSelect from "../layout/BulkSelect.vue";
+  import SelectTable from "../layout/SelectTable.vue";
+  import Restart from "vue-material-design-icons/Restart.vue";
+  import Delete from "vue-material-design-icons/Delete.vue";
+  import StopCircleOutline from "vue-material-design-icons/StopCircleOutline.vue";
+  import Pencil from "vue-material-design-icons/Pencil.vue";
+  import Utils from "../../utils/utils";
 </script>
 
 <script>
-    import {mapState} from "vuex";
-    import DataTable from "../layout/DataTable.vue";
-    import Eye from "vue-material-design-icons/Eye.vue";
-    import Status from "../Status.vue";
-    import RouteContext from "../../mixins/routeContext";
-    import DataTableActions from "../../mixins/dataTableActions";
-    import SearchField from "../layout/SearchField.vue";
-    import NamespaceSelect from "../namespace/NamespaceSelect.vue";
-    import LabelFilter from "../labels/LabelFilter.vue";
-    import DateRange from "../layout/DateRange.vue";
-    import RefreshButton from "../layout/RefreshButton.vue"
-    import StatusFilterButtons from "../layout/StatusFilterButtons.vue"
-    import StateGlobalChart from "../../components/stats/StateGlobalChart.vue";
-    import TriggerAvatar from "../../components/flows/TriggerAvatar.vue";
-    import DateAgo from "../layout/DateAgo.vue";
-    import Kicon from "../Kicon.vue"
-    import Labels from "../layout/Labels.vue"
-    import RestoreUrl from "../../mixins/restoreUrl";
-    import State from "../../utils/state";
-    import Id from "../Id.vue";
-    import _merge from "lodash/merge";
-    import BottomLine from "../layout/BottomLine.vue";
-    import BottomLineCounter from "../layout/BottomLineCounter.vue";
-    import permission from "../../models/permission";
-    import action from "../../models/action";
-    import TriggerFlow from "../../components/flows/TriggerFlow.vue";
+  import {mapState} from "vuex";
+  import DataTable from "../layout/DataTable.vue";
+  import Eye from "vue-material-design-icons/Eye.vue";
+  import Status from "../Status.vue";
+  import RouteContext from "../../mixins/routeContext";
+  import DataTableActions from "../../mixins/dataTableActions";
+  import SelectTableActions from "../../mixins/selectTableActions";
+  import SearchField from "../layout/SearchField.vue";
+  import NamespaceSelect from "../namespace/NamespaceSelect.vue";
+  import LabelFilter from "../labels/LabelFilter.vue";
+  import DateRange from "../layout/DateRange.vue";
+  import RefreshButton from "../layout/RefreshButton.vue"
+  import StatusFilterButtons from "../layout/StatusFilterButtons.vue"
+  import StateGlobalChart from "../../components/stats/StateGlobalChart.vue";
+  import TriggerAvatar from "../../components/flows/TriggerAvatar.vue";
+  import DateAgo from "../layout/DateAgo.vue";
+  import Kicon from "../Kicon.vue"
+  import Labels from "../layout/Labels.vue"
+  import RestoreUrl from "../../mixins/restoreUrl";
+  import State from "../../utils/state";
+  import Id from "../Id.vue";
+  import _merge from "lodash/merge";
+  import BottomLine from "../layout/BottomLine.vue";
+  import permission from "../../models/permission";
+  import action from "../../models/action";
+  import TriggerFlow from "../../components/flows/TriggerFlow.vue";
 
-    export default {
-        mixins: [RouteContext, RestoreUrl, DataTableActions],
-        components: {
-            Status,
-            Eye,
-            DataTable,
-            SearchField,
-            NamespaceSelect,
-            LabelFilter,
-            DateRange,
-            RefreshButton,
-            StatusFilterButtons,
-            StateGlobalChart,
-            TriggerAvatar,
-            DateAgo,
-            Kicon,
-            Labels,
-            Id,
-            BottomLine,
-            BottomLineCounter,
-            TriggerFlow
-        },
-        props: {
-            embed: {
-                type: Boolean,
-                default: false
-            },
-            hidden: {
-                type: Array,
-                default: () => []
-            },
-            statuses: {
-                type: Array,
-                default: () => []
-            },
-        },
-        data() {
-            return {
-                isDefaultNamespaceAllow: true,
-                dailyReady: false,
-                dblClickRouteName: "executions/update",
-                flowTriggerDetails: undefined,
-                executionsSelection: [],
-                queryBulkAction: false
-            };
-        },
-        computed: {
-            ...mapState("execution", ["executions", "total"]),
-            ...mapState("stat", ["daily"]),
-            ...mapState("auth", ["user"]),
-            ...mapState("flow", ["flow"]),
-            routeInfo() {
-                return {
-                    title: this.$t("executions")
-                };
-            },
-            endDate() {
-                return this.$route.query.endDate ? this.$route.query.endDate : this.$moment().toISOString(true);
-            },
-            startDate() {
-                return this.$route.query.startDate ? this.$route.query.startDate : this.$moment(this.endDate)
-                    .add(-30, "days").toISOString(true);
-            },
-            displayBottomBar() {
-                return (this.executionsSelection.length !== 0 && (this.canUpdate || this.canDelete)) ||
-                    (this.$route.name === "flows/update");
-            },
-            canCheck() {
-                return this.canDelete || this.canUpdate;
-            },
-            canUpdate() {
-                return this.user && this.user.isAllowed(permission.EXECUTION, action.UPDATE, this.$route.query.namespace);
-            },
-            canDelete() {
-                return this.user && this.user.isAllowed(permission.EXECUTION, action.DELETE, this.$route.query.namespace);
-            },
-            isAllowedEdit() {
-                return this.user.isAllowed(permission.FLOW, action.UPDATE, this.flow.namespace);
-            },
-        },
-        methods: {
-            handleSelectionChange(val) {
-                if (val.length === 0) {
-                    this.queryBulkAction = false
-                }
-                this.executionsSelection = val.map(x => x.id);
-            },
-            selectAll() {
-                if (this.$refs.table.getSelectionRows().length !== this.$refs.table.data.length) {
-                    this.$refs.table.toggleAllSelection();
-                }
-            },
-            isRunning(item){
-                return State.isRunning(item.state.current);
-            },
-            onStatusChange() {
-                this.load(this.onDataLoaded);
-            },
-            loadQuery(base, stats) {
-                let queryFilter = this.queryWithFilter();
+  export default {
+    mixins: [RouteContext, RestoreUrl, DataTableActions, SelectTableActions],
+    components: {
+      Status,
+      Eye,
+      DataTable,
+      SearchField,
+      NamespaceSelect,
+      LabelFilter,
+      DateRange,
+      RefreshButton,
+      StatusFilterButtons,
+      StateGlobalChart,
+      TriggerAvatar,
+      DateAgo,
+      Kicon,
+      Labels,
+      Id,
+      BottomLine,
+      TriggerFlow
+    },
+    props: {
+      embed: {
+        type: Boolean,
+        default: false
+      },
+      hidden: {
+        type: Array,
+        default: () => []
+      },
+      statuses: {
+        type: Array,
+        default: () => []
+      },
+    },
+    data() {
+      return {
+        isDefaultNamespaceAllow: true,
+        dailyReady: false,
+        dblClickRouteName: "executions/update",
+        flowTriggerDetails: undefined
+      };
+    },
+    computed: {
+      ...mapState("execution", ["executions", "total"]),
+      ...mapState("stat", ["daily"]),
+      ...mapState("auth", ["user"]),
+      ...mapState("flow", ["flow"]),
+      routeInfo() {
+        return {
+          title: this.$t("executions")
+        };
+      },
+      endDate() {
+        return this.$route.query.endDate ? this.$route.query.endDate : this.$moment().toISOString(true);
+      },
+      startDate() {
+        return this.$route.query.startDate ? this.$route.query.startDate : this.$moment(this.endDate)
+            .add(-30, "days").toISOString(true);
+      },
+      displayBottomBar() {
+        return (this.selection.length !== 0 && (this.canUpdate || this.canDelete)) ||
+            (this.$route.name === "flows/update");
+      },
+      canCheck() {
+        return this.canDelete || this.canUpdate;
+      },
+      canUpdate() {
+        return this.user && this.user.isAllowed(permission.EXECUTION, action.UPDATE, this.$route.query.namespace);
+      },
+      canDelete() {
+        return this.user && this.user.isAllowed(permission.EXECUTION, action.DELETE, this.$route.query.namespace);
+      },
+      isAllowedEdit() {
+        return this.user.isAllowed(permission.FLOW, action.UPDATE, this.flow.namespace);
+      },
+    },
+    methods: {
+      selectionMapper(execution) {
+        return execution.id
+      },
+      isRunning(item) {
+        return State.isRunning(item.state.current);
+      },
+      onStatusChange() {
+        this.load(this.onDataLoaded);
+      },
+      loadQuery(base, stats) {
+        let queryFilter = this.queryWithFilter();
 
-                if (stats) {
-                    delete queryFilter["startDate"];
-                    delete queryFilter["endDate"];
-                }
+        if (stats) {
+          delete queryFilter["startDate"];
+          delete queryFilter["endDate"];
+        }
 
-                if (this.$route.name === "flows/update") {
-                    queryFilter["namespace"] = this.$route.params.namespace;
-                    queryFilter["flowId"] = this.$route.params.id;
-                }
+        if (this.$route.name === "flows/update") {
+          queryFilter["namespace"] = this.$route.params.namespace;
+          queryFilter["flowId"] = this.$route.params.id;
+        }
 
-                return _merge(base, queryFilter)
-            },
-            loadData(callback) {
-                if (this.embed === false) {
-                    this.dailyReady = false;
+        return _merge(base, queryFilter)
+      },
+      loadData(callback) {
+        if (this.embed === false) {
+          this.dailyReady = false;
 
-                    this.$store
-                        .dispatch("stat/daily", this.loadQuery({
-                            startDate: this.$moment(this.startDate).toISOString(true),
-                            endDate: this.$moment(this.endDate).toISOString(true)
-                        }, true))
-                        .then(() => {
-                            this.dailyReady = true;
-                        });
-                }
+          this.$store
+              .dispatch("stat/daily", this.loadQuery({
+                startDate: this.$moment(this.startDate).toISOString(true),
+                endDate: this.$moment(this.endDate).toISOString(true)
+              }, true))
+              .then(() => {
+                this.dailyReady = true;
+              });
+        }
 
-                this.$store.dispatch("execution/findExecutions", this.loadQuery({
-                    size: parseInt(this.$route.query.size || this.internalPageSize),
-                    page: parseInt(this.$route.query.page || this.internalPageNumber),
-                    sort: this.$route.query.sort || "state.startDate:desc",
-                    state: this.$route.query.state ? [this.$route.query.state] : this.statuses
-                }, false)).finally(callback);
-            },
-            durationFrom(item) {
-                return (+new Date() - new Date(item.state.startDate).getTime()) / 1000
+        this.$store.dispatch("execution/findExecutions", this.loadQuery({
+          size: parseInt(this.$route.query.size || this.internalPageSize),
+          page: parseInt(this.$route.query.page || this.internalPageNumber),
+          sort: this.$route.query.sort || "state.startDate:desc",
+          state: this.$route.query.state ? [this.$route.query.state] : this.statuses
+        }, false)).finally(callback);
+      },
+      durationFrom(item) {
+        return (+new Date() - new Date(item.state.startDate).getTime()) / 1000
+      },
+      restartExecutions() {
+        this.$toast().confirm(
+            this.$t("bulk restart", {"executionCount": this.queryBulkAction ? this.total : this.selection.length}),
+            () => {
+              if (this.queryBulkAction) {
+                return this.$store
+                    .dispatch("execution/queryRestartExecution", this.loadQuery({
+                      sort: this.$route.query.sort || "state.startDate:desc",
+                      state: this.$route.query.state ? [this.$route.query.state] : this.statuses,
+                    }))
+                    .then(r => {
+                      this.$toast().success(this.$t("executions restarted", {executionCount: r.data.count}));
+                      this.loadData();
+                    })
+              } else {
+                return this.$store
+                    .dispatch("execution/bulkRestartExecution", {executionsId: this.selection})
+                    .then(r => {
+                      this.$toast().success(this.$t("executions restarted", {executionCount: r.data.count}));
+                      this.loadData();
+                    }).catch(e => this.$toast().error(e.invalids.map(exec => {
+                      return {message: this.$t(exec.message, {executionId: exec.invalidValue})}
+                    }), this.$t(e.message)))
+              }
             },
-            restartExecutions() {
-                this.$toast().confirm(
-                    this.$t("bulk restart", {"executionCount": this.queryBulkAction ? this.total : this.executionsSelection.length}),
-                    () => {
-                        if (this.queryBulkAction) {
-                            return this.$store
-                                .dispatch("execution/queryRestartExecution", this.loadQuery({
-                                    sort: this.$route.query.sort || "state.startDate:desc",
-                                    state: this.$route.query.state ? [this.$route.query.state] : this.statuses,
-                                }))
-                                .then(r => {
-                                    this.$toast().success(this.$t("executions restarted", {executionCount: r.data.count}));
-                                    this.loadData();
-                                })
-                        } else {
-                            return this.$store
-                                .dispatch("execution/bulkRestartExecution", {executionsId: this.executionsSelection})
-                                .then(r => {
-                                    this.$toast().success(this.$t("executions restarted", {executionCount: r.data.count}));
-                                    this.loadData();
-                                }).catch(e => this.$toast().error(e.invalids.map(exec => {
-                                    return {message: this.$t(exec.message, {executionId: exec.invalidValue})}
-                                }), this.$t(e.message)))
-                        }
-                    },
-                    () => {}
-                )
+            () => {
+            }
+        )
+      },
+      deleteExecutions() {
+        this.$toast().confirm(
+            this.$t("bulk delete", {"executionCount": this.queryBulkAction ? this.total : this.selection.length}),
+            () => {
+              if (this.queryBulkAction) {
+                return this.$store
+                    .dispatch("execution/queryDeleteExecution", this.loadQuery({
+                      sort: this.$route.query.sort || "state.startDate:desc",
+                      state: this.$route.query.state ? [this.$route.query.state] : this.statuses
+                    }, false))
+                    .then(r => {
+                      this.$toast().success(this.$t("executions deleted", {executionCount: r.data.count}));
+                      this.loadData();
+                    })
+              } else {
+                return this.$store
+                    .dispatch("execution/bulkDeleteExecution", {executionsId: this.selection})
+                    .then(r => {
+                      this.$toast().success(this.$t("executions deleted", {executionCount: r.data.count}));
+                      this.loadData();
+                    }).catch(e => this.$toast().error(e.invalids.map(exec => {
+                      return {message: this.$t(exec.message, {executionId: exec.invalidValue})}
+                    }), this.$t(e.message)))
+              }
             },
-            deleteExecutions() {
-                this.$toast().confirm(
-                    this.$t("bulk delete", {"executionCount": this.queryBulkAction ? this.total : this.executionsSelection.length}),
-                    () => {
-                        if (this.queryBulkAction) {
-                            return this.$store
-                                .dispatch("execution/queryDeleteExecution", this.loadQuery({
-                                    sort: this.$route.query.sort || "state.startDate:desc",
-                                    state: this.$route.query.state ? [this.$route.query.state] : this.statuses
-                                }, false))
-                                .then(r => {
-                                    this.$toast().success(this.$t("executions deleted", {executionCount: r.data.count}));
-                                    this.loadData();
-                                })
-                        } else {
-                            return this.$store
-                                .dispatch("execution/bulkDeleteExecution", {executionsId: this.executionsSelection})
-                                .then(r => {
-                                    this.$toast().success(this.$t("executions deleted", {executionCount: r.data.count}));
-                                    this.loadData();
-                                }).catch(e => this.$toast().error(e.invalids.map(exec => {
-                                    return {message: this.$t(exec.message, {executionId: exec.invalidValue})}
-                                }), this.$t(e.message)))
-                        }
-                    },
-                    () => {}
-                )
+            () => {
+            }
+        )
+      },
+      killExecutions() {
+        this.$toast().confirm(
+            this.$t("bulk kill", {"executionCount": this.queryBulkAction ? this.total : this.selection.length}),
+            () => {
+              if (this.queryBulkAction) {
+                return this.$store
+                    .dispatch("execution/queryKill", this.loadQuery({
+                      sort: this.$route.query.sort || "state.startDate:desc",
+                      state: this.$route.query.state ? [this.$route.query.state] : this.statuses
+                    }, false))
+                    .then(r => {
+                      this.$toast().success(this.$t("executions killed", {executionCount: r.data.count}));
+                      this.loadData();
+                    })
+              } else {
+                return this.$store
+                    .dispatch("execution/bulkKill", {executionsId: this.selection})
+                    .then(r => {
+                      this.$toast().success(this.$t("executions killed", {executionCount: r.data.count}));
+                      this.loadData();
+                    }).catch(e => this.$toast().error(e.invalids.map(exec => {
+                      return {message: this.$t(exec.message, {executionId: exec.invalidValue})}
+                    }), this.$t(e.message)))
+              }
             },
-            killExecutions() {
-                this.$toast().confirm(
-                    this.$t("bulk kill", {"executionCount": this.queryBulkAction ? this.total : this.executionsSelection.length}),
-                    () => {
-                        if (this.queryBulkAction) {
-                            return this.$store
-                                .dispatch("execution/queryKill", this.loadQuery({
-                                    sort: this.$route.query.sort || "state.startDate:desc",
-                                    state: this.$route.query.state ? [this.$route.query.state] : this.statuses
-                                }, false))
-                                .then(r => {
-                                    this.$toast().success(this.$t("executions killed", {executionCount: r.data.count}));
-                                    this.loadData();
-                                })
-                        } else {
-                            return this.$store
-                                .dispatch("execution/bulkKill", {executionsId: this.executionsSelection})
-                                .then(r => {
-                                    this.$toast().success(this.$t("executions killed", {executionCount: r.data.count}));
-                                    this.loadData();
-                                }).catch(e => this.$toast().error(e.invalids.map(exec => {
-                                    return {message: this.$t(exec.message, {executionId: exec.invalidValue})}
-                                }), this.$t(e.message)))
-                        }
-                    },
-                    () => {}
-                )
-            },
-            editFlow() {
-                this.$router.push({name:"flows/update", params: {
-                    namespace: this.flow.namespace,
-                    id: this.flow.id,
-                    tab: "editor"
-                }})
-            },
-        }
-    };
+            () => {
+            }
+        )
+      },
+      editFlow() {
+        this.$router.push({
+          name: "flows/update", params: {
+            namespace: this.flow.namespace,
+            id: this.flow.id,
+            tab: "editor"
+          }
+        })
+      },
+    }
+  };
 </script>
\ No newline at end of file
diff --git a/ui/src/components/flows/Flows.vue b/ui/src/components/flows/Flows.vue
index 711e0f02ad6..1cd2b46a74a 100644
--- a/ui/src/components/flows/Flows.vue
+++ b/ui/src/components/flows/Flows.vue
@@ -1,449 +1,452 @@
 <template>
-    <div v-if="ready">
-        <div>
-            <data-table
-                @page-changed="onPageChanged"
-                ref="dataTable"
-                :total="total"
-            >
-                <template #navbar>
-                    <el-form-item>
-                        <search-field />
-                    </el-form-item>
-                    <el-form-item>
-                        <namespace-select
-                            data-type="flow"
-                            :value="$route.query.namespace"
-                            @update:model-value="onDataTableValue('namespace', $event)"
-                        />
-                    </el-form-item>
-                    <el-form-item>
-                        <label-filter
-                            :model-value="$route.query.labels"
-                            @update:model-value="onDataTableValue('labels', $event)"
-                        />
-                    </el-form-item>
-                </template>
-
-                <template #top>
-                    <state-global-chart
-                        class="mb-4"
-                        v-if="daily"
-                        :ready="dailyReady"
-                        :data="daily"
-                    />
-                </template>
+  <div v-if="ready">
+    <div>
+      <data-table
+          @page-changed="onPageChanged"
+          ref="dataTable"
+          :total="total"
+      >
+        <template #navbar>
+          <el-form-item>
+            <search-field/>
+          </el-form-item>
+          <el-form-item>
+            <namespace-select
+                data-type="flow"
+                :value="$route.query.namespace"
+                @update:model-value="onDataTableValue('namespace', $event)"
+            />
+          </el-form-item>
+          <el-form-item>
+            <label-filter
+                :model-value="$route.query.labels"
+                @update:model-value="onDataTableValue('labels', $event)"
+            />
+          </el-form-item>
+        </template>
 
-                <template #table>
-                    <el-table
-                        :data="flows"
-                        ref="table"
-                        :default-sort="{prop: 'id', order: 'ascending'}"
-                        stripe
-                        table-layout="auto"
-                        fixed
-                        @row-dblclick="onRowDoubleClick"
-                        @sort-change="onSort"
-                        :row-class-name="rowClasses"
-                        @selection-change="handleSelectionChange"
-                    >
-                        <el-table-column type="selection" v-if="(canCheck)" />
-                        <el-table-column prop="id" sortable="custom" :sort-orders="['ascending', 'descending']" :label="$t('id')">
-                            <template #default="scope">
-                                <router-link
-                                    :to="{name: 'flows/update', params: {namespace: scope.row.namespace, id: scope.row.id}}"
-                                >
-                                    {{ $filters.invisibleSpace(scope.row.id) }}
-                                </router-link>
-                                &nbsp;<markdown-tooltip
-                                    :id="scope.row.namespace + '-' + scope.row.id"
-                                    :description="scope.row.description"
-                                    :title="scope.row.namespace + '.' + scope.row.id"
-                                />
-                            </template>
-                        </el-table-column>
+        <template #top>
+          <state-global-chart
+              class="mb-4"
+              v-if="daily"
+              :ready="dailyReady"
+              :data="daily"
+          />
+        </template>
 
-                        <el-table-column :label="$t('labels')">
-                            <template #default="scope">
-                                <labels :labels="scope.row.labels" />
-                            </template>
-                        </el-table-column>
+        <template #table>
+          <select-table
+              ref="selectTable"
+              :data="flows"
+              :default-sort="{prop: 'id', order: 'ascending'}"
+              stripe
+              table-layout="auto"
+              fixed
+              @row-dblclick="onRowDoubleClick"
+              @sort-change="onSort"
+              :row-class-name="rowClasses"
+              @selection-change="handleSelectionChange"
+              :selectable="canCheck"
+          >
+            <template #select-actions>
+              <bulk-select :model-value="queryBulkAction" :selections="selection" :total="total"
+                           @update:model-value="toggleAllSelection()">
+                <el-button v-if="canRead" :icon="Download" @click="exportFlows()">
+                  {{ $t('export') }}
+                </el-button>
+                <el-button v-if="canDelete" @click="deleteFlows" :icon="TrashCan">
+                  {{ $t('delete') }}
+                </el-button>
+                <el-button v-if="canUpdate" @click="enableFlows" :icon="FileDocumentCheckOutline">
+                  {{ $t('enable') }}
+                </el-button>
+                <el-button v-if="canUpdate" @click="disableFlows" :icon="FileDocumentRemoveOutline">
+                  {{ $t('disable') }}
+                </el-button>
+              </bulk-select>
+            </template>
+            <template #default>
+              <el-table-column prop="id" sortable="custom" :sort-orders="['ascending', 'descending']" :label="$t('id')">
+                <template #default="scope">
+                  <router-link
+                      :to="{name: 'flows/update', params: {namespace: scope.row.namespace, id: scope.row.id}}"
+                  >
+                    {{ $filters.invisibleSpace(scope.row.id) }}
+                  </router-link>
+                  &nbsp;<markdown-tooltip
+                    :id="scope.row.namespace + '-' + scope.row.id"
+                    :description="scope.row.description"
+                    :title="scope.row.namespace + '.' + scope.row.id"
+                />
+                </template>
+              </el-table-column>
 
-                        <el-table-column prop="namespace" sortable="custom" :sort-orders="['ascending', 'descending']" :label="$t('namespace')" :formatter="(_, __, cellValue) => $filters.invisibleSpace(cellValue)" />
+              <el-table-column :label="$t('labels')">
+                <template #default="scope">
+                  <labels :labels="scope.row.labels"/>
+                </template>
+              </el-table-column>
 
-                        <el-table-column
-                            prop="state"
-                            :label="$t('execution statistics')"
-                            v-if="user.hasAny(permission.EXECUTION)"
-                            class-name="row-graph"
-                        >
-                            <template #default="scope">
-                                <state-chart
-                                    :duration="true"
-                                    :namespace="scope.row.namespace"
-                                    :flow-id="scope.row.id"
-                                    v-if="dailyGroupByFlowReady"
-                                    :data="chartData(scope.row)"
-                                />
-                            </template>
-                        </el-table-column>
+              <el-table-column prop="namespace" sortable="custom" :sort-orders="['ascending', 'descending']"
+                               :label="$t('namespace')"
+                               :formatter="(_, __, cellValue) => $filters.invisibleSpace(cellValue)"/>
 
-                        <el-table-column :label="$t('triggers')" class-name="row-action">
-                            <template #default="scope">
-                                <trigger-avatar :flow="scope.row" />
-                            </template>
-                        </el-table-column>
+              <el-table-column
+                  prop="state"
+                  :label="$t('execution statistics')"
+                  v-if="user.hasAny(permission.EXECUTION)"
+                  class-name="row-graph"
+              >
+                <template #default="scope">
+                  <state-chart
+                      :duration="true"
+                      :namespace="scope.row.namespace"
+                      :flow-id="scope.row.id"
+                      v-if="dailyGroupByFlowReady"
+                      :data="chartData(scope.row)"
+                  />
+                </template>
+              </el-table-column>
 
-                        <el-table-column 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}}">
-                                    <kicon :tooltip="$t('details')" placement="left">
-                                        <eye />
-                                    </kicon>
-                                </router-link>
-                            </template>
-                        </el-table-column>
-                    </el-table>
+              <el-table-column :label="$t('triggers')" class-name="row-action">
+                <template #default="scope">
+                  <trigger-avatar :flow="scope.row"/>
                 </template>
-            </data-table>
-        </div>
+              </el-table-column>
 
-        <bottom-line>
-            <ul>
-                <li>
-                    <ul v-if="flowsSelection.length !== 0 && canRead">
-                        <bottom-line-counter v-model="queryBulkAction" :selections="flowsSelection" :total="total" @update:model-value="selectAll()">
-                            <el-button v-if="canRead" :icon="Download" size="large" @click="exportFlows()">
-                                {{ $t('export') }}
-                            </el-button>
-                            <el-button v-if="canDelete" @click="deleteFlows" size="large" :icon="TrashCan">
-                                {{ $t('delete') }}
-                            </el-button>
-                            <el-button v-if="canUpdate" @click="enableFlows" size="large" :icon="FileDocumentCheckOutline">
-                                {{ $t('enable') }}
-                            </el-button>
-                            <el-button v-if="canUpdate" @click="disableFlows" size="large" :icon="FileDocumentRemoveOutline">
-                                {{ $t('disable') }}
-                            </el-button>
-                        </bottom-line-counter>
-                    </ul>
-                </li>
-                <li class="spacer" />
-                <li>
-                    <div class="el-input el-input-file el-input--large custom-upload">
-                        <div class="el-input__wrapper">
-                            <label for="importFlows">
-                                <Upload />
-                                {{ $t('import') }}
-                            </label>
-                            <input
-                                id="importFlows"
-                                class="el-input__inner"
-                                type="file"
-                                @change="importFlows()"
-                                ref="file"
-                            >
-                        </div>
-                    </div>
-                </li>
-                <li>
-                    <router-link :to="{name: 'flows/search'}">
-                        <el-button :icon="TextBoxSearch" size="large">
-                            {{ $t('source search') }}
-                        </el-button>
-                    </router-link>
-                </li>
-                <li v-if="user && user.hasAnyAction(permission.FLOW, action.CREATE)">
-                    <router-link :to="{name: 'flows/create'}">
-                        <el-button :icon="Plus" type="primary" size="large">
-                            {{ $t('create') }}
-                        </el-button>
-                    </router-link>
-                </li>
-            </ul>
-        </bottom-line>
+              <el-table-column 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}}">
+                    <kicon :tooltip="$t('details')" placement="left">
+                      <eye/>
+                    </kicon>
+                  </router-link>
+                </template>
+              </el-table-column>
+            </template>
+          </select-table>
+        </template>
+      </data-table>
     </div>
+
+    <bottom-line>
+      <ul>
+        <li>
+          <div class="el-input el-input-file el-input--large custom-upload">
+            <div class="el-input__wrapper">
+              <label for="importFlows">
+                <Upload/>
+                {{ $t('import') }}
+              </label>
+              <input
+                  id="importFlows"
+                  class="el-input__inner"
+                  type="file"
+                  @change="importFlows()"
+                  ref="file"
+              >
+            </div>
+          </div>
+        </li>
+        <li>
+          <router-link :to="{name: 'flows/search'}">
+            <el-button :icon="TextBoxSearch" size="large">
+              {{ $t('source search') }}
+            </el-button>
+          </router-link>
+        </li>
+        <li v-if="user && user.hasAnyAction(permission.FLOW, action.CREATE)">
+          <router-link :to="{name: 'flows/create'}">
+            <el-button :icon="Plus" type="primary" size="large">
+              {{ $t('create') }}
+            </el-button>
+          </router-link>
+        </li>
+      </ul>
+    </bottom-line>
+  </div>
 </template>
 
 <script setup>
-    import Plus from "vue-material-design-icons/Plus.vue";
-    import TextBoxSearch from "vue-material-design-icons/TextBoxSearch.vue";
-    import Download from "vue-material-design-icons/Download.vue";
-    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 BulkSelect from "../layout/BulkSelect.vue";
+  import SelectTable from "../layout/SelectTable.vue";
+  import Plus from "vue-material-design-icons/Plus.vue";
+  import TextBoxSearch from "vue-material-design-icons/TextBoxSearch.vue";
+  import Download from "vue-material-design-icons/Download.vue";
+  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";
 </script>
 
 <script>
-    import {mapState} from "vuex";
-    import _merge from "lodash/merge";
-    import permission from "../../models/permission";
-    import action from "../../models/action";
-    import NamespaceSelect from "../namespace/NamespaceSelect.vue";
-    import Eye from "vue-material-design-icons/Eye.vue";
-    import BottomLine from "../layout/BottomLine.vue";
-    import RouteContext from "../../mixins/routeContext";
-    import DataTableActions from "../../mixins/dataTableActions";
-    import RestoreUrl from "../../mixins/restoreUrl";
-    import DataTable from "../layout/DataTable.vue";
-    import SearchField from "../layout/SearchField.vue";
-    import StateChart from "../stats/StateChart.vue";
-    import StateGlobalChart from "../stats/StateGlobalChart.vue";
-    import TriggerAvatar from "./TriggerAvatar.vue";
-    import MarkdownTooltip from "../layout/MarkdownTooltip.vue"
-    import Kicon from "../Kicon.vue"
-    import Labels from "../layout/Labels.vue"
-    import BottomLineCounter from "../layout/BottomLineCounter.vue";
-    import Upload from "vue-material-design-icons/Upload.vue";
-    import LabelFilter from "../labels/LabelFilter.vue";
+  import {mapState} from "vuex";
+  import _merge from "lodash/merge";
+  import permission from "../../models/permission";
+  import action from "../../models/action";
+  import NamespaceSelect from "../namespace/NamespaceSelect.vue";
+  import Eye from "vue-material-design-icons/Eye.vue";
+  import BottomLine from "../layout/BottomLine.vue";
+  import RouteContext from "../../mixins/routeContext";
+  import DataTableActions from "../../mixins/dataTableActions";
+  import SelectTableActions from "../../mixins/selectTableActions";
+  import RestoreUrl from "../../mixins/restoreUrl";
+  import DataTable from "../layout/DataTable.vue";
+  import SearchField from "../layout/SearchField.vue";
+  import StateChart from "../stats/StateChart.vue";
+  import StateGlobalChart from "../stats/StateGlobalChart.vue";
+  import TriggerAvatar from "./TriggerAvatar.vue";
+  import MarkdownTooltip from "../layout/MarkdownTooltip.vue"
+  import Kicon from "../Kicon.vue"
+  import Labels from "../layout/Labels.vue"
+  import Upload from "vue-material-design-icons/Upload.vue";
+  import LabelFilter from "../labels/LabelFilter.vue";
 
-    export default {
-        mixins: [RouteContext, RestoreUrl, DataTableActions],
-        components: {
-            NamespaceSelect,
-            BottomLine,
-            Eye,
-            DataTable,
-            SearchField,
-            StateChart,
-            StateGlobalChart,
-            TriggerAvatar,
-            MarkdownTooltip,
-            Kicon,
-            Labels,
-            BottomLineCounter,
-            Upload,
-            LabelFilter
-        },
-        data() {
-            return {
-                isDefaultNamespaceAllow: true,
-                permission: permission,
-                action: action,
-                dailyGroupByFlowReady: false,
-                dailyReady: false,
-                flowsSelection: [],
-                queryBulkAction: false,
-                file: undefined,
-            };
-        },
-        computed: {
-            ...mapState("flow", ["flows", "total"]),
-            ...mapState("stat", ["dailyGroupByFlow", "daily"]),
-            ...mapState("auth", ["user"]),
-            routeInfo() {
-                return {
-                    title: this.$t("flows")
-                };
-            },
-            endDate() {
-                return new Date();
-            },
-            startDate() {
-                return this.$moment(this.endDate)
-                    .add(-30, "days")
-                    .toDate();
-            },
-            canCheck() {
-                return this.canRead || this.canDelete || this.canUpdate;
-            },
-            canRead() {
-                return this.user && this.user.isAllowed(permission.FLOW, action.READ, this.$route.query.namespace);
-            },
-            canDelete() {
-                return this.user && this.user.isAllowed(permission.FLOW, action.DELETE, this.$route.query.namespace);
-            },
-            canUpdate() {
-                return this.user && this.user.isAllowed(permission.FLOW, action.UPDATE, this.$route.query.namespace);
-            },
-        },
-        methods: {
-            handleSelectionChange(val) {
-                if (val.length === 0) {
-                    this.queryBulkAction = false
-                }
-                this.flowsSelection = val.map(x => {
-                    return {
-                        id: x.id,
-                        namespace: x.namespace
-                    }
-                });
-            },
-            selectAll() {
-                if (this.$refs.table.getSelectionRows().length !== this.$refs.table.data.length) {
-                    this.$refs.table.toggleAllSelection();
-                }
-            },
-            exportFlows() {
-                this.$toast().confirm(
-                    this.$t("flow export", {"flowCount": this.queryBulkAction ? this.total : this.flowsSelection.length}),
-                    () => {
-                        if (this.queryBulkAction) {
-                            return this.$store
-                                .dispatch("flow/exportFlowByQuery", this.loadQuery({
-                                    namespace: this.$route.query.namespace ? [this.$route.query.namespace] : undefined,
-                                    q: this.$route.query.q ? [this.$route.query.q] : undefined,
-                                }, false))
-                                .then(_ => {
-                                    this.$toast().success(this.$t("flows exported"));
-                                })
-                        } else {
-                            return this.$store
-                                .dispatch("flow/exportFlowByIds", {ids: this.flowsSelection})
-                                .then(_ => {
-                                    this.$toast().success(this.$t("flows exported"));
-                                })
-                        }
-                    },
-                    () => {}
-                )
-            },
-            disableFlows(){
-                this.$toast().confirm(
-                    this.$t("flow disable", {"flowCount": this.queryBulkAction ? this.total : this.flowsSelection.length}),
-                    () => {
-                        if (this.queryBulkAction) {
-                            return this.$store
-                                .dispatch("flow/disableFlowByQuery", this.loadQuery({
-                                    namespace: this.$route.query.namespace ? [this.$route.query.namespace] : undefined,
-                                    q: this.$route.query.q ? [this.$route.query.q] : undefined,
-                                }, false))
-                                .then(r => {
-                                    this.$toast().success(this.$t("flows disabled", {count: r.data.count}));
-                                    this.loadData(() => {})
-                                })
-                        } else {
-                            return this.$store
-                                .dispatch("flow/disableFlowByIds", {ids: this.flowsSelection})
-                                .then(r => {
-                                    this.$toast().success(this.$t("flows disabled", {count: r.data.count}));
-                                    this.loadData(() => {})
-                                })
-                        }
-                    },
-                    () => {}
-                )
-            },
-            enableFlows(){
-                this.$toast().confirm(
-                    this.$t("flow enable", {"flowCount": this.queryBulkAction ? this.total : this.flowsSelection.length}),
-                    () => {
-                        if (this.queryBulkAction) {
-                            return this.$store
-                                .dispatch("flow/enableFlowByQuery", this.loadQuery({
-                                    namespace: this.$route.query.namespace ? [this.$route.query.namespace] : undefined,
-                                    q: this.$route.query.q ? [this.$route.query.q] : undefined,
-                                }, false))
-                                .then(r => {
-                                    this.$toast().success(this.$t("flows enabled", {count: r.data.count}));
-                                    this.loadData(() => {})
-                                })
-                        } else {
-                            return this.$store
-                                .dispatch("flow/enableFlowByIds", {ids: this.flowsSelection})
-                                .then(r => {
-                                    this.$toast().success(this.$t("flows enabled", {count: r.data.count}));
-                                    this.loadData(() => {})
-                                })
-                        }
-                    },
-                    () => {}
-                )
-            },
-            deleteFlows(){
-                this.$toast().confirm(
-                    this.$t("flow delete", {"flowCount": this.queryBulkAction ? this.total : this.flowsSelection.length}),
-                    () => {
-                        if (this.queryBulkAction) {
-                            return this.$store
-                                .dispatch("flow/deleteFlowByQuery", this.loadQuery({
-                                    namespace: this.$route.query.namespace ? [this.$route.query.namespace] : undefined,
-                                    q: this.$route.query.q ? [this.$route.query.q] : undefined,
-                                }, false))
-                                .then(r => {
-                                    this.$toast().success(this.$t("flows deleted", {count: r.data.count}));
-                                    this.loadData(() => {})
-                                })
-                        } else {
-                            return this.$store
-                                .dispatch("flow/deleteFlowByIds", {ids: this.flowsSelection})
-                                .then(r => {
-                                    this.$toast().success(this.$t("flows deleted", {count: r.data.count}));
-                                    this.loadData(() => {})
-                                })
-                        }
-                    },
-                    () => {}
-                )
-            },
-            importFlows() {
-                const formData = new FormData();
-                formData.append("fileUpload", this.$refs.file.files[0]);
-                this.$store
-                    .dispatch("flow/importFlows", formData)
+  export default {
+    mixins: [RouteContext, RestoreUrl, DataTableActions, SelectTableActions],
+    components: {
+      NamespaceSelect,
+      BottomLine,
+      Eye,
+      DataTable,
+      SearchField,
+      StateChart,
+      StateGlobalChart,
+      TriggerAvatar,
+      MarkdownTooltip,
+      Kicon,
+      Labels,
+      Upload,
+      LabelFilter
+    },
+    data() {
+      return {
+        isDefaultNamespaceAllow: true,
+        permission: permission,
+        action: action,
+        dailyGroupByFlowReady: false,
+        dailyReady: false,
+        file: undefined,
+      };
+    },
+    computed: {
+      ...mapState("flow", ["flows", "total"]),
+      ...mapState("stat", ["dailyGroupByFlow", "daily"]),
+      ...mapState("auth", ["user"]),
+      routeInfo() {
+        return {
+          title: this.$t("flows")
+        };
+      },
+      endDate() {
+        return new Date();
+      },
+      startDate() {
+        return this.$moment(this.endDate)
+            .add(-30, "days")
+            .toDate();
+      },
+      canCheck() {
+        return this.canRead || this.canDelete || this.canUpdate;
+      },
+      canRead() {
+        return this.user && this.user.isAllowed(permission.FLOW, action.READ, this.$route.query.namespace);
+      },
+      canDelete() {
+        return this.user && this.user.isAllowed(permission.FLOW, action.DELETE, this.$route.query.namespace);
+      },
+      canUpdate() {
+        return this.user && this.user.isAllowed(permission.FLOW, action.UPDATE, this.$route.query.namespace);
+      }
+    },
+    methods: {
+      selectionMapper(element) {
+        return {
+          id: element.id,
+          namespace: element.namespace
+        }
+      },
+      exportFlows() {
+        this.$toast().confirm(
+            this.$t("flow export", {"flowCount": this.queryBulkAction ? this.total : this.selection.length}),
+            () => {
+              if (this.queryBulkAction) {
+                return this.$store
+                    .dispatch("flow/exportFlowByQuery", this.loadQuery({
+                      namespace: this.$route.query.namespace ? [this.$route.query.namespace] : undefined,
+                      q: this.$route.query.q ? [this.$route.query.q] : undefined,
+                    }, false))
+                    .then(_ => {
+                      this.$toast().success(this.$t("flows exported"));
+                    })
+              } else {
+                return this.$store
+                    .dispatch("flow/exportFlowByIds", {ids: this.selection})
                     .then(_ => {
-                        this.$toast().success(this.$t("flows imported"));
-                        this.loadData(() => {})
+                      this.$toast().success(this.$t("flows exported"));
                     })
+              }
             },
-            chartData(row) {
-                if (this.dailyGroupByFlow && this.dailyGroupByFlow[row.namespace] && this.dailyGroupByFlow[row.namespace][row.id]) {
-                    return this.dailyGroupByFlow[row.namespace][row.id];
-                } else {
-                    return [];
-                }
+            () => {
+            }
+        )
+      },
+      disableFlows() {
+        this.$toast().confirm(
+            this.$t("flow disable", {"flowCount": this.queryBulkAction ? this.total : this.selection.length}),
+            () => {
+              if (this.queryBulkAction) {
+                return this.$store
+                    .dispatch("flow/disableFlowByQuery", this.loadQuery({
+                      namespace: this.$route.query.namespace ? [this.$route.query.namespace] : undefined,
+                      q: this.$route.query.q ? [this.$route.query.q] : undefined,
+                    }, false))
+                    .then(r => {
+                      this.$toast().success(this.$t("flows disabled", {count: r.data.count}));
+                      this.loadData(() => {
+                      })
+                    })
+              } else {
+                return this.$store
+                    .dispatch("flow/disableFlowByIds", {ids: this.selection})
+                    .then(r => {
+                      this.$toast().success(this.$t("flows disabled", {count: r.data.count}));
+                      this.loadData(() => {
+                      })
+                    })
+              }
             },
-            loadQuery(base) {
-                let queryFilter = this.queryWithFilter();
-
-                return _merge(base, queryFilter)
+            () => {
+            }
+        )
+      },
+      enableFlows() {
+        this.$toast().confirm(
+            this.$t("flow enable", {"flowCount": this.queryBulkAction ? this.total : this.selection.length}),
+            () => {
+              if (this.queryBulkAction) {
+                return this.$store
+                    .dispatch("flow/enableFlowByQuery", this.loadQuery({
+                      namespace: this.$route.query.namespace ? [this.$route.query.namespace] : undefined,
+                      q: this.$route.query.q ? [this.$route.query.q] : undefined,
+                    }, false))
+                    .then(r => {
+                      this.$toast().success(this.$t("flows enabled", {count: r.data.count}));
+                      this.loadData(() => {
+                      })
+                    })
+              } else {
+                return this.$store
+                    .dispatch("flow/enableFlowByIds", {ids: this.selection})
+                    .then(r => {
+                      this.$toast().success(this.$t("flows enabled", {count: r.data.count}));
+                      this.loadData(() => {
+                      })
+                    })
+              }
             },
-            loadData(callback) {
-                this.dailyReady = false;
-
-                if (this.user.hasAny(permission.EXECUTION)) {
-                    this.$store
-                        .dispatch("stat/daily", this.loadQuery({
-                            startDate: this.$moment(this.startDate).add(-1, "day").startOf("day").toISOString(true),
-                            endDate: this.$moment(this.endDate).endOf("day").toISOString(true)
-                        }))
-                        .then(() => {
-                            this.dailyReady = true;
-                        });
-                }
-
-                this.$store
-                    .dispatch("flow/findFlows", this.loadQuery({
-                        size: parseInt(this.$route.query.size || 25),
-                        page: parseInt(this.$route.query.page || 1),
-                        sort: this.$route.query.sort || "id:asc"
-                    }))
-                    .then(flows => {
-                        this.dailyGroupByFlowReady = false;
-                        callback();
-
-                        if (flows.results && flows.results.length > 0) {
-                            if (this.user && this.user.hasAny(permission.EXECUTION)) {
-                                this.$store
-                                    .dispatch("stat/dailyGroupByFlow", {
-                                        flows: flows.results
-                                            .map(flow => {
-                                                return {namespace: flow.namespace, id: flow.id}
-                                            }),
-                                        startDate: this.$moment(this.startDate).add(-1, "day").startOf("day").toISOString(true),
-                                        endDate: this.$moment(this.endDate).endOf("day").toISOString(true)
-                                    })
-                                    .then(() => {
-                                        this.dailyGroupByFlowReady = true
-                                    })
-                            }
-                        }
+            () => {
+            }
+        )
+      },
+      deleteFlows() {
+        this.$toast().confirm(
+            this.$t("flow delete", {"flowCount": this.queryBulkAction ? this.total : this.selection.length}),
+            () => {
+              if (this.queryBulkAction) {
+                return this.$store
+                    .dispatch("flow/deleteFlowByQuery", this.loadQuery({
+                      namespace: this.$route.query.namespace ? [this.$route.query.namespace] : undefined,
+                      q: this.$route.query.q ? [this.$route.query.q] : undefined,
+                    }, false))
+                    .then(r => {
+                      this.$toast().success(this.$t("flows deleted", {count: r.data.count}));
+                      this.loadData(() => {
+                      })
+                    })
+              } else {
+                return this.$store
+                    .dispatch("flow/deleteFlowByIds", {ids: this.selection})
+                    .then(r => {
+                      this.$toast().success(this.$t("flows deleted", {count: r.data.count}));
+                      this.loadData(() => {
+                      })
                     })
+              }
             },
-            rowClasses(row) {
-                return row && row.row && row.row.disabled ? "disabled" : "";
+            () => {
             }
+        )
+      },
+      importFlows() {
+        const formData = new FormData();
+        formData.append("fileUpload", this.$refs.file.files[0]);
+        this.$store
+            .dispatch("flow/importFlows", formData)
+            .then(_ => {
+              this.$toast().success(this.$t("flows imported"));
+              this.loadData(() => {
+              })
+            })
+      },
+      chartData(row) {
+        if (this.dailyGroupByFlow && this.dailyGroupByFlow[row.namespace] && this.dailyGroupByFlow[row.namespace][row.id]) {
+          return this.dailyGroupByFlow[row.namespace][row.id];
+        } else {
+          return [];
         }
-    };
+      },
+      loadQuery(base) {
+        let queryFilter = this.queryWithFilter();
+
+        return _merge(base, queryFilter)
+      },
+      loadData(callback) {
+        this.dailyReady = false;
+
+        if (this.user.hasAny(permission.EXECUTION)) {
+          this.$store
+              .dispatch("stat/daily", this.loadQuery({
+                startDate: this.$moment(this.startDate).add(-1, "day").startOf("day").toISOString(true),
+                endDate: this.$moment(this.endDate).endOf("day").toISOString(true)
+              }))
+              .then(() => {
+                this.dailyReady = true;
+              });
+        }
+
+        this.$store
+            .dispatch("flow/findFlows", this.loadQuery({
+              size: parseInt(this.$route.query.size || 25),
+              page: parseInt(this.$route.query.page || 1),
+              sort: this.$route.query.sort || "id:asc"
+            }))
+            .then(flows => {
+              this.dailyGroupByFlowReady = false;
+              callback();
+
+              if (flows.results && flows.results.length > 0) {
+                if (this.user && this.user.hasAny(permission.EXECUTION)) {
+                  this.$store
+                      .dispatch("stat/dailyGroupByFlow", {
+                        flows: flows.results
+                            .map(flow => {
+                              return {namespace: flow.namespace, id: flow.id}
+                            }),
+                        startDate: this.$moment(this.startDate).add(-1, "day").startOf("day").toISOString(true),
+                        endDate: this.$moment(this.endDate).endOf("day").toISOString(true)
+                      })
+                      .then(() => {
+                        this.dailyGroupByFlowReady = true
+                      })
+                }
+              }
+            })
+      },
+      rowClasses(row) {
+        return row && row.row && row.row.disabled ? "disabled" : "";
+      }
+    }
+  };
 </script>
 
diff --git a/ui/src/components/layout/BottomLineCounter.vue b/ui/src/components/layout/BottomLineCounter.vue
deleted file mode 100644
index c7e51116c78..00000000000
--- a/ui/src/components/layout/BottomLineCounter.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-    <el-button-group>
-        <el-button size="large" @click="all()">
-            <span v-html="$t('selection.selected', {count: modelValue ? total : selections.length})" />
-
-            <span class="counter" v-if="selections.length<total && !modelValue" v-html="$t('selection.all', {count: total})" />
-        </el-button>
-        <slot />
-    </el-button-group>
-</template>
-<script>
-    export default {
-        props: {
-            total: {type: Number, required: true},
-            selections: {type: Array, required: true},
-            modelValue: {type: Boolean, required: true},
-        },
-        emits: ["update:modelValue"],
-        methods: {
-            all() {
-                this.$emit("update:modelValue", true);
-            }
-        }
-    }
-</script>
-<style lang="scss" scoped>
-    span {
-        color: var(--bs-tertiary);
-    }
-
-    span.counter {
-        border-left: 1px solid var(--bs-gray-100-darken-5);
-        padding-left: 0.5rem;
-        margin-left: 5px;
-        margin-right: 5px;
-    }
-</style>
diff --git a/ui/src/components/layout/BulkSelect.vue b/ui/src/components/layout/BulkSelect.vue
new file mode 100644
index 00000000000..b13789f194f
--- /dev/null
+++ b/ui/src/components/layout/BulkSelect.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="bulk-select">
+    <el-checkbox
+        :model-value="modelValue"
+        :indeterminate="partialCheck"
+        @change="toggleAll"
+    >
+      <span v-html="$t('selection.selected', {count: modelValue ? total : selections.length})"/>
+    </el-checkbox>
+    <el-button-group>
+      <slot/>
+    </el-button-group>
+  </div>
+</template>
+<script>
+  export default {
+    props: {
+      total: {type: Number, required: true},
+      selections: {type: Array, required: true},
+      modelValue: {type: Boolean, required: true},
+    },
+    emits: ["update:modelValue"],
+    methods: {
+      toggleAll() {
+        this.$emit("update:modelValue", !this.modelValue);
+      }
+    },
+    computed: {
+      partialCheck() {
+        return !this.modelValue && this.selections.length > 0;
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .bulk-select {
+    height: 100%;
+    display: flex;
+    align-items: center;
+
+    .el-checkbox {
+      height: 100%;
+
+      span {
+        padding-left: calc(var(--spacer) * 1.5);
+      }
+    }
+
+    > * {
+      padding: 0 8px;
+    }
+  }
+
+  span {
+    font-weight: bold;
+  }
+</style>
diff --git a/ui/src/components/layout/SelectTable.vue b/ui/src/components/layout/SelectTable.vue
new file mode 100644
index 00000000000..455dd9435a5
--- /dev/null
+++ b/ui/src/components/layout/SelectTable.vue
@@ -0,0 +1,63 @@
+<script>
+    export default {
+        data() {
+            return {
+                hasSelection: false
+            }
+        },
+        methods: {
+            selectionChanged(selection) {
+                this.hasSelection = selection.length > 0;
+                this.$emit("selection-change", selection);
+            },
+            computeHeaderSize() {
+                const tableHead = this.$refs.table.$el.querySelector('thead');
+                this.$el.style.setProperty("--table-header-width", `${tableHead.clientWidth}px`);
+                this.$el.style.setProperty("--table-header-height", `${tableHead.clientHeight}px`);
+            }
+        },
+        props: {
+            selectable: {
+                type: Boolean,
+                default: true
+            },
+            data: {
+                type: Array
+            }
+        },
+        mounted() {
+            window.onresize = this.computeHeaderSize;
+        },
+        updated() {
+            this.computeHeaderSize();
+        }
+    }
+</script>
+
+<template>
+    <div class="position-relative">
+        <div v-if="hasSelection" class="bulk-select-header">
+            <slot name="select-actions"/>
+        </div>
+        <el-table ref="table" v-bind="$attrs" :data="data" @selection-change="selectionChanged">
+            <el-table-column type="selection" v-if="selectable" />
+            <slot name="default"/>
+        </el-table>
+    </div>
+</template>
+
+<style scoped lang="scss">
+    .bulk-select-header {
+        z-index: 1;
+        position: absolute;
+        height: var(--table-header-height);
+        width: var(--table-header-width);
+        background-color: var(--bs-gray-100-darken-3);
+        border-radius: var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0 0;
+        border-bottom: 1px solid var(--bs-border-color);
+
+        & ~ .el-table {
+            z-index: 0;
+        }
+    }
+</style>
diff --git a/ui/src/components/templates/Templates.vue b/ui/src/components/templates/Templates.vue
index e94535cb973..7f3ca17b555 100644
--- a/ui/src/components/templates/Templates.vue
+++ b/ui/src/components/templates/Templates.vue
@@ -1,269 +1,266 @@
 <template>
-    <div v-if="ready">
-        <div>
-            <data-table
-                @page-changed="onPageChanged"
-                ref="dataTable"
-                :total="total"
-            >
-                <template #navbar>
-                    <el-form-item>
-                        <search-field />
-                    </el-form-item>
-                    <el-form-item>
-                        <namespace-select
-                            data-type="flow"
-                            :value="$route.query.namespace"
-                            @update:model-value="onDataTableValue('namespace', $event)"
-                        />
-                    </el-form-item>
-                </template>
-
-                <template #table>
-                    <el-table
-                        :data="templates"
-                        ref="table"
-                        :default-sort="{prop: 'id', order: 'ascending'}"
-                        stripe
-                        table-layout="auto"
-                        fixed
-                        @row-dblclick="onRowDoubleClick"
-                        @sort-change="onSort"
-                        @selection-change="handleSelectionChange"
-                    >
-                        <el-table-column type="selection" v-if="(canRead)" />
+  <div v-if="ready">
+    <div>
+      <data-table
+          @page-changed="onPageChanged"
+          ref="dataTable"
+          :total="total"
+      >
+        <template #navbar>
+          <el-form-item>
+            <search-field/>
+          </el-form-item>
+          <el-form-item>
+            <namespace-select
+                data-type="flow"
+                :value="$route.query.namespace"
+                @update:model-value="onDataTableValue('namespace', $event)"
+            />
+          </el-form-item>
+        </template>
 
-                        <el-table-column prop="id" sortable="custom" :sort-orders="['ascending', 'descending']" :label="$t('id')">
-                            <template #default="scope">
-                                <router-link
-                                    :to="{name: 'templates/update', params: {namespace: scope.row.namespace, id: scope.row.id}}"
-                                >
-                                    {{ scope.row.id }}
-                                </router-link>
-                                &nbsp;<markdown-tooltip
-                                    :id="scope.row.namespace + '-' + scope.row.id"
-                                    :description="scope.row.description"
-                                    :title="scope.row.namespace + '.' + scope.row.id"
-                                />
-                            </template>
-                        </el-table-column>
+        <template #table>
+          <select-table
+              ref="selectTable"
+              :data="templates"
+              :default-sort="{prop: 'id', order: 'ascending'}"
+              stripe
+              table-layout="auto"
+              fixed
+              @row-dblclick="onRowDoubleClick"
+              @sort-change="onSort"
+              @selection-change="handleSelectionChange"
+              :selectable="canRead || canDelete"
+          >
+            <template #select-actions>
+              <bulk-select v-model="queryBulkAction" :selections="selection" :total="total"
+                           @update:model-value="toggleAllSelection()">
+                <el-button v-if="canRead" :icon="Download" @click="exportTemplates()">
+                  {{ $t('export') }}
+                </el-button>
+                <el-button v-if="canDelete" @click="deleteTemplates" :icon="TrashCan">
+                  {{ $t('delete') }}
+                </el-button>
+              </bulk-select>
+            </template>
+            <template #default>
+              <el-table-column prop="id" sortable="custom" :sort-orders="['ascending', 'descending']" :label="$t('id')">
+                <template #default="scope">
+                  <router-link
+                      :to="{name: 'templates/update', params: {namespace: scope.row.namespace, id: scope.row.id}}"
+                  >
+                    {{ scope.row.id }}
+                  </router-link>
+                  &nbsp;<markdown-tooltip
+                    :id="scope.row.namespace + '-' + scope.row.id"
+                    :description="scope.row.description"
+                    :title="scope.row.namespace + '.' + scope.row.id"
+                />
+                </template>
+              </el-table-column>
 
-                        <el-table-column prop="namespace" sortable="custom" :sort-orders="['ascending', 'descending']" :label="$t('namespace')" :formatter="(_, __, cellValue) => $filters.invisibleSpace(cellValue)" />
+              <el-table-column prop="namespace" sortable="custom" :sort-orders="['ascending', 'descending']"
+                               :label="$t('namespace')"
+                               :formatter="(_, __, cellValue) => $filters.invisibleSpace(cellValue)"/>
 
-                        <el-table-column column-key="action" class-name="row-action">
-                            <template #default="scope">
-                                <router-link :to="{name: 'templates/update', params : {namespace: scope.row.namespace, id: scope.row.id}}">
-                                    <kicon :tooltip="$t('details')" placement="left">
-                                        <eye />
-                                    </kicon>
-                                </router-link>
-                            </template>
-                        </el-table-column>
-                    </el-table>
+              <el-table-column column-key="action" class-name="row-action">
+                <template #default="scope">
+                  <router-link
+                      :to="{name: 'templates/update', params : {namespace: scope.row.namespace, id: scope.row.id}}">
+                    <kicon :tooltip="$t('details')" placement="left">
+                      <eye/>
+                    </kicon>
+                  </router-link>
                 </template>
-            </data-table>
-        </div>
-
+              </el-table-column>
+            </template>
+          </select-table>
+        </template>
+      </data-table>
+    </div>
 
-        <bottom-line v-if="user && user.hasAnyAction(permission.TEMPLATE, action.CREATE)">
-            <ul>
-                <ul v-if="templatesSelection.length !== 0 && canRead">
-                    <bottom-line-counter v-model="queryBulkAction" :selections="templatesSelection" :total="total" @update:model-value="selectAll()">
-                        <el-button v-if="canRead" :icon="Download" size="large" @click="exportTemplates()">
-                            {{ $t('export') }}
-                        </el-button>
-                        <el-button v-if="canDelete" @click="deleteTemplates" size="large" :icon="TrashCan">
-                            {{ $t('delete') }}
-                        </el-button>
-                    </bottom-line-counter>
-                </ul>
 
-                <li class="spacer" />
-                <li>
-                    <div class="el-input el-input-file el-input--large custom-upload">
-                        <div class="el-input__wrapper">
-                            <label for="importTemplates">
-                                <Upload />
-                                {{ $t('import') }}
-                            </label>
-                            <input
-                                id="importTemplates"
-                                class="el-input__inner"
-                                type="file"
-                                @change="importTemplates()"
-                                ref="file"
-                            >
-                        </div>
-                    </div>
-                </li>
-                <li>
-                    <router-link :to="{name: 'templates/create'}">
-                        <el-button :icon="Plus" type="primary" size="large">
-                            {{ $t('create') }}
-                        </el-button>
-                    </router-link>
-                </li>
-            </ul>
-        </bottom-line>
-    </div>
+    <bottom-line v-if="user && user.hasAnyAction(permission.TEMPLATE, action.CREATE)">
+      <ul>
+        <li>
+          <div class="el-input el-input-file el-input--large custom-upload">
+            <div class="el-input__wrapper">
+              <label for="importTemplates">
+                <Upload/>
+                {{ $t('import') }}
+              </label>
+              <input
+                  id="importTemplates"
+                  class="el-input__inner"
+                  type="file"
+                  @change="importTemplates()"
+                  ref="file"
+              >
+            </div>
+          </div>
+        </li>
+        <li>
+          <router-link :to="{name: 'templates/create'}">
+            <el-button :icon="Plus" type="primary" size="large">
+              {{ $t('create') }}
+            </el-button>
+          </router-link>
+        </li>
+      </ul>
+    </bottom-line>
+  </div>
 </template>
 
 <script setup>
-    import Plus from "vue-material-design-icons/Plus.vue";
-    import Download from "vue-material-design-icons/Download.vue";
-    import TrashCan from "vue-material-design-icons/TrashCan.vue";
+  import BulkSelect from "../layout/BulkSelect.vue";
+  import SelectTable from "../layout/SelectTable.vue";
+  import Plus from "vue-material-design-icons/Plus.vue";
+  import Download from "vue-material-design-icons/Download.vue";
+  import TrashCan from "vue-material-design-icons/TrashCan.vue";
 </script>
 
 <script>
-    import {mapState} from "vuex";
-    import permission from "../../models/permission";
-    import action from "../../models/action";
-    import NamespaceSelect from "../namespace/NamespaceSelect.vue";
-    import Eye from "vue-material-design-icons/Eye.vue";
-    import BottomLine from "../layout/BottomLine.vue";
-    import RouteContext from "../../mixins/routeContext";
-    import DataTableActions from "../../mixins/dataTableActions";
-    import DataTable from "../layout/DataTable.vue";
-    import SearchField from "../layout/SearchField.vue";
-    import Kicon from "../Kicon.vue"
-    import RestoreUrl from "../../mixins/restoreUrl";
-    import _merge from "lodash/merge";
-    import MarkdownTooltip from "../../components/layout/MarkdownTooltip.vue";
-    import BottomLineCounter from "../layout/BottomLineCounter.vue";
-    import Upload from "vue-material-design-icons/Upload.vue";
+  import {mapState} from "vuex";
+  import permission from "../../models/permission";
+  import action from "../../models/action";
+  import NamespaceSelect from "../namespace/NamespaceSelect.vue";
+  import Eye from "vue-material-design-icons/Eye.vue";
+  import BottomLine from "../layout/BottomLine.vue";
+  import RouteContext from "../../mixins/routeContext";
+  import DataTableActions from "../../mixins/dataTableActions";
+  import DataTable from "../layout/DataTable.vue";
+  import SearchField from "../layout/SearchField.vue";
+  import Kicon from "../Kicon.vue"
+  import RestoreUrl from "../../mixins/restoreUrl";
+  import _merge from "lodash/merge";
+  import MarkdownTooltip from "../../components/layout/MarkdownTooltip.vue";
+  import Upload from "vue-material-design-icons/Upload.vue";
+  import SelectTableActions from "../../mixins/selectTableActions";
 
-    export default {
-        mixins: [RouteContext, RestoreUrl, DataTableActions],
-        components: {
-            BottomLine,
-            Eye,
-            DataTable,
-            SearchField,
-            NamespaceSelect,
-            Kicon,
-            MarkdownTooltip,
-            BottomLineCounter,
-            Upload
-        },
-        data() {
-            return {
-                isDefaultNamespaceAllow: true,
-                permission: permission,
-                action: action,
-                templatesSelection: [],
-                queryBulkAction: false
-            };
-        },
-        computed: {
-            ...mapState("template", ["templates", "total"]),
-            ...mapState("stat", ["dailyGroupByFlow", "daily"]),
-            ...mapState("auth", ["user"]),
-            routeInfo() {
-                return {
-                    title: this.$t("templates")
-                };
-            },
-            canRead() {
-                return this.user && this.user.isAllowed(permission.FLOW, action.READ);
-            },
-            canDelete() {
-                return this.user && this.user.isAllowed(permission.FLOW, action.DELETE);
-            },
-        },
-        methods: {
-            loadQuery(base) {
-                let queryFilter = this.queryWithFilter();
+  export default {
+    mixins: [RouteContext, RestoreUrl, DataTableActions, SelectTableActions],
+    components: {
+      BottomLine,
+      Eye,
+      DataTable,
+      SearchField,
+      NamespaceSelect,
+      Kicon,
+      MarkdownTooltip,
+      Upload
+    },
+    data() {
+      return {
+        isDefaultNamespaceAllow: true,
+        permission: permission,
+        action: action
+      };
+    },
+    computed: {
+      ...mapState("template", ["templates", "total"]),
+      ...mapState("stat", ["dailyGroupByFlow", "daily"]),
+      ...mapState("auth", ["user"]),
+      routeInfo() {
+        return {
+          title: this.$t("templates")
+        };
+      },
+      canRead() {
+        return this.user && this.user.isAllowed(permission.FLOW, action.READ);
+      },
+      canDelete() {
+        return this.user && this.user.isAllowed(permission.FLOW, action.DELETE);
+      },
+    },
+    methods: {
+      loadQuery(base) {
+        let queryFilter = this.queryWithFilter();
 
-                return _merge(base, queryFilter)
-            },
-            loadData(callback) {
-                this.$store
-                    .dispatch("template/findTemplates", this.loadQuery({
-                        size: parseInt(this.$route.query.size || 25),
-                        page: parseInt(this.$route.query.page || 1),
-                        sort: this.$route.query.sort || "id:asc",
-                    }))
-                    .then(() => {
-                        callback();
-                    });
-            },
-            handleSelectionChange(val) {
-                if (val.length === 0) {
-                    this.queryBulkAction = false
-                }
-                this.templatesSelection = val.map(x => {
-                    return {
-                        id: x.id,
-                        namespace: x.namespace
-                    }
-                });
-            },
-            selectAll() {
-                if (this.$refs.table.getSelectionRows().length !== this.$refs.table.data.length) {
-                    this.$refs.table.toggleAllSelection();
-                }
-            },
-            exportTemplates() {
-                this.$toast().confirm(
-                    this.$t("template export", {"templateCount": this.queryBulkAction ? this.total : this.templatesSelection.length}),
-                    () => {
-                        if (this.queryBulkAction) {
-                            return this.$store
-                                .dispatch("template/exportTemplateByQuery", this.loadQuery({
-                                    namespace: this.$route.query.namespace ? [this.$route.query.namespace] : undefined,
-                                    q: this.$route.query.q ? [this.$route.query.q] : undefined,
-                                }, false))
-                                .then(_ => {
-                                    this.$toast().success(this.$t("templates exported"));
-                                })
-                        } else {
-                            return this.$store
-                                .dispatch("template/exportTemplateByIds", {ids: this.templatesSelection})
-                                .then(_ => {
-                                    this.$toast().success(this.$t("templates exported"));
-                                })
-                        }
-                    },
-                    () => {}
-                )
-            },
-            importTemplates() {
-                const formData = new FormData();
-                formData.append("fileUpload", this.$refs.file.files[0]);
-                this.$store
-                    .dispatch("template/importTemplates", formData)
+        return _merge(base, queryFilter)
+      },
+      loadData(callback) {
+        this.$store
+            .dispatch("template/findTemplates", this.loadQuery({
+              size: parseInt(this.$route.query.size || 25),
+              page: parseInt(this.$route.query.page || 1),
+              sort: this.$route.query.sort || "id:asc",
+            }))
+            .then(() => {
+              callback();
+            });
+      },
+      selectionMapper(element) {
+        return {
+          id: element.id,
+          namespace: element.namespace
+        };
+      },
+      exportTemplates() {
+        this.$toast().confirm(
+            this.$t("template export", {"templateCount": this.queryBulkAction ? this.total : this.selection.length}),
+            () => {
+              if (this.queryBulkAction) {
+                return this.$store
+                    .dispatch("template/exportTemplateByQuery", this.loadQuery({
+                      namespace: this.$route.query.namespace ? [this.$route.query.namespace] : undefined,
+                      q: this.$route.query.q ? [this.$route.query.q] : undefined,
+                    }, false))
                     .then(_ => {
-                        this.$toast().success(this.$t("templates imported"));
-                        this.loadData(() => {})
+                      this.$toast().success(this.$t("templates exported"));
                     })
+              } else {
+                return this.$store
+                    .dispatch("template/exportTemplateByIds", {ids: this.selection})
+                    .then(_ => {
+                      this.$toast().success(this.$t("templates exported"));
+                    })
+              }
             },
-            deleteTemplates(){
-                this.$toast().confirm(
-                    this.$t("template delete", {"templateCount": this.queryBulkAction ? this.total : this.templatesSelection.length}),
-                    () => {
-                        if (this.queryBulkAction) {
-                            return this.$store
-                                .dispatch("template/deleteTemplateByQuery", this.loadQuery({
-                                    namespace: this.$route.query.namespace ? [this.$route.query.namespace] : undefined,
-                                    q: this.$route.query.q ? [this.$route.query.q] : undefined,
-                                }, false))
-                                .then(r => {
-                                    this.$toast().success(this.$t("templates deleted", {count: r.data.count}));
-                                    this.loadData(() => {})
-                                })
-                        } else {
-                            return this.$store
-                                .dispatch("template/deleteTemplateByIds", {ids: this.templatesSelection})
-                                .then(r => {
-                                    this.$toast().success(this.$t("templates deleted", {count: r.data.count}));
-                                    this.loadData(() => {})
-                                })
-                        }
-                    },
-                    () => {}
-                )
+            () => {
+            }
+        )
+      },
+      importTemplates() {
+        const formData = new FormData();
+        formData.append("fileUpload", this.$refs.file.files[0]);
+        this.$store
+            .dispatch("template/importTemplates", formData)
+            .then(_ => {
+              this.$toast().success(this.$t("templates imported"));
+              this.loadData(() => {
+              })
+            })
+      },
+      deleteTemplates() {
+        this.$toast().confirm(
+            this.$t("template delete", {"templateCount": this.queryBulkAction ? this.total : this.selection.length}),
+            () => {
+              if (this.queryBulkAction) {
+                return this.$store
+                    .dispatch("template/deleteTemplateByQuery", this.loadQuery({
+                      namespace: this.$route.query.namespace ? [this.$route.query.namespace] : undefined,
+                      q: this.$route.query.q ? [this.$route.query.q] : undefined,
+                    }, false))
+                    .then(r => {
+                      this.$toast().success(this.$t("templates deleted", {count: r.data.count}));
+                      this.loadData(() => {
+                      })
+                    })
+              } else {
+                return this.$store
+                    .dispatch("template/deleteTemplateByIds", {ids: this.selection})
+                    .then(r => {
+                      this.$toast().success(this.$t("templates deleted", {count: r.data.count}));
+                      this.loadData(() => {
+                      })
+                    })
+              }
             },
-        },
-    };
+            () => {
+            }
+        )
+      },
+    },
+  };
 </script>
 
diff --git a/ui/src/mixins/selectTableActions.js b/ui/src/mixins/selectTableActions.js
new file mode 100644
index 00000000000..1459fdb7ec5
--- /dev/null
+++ b/ui/src/mixins/selectTableActions.js
@@ -0,0 +1,33 @@
+export default {
+    data() {
+        return {
+            queryBulkAction: false,
+            selection: []
+        };
+    },
+    methods: {
+        handleSelectionChange(val) {
+            if (val.length === this.total) {
+                this.queryBulkAction = true
+            } else if (val.length < this.internalPageSize) {
+                this.queryBulkAction = false
+            }
+            this.selection = val.map(this.selectionMapper);
+        },
+        toggleAllSelection() {
+            // only some are selected, we should set queryBulkAction to true because it will select all
+            if (this.elTable.getSelectionRows().length > 0 && !this.queryBulkAction) {
+                this.queryBulkAction = true;
+            }
+            this.elTable.toggleAllSelection();
+        },
+        selectionMapper(element) {
+            return element;
+        }
+    },
+    computed: {
+        elTable() {
+            return this.$refs.selectTable.$refs.table;
+        }
+    }
+}

From 557dcd72a7696ee0b27890813a936244164b662e Mon Sep 17 00:00:00 2001
From: "brian.mulier" <bmmulier@hotmail.fr>
Date: Tue, 8 Aug 2023 12:35:49 +0200
Subject: [PATCH 2/3] fix(ui): indent

---
 ui/src/components/executions/Executions.vue | 827 +++++++++----------
 ui/src/components/flows/Flows.vue           | 848 ++++++++++----------
 ui/src/components/layout/BulkSelect.vue     |  90 +--
 ui/src/components/layout/SelectTable.vue    |   4 +-
 ui/src/components/templates/Templates.vue   | 492 ++++++------
 5 files changed, 1137 insertions(+), 1124 deletions(-)

diff --git a/ui/src/components/executions/Executions.vue b/ui/src/components/executions/Executions.vue
index 5470da3330b..fb4dea30130 100644
--- a/ui/src/components/executions/Executions.vue
+++ b/ui/src/components/executions/Executions.vue
@@ -1,438 +1,447 @@
 <template>
-  <div v-if="ready">
-    <data-table @page-changed="onPageChanged" ref="dataTable" :total="total" :size="pageSize" :page="pageNumber">
-      <template #navbar v-if="embed === false">
-        <el-form-item>
-          <search-field/>
-        </el-form-item>
-        <el-form-item>
-          <namespace-select
-              data-type="flow"
-              v-if="$route.name !== 'flows/update'"
-              :value="$route.query.namespace"
-              @update:model-value="onDataTableValue('namespace', $event)"
-          />
-        </el-form-item>
-        <el-form-item>
-          <status-filter-buttons
-              :value="Utils.asArray($route.query.state)"
-              @update:model-value="onDataTableValue('state', $event)"
-          />
-        </el-form-item>
-        <el-form-item>
-          <date-range
-              :start-date="$route.query.startDate"
-              :end-date="$route.query.endDate"
-              @update:model-value="onDataTableValue($event)"
-          />
-        </el-form-item>
-        <el-form-item>
-          <label-filter
-              :model-value="$route.query.labels"
-              @update:model-value="onDataTableValue('labels', $event)"
-          />
-        </el-form-item>
-        <el-form-item>
-          <refresh-button class="float-right" @refresh="load"/>
-        </el-form-item>
-      </template>
-
-      <template #top v-if="embed === false">
-        <state-global-chart
-            v-if="daily"
-            class="mb-4"
-            :ready="dailyReady"
-            :data="daily"
-            :start-date="startDate"
-            :end-date="endDate"
-        />
-      </template>
+    <div v-if="ready">
+        <data-table @page-changed="onPageChanged" ref="dataTable" :total="total" :size="pageSize" :page="pageNumber">
+            <template #navbar v-if="embed === false">
+                <el-form-item>
+                    <search-field />
+                </el-form-item>
+                <el-form-item>
+                    <namespace-select
+                        data-type="flow"
+                        v-if="$route.name !== 'flows/update'"
+                        :value="$route.query.namespace"
+                        @update:model-value="onDataTableValue('namespace', $event)"
+                    />
+                </el-form-item>
+                <el-form-item>
+                    <status-filter-buttons
+                        :value="Utils.asArray($route.query.state)"
+                        @update:model-value="onDataTableValue('state', $event)"
+                    />
+                </el-form-item>
+                <el-form-item>
+                    <date-range
+                        :start-date="$route.query.startDate"
+                        :end-date="$route.query.endDate"
+                        @update:model-value="onDataTableValue($event)"
+                    />
+                </el-form-item>
+                <el-form-item>
+                    <label-filter
+                        :model-value="$route.query.labels"
+                        @update:model-value="onDataTableValue('labels', $event)"
+                    />
+                </el-form-item>
+                <el-form-item>
+                    <refresh-button class="float-right" @refresh="load" />
+                </el-form-item>
+            </template>
 
-      <template #table>
-        <select-table
-            ref="selectTable"
-            :data="executions"
-            :default-sort="{prop: 'state.startDate', order: 'descending'}"
-            stripe
-            table-layout="auto"
-            fixed
-            @row-dblclick="onRowDoubleClick"
-            @sort-change="onSort"
-            @selection-change="handleSelectionChange"
-            :selectable="!hidden.includes('selection') && canCheck"
-        >
-          <template #select-actions>
-            <bulk-select v-model="queryBulkAction" :selections="selection" :total="total"
-                         @update:model-value="toggleAllSelection()">
-              <el-button v-if="canUpdate" :icon="Restart" @click="restartExecutions()">
-                {{ $t('restart') }}
-              </el-button>
-              <el-button v-if="canUpdate" :icon="StopCircleOutline" @click="killExecutions()">
-                {{ $t('kill') }}
-              </el-button>
-              <el-button v-if="canDelete" :icon="Delete" type="default" @click="deleteExecutions()">
-                {{ $t('delete') }}
-              </el-button>
-            </bulk-select>
-          </template>
-          <template #default>
-            <el-table-column prop="id" v-if="!hidden.includes('id')" sortable="custom"
-                             :sort-orders="['ascending', 'descending']" :label="$t('id')">
-              <template #default="scope">
-                <id :value="scope.row.id" :shrink="true"/>
-              </template>
-            </el-table-column>
+            <template #top v-if="embed === false">
+                <state-global-chart
+                    v-if="daily"
+                    class="mb-4"
+                    :ready="dailyReady"
+                    :data="daily"
+                    :start-date="startDate"
+                    :end-date="endDate"
+                />
+            </template>
 
-            <el-table-column prop="state.startDate" v-if="!hidden.includes('state.startDate')" sortable="custom"
-                             :sort-orders="['ascending', 'descending']" :label="$t('start date')">
-              <template #default="scope">
-                <date-ago :inverted="true" :date="scope.row.state.startDate"/>
-              </template>
-            </el-table-column>
+            <template #table>
+                <select-table
+                    ref="selectTable"
+                    :data="executions"
+                    :default-sort="{prop: 'state.startDate', order: 'descending'}"
+                    stripe
+                    table-layout="auto"
+                    fixed
+                    @row-dblclick="onRowDoubleClick"
+                    @sort-change="onSort"
+                    @selection-change="handleSelectionChange"
+                    :selectable="!hidden.includes('selection') && canCheck"
+                >
+                    <template #select-actions>
+                        <bulk-select v-model="queryBulkAction" :selections="selection" :total="total"
+                                     @update:model-value="toggleAllSelection()">
+                            <el-button v-if="canUpdate" :icon="Restart" @click="restartExecutions()">
+                                {{ $t('restart') }}
+                            </el-button>
+                            <el-button v-if="canUpdate" :icon="StopCircleOutline" @click="killExecutions()">
+                                {{ $t('kill') }}
+                            </el-button>
+                            <el-button v-if="canDelete" :icon="Delete" type="default" @click="deleteExecutions()">
+                                {{ $t('delete') }}
+                            </el-button>
+                        </bulk-select>
+                    </template>
+                    <template #default>
+                        <el-table-column prop="id" v-if="!hidden.includes('id')" sortable="custom"
+                                         :sort-orders="['ascending', 'descending']" :label="$t('id')">
+                            <template #default="scope">
+                                <id :value="scope.row.id" :shrink="true" />
+                            </template>
+                        </el-table-column>
 
-            <el-table-column prop="state.endDate" v-if="!hidden.includes('state.endDate')" sortable="custom"
-                             :sort-orders="['ascending', 'descending']" :label="$t('end date')">
-              <template #default="scope">
-                <date-ago :inverted="true" :date="scope.row.state.endDate"/>
-              </template>
-            </el-table-column>
+                        <el-table-column prop="state.startDate" v-if="!hidden.includes('state.startDate')"
+                                         sortable="custom"
+                                         :sort-orders="['ascending', 'descending']" :label="$t('start date')">
+                            <template #default="scope">
+                                <date-ago :inverted="true" :date="scope.row.state.startDate" />
+                            </template>
+                        </el-table-column>
 
-            <el-table-column prop="state.duration" v-if="!hidden.includes('state.duration')" sortable="custom"
-                             :sort-orders="['ascending', 'descending']" :label="$t('duration')">
-              <template #default="scope">
-                <span v-if="isRunning(scope.row)">{{ $filters.humanizeDuration(durationFrom(scope.row)) }}</span>
-                <span v-else>{{ $filters.humanizeDuration(scope.row.state.duration) }}</span>
-              </template>
-            </el-table-column>
+                        <el-table-column prop="state.endDate" v-if="!hidden.includes('state.endDate')" sortable="custom"
+                                         :sort-orders="['ascending', 'descending']" :label="$t('end date')">
+                            <template #default="scope">
+                                <date-ago :inverted="true" :date="scope.row.state.endDate" />
+                            </template>
+                        </el-table-column>
 
-            <el-table-column v-if="$route.name !== 'flows/update' && !hidden.includes('namespace')" prop="namespace"
-                             sortable="custom" :sort-orders="['ascending', 'descending']" :label="$t('namespace')"
-                             :formatter="(_, __, cellValue) => $filters.invisibleSpace(cellValue)"/>
+                        <el-table-column prop="state.duration" v-if="!hidden.includes('state.duration')"
+                                         sortable="custom"
+                                         :sort-orders="['ascending', 'descending']" :label="$t('duration')">
+                            <template #default="scope">
+                                <span v-if="isRunning(scope.row)">{{
+                                        $filters.humanizeDuration(durationFrom(scope.row))
+                                    }}</span>
+                                <span v-else>{{ $filters.humanizeDuration(scope.row.state.duration) }}</span>
+                            </template>
+                        </el-table-column>
 
-            <el-table-column v-if="$route.name !== 'flows/update' && !hidden.includes('flowId')" prop="flowId"
-                             sortable="custom" :sort-orders="['ascending', 'descending']" :label="$t('flow')">
-              <template #default="scope">
-                <router-link
-                    :to="{name: 'flows/update', params: {namespace: scope.row.namespace, id: scope.row.flowId}}">
-                  {{ $filters.invisibleSpace(scope.row.flowId) }}
-                </router-link>
-              </template>
-            </el-table-column>
+                        <el-table-column v-if="$route.name !== 'flows/update' && !hidden.includes('namespace')"
+                                         prop="namespace"
+                                         sortable="custom" :sort-orders="['ascending', 'descending']"
+                                         :label="$t('namespace')"
+                                         :formatter="(_, __, cellValue) => $filters.invisibleSpace(cellValue)" />
 
-            <el-table-column v-if="!hidden.includes('labels')" :label="$t('labels')">
-              <template #default="scope">
-                <labels :labels="scope.row.labels"/>
-              </template>
-            </el-table-column>
+                        <el-table-column v-if="$route.name !== 'flows/update' && !hidden.includes('flowId')"
+                                         prop="flowId"
+                                         sortable="custom" :sort-orders="['ascending', 'descending']"
+                                         :label="$t('flow')">
+                            <template #default="scope">
+                                <router-link
+                                    :to="{name: 'flows/update', params: {namespace: scope.row.namespace, id: scope.row.flowId}}">
+                                    {{ $filters.invisibleSpace(scope.row.flowId) }}
+                                </router-link>
+                            </template>
+                        </el-table-column>
 
-            <el-table-column prop="state.current" v-if="!hidden.includes('state.current')" sortable="custom"
-                             :sort-orders="['ascending', 'descending']" :label="$t('state')">
-              <template #default="scope">
-                <status :status="scope.row.state.current" size="small"/>
-              </template>
-            </el-table-column>
+                        <el-table-column v-if="!hidden.includes('labels')" :label="$t('labels')">
+                            <template #default="scope">
+                                <labels :labels="scope.row.labels" />
+                            </template>
+                        </el-table-column>
 
-            <el-table-column prop="triggers" v-if="!hidden.includes('triggers')" :label="$t('triggers')"
-                             class-name="shrink">
-              <template #default="scope">
-                <trigger-avatar :execution="scope.row"/>
-              </template>
-            </el-table-column>
+                        <el-table-column prop="state.current" v-if="!hidden.includes('state.current')" sortable="custom"
+                                         :sort-orders="['ascending', 'descending']" :label="$t('state')">
+                            <template #default="scope">
+                                <status :status="scope.row.state.current" size="small" />
+                            </template>
+                        </el-table-column>
 
-            <el-table-column 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}}">
-                  <kicon :tooltip="$t('details')" placement="left">
-                    <eye/>
-                  </kicon>
-                </router-link>
-              </template>
-            </el-table-column>
-          </template>
-        </select-table>
-      </template>
-    </data-table>
+                        <el-table-column prop="triggers" v-if="!hidden.includes('triggers')" :label="$t('triggers')"
+                                         class-name="shrink">
+                            <template #default="scope">
+                                <trigger-avatar :execution="scope.row" />
+                            </template>
+                        </el-table-column>
 
-    <bottom-line v-if="displayBottomBar">
-      <ul>
-        <template v-if="$route.name === 'flows/update'">
-          <li>
-            <template v-if="isAllowedEdit">
-              <el-button :icon="Pencil" size="large" @click="editFlow">
-                {{ $t('edit flow') }}
-              </el-button>
+                        <el-table-column 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}}">
+                                    <kicon :tooltip="$t('details')" placement="left">
+                                        <eye />
+                                    </kicon>
+                                </router-link>
+                            </template>
+                        </el-table-column>
+                    </template>
+                </select-table>
             </template>
-          </li>
-          <li>
-            <trigger-flow v-if="flow" :disabled="flow.disabled" :flow-id="flow.id" :namespace="flow.namespace"/>
-          </li>
-        </template>
-      </ul>
-    </bottom-line>
-  </div>
+        </data-table>
+
+        <bottom-line v-if="displayBottomBar">
+            <ul>
+                <template v-if="$route.name === 'flows/update'">
+                    <li>
+                        <template v-if="isAllowedEdit">
+                            <el-button :icon="Pencil" size="large" @click="editFlow">
+                                {{ $t('edit flow') }}
+                            </el-button>
+                        </template>
+                    </li>
+                    <li>
+                        <trigger-flow v-if="flow" :disabled="flow.disabled" :flow-id="flow.id"
+                                      :namespace="flow.namespace" />
+                    </li>
+                </template>
+            </ul>
+        </bottom-line>
+    </div>
 </template>
 
 <script setup>
-  import BulkSelect from "../layout/BulkSelect.vue";
-  import SelectTable from "../layout/SelectTable.vue";
-  import Restart from "vue-material-design-icons/Restart.vue";
-  import Delete from "vue-material-design-icons/Delete.vue";
-  import StopCircleOutline from "vue-material-design-icons/StopCircleOutline.vue";
-  import Pencil from "vue-material-design-icons/Pencil.vue";
-  import Utils from "../../utils/utils";
+    import BulkSelect from "../layout/BulkSelect.vue";
+    import SelectTable from "../layout/SelectTable.vue";
+    import Restart from "vue-material-design-icons/Restart.vue";
+    import Delete from "vue-material-design-icons/Delete.vue";
+    import StopCircleOutline from "vue-material-design-icons/StopCircleOutline.vue";
+    import Pencil from "vue-material-design-icons/Pencil.vue";
+    import Utils from "../../utils/utils";
 </script>
 
 <script>
-  import {mapState} from "vuex";
-  import DataTable from "../layout/DataTable.vue";
-  import Eye from "vue-material-design-icons/Eye.vue";
-  import Status from "../Status.vue";
-  import RouteContext from "../../mixins/routeContext";
-  import DataTableActions from "../../mixins/dataTableActions";
-  import SelectTableActions from "../../mixins/selectTableActions";
-  import SearchField from "../layout/SearchField.vue";
-  import NamespaceSelect from "../namespace/NamespaceSelect.vue";
-  import LabelFilter from "../labels/LabelFilter.vue";
-  import DateRange from "../layout/DateRange.vue";
-  import RefreshButton from "../layout/RefreshButton.vue"
-  import StatusFilterButtons from "../layout/StatusFilterButtons.vue"
-  import StateGlobalChart from "../../components/stats/StateGlobalChart.vue";
-  import TriggerAvatar from "../../components/flows/TriggerAvatar.vue";
-  import DateAgo from "../layout/DateAgo.vue";
-  import Kicon from "../Kicon.vue"
-  import Labels from "../layout/Labels.vue"
-  import RestoreUrl from "../../mixins/restoreUrl";
-  import State from "../../utils/state";
-  import Id from "../Id.vue";
-  import _merge from "lodash/merge";
-  import BottomLine from "../layout/BottomLine.vue";
-  import permission from "../../models/permission";
-  import action from "../../models/action";
-  import TriggerFlow from "../../components/flows/TriggerFlow.vue";
+    import {mapState} from "vuex";
+    import DataTable from "../layout/DataTable.vue";
+    import Eye from "vue-material-design-icons/Eye.vue";
+    import Status from "../Status.vue";
+    import RouteContext from "../../mixins/routeContext";
+    import DataTableActions from "../../mixins/dataTableActions";
+    import SelectTableActions from "../../mixins/selectTableActions";
+    import SearchField from "../layout/SearchField.vue";
+    import NamespaceSelect from "../namespace/NamespaceSelect.vue";
+    import LabelFilter from "../labels/LabelFilter.vue";
+    import DateRange from "../layout/DateRange.vue";
+    import RefreshButton from "../layout/RefreshButton.vue"
+    import StatusFilterButtons from "../layout/StatusFilterButtons.vue"
+    import StateGlobalChart from "../../components/stats/StateGlobalChart.vue";
+    import TriggerAvatar from "../../components/flows/TriggerAvatar.vue";
+    import DateAgo from "../layout/DateAgo.vue";
+    import Kicon from "../Kicon.vue"
+    import Labels from "../layout/Labels.vue"
+    import RestoreUrl from "../../mixins/restoreUrl";
+    import State from "../../utils/state";
+    import Id from "../Id.vue";
+    import _merge from "lodash/merge";
+    import BottomLine from "../layout/BottomLine.vue";
+    import permission from "../../models/permission";
+    import action from "../../models/action";
+    import TriggerFlow from "../../components/flows/TriggerFlow.vue";
 
-  export default {
-    mixins: [RouteContext, RestoreUrl, DataTableActions, SelectTableActions],
-    components: {
-      Status,
-      Eye,
-      DataTable,
-      SearchField,
-      NamespaceSelect,
-      LabelFilter,
-      DateRange,
-      RefreshButton,
-      StatusFilterButtons,
-      StateGlobalChart,
-      TriggerAvatar,
-      DateAgo,
-      Kicon,
-      Labels,
-      Id,
-      BottomLine,
-      TriggerFlow
-    },
-    props: {
-      embed: {
-        type: Boolean,
-        default: false
-      },
-      hidden: {
-        type: Array,
-        default: () => []
-      },
-      statuses: {
-        type: Array,
-        default: () => []
-      },
-    },
-    data() {
-      return {
-        isDefaultNamespaceAllow: true,
-        dailyReady: false,
-        dblClickRouteName: "executions/update",
-        flowTriggerDetails: undefined
-      };
-    },
-    computed: {
-      ...mapState("execution", ["executions", "total"]),
-      ...mapState("stat", ["daily"]),
-      ...mapState("auth", ["user"]),
-      ...mapState("flow", ["flow"]),
-      routeInfo() {
-        return {
-          title: this.$t("executions")
-        };
-      },
-      endDate() {
-        return this.$route.query.endDate ? this.$route.query.endDate : this.$moment().toISOString(true);
-      },
-      startDate() {
-        return this.$route.query.startDate ? this.$route.query.startDate : this.$moment(this.endDate)
-            .add(-30, "days").toISOString(true);
-      },
-      displayBottomBar() {
-        return (this.selection.length !== 0 && (this.canUpdate || this.canDelete)) ||
-            (this.$route.name === "flows/update");
-      },
-      canCheck() {
-        return this.canDelete || this.canUpdate;
-      },
-      canUpdate() {
-        return this.user && this.user.isAllowed(permission.EXECUTION, action.UPDATE, this.$route.query.namespace);
-      },
-      canDelete() {
-        return this.user && this.user.isAllowed(permission.EXECUTION, action.DELETE, this.$route.query.namespace);
-      },
-      isAllowedEdit() {
-        return this.user.isAllowed(permission.FLOW, action.UPDATE, this.flow.namespace);
-      },
-    },
-    methods: {
-      selectionMapper(execution) {
-        return execution.id
-      },
-      isRunning(item) {
-        return State.isRunning(item.state.current);
-      },
-      onStatusChange() {
-        this.load(this.onDataLoaded);
-      },
-      loadQuery(base, stats) {
-        let queryFilter = this.queryWithFilter();
+    export default {
+        mixins: [RouteContext, RestoreUrl, DataTableActions, SelectTableActions],
+        components: {
+            Status,
+            Eye,
+            DataTable,
+            SearchField,
+            NamespaceSelect,
+            LabelFilter,
+            DateRange,
+            RefreshButton,
+            StatusFilterButtons,
+            StateGlobalChart,
+            TriggerAvatar,
+            DateAgo,
+            Kicon,
+            Labels,
+            Id,
+            BottomLine,
+            TriggerFlow
+        },
+        props: {
+            embed: {
+                type: Boolean,
+                default: false
+            },
+            hidden: {
+                type: Array,
+                default: () => []
+            },
+            statuses: {
+                type: Array,
+                default: () => []
+            },
+        },
+        data() {
+            return {
+                isDefaultNamespaceAllow: true,
+                dailyReady: false,
+                dblClickRouteName: "executions/update",
+                flowTriggerDetails: undefined
+            };
+        },
+        computed: {
+            ...mapState("execution", ["executions", "total"]),
+            ...mapState("stat", ["daily"]),
+            ...mapState("auth", ["user"]),
+            ...mapState("flow", ["flow"]),
+            routeInfo() {
+                return {
+                    title: this.$t("executions")
+                };
+            },
+            endDate() {
+                return this.$route.query.endDate ? this.$route.query.endDate : this.$moment().toISOString(true);
+            },
+            startDate() {
+                return this.$route.query.startDate ? this.$route.query.startDate : this.$moment(this.endDate)
+                    .add(-30, "days").toISOString(true);
+            },
+            displayBottomBar() {
+                return (this.selection.length !== 0 && (this.canUpdate || this.canDelete)) ||
+                    (this.$route.name === "flows/update");
+            },
+            canCheck() {
+                return this.canDelete || this.canUpdate;
+            },
+            canUpdate() {
+                return this.user && this.user.isAllowed(permission.EXECUTION, action.UPDATE, this.$route.query.namespace);
+            },
+            canDelete() {
+                return this.user && this.user.isAllowed(permission.EXECUTION, action.DELETE, this.$route.query.namespace);
+            },
+            isAllowedEdit() {
+                return this.user.isAllowed(permission.FLOW, action.UPDATE, this.flow.namespace);
+            },
+        },
+        methods: {
+            selectionMapper(execution) {
+                return execution.id
+            },
+            isRunning(item) {
+                return State.isRunning(item.state.current);
+            },
+            onStatusChange() {
+                this.load(this.onDataLoaded);
+            },
+            loadQuery(base, stats) {
+                let queryFilter = this.queryWithFilter();
 
-        if (stats) {
-          delete queryFilter["startDate"];
-          delete queryFilter["endDate"];
-        }
+                if (stats) {
+                    delete queryFilter["startDate"];
+                    delete queryFilter["endDate"];
+                }
 
-        if (this.$route.name === "flows/update") {
-          queryFilter["namespace"] = this.$route.params.namespace;
-          queryFilter["flowId"] = this.$route.params.id;
-        }
+                if (this.$route.name === "flows/update") {
+                    queryFilter["namespace"] = this.$route.params.namespace;
+                    queryFilter["flowId"] = this.$route.params.id;
+                }
 
-        return _merge(base, queryFilter)
-      },
-      loadData(callback) {
-        if (this.embed === false) {
-          this.dailyReady = false;
+                return _merge(base, queryFilter)
+            },
+            loadData(callback) {
+                if (this.embed === false) {
+                    this.dailyReady = false;
 
-          this.$store
-              .dispatch("stat/daily", this.loadQuery({
-                startDate: this.$moment(this.startDate).toISOString(true),
-                endDate: this.$moment(this.endDate).toISOString(true)
-              }, true))
-              .then(() => {
-                this.dailyReady = true;
-              });
-        }
+                    this.$store
+                        .dispatch("stat/daily", this.loadQuery({
+                            startDate: this.$moment(this.startDate).toISOString(true),
+                            endDate: this.$moment(this.endDate).toISOString(true)
+                        }, true))
+                        .then(() => {
+                            this.dailyReady = true;
+                        });
+                }
 
-        this.$store.dispatch("execution/findExecutions", this.loadQuery({
-          size: parseInt(this.$route.query.size || this.internalPageSize),
-          page: parseInt(this.$route.query.page || this.internalPageNumber),
-          sort: this.$route.query.sort || "state.startDate:desc",
-          state: this.$route.query.state ? [this.$route.query.state] : this.statuses
-        }, false)).finally(callback);
-      },
-      durationFrom(item) {
-        return (+new Date() - new Date(item.state.startDate).getTime()) / 1000
-      },
-      restartExecutions() {
-        this.$toast().confirm(
-            this.$t("bulk restart", {"executionCount": this.queryBulkAction ? this.total : this.selection.length}),
-            () => {
-              if (this.queryBulkAction) {
-                return this.$store
-                    .dispatch("execution/queryRestartExecution", this.loadQuery({
-                      sort: this.$route.query.sort || "state.startDate:desc",
-                      state: this.$route.query.state ? [this.$route.query.state] : this.statuses,
-                    }))
-                    .then(r => {
-                      this.$toast().success(this.$t("executions restarted", {executionCount: r.data.count}));
-                      this.loadData();
-                    })
-              } else {
-                return this.$store
-                    .dispatch("execution/bulkRestartExecution", {executionsId: this.selection})
-                    .then(r => {
-                      this.$toast().success(this.$t("executions restarted", {executionCount: r.data.count}));
-                      this.loadData();
-                    }).catch(e => this.$toast().error(e.invalids.map(exec => {
-                      return {message: this.$t(exec.message, {executionId: exec.invalidValue})}
-                    }), this.$t(e.message)))
-              }
+                this.$store.dispatch("execution/findExecutions", this.loadQuery({
+                    size: parseInt(this.$route.query.size || this.internalPageSize),
+                    page: parseInt(this.$route.query.page || this.internalPageNumber),
+                    sort: this.$route.query.sort || "state.startDate:desc",
+                    state: this.$route.query.state ? [this.$route.query.state] : this.statuses
+                }, false)).finally(callback);
+            },
+            durationFrom(item) {
+                return (+new Date() - new Date(item.state.startDate).getTime()) / 1000
             },
-            () => {
-            }
-        )
-      },
-      deleteExecutions() {
-        this.$toast().confirm(
-            this.$t("bulk delete", {"executionCount": this.queryBulkAction ? this.total : this.selection.length}),
-            () => {
-              if (this.queryBulkAction) {
-                return this.$store
-                    .dispatch("execution/queryDeleteExecution", this.loadQuery({
-                      sort: this.$route.query.sort || "state.startDate:desc",
-                      state: this.$route.query.state ? [this.$route.query.state] : this.statuses
-                    }, false))
-                    .then(r => {
-                      this.$toast().success(this.$t("executions deleted", {executionCount: r.data.count}));
-                      this.loadData();
-                    })
-              } else {
-                return this.$store
-                    .dispatch("execution/bulkDeleteExecution", {executionsId: this.selection})
-                    .then(r => {
-                      this.$toast().success(this.$t("executions deleted", {executionCount: r.data.count}));
-                      this.loadData();
-                    }).catch(e => this.$toast().error(e.invalids.map(exec => {
-                      return {message: this.$t(exec.message, {executionId: exec.invalidValue})}
-                    }), this.$t(e.message)))
-              }
+            restartExecutions() {
+                this.$toast().confirm(
+                    this.$t("bulk restart", {"executionCount": this.queryBulkAction ? this.total : this.selection.length}),
+                    () => {
+                        if (this.queryBulkAction) {
+                            return this.$store
+                                .dispatch("execution/queryRestartExecution", this.loadQuery({
+                                    sort: this.$route.query.sort || "state.startDate:desc",
+                                    state: this.$route.query.state ? [this.$route.query.state] : this.statuses,
+                                }))
+                                .then(r => {
+                                    this.$toast().success(this.$t("executions restarted", {executionCount: r.data.count}));
+                                    this.loadData();
+                                })
+                        } else {
+                            return this.$store
+                                .dispatch("execution/bulkRestartExecution", {executionsId: this.selection})
+                                .then(r => {
+                                    this.$toast().success(this.$t("executions restarted", {executionCount: r.data.count}));
+                                    this.loadData();
+                                }).catch(e => this.$toast().error(e.invalids.map(exec => {
+                                    return {message: this.$t(exec.message, {executionId: exec.invalidValue})}
+                                }), this.$t(e.message)))
+                        }
+                    },
+                    () => {
+                    }
+                )
             },
-            () => {
-            }
-        )
-      },
-      killExecutions() {
-        this.$toast().confirm(
-            this.$t("bulk kill", {"executionCount": this.queryBulkAction ? this.total : this.selection.length}),
-            () => {
-              if (this.queryBulkAction) {
-                return this.$store
-                    .dispatch("execution/queryKill", this.loadQuery({
-                      sort: this.$route.query.sort || "state.startDate:desc",
-                      state: this.$route.query.state ? [this.$route.query.state] : this.statuses
-                    }, false))
-                    .then(r => {
-                      this.$toast().success(this.$t("executions killed", {executionCount: r.data.count}));
-                      this.loadData();
-                    })
-              } else {
-                return this.$store
-                    .dispatch("execution/bulkKill", {executionsId: this.selection})
-                    .then(r => {
-                      this.$toast().success(this.$t("executions killed", {executionCount: r.data.count}));
-                      this.loadData();
-                    }).catch(e => this.$toast().error(e.invalids.map(exec => {
-                      return {message: this.$t(exec.message, {executionId: exec.invalidValue})}
-                    }), this.$t(e.message)))
-              }
+            deleteExecutions() {
+                this.$toast().confirm(
+                    this.$t("bulk delete", {"executionCount": this.queryBulkAction ? this.total : this.selection.length}),
+                    () => {
+                        if (this.queryBulkAction) {
+                            return this.$store
+                                .dispatch("execution/queryDeleteExecution", this.loadQuery({
+                                    sort: this.$route.query.sort || "state.startDate:desc",
+                                    state: this.$route.query.state ? [this.$route.query.state] : this.statuses
+                                }, false))
+                                .then(r => {
+                                    this.$toast().success(this.$t("executions deleted", {executionCount: r.data.count}));
+                                    this.loadData();
+                                })
+                        } else {
+                            return this.$store
+                                .dispatch("execution/bulkDeleteExecution", {executionsId: this.selection})
+                                .then(r => {
+                                    this.$toast().success(this.$t("executions deleted", {executionCount: r.data.count}));
+                                    this.loadData();
+                                }).catch(e => this.$toast().error(e.invalids.map(exec => {
+                                    return {message: this.$t(exec.message, {executionId: exec.invalidValue})}
+                                }), this.$t(e.message)))
+                        }
+                    },
+                    () => {
+                    }
+                )
             },
-            () => {
-            }
-        )
-      },
-      editFlow() {
-        this.$router.push({
-          name: "flows/update", params: {
-            namespace: this.flow.namespace,
-            id: this.flow.id,
-            tab: "editor"
-          }
-        })
-      },
-    }
-  };
+            killExecutions() {
+                this.$toast().confirm(
+                    this.$t("bulk kill", {"executionCount": this.queryBulkAction ? this.total : this.selection.length}),
+                    () => {
+                        if (this.queryBulkAction) {
+                            return this.$store
+                                .dispatch("execution/queryKill", this.loadQuery({
+                                    sort: this.$route.query.sort || "state.startDate:desc",
+                                    state: this.$route.query.state ? [this.$route.query.state] : this.statuses
+                                }, false))
+                                .then(r => {
+                                    this.$toast().success(this.$t("executions killed", {executionCount: r.data.count}));
+                                    this.loadData();
+                                })
+                        } else {
+                            return this.$store
+                                .dispatch("execution/bulkKill", {executionsId: this.selection})
+                                .then(r => {
+                                    this.$toast().success(this.$t("executions killed", {executionCount: r.data.count}));
+                                    this.loadData();
+                                }).catch(e => this.$toast().error(e.invalids.map(exec => {
+                                    return {message: this.$t(exec.message, {executionId: exec.invalidValue})}
+                                }), this.$t(e.message)))
+                        }
+                    },
+                    () => {
+                    }
+                )
+            },
+            editFlow() {
+                this.$router.push({
+                    name: "flows/update", params: {
+                        namespace: this.flow.namespace,
+                        id: this.flow.id,
+                        tab: "editor"
+                    }
+                })
+            },
+        }
+    };
 </script>
\ No newline at end of file
diff --git a/ui/src/components/flows/Flows.vue b/ui/src/components/flows/Flows.vue
index 1cd2b46a74a..e7d8f141d87 100644
--- a/ui/src/components/flows/Flows.vue
+++ b/ui/src/components/flows/Flows.vue
@@ -1,452 +1,454 @@
 <template>
-  <div v-if="ready">
-    <div>
-      <data-table
-          @page-changed="onPageChanged"
-          ref="dataTable"
-          :total="total"
-      >
-        <template #navbar>
-          <el-form-item>
-            <search-field/>
-          </el-form-item>
-          <el-form-item>
-            <namespace-select
-                data-type="flow"
-                :value="$route.query.namespace"
-                @update:model-value="onDataTableValue('namespace', $event)"
-            />
-          </el-form-item>
-          <el-form-item>
-            <label-filter
-                :model-value="$route.query.labels"
-                @update:model-value="onDataTableValue('labels', $event)"
-            />
-          </el-form-item>
-        </template>
-
-        <template #top>
-          <state-global-chart
-              class="mb-4"
-              v-if="daily"
-              :ready="dailyReady"
-              :data="daily"
-          />
-        </template>
-
-        <template #table>
-          <select-table
-              ref="selectTable"
-              :data="flows"
-              :default-sort="{prop: 'id', order: 'ascending'}"
-              stripe
-              table-layout="auto"
-              fixed
-              @row-dblclick="onRowDoubleClick"
-              @sort-change="onSort"
-              :row-class-name="rowClasses"
-              @selection-change="handleSelectionChange"
-              :selectable="canCheck"
-          >
-            <template #select-actions>
-              <bulk-select :model-value="queryBulkAction" :selections="selection" :total="total"
-                           @update:model-value="toggleAllSelection()">
-                <el-button v-if="canRead" :icon="Download" @click="exportFlows()">
-                  {{ $t('export') }}
-                </el-button>
-                <el-button v-if="canDelete" @click="deleteFlows" :icon="TrashCan">
-                  {{ $t('delete') }}
-                </el-button>
-                <el-button v-if="canUpdate" @click="enableFlows" :icon="FileDocumentCheckOutline">
-                  {{ $t('enable') }}
-                </el-button>
-                <el-button v-if="canUpdate" @click="disableFlows" :icon="FileDocumentRemoveOutline">
-                  {{ $t('disable') }}
-                </el-button>
-              </bulk-select>
-            </template>
-            <template #default>
-              <el-table-column prop="id" sortable="custom" :sort-orders="['ascending', 'descending']" :label="$t('id')">
-                <template #default="scope">
-                  <router-link
-                      :to="{name: 'flows/update', params: {namespace: scope.row.namespace, id: scope.row.id}}"
-                  >
-                    {{ $filters.invisibleSpace(scope.row.id) }}
-                  </router-link>
-                  &nbsp;<markdown-tooltip
-                    :id="scope.row.namespace + '-' + scope.row.id"
-                    :description="scope.row.description"
-                    :title="scope.row.namespace + '.' + scope.row.id"
-                />
+    <div v-if="ready">
+        <div>
+            <data-table
+                @page-changed="onPageChanged"
+                ref="dataTable"
+                :total="total"
+            >
+                <template #navbar>
+                    <el-form-item>
+                        <search-field />
+                    </el-form-item>
+                    <el-form-item>
+                        <namespace-select
+                            data-type="flow"
+                            :value="$route.query.namespace"
+                            @update:model-value="onDataTableValue('namespace', $event)"
+                        />
+                    </el-form-item>
+                    <el-form-item>
+                        <label-filter
+                            :model-value="$route.query.labels"
+                            @update:model-value="onDataTableValue('labels', $event)"
+                        />
+                    </el-form-item>
                 </template>
-              </el-table-column>
 
-              <el-table-column :label="$t('labels')">
-                <template #default="scope">
-                  <labels :labels="scope.row.labels"/>
+                <template #top>
+                    <state-global-chart
+                        class="mb-4"
+                        v-if="daily"
+                        :ready="dailyReady"
+                        :data="daily"
+                    />
                 </template>
-              </el-table-column>
 
-              <el-table-column prop="namespace" sortable="custom" :sort-orders="['ascending', 'descending']"
-                               :label="$t('namespace')"
-                               :formatter="(_, __, cellValue) => $filters.invisibleSpace(cellValue)"/>
+                <template #table>
+                    <select-table
+                        ref="selectTable"
+                        :data="flows"
+                        :default-sort="{prop: 'id', order: 'ascending'}"
+                        stripe
+                        table-layout="auto"
+                        fixed
+                        @row-dblclick="onRowDoubleClick"
+                        @sort-change="onSort"
+                        :row-class-name="rowClasses"
+                        @selection-change="handleSelectionChange"
+                        :selectable="canCheck"
+                    >
+                        <template #select-actions>
+                            <bulk-select :model-value="queryBulkAction" :selections="selection" :total="total"
+                                         @update:model-value="toggleAllSelection()">
+                                <el-button v-if="canRead" :icon="Download" @click="exportFlows()">
+                                    {{ $t('export') }}
+                                </el-button>
+                                <el-button v-if="canDelete" @click="deleteFlows" :icon="TrashCan">
+                                    {{ $t('delete') }}
+                                </el-button>
+                                <el-button v-if="canUpdate" @click="enableFlows" :icon="FileDocumentCheckOutline">
+                                    {{ $t('enable') }}
+                                </el-button>
+                                <el-button v-if="canUpdate" @click="disableFlows" :icon="FileDocumentRemoveOutline">
+                                    {{ $t('disable') }}
+                                </el-button>
+                            </bulk-select>
+                        </template>
+                        <template #default>
+                            <el-table-column prop="id" sortable="custom" :sort-orders="['ascending', 'descending']"
+                                             :label="$t('id')">
+                                <template #default="scope">
+                                    <router-link
+                                        :to="{name: 'flows/update', params: {namespace: scope.row.namespace, id: scope.row.id}}"
+                                    >
+                                        {{ $filters.invisibleSpace(scope.row.id) }}
+                                    </router-link>
+                                    &nbsp;<markdown-tooltip
+                                    :id="scope.row.namespace + '-' + scope.row.id"
+                                    :description="scope.row.description"
+                                    :title="scope.row.namespace + '.' + scope.row.id"
+                                />
+                                </template>
+                            </el-table-column>
 
-              <el-table-column
-                  prop="state"
-                  :label="$t('execution statistics')"
-                  v-if="user.hasAny(permission.EXECUTION)"
-                  class-name="row-graph"
-              >
-                <template #default="scope">
-                  <state-chart
-                      :duration="true"
-                      :namespace="scope.row.namespace"
-                      :flow-id="scope.row.id"
-                      v-if="dailyGroupByFlowReady"
-                      :data="chartData(scope.row)"
-                  />
-                </template>
-              </el-table-column>
+                            <el-table-column :label="$t('labels')">
+                                <template #default="scope">
+                                    <labels :labels="scope.row.labels" />
+                                </template>
+                            </el-table-column>
 
-              <el-table-column :label="$t('triggers')" class-name="row-action">
-                <template #default="scope">
-                  <trigger-avatar :flow="scope.row"/>
-                </template>
-              </el-table-column>
+                            <el-table-column prop="namespace" sortable="custom"
+                                             :sort-orders="['ascending', 'descending']"
+                                             :label="$t('namespace')"
+                                             :formatter="(_, __, cellValue) => $filters.invisibleSpace(cellValue)" />
+
+                            <el-table-column
+                                prop="state"
+                                :label="$t('execution statistics')"
+                                v-if="user.hasAny(permission.EXECUTION)"
+                                class-name="row-graph"
+                            >
+                                <template #default="scope">
+                                    <state-chart
+                                        :duration="true"
+                                        :namespace="scope.row.namespace"
+                                        :flow-id="scope.row.id"
+                                        v-if="dailyGroupByFlowReady"
+                                        :data="chartData(scope.row)"
+                                    />
+                                </template>
+                            </el-table-column>
+
+                            <el-table-column :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">
-                <template #default="scope">
-                  <router-link
-                      :to="{name: 'flows/update', params : {namespace: scope.row.namespace, id: scope.row.id}}">
-                    <kicon :tooltip="$t('details')" placement="left">
-                      <eye/>
-                    </kicon>
-                  </router-link>
+                            <el-table-column 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}}">
+                                        <kicon :tooltip="$t('details')" placement="left">
+                                            <eye />
+                                        </kicon>
+                                    </router-link>
+                                </template>
+                            </el-table-column>
+                        </template>
+                    </select-table>
                 </template>
-              </el-table-column>
-            </template>
-          </select-table>
-        </template>
-      </data-table>
-    </div>
+            </data-table>
+        </div>
 
-    <bottom-line>
-      <ul>
-        <li>
-          <div class="el-input el-input-file el-input--large custom-upload">
-            <div class="el-input__wrapper">
-              <label for="importFlows">
-                <Upload/>
-                {{ $t('import') }}
-              </label>
-              <input
-                  id="importFlows"
-                  class="el-input__inner"
-                  type="file"
-                  @change="importFlows()"
-                  ref="file"
-              >
-            </div>
-          </div>
-        </li>
-        <li>
-          <router-link :to="{name: 'flows/search'}">
-            <el-button :icon="TextBoxSearch" size="large">
-              {{ $t('source search') }}
-            </el-button>
-          </router-link>
-        </li>
-        <li v-if="user && user.hasAnyAction(permission.FLOW, action.CREATE)">
-          <router-link :to="{name: 'flows/create'}">
-            <el-button :icon="Plus" type="primary" size="large">
-              {{ $t('create') }}
-            </el-button>
-          </router-link>
-        </li>
-      </ul>
-    </bottom-line>
-  </div>
+        <bottom-line>
+            <ul>
+                <li>
+                    <div class="el-input el-input-file el-input--large custom-upload">
+                        <div class="el-input__wrapper">
+                            <label for="importFlows">
+                                <Upload />
+                                {{ $t('import') }}
+                            </label>
+                            <input
+                                id="importFlows"
+                                class="el-input__inner"
+                                type="file"
+                                @change="importFlows()"
+                                ref="file"
+                            >
+                        </div>
+                    </div>
+                </li>
+                <li>
+                    <router-link :to="{name: 'flows/search'}">
+                        <el-button :icon="TextBoxSearch" size="large">
+                            {{ $t('source search') }}
+                        </el-button>
+                    </router-link>
+                </li>
+                <li v-if="user && user.hasAnyAction(permission.FLOW, action.CREATE)">
+                    <router-link :to="{name: 'flows/create'}">
+                        <el-button :icon="Plus" type="primary" size="large">
+                            {{ $t('create') }}
+                        </el-button>
+                    </router-link>
+                </li>
+            </ul>
+        </bottom-line>
+    </div>
 </template>
 
 <script setup>
-  import BulkSelect from "../layout/BulkSelect.vue";
-  import SelectTable from "../layout/SelectTable.vue";
-  import Plus from "vue-material-design-icons/Plus.vue";
-  import TextBoxSearch from "vue-material-design-icons/TextBoxSearch.vue";
-  import Download from "vue-material-design-icons/Download.vue";
-  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 BulkSelect from "../layout/BulkSelect.vue";
+    import SelectTable from "../layout/SelectTable.vue";
+    import Plus from "vue-material-design-icons/Plus.vue";
+    import TextBoxSearch from "vue-material-design-icons/TextBoxSearch.vue";
+    import Download from "vue-material-design-icons/Download.vue";
+    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";
 </script>
 
 <script>
-  import {mapState} from "vuex";
-  import _merge from "lodash/merge";
-  import permission from "../../models/permission";
-  import action from "../../models/action";
-  import NamespaceSelect from "../namespace/NamespaceSelect.vue";
-  import Eye from "vue-material-design-icons/Eye.vue";
-  import BottomLine from "../layout/BottomLine.vue";
-  import RouteContext from "../../mixins/routeContext";
-  import DataTableActions from "../../mixins/dataTableActions";
-  import SelectTableActions from "../../mixins/selectTableActions";
-  import RestoreUrl from "../../mixins/restoreUrl";
-  import DataTable from "../layout/DataTable.vue";
-  import SearchField from "../layout/SearchField.vue";
-  import StateChart from "../stats/StateChart.vue";
-  import StateGlobalChart from "../stats/StateGlobalChart.vue";
-  import TriggerAvatar from "./TriggerAvatar.vue";
-  import MarkdownTooltip from "../layout/MarkdownTooltip.vue"
-  import Kicon from "../Kicon.vue"
-  import Labels from "../layout/Labels.vue"
-  import Upload from "vue-material-design-icons/Upload.vue";
-  import LabelFilter from "../labels/LabelFilter.vue";
+    import {mapState} from "vuex";
+    import _merge from "lodash/merge";
+    import permission from "../../models/permission";
+    import action from "../../models/action";
+    import NamespaceSelect from "../namespace/NamespaceSelect.vue";
+    import Eye from "vue-material-design-icons/Eye.vue";
+    import BottomLine from "../layout/BottomLine.vue";
+    import RouteContext from "../../mixins/routeContext";
+    import DataTableActions from "../../mixins/dataTableActions";
+    import SelectTableActions from "../../mixins/selectTableActions";
+    import RestoreUrl from "../../mixins/restoreUrl";
+    import DataTable from "../layout/DataTable.vue";
+    import SearchField from "../layout/SearchField.vue";
+    import StateChart from "../stats/StateChart.vue";
+    import StateGlobalChart from "../stats/StateGlobalChart.vue";
+    import TriggerAvatar from "./TriggerAvatar.vue";
+    import MarkdownTooltip from "../layout/MarkdownTooltip.vue"
+    import Kicon from "../Kicon.vue"
+    import Labels from "../layout/Labels.vue"
+    import Upload from "vue-material-design-icons/Upload.vue";
+    import LabelFilter from "../labels/LabelFilter.vue";
 
-  export default {
-    mixins: [RouteContext, RestoreUrl, DataTableActions, SelectTableActions],
-    components: {
-      NamespaceSelect,
-      BottomLine,
-      Eye,
-      DataTable,
-      SearchField,
-      StateChart,
-      StateGlobalChart,
-      TriggerAvatar,
-      MarkdownTooltip,
-      Kicon,
-      Labels,
-      Upload,
-      LabelFilter
-    },
-    data() {
-      return {
-        isDefaultNamespaceAllow: true,
-        permission: permission,
-        action: action,
-        dailyGroupByFlowReady: false,
-        dailyReady: false,
-        file: undefined,
-      };
-    },
-    computed: {
-      ...mapState("flow", ["flows", "total"]),
-      ...mapState("stat", ["dailyGroupByFlow", "daily"]),
-      ...mapState("auth", ["user"]),
-      routeInfo() {
-        return {
-          title: this.$t("flows")
-        };
-      },
-      endDate() {
-        return new Date();
-      },
-      startDate() {
-        return this.$moment(this.endDate)
-            .add(-30, "days")
-            .toDate();
-      },
-      canCheck() {
-        return this.canRead || this.canDelete || this.canUpdate;
-      },
-      canRead() {
-        return this.user && this.user.isAllowed(permission.FLOW, action.READ, this.$route.query.namespace);
-      },
-      canDelete() {
-        return this.user && this.user.isAllowed(permission.FLOW, action.DELETE, this.$route.query.namespace);
-      },
-      canUpdate() {
-        return this.user && this.user.isAllowed(permission.FLOW, action.UPDATE, this.$route.query.namespace);
-      }
-    },
-    methods: {
-      selectionMapper(element) {
-        return {
-          id: element.id,
-          namespace: element.namespace
-        }
-      },
-      exportFlows() {
-        this.$toast().confirm(
-            this.$t("flow export", {"flowCount": this.queryBulkAction ? this.total : this.selection.length}),
-            () => {
-              if (this.queryBulkAction) {
-                return this.$store
-                    .dispatch("flow/exportFlowByQuery", this.loadQuery({
-                      namespace: this.$route.query.namespace ? [this.$route.query.namespace] : undefined,
-                      q: this.$route.query.q ? [this.$route.query.q] : undefined,
-                    }, false))
-                    .then(_ => {
-                      this.$toast().success(this.$t("flows exported"));
-                    })
-              } else {
-                return this.$store
-                    .dispatch("flow/exportFlowByIds", {ids: this.selection})
-                    .then(_ => {
-                      this.$toast().success(this.$t("flows exported"));
-                    })
-              }
+    export default {
+        mixins: [RouteContext, RestoreUrl, DataTableActions, SelectTableActions],
+        components: {
+            NamespaceSelect,
+            BottomLine,
+            Eye,
+            DataTable,
+            SearchField,
+            StateChart,
+            StateGlobalChart,
+            TriggerAvatar,
+            MarkdownTooltip,
+            Kicon,
+            Labels,
+            Upload,
+            LabelFilter
+        },
+        data() {
+            return {
+                isDefaultNamespaceAllow: true,
+                permission: permission,
+                action: action,
+                dailyGroupByFlowReady: false,
+                dailyReady: false,
+                file: undefined,
+            };
+        },
+        computed: {
+            ...mapState("flow", ["flows", "total"]),
+            ...mapState("stat", ["dailyGroupByFlow", "daily"]),
+            ...mapState("auth", ["user"]),
+            routeInfo() {
+                return {
+                    title: this.$t("flows")
+                };
             },
-            () => {
-            }
-        )
-      },
-      disableFlows() {
-        this.$toast().confirm(
-            this.$t("flow disable", {"flowCount": this.queryBulkAction ? this.total : this.selection.length}),
-            () => {
-              if (this.queryBulkAction) {
-                return this.$store
-                    .dispatch("flow/disableFlowByQuery", this.loadQuery({
-                      namespace: this.$route.query.namespace ? [this.$route.query.namespace] : undefined,
-                      q: this.$route.query.q ? [this.$route.query.q] : undefined,
-                    }, false))
-                    .then(r => {
-                      this.$toast().success(this.$t("flows disabled", {count: r.data.count}));
-                      this.loadData(() => {
-                      })
-                    })
-              } else {
-                return this.$store
-                    .dispatch("flow/disableFlowByIds", {ids: this.selection})
-                    .then(r => {
-                      this.$toast().success(this.$t("flows disabled", {count: r.data.count}));
-                      this.loadData(() => {
-                      })
-                    })
-              }
+            endDate() {
+                return new Date();
             },
-            () => {
-            }
-        )
-      },
-      enableFlows() {
-        this.$toast().confirm(
-            this.$t("flow enable", {"flowCount": this.queryBulkAction ? this.total : this.selection.length}),
-            () => {
-              if (this.queryBulkAction) {
-                return this.$store
-                    .dispatch("flow/enableFlowByQuery", this.loadQuery({
-                      namespace: this.$route.query.namespace ? [this.$route.query.namespace] : undefined,
-                      q: this.$route.query.q ? [this.$route.query.q] : undefined,
-                    }, false))
-                    .then(r => {
-                      this.$toast().success(this.$t("flows enabled", {count: r.data.count}));
-                      this.loadData(() => {
-                      })
-                    })
-              } else {
-                return this.$store
-                    .dispatch("flow/enableFlowByIds", {ids: this.selection})
-                    .then(r => {
-                      this.$toast().success(this.$t("flows enabled", {count: r.data.count}));
-                      this.loadData(() => {
-                      })
-                    })
-              }
+            startDate() {
+                return this.$moment(this.endDate)
+                    .add(-30, "days")
+                    .toDate();
+            },
+            canCheck() {
+                return this.canRead || this.canDelete || this.canUpdate;
+            },
+            canRead() {
+                return this.user && this.user.isAllowed(permission.FLOW, action.READ, this.$route.query.namespace);
             },
-            () => {
+            canDelete() {
+                return this.user && this.user.isAllowed(permission.FLOW, action.DELETE, this.$route.query.namespace);
+            },
+            canUpdate() {
+                return this.user && this.user.isAllowed(permission.FLOW, action.UPDATE, this.$route.query.namespace);
             }
-        )
-      },
-      deleteFlows() {
-        this.$toast().confirm(
-            this.$t("flow delete", {"flowCount": this.queryBulkAction ? this.total : this.selection.length}),
-            () => {
-              if (this.queryBulkAction) {
-                return this.$store
-                    .dispatch("flow/deleteFlowByQuery", this.loadQuery({
-                      namespace: this.$route.query.namespace ? [this.$route.query.namespace] : undefined,
-                      q: this.$route.query.q ? [this.$route.query.q] : undefined,
-                    }, false))
-                    .then(r => {
-                      this.$toast().success(this.$t("flows deleted", {count: r.data.count}));
-                      this.loadData(() => {
-                      })
-                    })
-              } else {
-                return this.$store
-                    .dispatch("flow/deleteFlowByIds", {ids: this.selection})
-                    .then(r => {
-                      this.$toast().success(this.$t("flows deleted", {count: r.data.count}));
-                      this.loadData(() => {
-                      })
+        },
+        methods: {
+            selectionMapper(element) {
+                return {
+                    id: element.id,
+                    namespace: element.namespace
+                }
+            },
+            exportFlows() {
+                this.$toast().confirm(
+                    this.$t("flow export", {"flowCount": this.queryBulkAction ? this.total : this.selection.length}),
+                    () => {
+                        if (this.queryBulkAction) {
+                            return this.$store
+                                .dispatch("flow/exportFlowByQuery", this.loadQuery({
+                                    namespace: this.$route.query.namespace ? [this.$route.query.namespace] : undefined,
+                                    q: this.$route.query.q ? [this.$route.query.q] : undefined,
+                                }, false))
+                                .then(_ => {
+                                    this.$toast().success(this.$t("flows exported"));
+                                })
+                        } else {
+                            return this.$store
+                                .dispatch("flow/exportFlowByIds", {ids: this.selection})
+                                .then(_ => {
+                                    this.$toast().success(this.$t("flows exported"));
+                                })
+                        }
+                    },
+                    () => {
+                    }
+                )
+            },
+            disableFlows() {
+                this.$toast().confirm(
+                    this.$t("flow disable", {"flowCount": this.queryBulkAction ? this.total : this.selection.length}),
+                    () => {
+                        if (this.queryBulkAction) {
+                            return this.$store
+                                .dispatch("flow/disableFlowByQuery", this.loadQuery({
+                                    namespace: this.$route.query.namespace ? [this.$route.query.namespace] : undefined,
+                                    q: this.$route.query.q ? [this.$route.query.q] : undefined,
+                                }, false))
+                                .then(r => {
+                                    this.$toast().success(this.$t("flows disabled", {count: r.data.count}));
+                                    this.loadData(() => {
+                                    })
+                                })
+                        } else {
+                            return this.$store
+                                .dispatch("flow/disableFlowByIds", {ids: this.selection})
+                                .then(r => {
+                                    this.$toast().success(this.$t("flows disabled", {count: r.data.count}));
+                                    this.loadData(() => {
+                                    })
+                                })
+                        }
+                    },
+                    () => {
+                    }
+                )
+            },
+            enableFlows() {
+                this.$toast().confirm(
+                    this.$t("flow enable", {"flowCount": this.queryBulkAction ? this.total : this.selection.length}),
+                    () => {
+                        if (this.queryBulkAction) {
+                            return this.$store
+                                .dispatch("flow/enableFlowByQuery", this.loadQuery({
+                                    namespace: this.$route.query.namespace ? [this.$route.query.namespace] : undefined,
+                                    q: this.$route.query.q ? [this.$route.query.q] : undefined,
+                                }, false))
+                                .then(r => {
+                                    this.$toast().success(this.$t("flows enabled", {count: r.data.count}));
+                                    this.loadData(() => {
+                                    })
+                                })
+                        } else {
+                            return this.$store
+                                .dispatch("flow/enableFlowByIds", {ids: this.selection})
+                                .then(r => {
+                                    this.$toast().success(this.$t("flows enabled", {count: r.data.count}));
+                                    this.loadData(() => {
+                                    })
+                                })
+                        }
+                    },
+                    () => {
+                    }
+                )
+            },
+            deleteFlows() {
+                this.$toast().confirm(
+                    this.$t("flow delete", {"flowCount": this.queryBulkAction ? this.total : this.selection.length}),
+                    () => {
+                        if (this.queryBulkAction) {
+                            return this.$store
+                                .dispatch("flow/deleteFlowByQuery", this.loadQuery({
+                                    namespace: this.$route.query.namespace ? [this.$route.query.namespace] : undefined,
+                                    q: this.$route.query.q ? [this.$route.query.q] : undefined,
+                                }, false))
+                                .then(r => {
+                                    this.$toast().success(this.$t("flows deleted", {count: r.data.count}));
+                                    this.loadData(() => {
+                                    })
+                                })
+                        } else {
+                            return this.$store
+                                .dispatch("flow/deleteFlowByIds", {ids: this.selection})
+                                .then(r => {
+                                    this.$toast().success(this.$t("flows deleted", {count: r.data.count}));
+                                    this.loadData(() => {
+                                    })
+                                })
+                        }
+                    },
+                    () => {
+                    }
+                )
+            },
+            importFlows() {
+                const formData = new FormData();
+                formData.append("fileUpload", this.$refs.file.files[0]);
+                this.$store
+                    .dispatch("flow/importFlows", formData)
+                    .then(_ => {
+                        this.$toast().success(this.$t("flows imported"));
+                        this.loadData(() => {
+                        })
                     })
-              }
             },
-            () => {
-            }
-        )
-      },
-      importFlows() {
-        const formData = new FormData();
-        formData.append("fileUpload", this.$refs.file.files[0]);
-        this.$store
-            .dispatch("flow/importFlows", formData)
-            .then(_ => {
-              this.$toast().success(this.$t("flows imported"));
-              this.loadData(() => {
-              })
-            })
-      },
-      chartData(row) {
-        if (this.dailyGroupByFlow && this.dailyGroupByFlow[row.namespace] && this.dailyGroupByFlow[row.namespace][row.id]) {
-          return this.dailyGroupByFlow[row.namespace][row.id];
-        } else {
-          return [];
-        }
-      },
-      loadQuery(base) {
-        let queryFilter = this.queryWithFilter();
+            chartData(row) {
+                if (this.dailyGroupByFlow && this.dailyGroupByFlow[row.namespace] && this.dailyGroupByFlow[row.namespace][row.id]) {
+                    return this.dailyGroupByFlow[row.namespace][row.id];
+                } else {
+                    return [];
+                }
+            },
+            loadQuery(base) {
+                let queryFilter = this.queryWithFilter();
 
-        return _merge(base, queryFilter)
-      },
-      loadData(callback) {
-        this.dailyReady = false;
+                return _merge(base, queryFilter)
+            },
+            loadData(callback) {
+                this.dailyReady = false;
 
-        if (this.user.hasAny(permission.EXECUTION)) {
-          this.$store
-              .dispatch("stat/daily", this.loadQuery({
-                startDate: this.$moment(this.startDate).add(-1, "day").startOf("day").toISOString(true),
-                endDate: this.$moment(this.endDate).endOf("day").toISOString(true)
-              }))
-              .then(() => {
-                this.dailyReady = true;
-              });
-        }
+                if (this.user.hasAny(permission.EXECUTION)) {
+                    this.$store
+                        .dispatch("stat/daily", this.loadQuery({
+                            startDate: this.$moment(this.startDate).add(-1, "day").startOf("day").toISOString(true),
+                            endDate: this.$moment(this.endDate).endOf("day").toISOString(true)
+                        }))
+                        .then(() => {
+                            this.dailyReady = true;
+                        });
+                }
 
-        this.$store
-            .dispatch("flow/findFlows", this.loadQuery({
-              size: parseInt(this.$route.query.size || 25),
-              page: parseInt(this.$route.query.page || 1),
-              sort: this.$route.query.sort || "id:asc"
-            }))
-            .then(flows => {
-              this.dailyGroupByFlowReady = false;
-              callback();
+                this.$store
+                    .dispatch("flow/findFlows", this.loadQuery({
+                        size: parseInt(this.$route.query.size || 25),
+                        page: parseInt(this.$route.query.page || 1),
+                        sort: this.$route.query.sort || "id:asc"
+                    }))
+                    .then(flows => {
+                        this.dailyGroupByFlowReady = false;
+                        callback();
 
-              if (flows.results && flows.results.length > 0) {
-                if (this.user && this.user.hasAny(permission.EXECUTION)) {
-                  this.$store
-                      .dispatch("stat/dailyGroupByFlow", {
-                        flows: flows.results
-                            .map(flow => {
-                              return {namespace: flow.namespace, id: flow.id}
-                            }),
-                        startDate: this.$moment(this.startDate).add(-1, "day").startOf("day").toISOString(true),
-                        endDate: this.$moment(this.endDate).endOf("day").toISOString(true)
-                      })
-                      .then(() => {
-                        this.dailyGroupByFlowReady = true
-                      })
-                }
-              }
-            })
-      },
-      rowClasses(row) {
-        return row && row.row && row.row.disabled ? "disabled" : "";
-      }
-    }
-  };
+                        if (flows.results && flows.results.length > 0) {
+                            if (this.user && this.user.hasAny(permission.EXECUTION)) {
+                                this.$store
+                                    .dispatch("stat/dailyGroupByFlow", {
+                                        flows: flows.results
+                                            .map(flow => {
+                                                return {namespace: flow.namespace, id: flow.id}
+                                            }),
+                                        startDate: this.$moment(this.startDate).add(-1, "day").startOf("day").toISOString(true),
+                                        endDate: this.$moment(this.endDate).endOf("day").toISOString(true)
+                                    })
+                                    .then(() => {
+                                        this.dailyGroupByFlowReady = true
+                                    })
+                            }
+                        }
+                    })
+            },
+            rowClasses(row) {
+                return row && row.row && row.row.disabled ? "disabled" : "";
+            }
+        }
+    };
 </script>
 
diff --git a/ui/src/components/layout/BulkSelect.vue b/ui/src/components/layout/BulkSelect.vue
index b13789f194f..23276d212ea 100644
--- a/ui/src/components/layout/BulkSelect.vue
+++ b/ui/src/components/layout/BulkSelect.vue
@@ -1,58 +1,58 @@
 <template>
-  <div class="bulk-select">
-    <el-checkbox
-        :model-value="modelValue"
-        :indeterminate="partialCheck"
-        @change="toggleAll"
-    >
-      <span v-html="$t('selection.selected', {count: modelValue ? total : selections.length})"/>
-    </el-checkbox>
-    <el-button-group>
-      <slot/>
-    </el-button-group>
-  </div>
+    <div class="bulk-select">
+        <el-checkbox
+            :model-value="modelValue"
+            :indeterminate="partialCheck"
+            @change="toggleAll"
+        >
+            <span v-html="$t('selection.selected', {count: modelValue ? total : selections.length})" />
+        </el-checkbox>
+        <el-button-group>
+            <slot />
+        </el-button-group>
+    </div>
 </template>
 <script>
-  export default {
-    props: {
-      total: {type: Number, required: true},
-      selections: {type: Array, required: true},
-      modelValue: {type: Boolean, required: true},
-    },
-    emits: ["update:modelValue"],
-    methods: {
-      toggleAll() {
-        this.$emit("update:modelValue", !this.modelValue);
-      }
-    },
-    computed: {
-      partialCheck() {
-        return !this.modelValue && this.selections.length > 0;
-      },
+    export default {
+        props: {
+            total: {type: Number, required: true},
+            selections: {type: Array, required: true},
+            modelValue: {type: Boolean, required: true},
+        },
+        emits: ["update:modelValue"],
+        methods: {
+            toggleAll() {
+                this.$emit("update:modelValue", !this.modelValue);
+            }
+        },
+        computed: {
+            partialCheck() {
+                return !this.modelValue && this.selections.length > 0;
+            },
+        }
     }
-  }
 </script>
 
 <style lang="scss" scoped>
-  .bulk-select {
-    height: 100%;
-    display: flex;
-    align-items: center;
+    .bulk-select {
+        height: 100%;
+        display: flex;
+        align-items: center;
 
-    .el-checkbox {
-      height: 100%;
+        .el-checkbox {
+            height: 100%;
 
-      span {
-        padding-left: calc(var(--spacer) * 1.5);
-      }
-    }
+            span {
+                padding-left: calc(var(--spacer) * 1.5);
+            }
+        }
 
-    > * {
-      padding: 0 8px;
+        > * {
+            padding: 0 8px;
+        }
     }
-  }
 
-  span {
-    font-weight: bold;
-  }
+    span {
+        font-weight: bold;
+    }
 </style>
diff --git a/ui/src/components/layout/SelectTable.vue b/ui/src/components/layout/SelectTable.vue
index 455dd9435a5..efa3a9cec31 100644
--- a/ui/src/components/layout/SelectTable.vue
+++ b/ui/src/components/layout/SelectTable.vue
@@ -37,11 +37,11 @@
 <template>
     <div class="position-relative">
         <div v-if="hasSelection" class="bulk-select-header">
-            <slot name="select-actions"/>
+            <slot name="select-actions" />
         </div>
         <el-table ref="table" v-bind="$attrs" :data="data" @selection-change="selectionChanged">
             <el-table-column type="selection" v-if="selectable" />
-            <slot name="default"/>
+            <slot name="default" />
         </el-table>
     </div>
 </template>
diff --git a/ui/src/components/templates/Templates.vue b/ui/src/components/templates/Templates.vue
index 7f3ca17b555..f11ee22225c 100644
--- a/ui/src/components/templates/Templates.vue
+++ b/ui/src/components/templates/Templates.vue
@@ -1,266 +1,268 @@
 <template>
-  <div v-if="ready">
-    <div>
-      <data-table
-          @page-changed="onPageChanged"
-          ref="dataTable"
-          :total="total"
-      >
-        <template #navbar>
-          <el-form-item>
-            <search-field/>
-          </el-form-item>
-          <el-form-item>
-            <namespace-select
-                data-type="flow"
-                :value="$route.query.namespace"
-                @update:model-value="onDataTableValue('namespace', $event)"
-            />
-          </el-form-item>
-        </template>
-
-        <template #table>
-          <select-table
-              ref="selectTable"
-              :data="templates"
-              :default-sort="{prop: 'id', order: 'ascending'}"
-              stripe
-              table-layout="auto"
-              fixed
-              @row-dblclick="onRowDoubleClick"
-              @sort-change="onSort"
-              @selection-change="handleSelectionChange"
-              :selectable="canRead || canDelete"
-          >
-            <template #select-actions>
-              <bulk-select v-model="queryBulkAction" :selections="selection" :total="total"
-                           @update:model-value="toggleAllSelection()">
-                <el-button v-if="canRead" :icon="Download" @click="exportTemplates()">
-                  {{ $t('export') }}
-                </el-button>
-                <el-button v-if="canDelete" @click="deleteTemplates" :icon="TrashCan">
-                  {{ $t('delete') }}
-                </el-button>
-              </bulk-select>
-            </template>
-            <template #default>
-              <el-table-column prop="id" sortable="custom" :sort-orders="['ascending', 'descending']" :label="$t('id')">
-                <template #default="scope">
-                  <router-link
-                      :to="{name: 'templates/update', params: {namespace: scope.row.namespace, id: scope.row.id}}"
-                  >
-                    {{ scope.row.id }}
-                  </router-link>
-                  &nbsp;<markdown-tooltip
-                    :id="scope.row.namespace + '-' + scope.row.id"
-                    :description="scope.row.description"
-                    :title="scope.row.namespace + '.' + scope.row.id"
-                />
+    <div v-if="ready">
+        <div>
+            <data-table
+                @page-changed="onPageChanged"
+                ref="dataTable"
+                :total="total"
+            >
+                <template #navbar>
+                    <el-form-item>
+                        <search-field />
+                    </el-form-item>
+                    <el-form-item>
+                        <namespace-select
+                            data-type="flow"
+                            :value="$route.query.namespace"
+                            @update:model-value="onDataTableValue('namespace', $event)"
+                        />
+                    </el-form-item>
                 </template>
-              </el-table-column>
 
-              <el-table-column prop="namespace" sortable="custom" :sort-orders="['ascending', 'descending']"
-                               :label="$t('namespace')"
-                               :formatter="(_, __, cellValue) => $filters.invisibleSpace(cellValue)"/>
+                <template #table>
+                    <select-table
+                        ref="selectTable"
+                        :data="templates"
+                        :default-sort="{prop: 'id', order: 'ascending'}"
+                        stripe
+                        table-layout="auto"
+                        fixed
+                        @row-dblclick="onRowDoubleClick"
+                        @sort-change="onSort"
+                        @selection-change="handleSelectionChange"
+                        :selectable="canRead || canDelete"
+                    >
+                        <template #select-actions>
+                            <bulk-select v-model="queryBulkAction" :selections="selection" :total="total"
+                                         @update:model-value="toggleAllSelection()">
+                                <el-button v-if="canRead" :icon="Download" @click="exportTemplates()">
+                                    {{ $t('export') }}
+                                </el-button>
+                                <el-button v-if="canDelete" @click="deleteTemplates" :icon="TrashCan">
+                                    {{ $t('delete') }}
+                                </el-button>
+                            </bulk-select>
+                        </template>
+                        <template #default>
+                            <el-table-column prop="id" sortable="custom" :sort-orders="['ascending', 'descending']"
+                                             :label="$t('id')">
+                                <template #default="scope">
+                                    <router-link
+                                        :to="{name: 'templates/update', params: {namespace: scope.row.namespace, id: scope.row.id}}"
+                                    >
+                                        {{ scope.row.id }}
+                                    </router-link>
+                                    &nbsp;<markdown-tooltip
+                                    :id="scope.row.namespace + '-' + scope.row.id"
+                                    :description="scope.row.description"
+                                    :title="scope.row.namespace + '.' + scope.row.id"
+                                />
+                                </template>
+                            </el-table-column>
+
+                            <el-table-column prop="namespace" sortable="custom"
+                                             :sort-orders="['ascending', 'descending']"
+                                             :label="$t('namespace')"
+                                             :formatter="(_, __, cellValue) => $filters.invisibleSpace(cellValue)" />
 
-              <el-table-column column-key="action" class-name="row-action">
-                <template #default="scope">
-                  <router-link
-                      :to="{name: 'templates/update', params : {namespace: scope.row.namespace, id: scope.row.id}}">
-                    <kicon :tooltip="$t('details')" placement="left">
-                      <eye/>
-                    </kicon>
-                  </router-link>
+                            <el-table-column column-key="action" class-name="row-action">
+                                <template #default="scope">
+                                    <router-link
+                                        :to="{name: 'templates/update', params : {namespace: scope.row.namespace, id: scope.row.id}}">
+                                        <kicon :tooltip="$t('details')" placement="left">
+                                            <eye />
+                                        </kicon>
+                                    </router-link>
+                                </template>
+                            </el-table-column>
+                        </template>
+                    </select-table>
                 </template>
-              </el-table-column>
-            </template>
-          </select-table>
-        </template>
-      </data-table>
-    </div>
+            </data-table>
+        </div>
 
 
-    <bottom-line v-if="user && user.hasAnyAction(permission.TEMPLATE, action.CREATE)">
-      <ul>
-        <li>
-          <div class="el-input el-input-file el-input--large custom-upload">
-            <div class="el-input__wrapper">
-              <label for="importTemplates">
-                <Upload/>
-                {{ $t('import') }}
-              </label>
-              <input
-                  id="importTemplates"
-                  class="el-input__inner"
-                  type="file"
-                  @change="importTemplates()"
-                  ref="file"
-              >
-            </div>
-          </div>
-        </li>
-        <li>
-          <router-link :to="{name: 'templates/create'}">
-            <el-button :icon="Plus" type="primary" size="large">
-              {{ $t('create') }}
-            </el-button>
-          </router-link>
-        </li>
-      </ul>
-    </bottom-line>
-  </div>
+        <bottom-line v-if="user && user.hasAnyAction(permission.TEMPLATE, action.CREATE)">
+            <ul>
+                <li>
+                    <div class="el-input el-input-file el-input--large custom-upload">
+                        <div class="el-input__wrapper">
+                            <label for="importTemplates">
+                                <Upload />
+                                {{ $t('import') }}
+                            </label>
+                            <input
+                                id="importTemplates"
+                                class="el-input__inner"
+                                type="file"
+                                @change="importTemplates()"
+                                ref="file"
+                            >
+                        </div>
+                    </div>
+                </li>
+                <li>
+                    <router-link :to="{name: 'templates/create'}">
+                        <el-button :icon="Plus" type="primary" size="large">
+                            {{ $t('create') }}
+                        </el-button>
+                    </router-link>
+                </li>
+            </ul>
+        </bottom-line>
+    </div>
 </template>
 
 <script setup>
-  import BulkSelect from "../layout/BulkSelect.vue";
-  import SelectTable from "../layout/SelectTable.vue";
-  import Plus from "vue-material-design-icons/Plus.vue";
-  import Download from "vue-material-design-icons/Download.vue";
-  import TrashCan from "vue-material-design-icons/TrashCan.vue";
+    import BulkSelect from "../layout/BulkSelect.vue";
+    import SelectTable from "../layout/SelectTable.vue";
+    import Plus from "vue-material-design-icons/Plus.vue";
+    import Download from "vue-material-design-icons/Download.vue";
+    import TrashCan from "vue-material-design-icons/TrashCan.vue";
 </script>
 
 <script>
-  import {mapState} from "vuex";
-  import permission from "../../models/permission";
-  import action from "../../models/action";
-  import NamespaceSelect from "../namespace/NamespaceSelect.vue";
-  import Eye from "vue-material-design-icons/Eye.vue";
-  import BottomLine from "../layout/BottomLine.vue";
-  import RouteContext from "../../mixins/routeContext";
-  import DataTableActions from "../../mixins/dataTableActions";
-  import DataTable from "../layout/DataTable.vue";
-  import SearchField from "../layout/SearchField.vue";
-  import Kicon from "../Kicon.vue"
-  import RestoreUrl from "../../mixins/restoreUrl";
-  import _merge from "lodash/merge";
-  import MarkdownTooltip from "../../components/layout/MarkdownTooltip.vue";
-  import Upload from "vue-material-design-icons/Upload.vue";
-  import SelectTableActions from "../../mixins/selectTableActions";
+    import {mapState} from "vuex";
+    import permission from "../../models/permission";
+    import action from "../../models/action";
+    import NamespaceSelect from "../namespace/NamespaceSelect.vue";
+    import Eye from "vue-material-design-icons/Eye.vue";
+    import BottomLine from "../layout/BottomLine.vue";
+    import RouteContext from "../../mixins/routeContext";
+    import DataTableActions from "../../mixins/dataTableActions";
+    import DataTable from "../layout/DataTable.vue";
+    import SearchField from "../layout/SearchField.vue";
+    import Kicon from "../Kicon.vue"
+    import RestoreUrl from "../../mixins/restoreUrl";
+    import _merge from "lodash/merge";
+    import MarkdownTooltip from "../../components/layout/MarkdownTooltip.vue";
+    import Upload from "vue-material-design-icons/Upload.vue";
+    import SelectTableActions from "../../mixins/selectTableActions";
 
-  export default {
-    mixins: [RouteContext, RestoreUrl, DataTableActions, SelectTableActions],
-    components: {
-      BottomLine,
-      Eye,
-      DataTable,
-      SearchField,
-      NamespaceSelect,
-      Kicon,
-      MarkdownTooltip,
-      Upload
-    },
-    data() {
-      return {
-        isDefaultNamespaceAllow: true,
-        permission: permission,
-        action: action
-      };
-    },
-    computed: {
-      ...mapState("template", ["templates", "total"]),
-      ...mapState("stat", ["dailyGroupByFlow", "daily"]),
-      ...mapState("auth", ["user"]),
-      routeInfo() {
-        return {
-          title: this.$t("templates")
-        };
-      },
-      canRead() {
-        return this.user && this.user.isAllowed(permission.FLOW, action.READ);
-      },
-      canDelete() {
-        return this.user && this.user.isAllowed(permission.FLOW, action.DELETE);
-      },
-    },
-    methods: {
-      loadQuery(base) {
-        let queryFilter = this.queryWithFilter();
+    export default {
+        mixins: [RouteContext, RestoreUrl, DataTableActions, SelectTableActions],
+        components: {
+            BottomLine,
+            Eye,
+            DataTable,
+            SearchField,
+            NamespaceSelect,
+            Kicon,
+            MarkdownTooltip,
+            Upload
+        },
+        data() {
+            return {
+                isDefaultNamespaceAllow: true,
+                permission: permission,
+                action: action
+            };
+        },
+        computed: {
+            ...mapState("template", ["templates", "total"]),
+            ...mapState("stat", ["dailyGroupByFlow", "daily"]),
+            ...mapState("auth", ["user"]),
+            routeInfo() {
+                return {
+                    title: this.$t("templates")
+                };
+            },
+            canRead() {
+                return this.user && this.user.isAllowed(permission.FLOW, action.READ);
+            },
+            canDelete() {
+                return this.user && this.user.isAllowed(permission.FLOW, action.DELETE);
+            },
+        },
+        methods: {
+            loadQuery(base) {
+                let queryFilter = this.queryWithFilter();
 
-        return _merge(base, queryFilter)
-      },
-      loadData(callback) {
-        this.$store
-            .dispatch("template/findTemplates", this.loadQuery({
-              size: parseInt(this.$route.query.size || 25),
-              page: parseInt(this.$route.query.page || 1),
-              sort: this.$route.query.sort || "id:asc",
-            }))
-            .then(() => {
-              callback();
-            });
-      },
-      selectionMapper(element) {
-        return {
-          id: element.id,
-          namespace: element.namespace
-        };
-      },
-      exportTemplates() {
-        this.$toast().confirm(
-            this.$t("template export", {"templateCount": this.queryBulkAction ? this.total : this.selection.length}),
-            () => {
-              if (this.queryBulkAction) {
-                return this.$store
-                    .dispatch("template/exportTemplateByQuery", this.loadQuery({
-                      namespace: this.$route.query.namespace ? [this.$route.query.namespace] : undefined,
-                      q: this.$route.query.q ? [this.$route.query.q] : undefined,
-                    }, false))
-                    .then(_ => {
-                      this.$toast().success(this.$t("templates exported"));
-                    })
-              } else {
-                return this.$store
-                    .dispatch("template/exportTemplateByIds", {ids: this.selection})
+                return _merge(base, queryFilter)
+            },
+            loadData(callback) {
+                this.$store
+                    .dispatch("template/findTemplates", this.loadQuery({
+                        size: parseInt(this.$route.query.size || 25),
+                        page: parseInt(this.$route.query.page || 1),
+                        sort: this.$route.query.sort || "id:asc",
+                    }))
+                    .then(() => {
+                        callback();
+                    });
+            },
+            selectionMapper(element) {
+                return {
+                    id: element.id,
+                    namespace: element.namespace
+                };
+            },
+            exportTemplates() {
+                this.$toast().confirm(
+                    this.$t("template export", {"templateCount": this.queryBulkAction ? this.total : this.selection.length}),
+                    () => {
+                        if (this.queryBulkAction) {
+                            return this.$store
+                                .dispatch("template/exportTemplateByQuery", this.loadQuery({
+                                    namespace: this.$route.query.namespace ? [this.$route.query.namespace] : undefined,
+                                    q: this.$route.query.q ? [this.$route.query.q] : undefined,
+                                }, false))
+                                .then(_ => {
+                                    this.$toast().success(this.$t("templates exported"));
+                                })
+                        } else {
+                            return this.$store
+                                .dispatch("template/exportTemplateByIds", {ids: this.selection})
+                                .then(_ => {
+                                    this.$toast().success(this.$t("templates exported"));
+                                })
+                        }
+                    },
+                    () => {
+                    }
+                )
+            },
+            importTemplates() {
+                const formData = new FormData();
+                formData.append("fileUpload", this.$refs.file.files[0]);
+                this.$store
+                    .dispatch("template/importTemplates", formData)
                     .then(_ => {
-                      this.$toast().success(this.$t("templates exported"));
+                        this.$toast().success(this.$t("templates imported"));
+                        this.loadData(() => {
+                        })
                     })
-              }
             },
-            () => {
-            }
-        )
-      },
-      importTemplates() {
-        const formData = new FormData();
-        formData.append("fileUpload", this.$refs.file.files[0]);
-        this.$store
-            .dispatch("template/importTemplates", formData)
-            .then(_ => {
-              this.$toast().success(this.$t("templates imported"));
-              this.loadData(() => {
-              })
-            })
-      },
-      deleteTemplates() {
-        this.$toast().confirm(
-            this.$t("template delete", {"templateCount": this.queryBulkAction ? this.total : this.selection.length}),
-            () => {
-              if (this.queryBulkAction) {
-                return this.$store
-                    .dispatch("template/deleteTemplateByQuery", this.loadQuery({
-                      namespace: this.$route.query.namespace ? [this.$route.query.namespace] : undefined,
-                      q: this.$route.query.q ? [this.$route.query.q] : undefined,
-                    }, false))
-                    .then(r => {
-                      this.$toast().success(this.$t("templates deleted", {count: r.data.count}));
-                      this.loadData(() => {
-                      })
-                    })
-              } else {
-                return this.$store
-                    .dispatch("template/deleteTemplateByIds", {ids: this.selection})
-                    .then(r => {
-                      this.$toast().success(this.$t("templates deleted", {count: r.data.count}));
-                      this.loadData(() => {
-                      })
-                    })
-              }
+            deleteTemplates() {
+                this.$toast().confirm(
+                    this.$t("template delete", {"templateCount": this.queryBulkAction ? this.total : this.selection.length}),
+                    () => {
+                        if (this.queryBulkAction) {
+                            return this.$store
+                                .dispatch("template/deleteTemplateByQuery", this.loadQuery({
+                                    namespace: this.$route.query.namespace ? [this.$route.query.namespace] : undefined,
+                                    q: this.$route.query.q ? [this.$route.query.q] : undefined,
+                                }, false))
+                                .then(r => {
+                                    this.$toast().success(this.$t("templates deleted", {count: r.data.count}));
+                                    this.loadData(() => {
+                                    })
+                                })
+                        } else {
+                            return this.$store
+                                .dispatch("template/deleteTemplateByIds", {ids: this.selection})
+                                .then(r => {
+                                    this.$toast().success(this.$t("templates deleted", {count: r.data.count}));
+                                    this.loadData(() => {
+                                    })
+                                })
+                        }
+                    },
+                    () => {
+                    }
+                )
             },
-            () => {
-            }
-        )
-      },
-    },
-  };
+        },
+    };
 </script>
 

From 48d71e85670520eb7f6776d81a66a5a08d5a4e0c Mon Sep 17 00:00:00 2001
From: Ludovic DEHON <tchiot.ludo@gmail.com>
Date: Wed, 9 Aug 2023 18:33:37 +0200
Subject: [PATCH 3/3] cleanup

---
 ui/src/components/executions/Executions.vue | 12 ++++++---
 ui/src/components/flows/Flows.vue           |  9 +++++--
 ui/src/components/layout/BulkSelect.vue     | 27 +++++++++++++++------
 ui/src/components/templates/Templates.vue   |  9 +++++--
 ui/src/mixins/selectTableActions.js         | 10 +++++---
 5 files changed, 48 insertions(+), 19 deletions(-)

diff --git a/ui/src/components/executions/Executions.vue b/ui/src/components/executions/Executions.vue
index fb4dea30130..0a1d4b1e7ee 100644
--- a/ui/src/components/executions/Executions.vue
+++ b/ui/src/components/executions/Executions.vue
@@ -62,8 +62,13 @@
                     :selectable="!hidden.includes('selection') && canCheck"
                 >
                     <template #select-actions>
-                        <bulk-select v-model="queryBulkAction" :selections="selection" :total="total"
-                                     @update:model-value="toggleAllSelection()">
+                        <bulk-select
+                            :select-all="queryBulkAction"
+                            :selections="selection"
+                            :total="total"
+                            @update:select-all="toggleAllSelection"
+                            @unselect="toggleAllUnselected"
+                        >
                             <el-button v-if="canUpdate" :icon="Restart" @click="restartExecutions()">
                                 {{ $t('restart') }}
                             </el-button>
@@ -281,8 +286,7 @@
                     .add(-30, "days").toISOString(true);
             },
             displayBottomBar() {
-                return (this.selection.length !== 0 && (this.canUpdate || this.canDelete)) ||
-                    (this.$route.name === "flows/update");
+                return (this.$route.name === "flows/update");
             },
             canCheck() {
                 return this.canDelete || this.canUpdate;
diff --git a/ui/src/components/flows/Flows.vue b/ui/src/components/flows/Flows.vue
index e7d8f141d87..8bc52794825 100644
--- a/ui/src/components/flows/Flows.vue
+++ b/ui/src/components/flows/Flows.vue
@@ -49,8 +49,13 @@
                         :selectable="canCheck"
                     >
                         <template #select-actions>
-                            <bulk-select :model-value="queryBulkAction" :selections="selection" :total="total"
-                                         @update:model-value="toggleAllSelection()">
+                            <bulk-select
+                                :select-all="queryBulkAction"
+                                :selections="selection"
+                                :total="total"
+                                @update:select-all="toggleAllSelection"
+                                @unselect="toggleAllUnselected"
+                            >
                                 <el-button v-if="canRead" :icon="Download" @click="exportFlows()">
                                     {{ $t('export') }}
                                 </el-button>
diff --git a/ui/src/components/layout/BulkSelect.vue b/ui/src/components/layout/BulkSelect.vue
index 23276d212ea..539c2b49e31 100644
--- a/ui/src/components/layout/BulkSelect.vue
+++ b/ui/src/components/layout/BulkSelect.vue
@@ -1,13 +1,19 @@
 <template>
     <div class="bulk-select">
         <el-checkbox
-            :model-value="modelValue"
+            :model-value="selections.length > 0"
+            @change="toggle"
             :indeterminate="partialCheck"
-            @change="toggleAll"
         >
-            <span v-html="$t('selection.selected', {count: modelValue ? total : selections.length})" />
+            <span v-html="$t('selection.selected', {count: selectAll ? total : selections.length})" />
         </el-checkbox>
         <el-button-group>
+            <el-button
+                :type="selectAll ? 'primary' : 'default'"
+                @click="toggleAll"
+                v-if="selections.length < total"
+                v-html="$t('selection.all', {count: total})"
+            />
             <slot />
         </el-button-group>
     </div>
@@ -17,17 +23,22 @@
         props: {
             total: {type: Number, required: true},
             selections: {type: Array, required: true},
-            modelValue: {type: Boolean, required: true},
+            selectAll: {type: Boolean, required: true},
         },
-        emits: ["update:modelValue"],
+        emits: ["update:selectAll", "unselect"],
         methods: {
-            toggleAll() {
-                this.$emit("update:modelValue", !this.modelValue);
+            toggle(value) {
+                if (!value) {
+                    this.$emit("unselect");
+                }
+            },
+            toggleAll(value) {
+                this.$emit("update:selectAll", !this.selectAll);
             }
         },
         computed: {
             partialCheck() {
-                return !this.modelValue && this.selections.length > 0;
+                return !this.selectAll && this.selections.length < this.total;
             },
         }
     }
diff --git a/ui/src/components/templates/Templates.vue b/ui/src/components/templates/Templates.vue
index f11ee22225c..9477dbc52eb 100644
--- a/ui/src/components/templates/Templates.vue
+++ b/ui/src/components/templates/Templates.vue
@@ -33,8 +33,13 @@
                         :selectable="canRead || canDelete"
                     >
                         <template #select-actions>
-                            <bulk-select v-model="queryBulkAction" :selections="selection" :total="total"
-                                         @update:model-value="toggleAllSelection()">
+                            <bulk-select
+                                :select-all="queryBulkAction"
+                                :selections="selection"
+                                :total="total"
+                                @update:select-all="toggleAllSelection"
+                                @unselect="toggleAllUnselected"
+                            >
                                 <el-button v-if="canRead" :icon="Download" @click="exportTemplates()">
                                     {{ $t('export') }}
                                 </el-button>
diff --git a/ui/src/mixins/selectTableActions.js b/ui/src/mixins/selectTableActions.js
index 1459fdb7ec5..6b4bf5e096d 100644
--- a/ui/src/mixins/selectTableActions.js
+++ b/ui/src/mixins/selectTableActions.js
@@ -14,12 +14,16 @@ export default {
             }
             this.selection = val.map(this.selectionMapper);
         },
-        toggleAllSelection() {
+        toggleAllUnselected() {
+            this.elTable.clearSelection()
+        },
+        toggleAllSelection(active) {
             // only some are selected, we should set queryBulkAction to true because it will select all
-            if (this.elTable.getSelectionRows().length > 0 && !this.queryBulkAction) {
+            if (active && this.elTable.getSelectionRows().length > 0 && !this.queryBulkAction) {
                 this.queryBulkAction = true;
+            } else {
+                this.queryBulkAction = false;
             }
-            this.elTable.toggleAllSelection();
         },
         selectionMapper(element) {
             return element;