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

Jump to bottom

RUN-2081: nextUI: job list page: add job filters #8725

Merged
merged 7 commits into from
Jan 5, 2024
Merged

RUN-2081: nextUI: job list page: add job filters #8725

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b17cdf5
local storage job filters
gschueler Dec 2, 2023
3b3e96d
Add job filters to next-ui for job list page
gschueler Dec 2, 2023
3b2d3e4
fix: js error when filter applied and a group is removed
gschueler Dec 2, 2023
02e7076
Merge branch 'main' into enh/job-list-page-nextui-job-filters
gschueler Dec 12, 2023
9d074ff
fix: groupPath query should change browse path
gschueler Jan 4, 2024
ea1022d
fix: breadcrumb should not be block element
gschueler Jan 4, 2024
f06b0a9
cleanup: dom element ids
gschueler Jan 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
77 changes: 77 additions & 0 deletions rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobFilterSaveModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
<template>
<modal v-model="visible" :title="$t('job.list.filter.save.modal.title')">
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label" for="jobFilter">
{{ $t("jobquery.title.jobFilter") }}:
</label>
<div class="col-sm-10">
<input
type="text"
name="jobFilter"
id="jobFilter"
v-model="filterName"
class="form-control"
/>
</div>
</div>
<div class="errors" v-if="error">
{{error}}
</div>
</div>
<template #footer>
<btn @click="doClose">
{{ $t("cancel") }}
</btn>
<btn type="primary" @click="doSave" :disabled="!filterName">
{{ $t("job.list.filter.save.button") }}
</btn>
</template>
</modal>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
name: "JobFilterSaveModal",
props: {
modelValue: {
type: Boolean,
required: true,
},
error: {
type: String,
default: false,
},
},
emits: ["save", "update:modelValue"],
setup(props) {
return {
visible: ref(props.modelValue),
filterName: ref(""),
};
},
watch: {
visible(value) {
this.$emit("update:modelValue", value);
},
modelValue(value) {
this.visible = value;
},
},
methods: {
doClose() {
this.visible = false;
this.$emit("update:modelValue", false);
},
doSave() {
this.$emit("save", this.filterName);
this.filterName=''
this.doClose()
},
},
});
</script>

<style scoped lang="scss"></style>
4 changes: 2 additions & 2 deletions rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobGroupsBreadcrumbs.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<section class="job-breadcrumbs">
<span class="job-breadcrumbs">
<span class="job-breadcrumb-item">
<a @click.prevent="browsePath('')" :href="browseHref('')">
<slot name="root">&larr;</slot>
Expand All @@ -22,7 +22,7 @@
{{ part }}
</a>
</template>
</section>
</span>
</template>

