Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(ui): rework the file structure in filters section #6452

Open
wants to merge 8 commits into
base: develop
Choose a base branch
from
Open

chore(ui): rework the file structure in filters section #6452

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
2e24c4e
chore(ui): history amending
MilosPaunovic Dec 13, 2024
646ba02
chore(ui): reworkin the file structure
MilosPaunovic Dec 13, 2024
2e11f7f
chore(ui): filter sections improvements
MilosPaunovic Dec 13, 2024
873ef25
chore(translations): amend keys in other languages
MilosPaunovic Dec 13, 2024
3cb4fef
chore(translations): amend key/value pair
MilosPaunovic Dec 13, 2024
27d5e85
chore(translations): amend key/value pair
MilosPaunovic Dec 13, 2024
cfc7ba5
chore(translations): auto generate values for languages other than en…
actions-user Dec 13, 2024
0646dee
chore(translations): amend key/value pair
MilosPaunovic Dec 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
170 changes: 102 additions & 68 deletions ui/src/components/filter/KestraFilter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<section :class="['d-inline-flex mb-3 filters', {focused: isFocused}]">
<History :prefix @search="handleHistoryItems" />
<section class="d-inline-flex mb-3 filters">
<Items :prefix @search="handleClickedItems" />

<el-select
ref="select"
Expand All @@ -16,15 +16,17 @@
:show-arrow="false"
fit-input-width
popper-class="filters-select"
:class="{settings: settings.shown, refresh: refresh.shown}"
@change="(value) => changeCallback(value)"
@keyup="(e) => handleInputChange(e.key)"
@keyup.enter="() => handleEnterKey(select?.hoverOption?.value)"
@remove-tag="(item) => removeItem(item)"
@visible-change="(visible) => dropdownClosedCallback(visible)"
@clear="handleClear"
@focus="handleFocus"
@blur="handleBlur"
:class="{
refresh: buttons.refresh.shown,
settings: buttons.settings.shown,
dashboards: dashboards.shown,
}"
>
<template #label="{value}">
<Label :option="value" />
Expand Down Expand Up @@ -82,18 +84,36 @@
</template>
</el-select>

<el-button-group class="d-inline-flex">
<el-button-group class="d-inline-flex me-1">
<KestraIcon :tooltip="$t('search')" placement="bottom">
<el-button :icon="Magnify" @click="triggerSearch" />
<el-button
:icon="Magnify"
@click="triggerSearch"
class="rounded-0"
/>
</KestraIcon>
<Save :disabled="!current.length" :prefix :current />
<Refresh v-if="refresh.shown" @refresh="refresh.callback" />
<Settings v-if="settings.shown" :settings />
</el-button-group>

<el-button-group
v-if="buttons.refresh.shown || buttons.settings.shown"
class="d-inline-flex mx-1"
>
<Refresh
v-if="buttons.refresh.shown"
@refresh="buttons.refresh.callback"
/>
<Settings
v-if="buttons.settings.shown"
:settings="buttons.settings"
:refresh="buttons.refresh.shown"
/>
</el-button-group>

<Dashboards
v-if="dashboards.shown"
@dashboard="(value) => emits('dashboard', value)"
class="ms-1"
/>
</section>
</template>
Expand All @@ -102,6 +122,17 @@
import {ref, computed} from "vue";
import {ElSelect} from "element-plus";

import Refresh from "../layout/RefreshButton.vue";
import Items from "./segments/Items.vue";
import Label from "./components/Label.vue";
import Save from "./segments/Save.vue";
import Settings from "./segments/Settings.vue";
import Dashboards from "./segments/Dashboards.vue";
import KestraIcon from "../Kicon.vue";
import DateRange from "../layout/DateRange.vue";

import {Magnify} from "./utils/icons.js";

import {useI18n} from "vue-i18n";
const {t} = useI18n({useScope: "global"});

Expand All @@ -112,33 +143,19 @@
const router = useRouter();
const route = useRoute();

import Refresh from "../layout/RefreshButton.vue";

import History from "./components/history/History.vue";
import Label from "./components/Label.vue";
import Save from "./components/Save.vue";
import Settings from "./components/Settings.vue";
import Dashboards from "./components/Dashboards.vue";
import KestraIcon from "../Kicon.vue";

import Magnify from "vue-material-design-icons/Magnify.vue";

import DateRange from "../layout/DateRange.vue";

