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

Improvement/serialize table filters #1035

Merged
merged 3 commits into from
Apr 15, 2021
Merged

Improvement/serialize table filters #1035

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8b1a0a9
Attempting to serialize and deserialize url filters
kevgliss Apr 13, 2021
9ead427
Fixes dashboard time slices
kevgliss Apr 15, 2021
a537d85
Merge branch 'master' into improvement/serialize-table-filters
kevgliss Apr 15, 2021
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
260 changes: 117 additions & 143 deletions src/dispatch/static/dispatch/src/dashboard/DialogFilter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,39 +12,72 @@
<v-list dense>
<v-list-item>
<v-list-item-content>
<v-menu
ref="menu"
v-model="menu"
:close-on-content-click="false"
transition="scale-transition"
offset-y
min-width="290px"
>
<template v-slot:activator="{ on }">
<v-text-field v-model="dateRangeText" label="Window" readonly v-on="on" />
</template>
<v-date-picker v-model="localWindow" type="month" range />
</v-menu>
<v-col cols="12" sm="6" md="6">
<v-menu
v-model="menuStart"
:close-on-content-click="false"
transition="scale-transition"
offset-y
min-width="auto"
>
<template v-slot:activator="{ on, attrs }">
<v-text-field
v-model="filters.window.start"
label="Reported After"
prepend-icon="mdi-calendar"
v-bind="attrs"
v-on="on"
></v-text-field>
</template>
<v-date-picker
v-model="filters.window.start"
@input="menuStart = false"
></v-date-picker>
</v-menu>
</v-col>
<v-col cols="12" sm="6" md="6">
<v-menu
v-model="menuEnd"
:close-on-content-click="false"
transition="scale-transition"
offset-y
min-width="auto"
>
<template v-slot:activator="{ on, attrs }">
<v-text-field
v-model="filters.window.end"
label="Reported Before"
prepend-icon="mdi-calendar"
v-bind="attrs"
v-on="on"
></v-text-field>
</template>
<v-date-picker
v-model="filters.window.end"
@input="menuEnd = false"
></v-date-picker>
</v-menu>
</v-col>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-content>
<project-combobox v-model="localProject" label="Projects" />
<project-combobox v-model="filters.project" label="Projects" />
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-content>
<tag-filter-combobox v-model="localTag" label="Tags" />
<tag-filter-combobox v-model="filters.tag" label="Tags" />
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-content>
<incident-type-combobox v-model="localIncidentType" />
<incident-type-combobox v-model="filters.incident_type" />
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-content>
<incident-priority-combobox v-model="localIncidentPriority" />
<incident-priority-combobox v-model="filters.incident_priority" />
</v-list-item-content>
</v-list-item>
</v-list>
Expand All @@ -53,94 +86,93 @@
</template>

<script>
import { parseISO } from "date-fns"
import { mapFields } from "vuex-map-fields"
import subMonths from "date-fns/subMonths"
import { map, sum, forEach, each, has, assign } from "lodash"
import { sum } from "lodash"

import RouterUtils from "@/router/utils"
import SearchUtils from "@/search/utils"
import IncidentApi from "@/incident/api"
import TagFilterCombobox from "@/tag/TagFilterCombobox.vue"
import ProjectCombobox from "@/project/ProjectCombobox.vue"
import IncidentTypeCombobox from "@/incident_type/IncidentTypeCombobox.vue"
import IncidentPriorityCombobox from "@/incident_priority/IncidentPriorityCombobox.vue"

let defaultStart = function () {
let now = new Date()
let today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
return subMonths(today, 6).toISOString().substr(0, 10)
}

let defaultEnd = function () {
let now = new Date()
let today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
return today.toISOString().substr(0, 10)
}

