Skip to content

Commit a1cb96f

Browse files
olblakolblak
committed
feat: show filter in dashboard view
Signed-off-by: Olivier Vernin <olivier@vernin.me>
1 parent 6ed4e9e commit a1cb96f

3 files changed

Lines changed: 169 additions & 106 deletions

File tree

‎src/components/scm/_filter.vue‎

Lines changed: 142 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -7,107 +7,134 @@
77
v-model="filterForm"
88
@submit.prevent="applyFilter"
99
>
10-
<!-- Repository Dropdown -->
11-
<v-select
12-
label="Git Repository"
13-
:items="repositories"
14-
:rules="[v => !!v || 'Git repository is required']"
15-
item-value="id"
16-
item-title="text"
17-
prepend-inner-icon="mdi-git"
18-
v-model="repository"
19-
:disabled="!isRepositoriesData()"
20-
></v-select>
21-
22-
<v-select
23-
label="Git Branch"
24-
:items="branches"
25-
:rules="[v => !!v || 'Git branch is required']"
26-
prepend-inner-icon="mdi-source-branch"
27-
v-model="branch"
28-
:disabled="!isRepositoryBranchesData()"
29-
></v-select>
30-
31-
<!-- Label Key and Value Selection -->
32-
<div v-for="(label, index) in selectedLabels" :key="index">
33-
<v-row class="align-center">
34-
<v-col cols="12" sm="5">
35-
<v-select
36-
label="Label Key (Optional)"
37-
:items="labelKeys"
38-
prepend-inner-icon="mdi-label"
39-
v-model="label.key"
40-
clearable
41-
@update:model-value="onLabelKeyChange(index)"
42-
></v-select>
43-
</v-col>
44-
<v-col cols="12" sm="5">
45-
<v-select
46-
label="Label Value (Optional)"
47-
:items="getLabelValuesForIndex(index)"
48-
prepend-inner-icon="mdi-label-multiple"
49-
v-model="label.value"
50-
clearable
51-
:disabled="!label.key"
52-
@update:model-value="onLabelValueChange(index)"
53-
></v-select>
54-
</v-col>
55-
<v-col cols="12" sm="2" class="d-flex gap-2">
56-
<v-btn
57-
icon="mdi-plus"
58-
size="small"
59-
@click="addLabelRow"
60-
v-if="index === selectedLabels.length - 1"
61-
:disabled="!canAddNewLabelRow()"
62-
></v-btn>
63-
<v-btn
64-
icon="mdi-delete"
65-
size="small"
66-
color="error"
67-
@click="removeLabelRow(index)"
68-
v-if="selectedLabels.length > 1"
69-
></v-btn>
70-
</v-col>
71-
</v-row>
72-
</div>
73-
74-
<!-- Date Range Slider -->
75-
<v-range-slider
76-
v-model="dateRange"
77-
:reverse="false"
78-
:min="0"
79-
:max="30"
80-
:step="1"
81-
class="py-6"
82-
:strict="true"
83-
:disabled="!isRepositoriesData() || !isRepositoryBranchesData()"
10+
<!-- Repository and Branch Dropdowns -->
11+
<v-row v-if="showRepositoryBranch">
12+
<v-col cols="12" md="6">
13+
<v-select
14+
variant="outlined"
15+
label="Git Repository"
16+
:items="repositories"
17+
:rules="[v => !!v || 'Git repository is required']"
18+
item-value="id"
19+
item-title="text"
20+
prepend-inner-icon="mdi-git"
21+
v-model="repository"
22+
:disabled="!isRepositoriesData()"
23+
></v-select>
24+
</v-col>
25+
<v-col cols="12" md="6">
26+
<v-select
27+
variant="outlined"
28+
label="Git Branch"
29+
:items="branches"
30+
:rules="[v => !!v || 'Git branch is required']"
31+
prepend-inner-icon="mdi-source-branch"
32+
v-model="branch"
33+
:disabled="!isRepositoryBranchesData()"
34+
></v-select>
35+
</v-col>
36+
</v-row>
37+
38+
<!-- Advanced Filter Expansion Panel -->
39+
<v-expansion-panels
40+
class="mt-4"
41+
elevation="0"
8442
>
85-
<template v-slot:prepend>
86-
<v-text-field
87-
:v-model="dateRange[0]"
88-
density="compact"
89-
style="width: 150px"
90-
variant="solo"
91-
:flat=true
92-
hide-details
93-
single-line
94-
class="text-center"
95-
>{{ stepToISOWithoutTimezone(dateRange[0]) }}</v-text-field>
96-
</template>
97-
98-
<template v-slot:append>
99-
<v-text-field
100-
:v-model="dateRange[1]"
101-
density="compact"
102-
style="width: 150px"
103-
variant="solo"
104-
:flat=true
105-
hide-details
106-
single-line
107-
class="text-center"
108-
>{{ stepToISOWithoutTimezone(dateRange[1]) }}</v-text-field>
109-
</template>
110-
</v-range-slider>
43+
<v-expansion-panel>
44+
<v-expansion-panel-title>
45+
<v-icon class="mr-2">mdi-filter-outline</v-icon>
46+
Advanced Filter
47+
</v-expansion-panel-title>
48+
<v-expansion-panel-text>
49+
<!-- Label Key and Value Selection -->
50+
<div v-for="(label, index) in selectedLabels" :key="index">
51+
<v-row class="align-center">
52+
<v-col cols="12" sm="5">
53+
<v-select
54+
variant="outlined"
55+
label="Label Key (Optional)"
56+
:items="labelKeys"
57+
prepend-inner-icon="mdi-label"
58+
v-model="label.key"
59+
clearable
60+
@update:model-value="onLabelKeyChange(index)"
61+
></v-select>
62+
</v-col>
63+
<v-col cols="12" sm="6">
64+
<v-select
65+
variant="outlined"
66+
label="Label Value (Optional)"
67+
:items="getLabelValuesForIndex(index)"
68+
prepend-inner-icon="mdi-label-multiple"
69+
v-model="label.value"
70+
clearable
71+
:disabled="!label.key"
72+
@update:model-value="onLabelValueChange(index)"
73+
></v-select>
74+
</v-col>
75+
<v-col cols="12" sm="1" class="mb-5">
76+
<v-spacer></v-spacer>
77+
<v-btn
78+
icon="mdi-delete"
79+
size="small"
80+
color="error"
81+
@click="removeLabelRow(index)"
82+
v-if="selectedLabels.length > 1"
83+
></v-btn>
84+
<v-btn
85+
icon="mdi-plus"
86+
size="small"
87+
@click="addLabelRow"
88+
v-if="index === selectedLabels.length - 1"
89+
:disabled="!canAddNewLabelRow()"
90+
></v-btn>
91+
</v-col>
92+
</v-row>
93+
</div>
94+
<v-row>
95+
<v-col cols="12" sm="12">
96+
<!-- Date Range Slider -->
97+
<v-range-slider
98+
v-model="dateRange"
99+
:reverse="false"
100+
:min="0"
101+
:max="30"
102+
:step="1"
103+
class="py-6"
104+
:strict="true"
105+
:disabled="showRepositoryBranch && (!isRepositoriesData() || !isRepositoryBranchesData())"
106+
>
107+
<template v-slot:prepend>
108+
<v-text-field
109+
:v-model="dateRange[0]"
110+
density="compact"
111+
style="width: 150px"
112+
variant="solo"
113+
:flat=true
114+
hide-details
115+
single-line
116+
class="text-center"
117+
>{{ stepToISOWithoutTimezone(dateRange[0]) }}</v-text-field>
118+
</template>
119+
120+
<template v-slot:append>
121+
<v-text-field
122+
:v-model="dateRange[1]"
123+
density="compact"
124+
style="width: 150px"
125+
variant="solo"
126+
:flat=true
127+
hide-details
128+
single-line
129+
class="text-center"
130+
>{{ stepToISOWithoutTimezone(dateRange[1]) }}</v-text-field>
131+
</template>
132+
</v-range-slider>
133+
</v-col>
134+
</v-row>
135+
</v-expansion-panel-text>
136+
</v-expansion-panel>
137+
</v-expansion-panels>
111138