const emits = defineEmits(["dashboard", "input"]);
const props = defineProps({
prefix: {type: String, required: true},
include: {type: Array, required: true},
values: {type: Object, required: false, default: undefined},
refresh: {
type: Object,
default: () => ({shown: false, callback: () => {}}),
},
settings: {
values: {type: Object, default: undefined},
buttons: {
type: Object,
default: () => ({
shown: false,
charts: {shown: false, value: false, callback: () => {}},
refresh: {shown: false, callback: () => {}},
settings: {
shown: false,
charts: {shown: false, value: false, callback: () => {}},
},
}),
},
dashboards: {
Expand All @@ -147,10 +164,8 @@
},
});

import {useFilters} from "./useFilters.js";
const {COMPARATORS, OPTIONS, encodeParams, decodeParams} = useFilters(
props.prefix,
);
import {useFilters} from "./composables/useFilters.js";
const {COMPARATORS, OPTIONS} = useFilters(props.prefix);

const select = ref<InstanceType<typeof ElSelect> | null>(null);
const updateHoveringIndex = (index) => {
Expand Down Expand Up @@ -205,10 +220,6 @@
triggerSearch();
};

const isFocused = ref(false);
const handleFocus = () => (isFocused.value = true);
const handleBlur = () => (isFocused.value = false);

const filterCallback = (option) => {
if (!option.value) {
triggerEnter.value = false;
Expand All @@ -235,7 +246,7 @@
emptyLabel.value = ["labels", "details"].includes(
current.value[dropdowns.value.second.index].label,
)
? t("filters.key_value_type")
? t("filters.format")
: t("filters.empty");

dropdowns.value.first = {shown: false, value: {}};
Expand Down Expand Up @@ -264,9 +275,12 @@
if (!isDate) {
const currentFilter = current.value[dropdowns.value.third.index];
const label = currentFilter.label;
const existingIndex = current.value.findIndex(i => i.label === label);
const existingIndex = current.value.findIndex((i) => i.label === label);

if (existingIndex !== -1 && existingIndex !== dropdowns.value.third.index) {
if (
existingIndex !== -1 &&
existingIndex !== dropdowns.value.third.index
) {
if (!currentFilter.comparator?.multiple) {
current.value[existingIndex].value = [filter.value];
current.value.splice(dropdowns.value.third.index, 1);
Expand Down Expand Up @@ -333,7 +347,7 @@
// Load all namespaces only if that filter is included
if (props.include.includes("namespace")) loadNamespaces();

import {useValues} from "./useValues.js";
import {useValues} from "./composables/useValues";
const {VALUES} = useValues(props.prefix);

const isDatePickerShown = computed(() => {
Expand Down Expand Up @@ -417,7 +431,9 @@
if (typeof v.at(-1) === "string") {
if (["labels", "details"].includes(v.at(-2)?.label)) {
// Adding labels to proper filter
const existingIndex = current.value.findIndex(i => i.label === "labels");
const existingIndex = current.value.findIndex(
(i) => i.label === "labels",
);
if (existingIndex !== -1) {
current.value[existingIndex].value.push(v.at(-1));
} else {
Expand Down Expand Up @@ -451,17 +467,19 @@
triggerSearch();
};

const handleHistoryItems = (value) => {
const handleClickedItems = (value) => {
if (value) current.value = value;
select.value?.focus();
};

import {encodeParams, decodeParams} from "./utils/helpers.js";

const triggerSearch = () => {
router.push({query: encodeParams(current.value)});
router.push({query: encodeParams(current.value, OPTIONS)});
};

// Include parameters from URL directly to filter
current.value = decodeParams(route.query, props.include);
current.value = decodeParams(route.query, props.include, OPTIONS);

const addNamespaceFilter = (namespace) => {
if (!namespace) return;
Expand All @@ -486,16 +504,47 @@
// https://caniuse.com/?search=fill-available
width: fill-available;
}

$included: 144px;

$refresh: 104px;
$settins: 52px;
$dashboards: 52px;

.filters {
@include width-available;

& .el-select {
flex: 1;
width: calc(100% - 237px);
width: 100%;

&.refresh.settings.dashboards {
max-width: calc(
100% - $included - $refresh - $settins - $dashboards
);
}

&.refresh.settings {
max-width: calc(100% - $included - $refresh - $settins);
}

&.settings.dashboards {
max-width: calc(100% - $included - $settins - $dashboards);
}

&.refresh.dashboards {
max-width: calc(100% - $included - $refresh - $dashboards);
}

&.refresh {
max-width: calc(100% - $included - $refresh);
}

&.settings {
max-width: calc(100% - 285px);
max-width: calc(100% - $included - $settins);
}
&:not(.refresh) {
max-width: calc(100% - 189px);

&.dashboards {
max-width: calc(100% - $included - $dashboards);
}
}
& .el-select__placeholder {
Expand All @@ -521,23 +570,8 @@
height: 0px;
}
}
& .el-button-group {
.el-button {
border-radius: 0;
}
span.kicon:last-child .el-button,
> button.el-button:last-child {
border-top-right-radius: var(--bs-border-radius);
border-bottom-right-radius: var(--bs-border-radius);
}
}
}
.el-button-group .el-button--primary:last-child {
border-left: none;
}
.el-button-group > .el-dropdown > .el-button {
border-left-color: transparent;
}

.filters-select {
& .el-select-dropdown {
width: 300px !important;
Expand All @@ -553,4 +587,4 @@
bottom: -0.15rem;
}
}
</style>
</style>
6 changes: 3 additions & 3 deletions ui/src/components/filter/components/Label.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
import moment from "moment";
const DATE_FORMAT = localStorage.getItem("dateFormat") || "llll";

const formatter = (date) => moment(date).format(DATE_FORMAT);
const formatter = (date: Date) => moment(date).format(DATE_FORMAT);

const label = computed(() => props.option?.label);
const comparator = computed(() => props.option?.comparator?.label);
Expand All @@ -32,11 +32,11 @@
});
</script>

<style lang="scss" scoped>
<style scoped lang="scss">
.comparator {
display: inline-block;
background: var(--bs-gray-500);
padding: 0.3rem 0.35rem;
margin: 0 0.5rem;
display: inline-block;
}
</style>
40 changes: 0 additions & 40 deletions ui/src/components/filter/components/history/HistoryItem.vue
View file
Open in desktop

This file was deleted.

Loading
Loading