export default {
name: "IncidentOverviewFilterBar",

props: {
tag: {
type: [String, Array],
default: function () {
return []
},
},
incidentType: {
type: [String, Array],
default: function () {
return []
},
},
incidentPriority: {
type: [String, Array],
default: function () {
return []
},
},
project: {
type: [String, Array],
default: function () {
return []
},
},
window: {
type: Array,
default: function () {
let now = new Date()
let today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
let start = subMonths(today, 6).toISOString().substr(0, 10)
let end = today.toISOString().substr(0, 10)
return [start, end]
data() {
return {
menuStart: false,
menuEnd: false,
display: false,
filters: {
project: [],
incident_type: [],
incident_priority: [],
status: [],
tag: [],
window: {
start: defaultStart(),
end: defaultEnd(),
},
},
}
},

computed: {
numFilters: function () {
return sum([
this.filters.tag.length,
this.filters.incident_priority.length,
this.filters.incident_type.length,
this.filters.status.length,
this.filters.project.length,
1,
])
},
...mapFields("route", ["query"]),
},

methods: {
fetchData() {
let localWindow = this.localWindow
// ensure we have a decent date string
localWindow = map(localWindow, function (item) {
return parseISO(item).toISOString()
})

if (localWindow.length == 1) {
localWindow[1] = localWindow[0]
}

let filterOptions = {
itemsPerPage: -1,
descending: [false],
sortBy: ["reported_at"],
filters: {
project: this.localProject,
incident_type: this.localIncidentType,
incident_priority: this.localIncidentPriority,
tag: this.localTag,
},
}

let windowFilter = [
{
model: "Incident",
field: "reported_at",
op: ">=",
value: localWindow[0],
value: this.filters.window.start,
},
{
model: "Incident",
field: "reported_at",
op: "<=",
value: localWindow[1],
value: this.filters.window.end,
},
]

let localFilters = { ...this.filters }
delete localFilters.window

let filterOptions = {
itemsPerPage: -1,
descending: [false],
sortBy: ["reported_at"],
filters: localFilters,
}

filterOptions = SearchUtils.createParametersFromTableOptions(filterOptions, windowFilter)

this.$emit("loading", "error")
Expand All @@ -150,28 +182,6 @@ export default {
this.$emit("loading", false)
})
},
serializeFilters() {
let flatFilters = {}
forEach(this.filters, function (value, key) {
each(value, function (item) {
if (has(flatFilters, key)) {
flatFilters[key].push(item.name)
} else {
flatFilters[key] = [item.name]
}
})
})
return flatFilters
},
serializeWindow() {
return { start: this.localWindow[0], end: this.localWindow[1] }
},
updateURL() {
let queryParams = {}
assign(queryParams, this.serializeFilters())
assign(queryParams, this.serializeWindow())
this.$router.replace({ query: queryParams })
},
},

components: {
Expand All @@ -181,33 +191,20 @@ export default {
ProjectCombobox,
},

data() {
return {
menu: false,
display: false,
localWindow: this.window,
localTag: typeof this.tag === "string" ? [{ name: this.tag }] : this.tag,
localIncidentPriority:
typeof this.incidentPriority === "string"
? [{ name: this.incidentPriority }]
: this.incidentPriority,
localIncidentType:
typeof this.incidentType === "string" ? [{ name: this.incidentType }] : this.incidentType,
localProject: typeof this.project === "string" ? [{ name: this.project }] : this.project,
}
},

mounted() {
this.filters = { ...this.filters, ...RouterUtils.deserializeFilters(this.query) }
this.$watch(
(vm) => [
vm.localWindow,
vm.localTag,
vm.localIncidentPriority,
vm.localIncidentType,
vm.localProject,
vm.filters.window.start,
vm.filters.window.end,
vm.filters.tag,
vm.filters.incident_priority,
vm.filters.incident_type,
vm.filters.status,
vm.filters.project,
],
() => {
this.updateURL()
RouterUtils.updateURLFilters(this.filters)
this.fetchData()
}
)
Expand All @@ -216,28 +213,5 @@ export default {
created() {
this.fetchData()
},

computed: {
filters() {
return {
tag: this.localTag,
incident_priority: this.localIncidentPriority,
incident_type: this.localIncidentType,
project: this.localProject,
}
},
numFilters: function () {
return sum([
this.localIncidentType.length,
this.localIncidentPriority.length,
this.localTag.length,
this.localProject.length,
1,
])
},
dateRangeText() {
return this.localWindow.join(" ~ ")
},
},
}
</script>
2 changes: 1 addition & 1 deletion src/dispatch/static/dispatch/src/dashboard/IncidentOverview.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<v-btn color="info" @click="copyView"> Share View </v-btn>
</v-flex>
<v-flex class="d-flex justify-end" lg6 sm6 xs12>
<dialog-filter :project="project" @update="update" @loading="setLoading" />
<dialog-filter @update="update" @loading="setLoading" />
</v-flex>
</v-layout>
<v-layout row wrap>
Expand Down
Loading