feat(ui): add page settings dropdown to filters (#5905)

ui/src/components/executions/Executions.vue

@@ -43,6 +43,7 @@
                     prefix="executions"
                     :include="['namespace', 'state', 'scope', 'labels', 'child', 'relative_date', 'absolute_date']"
                     :refresh="{shown: true, callback: refresh}"
+                    :charts="{shown: true, value: showChart, callback: onShowChartChange}"
                 />
             </template>
 

ui/src/components/filter/Wrapper.vue

@@ -10,6 +10,7 @@
             filterable
             multiple
             popper-class="global-filters-select"
+            :class="{charts: charts.shown}"
             @change="(value) => changeCallback(value)"
             @remove-tag="(item) => removeItem(item)"
             @visible-change="(visible) => dropdownClosedCallback(visible)"
@@ -57,6 +58,7 @@
             <el-button :icon="Magnify" @click="triggerSearch" />
             <Save :disabled="!current.length" :prefix :current />
             <Refresh v-if="refresh.shown" @refresh="refresh.callback" />
+            <Settings :charts />
         </el-button-group>
     </section>
 </template>
@@ -79,6 +81,8 @@
 
     import History from "./components/history/History.vue";
     import Save from "./components/Save.vue";
+    import Settings from "./components/Settings.vue";
+
     import Magnify from "vue-material-design-icons/Magnify.vue";
 
     import State from "../../utils/state.js";
@@ -91,6 +95,10 @@
             type: Object,
             default: () => ({shown: false, callback: () => {}}),
         },
+        charts: {
+            type: Object,
+            default: () => ({shown: false, value: false, callback: () => {}}),
+        },
     });
 
     import {formatLabel, useFilters} from "./filters.js";
@@ -136,7 +144,7 @@
             if (current.value?.at(-1)?.value?.length === 0) current.value.pop();
         }
     };
-    const valueCallback = (filter, isDate) => {
+    const valueCallback = (filter, isDate = false) => {
         if (!isDate) {
             const values = current.value[dropdowns.value.third.index].value;
             const index = values.indexOf(filter.value);
@@ -324,6 +332,10 @@
     & .el-select {
         // Combined width of buttons on the sides of select
         width: calc(100% - 237px);
+
+        &.charts {
+            width: calc(100% - 285px);
+        }
     }
 
     & .el-select__wrapper {
@@ -367,6 +379,10 @@
     border-left: none;
 }
 
+.el-button-group > .el-dropdown > .el-button {
+    border-left-color: transparent;
+}
+
 .global-filters-select {
     & .el-date-editor.el-input__wrapper {
         background-color: initial;

ui/src/components/filter/components/Save.vue

@@ -1,5 +1,9 @@
 <template>
-    <el-button :disabled :icon="Save" @click="toggle(true)" />
+    <el-tooltip v-if="disabled" :content="t('filters.save.tooltip')">
+        <el-button disabled :icon="Save" @click="toggle(true)" />
+    </el-tooltip>
+
+    <el-button v-else :icon="Save" @click="toggle(true)" />
 
     <el-dialog
         v-model="visible"
@@ -20,6 +24,11 @@
                 @keydown.enter.prevent="save()"
             />
         </section>
+        <section class="current-tags">
+            <el-tag v-for="(item, index) in current" :key="index" class="m-1">
+                {{ formatLabel(item) }}
+            </el-tag>
+        </section>
         <template #footer>
             <div class="dialog-footer">
                 <el-button @click="toggle()">
@@ -50,7 +59,7 @@
         current: {type: Object, required: true},
     });
 
-    import {useFilters} from "../filters.js";
+    import {formatLabel, useFilters} from "../filters.js";
     const {getSavedItems, setSavedItems} = useFilters(props.prefix);
 
     const visible = ref(false);
@@ -73,3 +82,10 @@
         toast.saved(t("filters.save.dialog.confirmation", {name: label.value}));
     };
 </script>
+
+<style lang="scss">
+.current-tags .el-tag {
+    background: var(--bs-border-color) !important;
+    color: var(--bs-gray-900);
+}
+</style>

ui/src/components/filter/components/Settings.vue

@@ -0,0 +1,45 @@
+<template>
+    <el-dropdown trigger="click" placement="bottom-end">
+        <el-button :icon="TableCog" />
+
+        <template #dropdown>
+            <el-dropdown-menu class="py-2 settings-dropdown">
+                <template v-if="charts.shown">
+                    <el-switch
+                        :model-value="charts.value"
+                        @update:model-value="charts.callback"
+                        :active-text="t('filters.settings.show_chart')"
+                        class="p-3"
+                    />
+                </template>
+            </el-dropdown-menu>
+        </template>
+    </el-dropdown>
+</template>
+
+<script setup lang="ts">
+    import TableCog from "vue-material-design-icons/TableCog.vue";
+
+    import {useI18n} from "vue-i18n";
+    const {t} = useI18n({useScope: "global"});
+
+    defineProps({
+        charts: {
+            type: Object,
+            default: () => ({shown: false, value: false, callback: () => {}}),
+        },
+    });
+</script>
+
+<style lang="scss">
+.settings-dropdown {
+    width: 200px;
+}
+
+.title {
+    margin: 0;
+    padding: calc(1rem / 4) 0 0 1rem;
+    font-size: var(--el-font-size-extra-small);
+    color: var(--bs-grey-700);
+}
+</style>

ui/src/components/filter/components/history/History.vue

@@ -7,7 +7,7 @@
         <el-button :icon="History" class="rounded-0 rounded-start" />
 
         <template #dropdown>
-            <el-dropdown-menu class="py-2 dropdown">
+            <el-dropdown-menu class="py-2 history-dropdown">
                 <p class="title">
                     {{ t("filters.recent.label") }}
                 </p>
@@ -98,7 +98,7 @@
 </script>
 
 <style lang="scss">
-.dropdown {
+.history-dropdown {
     width: 400px;
 }
 

ui/src/translations/en.json

@@ -963,13 +963,17 @@
       },
       "save": {
         "label": "Saved searches",
+        "tooltip": "You can't save empty search criteria.",
         "dialog": {
           "heading": "Save current search",
           "placeholder": "Label",
           "hint": "How do you want to label this search criteria?",
           "confirmation": "Search criteria <code>{name}</code>"
         }
       },
+      "settings": {
+        "show_chart": "Show main chart"
+      },
       "labels": {
         "placeholder": "Type label as 'key:value'"
       }