112139
<!-- Filter repository-->
113140
<!--<v-btn type="submit" color="primary" :disabled="!filterForm">Filter</v-btn>-->
@@ -118,7 +145,7 @@
118145
class="py-4"
119146
>
120147
<v-btn
121-
:disabled="!isRepositoriesData() && !isRepositoryBranchesData()"
148+
:disabled="showRepositoryBranch && (!isRepositoriesData() && !isRepositoryBranchesData())"
122149
class="pr-4"
123150
@click="applyFilter"
124151
>Search</v-btn>
@@ -152,6 +179,10 @@ export default {
152179
endTime: "",
153180
}),
154181
},
182+
showRepositoryBranch: {
183+
type: Boolean,
184+
default: true,
185+
},
155186
},
156187
157188
data: () => ({
@@ -371,11 +402,14 @@ export default {
371402
applyFilter() {
372403
373404
var newFilter = {
374-
scmid: this.getScmID(this.repository, this.branch),
375405
startTime: this.formattedStartTime,
376406
endTime: this.formattedEndTime,
377407
}
378408
409+
if (this.showRepositoryBranch) {
410+
newFilter.scmid = this.getScmID(this.repository, this.branch)
411+
}
412+
379413
// Build labels as map[string]string as expected by the API.
380414
const labels = {};
381415
const seen = new Set();
@@ -604,10 +638,12 @@ export default {
604638
605639
async created() {
606640
try {
607-
if (router.currentRoute.value.query.scmid != undefined) {
608-
this.restrictedSCM = router.currentRoute.value.query.scmid
609-
} else {
610-
this.getSCMSData()
641+
if (this.showRepositoryBranch) {
642+
if (router.currentRoute.value.query.scmid != undefined) {
643+
this.restrictedSCM = router.currentRoute.value.query.scmid
644+
} else {
645+
this.getSCMSData()
646+
}
611647
}
612648
// Load label keys on component creation
613649
await this.getLabelKeys();

‎src/views/SCMDashboard.vue‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,21 @@
3434
<h1>Git Dashboard<v-icon icon="mdi-view-dashboard"> </v-icon></h1>
3535
</v-col>
3636
</v-row>
37+
<v-row>
38+
<v-col
39+
cols="auto"
40+
lg="12"
41+
md="12"
42+
sm="12"
43+
>
44+
<PipelineSCMFilter
45+
:filter="filter"
46+
:show-repository-branch="false"
47+
@update-filter="updateFilter"
48+
@loaded="setFilterLoaded"
49+
/>
50+
</v-col>
51+
</v-row>
3752
<v-row>
3853
<v-col
3954
cols="auto"
@@ -42,6 +57,7 @@
4257
sm="12"
4358
>
4459
<PipelineSCMSSummary
60+
:filter="filter"
4561
@loaded="setSummaryLoaded"
4662
/>
4763
</v-col>
@@ -59,12 +75,15 @@ import SideNavigation from '../components/SideNavigation.vue';
5975
import HeadNavigation from '../components/HeadNavigation.vue';
6076
import SCMSDashboard from '../components/scm/_summary.vue';
6177
78+
import PipelineSCMFilter from '../components/scm/_filter.vue';
79+
6280
export default {
6381
name: 'QuickStartView',
6482
components: {
6583
ReleaseFooter,
6684
SideNavigation,
6785
HeadNavigation,
86+
PipelineSCMFilter,
6887
PipelineSCMSSummary: SCMSDashboard,
6988
},
7089
@@ -74,6 +93,7 @@ export default {
7493
7594
data: () => ({
7695
isLoading: true,
96+
filter: {},
7797
host: window.location.protocol + "//" + window.location.host,
7898
externalLinks:[
7999
{
@@ -106,6 +126,12 @@ export default {
106126
cancelAutoUpdate: function() {
107127
clearInterval(this.timer);
108128
},
129+
updateFilter: function(newFilter) {
130+
this.filter = newFilter
131+
},
132+
setFilterLoaded: function(val) {
133+
if (!val) this.isLoading = true
134+
},
109135
setSummaryLoaded: function(val) {
110136
this.isLoading = !val
111137
},

‎src/views/pipeline/ReportsView.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@
6666

6767
<PipelineSCMFilter
6868
:filter="filter"
69+
:show-repository-branch="true"
6970
@update-filter="updateFilter"
7071
@loaded="setFilterLoaded"
7172
/>

0 commit comments

Comments
 (0)