Skip to content

Commit 6e8a010

Browse files
jetfueljetfuel
authored
Add images config (#270)
* Add vuetify framework Update AppMenu.vue to include the basic menu item. * use name as key. * Add the Config.vue for Images * Add the CharPage.vue and Image.vue * Hook up the config to the image.vue so that the image height and width can update
1 parent 937a9e0 commit 6e8a010

6 files changed

Lines changed: 446 additions & 16 deletions

File tree

‎frontend/src/images/Images.vue‎

Lines changed: 136 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,158 @@
11
<template>
22
<div class="visual-dl-page-container">
3-
<div>I AM IMAGES</div>
4-
53
<div class="visual-dl-page-left">
6-
<div>
7-
<p>
8-
I am chart page, to show all matched tags
9-
</p>
10-
</div>
11-
12-
<div>
13-
<p>
14-
I am also a chart page, but I should render groupedTags
15-
</p>
16-
</div>
4+
<ui-chart-page
5+
:expand="true"
6+
:config="filteredConfig"
7+
:runsItems="runsItems"
8+
:tagList="filteredTagsList"
9+
:title="'Tags matching' + config.groupNameReg"
10+
></ui-chart-page>
11+
<ui-chart-page
12+
v-for="item in groupedTags"
13+
:key="item.group"
14+
:config="filteredConfig"
15+
:runsItems="runsItems"
16+
:tagList="item.tags"
17+
:title="item.group"
18+
></ui-chart-page>
1719
</div>
1820
<div class="visual-dl-page-right">
1921
<div class="visual-dl-page-config-container">
20-
<p>
21-
I should show all runs items and config
22-
</p>
22+
<ui-config :runsItems="runsItems" :config="config"
23+
></ui-config>
2324
</div>
2425
</div>
2526
</div>
2627
</template>
2728

2829
<script>
2930
31+
import {getPluginImagesTags, getRuns} from '../service';
32+
import {debounce, flatten, uniq, isArray} from 'lodash';
33+
import autoAdjustHeight from '../common/util/autoAdjustHeight';
34+
35+
import Config from './ui/Config'
36+
import ChartPage from './ui/ChartPage';
37+
3038
export default {
3139
name: 'Images',
40+
components: {
41+
'ui-config': Config,
42+
'ui-chart-page': ChartPage
43+
},
3244
data () {
3345
return {
46+
runsArray: [],
47+
tags: [],
48+
config: {
49+
groupNameReg: '.*',
50+
isActualImageSize: false,
51+
runs: [],
52+
running: true
53+
},
54+
filteredTagsList: []
55+
}
56+
},
57+
computed: {
58+
runsItems() {
59+
let runsArray = this.runsArray || [];
60+
return runsArray.map(item => {
61+
return {
62+
name: item,
63+
value: item
64+
};
65+
});
66+
},
67+
tagsList() {
68+
let tags = this.tags;
69+
70+
let runs = Object.keys(tags);
71+
let tagsArray = runs.map(run => Object.keys(tags[run]));
72+
let allUniqTags = uniq(flatten(tagsArray));
73+
74+
// get the data for every chart
75+
return allUniqTags.map(tag => {
76+
let tagList = runs.map(run => {
77+
return {
78+
run,
79+
tag: tags[run][tag]
80+
};
81+
}).filter(item => item.tag !== undefined);
82+
return {
83+
tagList,
84+
tag,
85+
group: tag.split('/')[0]
86+
};
87+
});
88+
},
89+
groupedTags() {
90+
let tagsList = this.tagsList || [];
91+
// put data in group
92+
let groupData = {};
93+
tagsList.forEach(item => {
94+
let group = item.group;
95+
if (groupData[group] === undefined) {
96+
groupData[group] = [];
97+
groupData[group].push(item);
98+
}
99+
else {
100+
groupData[group].push(item);
101+
}
102+
});
103+
104+
// to array
105+
let groups = Object.keys(groupData);
106+
return groups.map(group => {
107+
return {
108+
group,
109+
tags: groupData[group]
110+
};
111+
});
112+
},
113+
filteredConfig() {
114+
let tansformArr = ['isActualImageSize'];
115+
let config = this.config || {};
116+
let filteredConfig = {};
117+
Object.keys(config).forEach(key => {
118+
let val = config[key];
119+
filteredConfig[key] = val;
120+
});
121+
return filteredConfig;
34122
}
35123
},
124+
created() {
125+
getPluginImagesTags().then(({errno, data}) => {
126+
this.tags = data;
127+
128+
// filter when inited
129+
let groupNameReg = this.config.groupNameReg;
130+
this.filterTagsList(groupNameReg);
131+
});
132+
133+
getRuns().then(({errno, data}) => {
134+
this.runsArray = data;
135+
this.config.runs = data;
136+
});
137+
138+
// TODO: Migrate this line from San to Vue
139+
// need debounce， can't use computed
140+
//this.watch('config.groupNameReg', debounce(this.filterTagsList, 300));
141+
},
142+
mounted() {
143+
autoAdjustHeight();
144+
},
145+
methods:{
146+
filterTagsList(groupNameReg) {
147+
if (!groupNameReg) {
148+
this.filteredTagsList = [];
149+
return;
150+
}
151+
let tagsList = this.tagsList || [];
152+
let regExp = new RegExp(groupNameReg);
153+
this.filteredTagsList = tagsList.filter(item => regExp.test(item.tag));
154+
}
155+
}
36156
};
37157
38158
</script>

‎frontend/src/images/ui/ChartPage.vue‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<template>
2+
<div class="visual-dl-chart-page">
3+
<!--<ui-expand-panel isShow="{{expand}}" info="{{total}}" title="{{title}}">-->
4+
<ui-image
5+
class="visual-dl-chart-image"
6+
v-for="tagInfo in filteredPageList"
7+
:tagInfo="tagInfo"
8+
:isActualImageSize="config.isActualImageSize"
9+
:runs="config.runs"
10+
:running="config.running"
11+
:runsItems="runsItems"
12+
></ui-image>
13+
14+
<v-pagination v-if="total > pageSize"
15+
v-model="currentPage"
16+
:length="total"
17+
:total-visible="pageSize"
18+
></v-pagination>
19+
<!--</ui-expand-panel>-->
20+
</div>
21+
</template>
22+
<script>
23+
//import ExpandPanel from '../../common/component/ExpandPanel';
24+
import Image from './Image';
25+
//import Pagination from 'san-mui/Pagination';
26+
27+
import {cloneDeep, flatten} from 'lodash';
28+
29+
export default {
30+
props: ['config', 'runsItems', 'tagList', 'title'],
31+
components: {
32+
'ui-image': Image,
33+
//'ui-expand-panel': ExpandPanel,
34+
//'ui-pagination': Pagination
35+
},
36+
computed: {
37+
filteredRunsList() {
38+
let tagList = this.tagList || [];
39+
let runs = this.config.runs || [];
40+
let list = cloneDeep(tagList);
41+
return flatten(list.slice().map(item => {
42+
return item.tagList.filter(one => runs.includes(one.run));
43+
}));
44+
},
45+
46+
filteredPageList() {
47+
let list = this.filteredRunsList || [];
48+
let currentPage = this.currentPage;
49+
let pageSize = this.pageSize;
50+
return list.slice((currentPage - 1) * pageSize, currentPage * pageSize);
51+
},
52+
total() {
53+
let list = this.tagList || [];
54+
return list.length;
55+
}
56+
},
57+
data() {
58+
return {
59+
// current page
60+
currentPage: 1,
61+
// item per page
62+
pageSize: 8
63+
};
64+
},
65+
};
66+
</script>
67+
<style lang="stylus">
68+
@import '../../style/variables';
69+
70+
+prefix-classes('visual-dl-')
71+
.chart-page
72+
.image-chart-box
73+
overflow hidden
74+
float left
75+
.visual-dl-chart-image
76+
float left
77+
.image-chart-box:after
78+
content ""
79+
clear both
80+
display block
81+
.sm-pagination
82+
height 50px
83+
float left
84+
width 100%
85+
</style>
86+
87+

‎frontend/src/images/ui/Config.vue‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<template>
2+
<div class="visual-dl-image-config-com">
3+
<v-text-field
4+
label="Group name RegExp"
5+
hint="input a tag group name to search"
6+
v-model="config.groupNameReg"
7+
dark
8+
></v-text-field>
9+
10+
<v-checkbox label="Show actual image size" v-model="config.isActualImageSize" dark></v-checkbox>
11+
12+
<label class="label">Runs</label>
13+
<v-checkbox v-for="item in runsItems"
14+
:key="item.name"
15+
:label="item.name"
16+
:value="item.value"
17+
v-model="config.runs"
18+
dark
19+
></v-checkbox>
20+
21+
<v-btn :color="config.running ? 'primary' : 'error'"
22+
v-model="config.running"
23+
@click="toggleAllRuns"
24+
dark
25+
>
26+
{{config.running ? 'Running' : 'Stopped'}}
27+
</v-btn>
28+
</div>
29+
</template>
30+
<script>
31+
// TODO: Maybe migrate the CheckBoxGroup from San to Vue
32+
//import CheckBoxGroup from '../../common/component/CheckBoxGroup';
33+
34+
export default {
35+
props: {
36+
runsItems: Array,
37+
config: Object
38+
},
39+
data() {
40+
return {
41+
};
42+
},
43+
methods: {
44+
toggleAllRuns() {
45+
this.config.running = !this.config.running;
46+
}
47+
}
48+
};
49+
50+
</script>
51+
<style lang="stylus">
52+
@import '../../style/variables';
53+
+prefix-classes('visual-dl-image-')
54+
.config-com
55+
width 90%
56+
margin 20px auto
57+
.run-toggle
58+
width 100%
59+
margin-top 20px
60+
61+
.label
62+
color white
63+
</style>

0 commit comments

Comments
 (0)