<script lang="ts">
Expand Down
20 changes: 13 additions & 7 deletions rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobListPage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<JobBulkEditControls />
<Browser
:path="browsePath"
:path="jobPageStore.browsePath"
:root="true"
@rootBrowse="rootBrowse"
class="job_list_browser"
Expand Down Expand Up @@ -62,16 +62,16 @@ export default defineComponent({
return {
jobBrowserStore,
jobPageStore,
browsePath: ref(props.path || ""),
loaded: ref(false),
queryRefresh: ref(false),
};
},
methods: {
rootBrowse(path: string, href: string) {
async rootBrowse(path: string, href: string) {
//deselect any jobs
this.jobPageStore.selectedJobs = [];
this.browsePath = path;
this.jobPageStore.browsePath = path;
this.jobPageStore.query['groupPath'] = path;
eventBus.emit("job-list-page:browsed", path);
if(href) {
window.history.pushState(
Expand All @@ -84,8 +84,14 @@ export default defineComponent({
},
async mounted() {
eventBus.on("job-list-page:search", async () => {
this.queryRefresh = !this.queryRefresh;
await this.jobBrowserStore.reload();
if(this.jobPageStore.query['groupPath']!==this.jobPageStore.browsePath) {
this.jobPageStore.browsePath = this.jobPageStore.query['groupPath']||''
await this.jobBrowserStore.reload();
await this.rootBrowse(this.jobPageStore.browsePath, null)
}else{
await this.jobBrowserStore.reload();
this.queryRefresh = !this.queryRefresh;
}
});
eventBus.on("job-list-page:rootBrowse", async (evt) => {
let { path, href } = evt;
Expand All @@ -94,7 +100,7 @@ export default defineComponent({
if (typeof history.replaceState == "function") {
if (!history.state) {
//set first page load state
let state = this.browsePath?{ start: true, browsePath: this.browsePath }:{ start: true };
let state = this.jobPageStore.browsePath?{ start: true, browsePath: this.jobPageStore.browsePath }:{ start: true };
history.replaceState(state, null, document.location.toString());
}
}
Expand Down
88 changes: 88 additions & 0 deletions rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobPageFiltersPopup.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<template>
<dropdown v-if="filters">
<btn class="dropdown-toggle" size="sm">
Filters
<i class="caret" />
</btn>
<template #dropdown>
<template v-if="jobPageStore.selectedFilter">
<li>
<a role="button" @click="deleteSelectedFilter">
<b class="glyphicon glyphicon-trash"></b>
{{
$t("job.list.filter.delete.filter.link.text", [
jobPageStore.selectedFilter,
])
}}
</a>
</li>
<li role="separator" class="divider"></li>
</template>
<li class="dropdown-header">
<i class="glyphicon glyphicon-filter"></i>
{{$t('saved.filters')}}
</li>
<li v-for="item in filters" :key="item.name">
<a
role="button"
:class="{ active: item.active }"
@click.prevent="selectFilter(item.name)"
>
<i
class="glyphicon glyphicon-check"
v-if="jobPageStore.selectedFilter === item.name"
>
</i>
{{ item.name }}
</a>
</li>
</template>
</dropdown>
</template>

<script lang="ts">
import {
JobListFilter,
JobListFilterStore,
JobListFilterStoreInjectionKey,
} from "@/library/stores/JobListFilterStore";
import {
JobPageStore,
JobPageStoreInjectionKey,
} from "@/library/stores/JobPageStore";
import { defineComponent, inject, ref } from "vue";

export default defineComponent({
name: "JobPageFiltersPopup",
emits: ["select","delete"],
setup(props) {
const jobListFilterStore: JobListFilterStore = inject(
JobListFilterStoreInjectionKey
) as JobListFilterStore;
const jobPageStore: JobPageStore = inject(
JobPageStoreInjectionKey
) as JobPageStore;
return {
jobListFilterStore,
jobPageStore,
filters: ref<JobListFilter[]>([]),
};
},
methods: {
selectFilter(name: string) {
this.$emit("select", name);
},
deleteSelectedFilter(){
this.$emit("delete", this.jobPageStore.selectedFilter);
this.filters = this.jobListFilterStore.getFilters();
}
},
computed: {},
async mounted() {
await this.jobListFilterStore.load();
this.filters = this.jobListFilterStore.getFilters();
},
});
</script>

<style scoped lang="scss"></style>
36 changes: 24 additions & 12 deletions rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobSearchModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,14 @@
<div class="form-group" v-if="jobPageStore.query['idlist']">
<label
class="col-sm-2 control-label"
for="${enc(attr:rkey)}idlist"
for="_idlist"
>{{ $t("jobquery.title.idlist") }}</label
>
<div class="col-sm-10">
<input
type="text"
name="idlist"
id="${rkey}idlist"
id="_idlist"
v-model="jobPageStore.query['idlist']"
class="form-control"
/>
Expand All @@ -34,14 +34,14 @@
<div class="form-group">
<label
class="col-sm-2 control-label"
for="${enc(attr:rkey)}jobFilter"
for="_jobFilter"
>{{ $t("jobquery.title.jobFilter") }}</label
>
<div class="col-sm-10">
<input
type="text"
name="jobFilter"
id="${rkey}jobFilter"
id="_jobFilter"
v-model="jobPageStore.query['jobFilter']"
class="form-control"
/>
Expand All @@ -50,7 +50,7 @@
<div class="form-group">
<label
class="col-sm-2 control-label"
for="${enc(attr:rkey)}groupPath"
for="_groupPath"
>{{ $t("jobquery.title.groupPath") }}</label
>
<div class="col-sm-10">
Expand All @@ -61,7 +61,7 @@
<input
type="text"
name="groupPath"
id="${rkey}groupPath"
id="_groupPath"
v-model="jobPageStore.query['groupPath']"
class="form-control"
/>
Expand All @@ -71,14 +71,14 @@
<div class="form-group">
<label
class="col-sm-2 control-label"
for="${enc(attr:rkey)}descFilter"
for="_descFilter"
>{{ $t("jobquery.title.descFilter") }}</label
>
<div class="col-sm-10">
<input
type="text"
name="descFilter"
id="${rkey}descFilter"
id="_descFilter"
v-model="jobPageStore.query['descFilter']"
class="form-control"
/>
Expand All @@ -87,7 +87,7 @@
<div class="form-group">
<label
class="col-sm-2 control-label"
for="${enc(attr:rkey)}scheduledFilter"
for="_scheduledFilter"
>{{ $t("jobquery.title.scheduledFilter") }}</label
>
<div class="col-sm-10">
Expand Down Expand Up @@ -124,14 +124,14 @@
<div class="form-group">
<label
class="col-sm-2 control-label"
for="${enc(attr:rkey)}serverNodeUUIDFilter"
for="_serverNodeUUIDFilter"
>{{ $t("jobquery.title.serverNodeUUIDFilter") }}</label
>
<div class="col-sm-10">
<input
type="text"
name="serverNodeUUIDFilter"
id="${rkey}serverUuid"
id="_serverUuid"
v-model="jobPageStore.query['serverNodeUUIDFilter']"
class="form-control"
/>
Expand Down Expand Up @@ -170,12 +170,17 @@
<btn type="primary" @click="doSearch">
{{ $t("job.filter.apply.button.title") }}
</btn>
<btn type="success" class="pull-right" @click="doSave">
<i class="glyphicon glyphicon-plus"></i>
{{ $t("job.filter.save.button.title") }}
</btn>
</template>
</modal>
</template>

<script lang="ts">
import UiSocket from '@/library/components/utils/UiSocket.vue'
import {JobListFilterStore, JobListFilterStoreInjectionKey} from '@/library/stores/JobListFilterStore'
import {
JobPageStore,
JobPageStoreInjectionKey,
Expand All @@ -185,7 +190,7 @@ import { defineComponent, inject, ref } from "vue";
export default defineComponent({
name: "JobSearchModal",
components: { UiSocket },
emits: ["close", "search", "clear", "update:modelValue"],
emits: ["close", "search", "clear", "save", "update:modelValue"],
props: {
modelValue: {
type: Boolean,
Expand All @@ -196,8 +201,12 @@ export default defineComponent({
const jobPageStore: JobPageStore = inject(
JobPageStoreInjectionKey
) as JobPageStore;
const jobListFilterStore: JobListFilterStore = inject(
JobListFilterStoreInjectionKey
) as JobListFilterStore
return {
jobPageStore,
jobListFilterStore,
visible: ref(props.modelValue),
};
},
Expand Down Expand Up @@ -232,6 +241,9 @@ export default defineComponent({
doSearch() {
this.$emit("search");
},
doSave() {
this.$emit("save");
},
},
});
</script>
Expand Down
4 changes: 1 addition & 3 deletions rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobsPage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,7 @@
<div class="card">
<div class="card-content">
<div class="runbox primary jobs" id="indexMain">
<job-list-page
:path="queryParams?.groupPath || ''"
/>
<job-list-page />
</div>
</div>
</div>
Expand Down