Add images config

frontend/src/images/Images.vue

@@ -1,38 +1,158 @@
 <template>
  <div class="visual-dl-page-container">
- <div>I AM IMAGES</div>
-
  <div class="visual-dl-page-left">
- <div>
- <p>
- I am chart page, to show all matched tags
- </p>
- </div>
-
- <div>
- <p>
- I am also a chart page, but I should render groupedTags
- </p>
- </div>
+ <ui-chart-page
+ :expand="true"
+ :config="filteredConfig"
+ :runsItems="runsItems"
+ :tagList="filteredTagsList"
+ :title="'Tags matching' + config.groupNameReg"
+ ></ui-chart-page>
+ <ui-chart-page
+ v-for="item in groupedTags"
+ :key="item.group"
+ :config="filteredConfig"
+ :runsItems="runsItems"
+ :tagList="item.tags"
+ :title="item.group"
+ ></ui-chart-page>
  </div>
  <div class="visual-dl-page-right">
  <div class="visual-dl-page-config-container">
- <p>
- I should show all runs items and config
- </p>
+ <ui-config :runsItems="runsItems" :config="config"
+ ></ui-config>
  </div>
  </div>
  </div>
 </template>
 
 <script>
 
+import {getPluginImagesTags, getRuns} from '../service';
+import {debounce, flatten, uniq, isArray} from 'lodash';
+import autoAdjustHeight from '../common/util/autoAdjustHeight';
+
+import Config from './ui/Config'
+import ChartPage from './ui/ChartPage';
+
 export default {
  name: 'Images',
+ components: {
+ 'ui-config': Config,
+ 'ui-chart-page': ChartPage
+ },
  data () {
  return {
+ runsArray: [],
+ tags: [],
+ config: {
+ groupNameReg: '.*',
+ isActualImageSize: false,
+ runs: [],
+ running: true
+ },
+ filteredTagsList: []
+ }
+ },
+ computed: {
+ runsItems() {
+ let runsArray = this.runsArray || [];
+ return runsArray.map(item => {
+ return {
+ name: item,
+ value: item
+ };
+ });
+ },
+ tagsList() {
+ let tags = this.tags;
+
+ let runs = Object.keys(tags);
+ let tagsArray = runs.map(run => Object.keys(tags[run]));
+ let allUniqTags = uniq(flatten(tagsArray));
+
+ // get the data for every chart
+ return allUniqTags.map(tag => {
+ let tagList = runs.map(run => {
+ return {
+ run,
+ tag: tags[run][tag]
+ };
+ }).filter(item => item.tag !== undefined);
+ return {
+ tagList,
+ tag,
+ group: tag.split('/')[0]
+ };
+ });
+ },
+ groupedTags() {
+ let tagsList = this.tagsList || [];
+ // put data in group
+ let groupData = {};
+ tagsList.forEach(item => {
+ let group = item.group;
+ if (groupData[group] === undefined) {
+ groupData[group] = [];
+ groupData[group].push(item);
+ }
+ else {
+ groupData[group].push(item);
+ }
+ });
+
+ // to array
+ let groups = Object.keys(groupData);
+ return groups.map(group => {
+ return {
+ group,
+ tags: groupData[group]
+ };
+ });
+ },
+ filteredConfig() {
+ let tansformArr = ['isActualImageSize'];
+ let config = this.config || {};
+ let filteredConfig = {};
+ Object.keys(config).forEach(key => {
+ let val = config[key];
+ filteredConfig[key] = val;
+ });
+ return filteredConfig;
  }
  },
+ created() {
+ getPluginImagesTags().then(({errno, data}) => {
+ this.tags = data;
+
+ // filter when inited
+ let groupNameReg = this.config.groupNameReg;
+ this.filterTagsList(groupNameReg);
+ });
+
+ getRuns().then(({errno, data}) => {
+ this.runsArray = data;
+ this.config.runs = data;
+ });
+
+ // TODO: Migrate this line from San to Vue
+ // need debounce， can't use computed
+ //this.watch('config.groupNameReg', debounce(this.filterTagsList, 300));
+ },
+ mounted() {
+ autoAdjustHeight();
+ },
+ methods:{
+ filterTagsList(groupNameReg) {
+ if (!groupNameReg) {
+ this.filteredTagsList = [];
+ return;
+ }
+ let tagsList = this.tagsList || [];
+ let regExp = new RegExp(groupNameReg);
+ this.filteredTagsList = tagsList.filter(item => regExp.test(item.tag));
+ }
+ }
 };
 
 </script>

frontend/src/images/ui/ChartPage.vue

@@ -0,0 +1,87 @@
+<template>
+ <div class="visual-dl-chart-page">
+ <!--<ui-expand-panel isShow="{{expand}}" info="{{total}}" title="{{title}}">-->
+ <ui-image
+ class="visual-dl-chart-image"
+ v-for="tagInfo in filteredPageList"
+ :tagInfo="tagInfo"
+ :isActualImageSize="config.isActualImageSize"
+ :runs="config.runs"
+ :running="config.running"
+ :runsItems="runsItems"
+ ></ui-image>
+
+ <v-pagination v-if="total > pageSize"
+ v-model="currentPage"
+ :length="total"
+ :total-visible="pageSize"
+ ></v-pagination>
+ <!--</ui-expand-panel>-->
+ </div>
+</template>
+<script>
+//import ExpandPanel from '../../common/component/ExpandPanel';
+import Image from './Image';
+//import Pagination from 'san-mui/Pagination';
+
+import {cloneDeep, flatten} from 'lodash';
+
+export default {
+ props: ['config', 'runsItems', 'tagList', 'title'],
+ components: {
+ 'ui-image': Image,
+ //'ui-expand-panel': ExpandPanel,
+ //'ui-pagination': Pagination
+ },
+ computed: {
+ filteredRunsList() {
+ let tagList = this.tagList || [];
+ let runs = this.config.runs || [];
+ let list = cloneDeep(tagList);
+ return flatten(list.slice().map(item => {
+ return item.tagList.filter(one => runs.includes(one.run));
+ }));
+ },
+
+ filteredPageList() {
+ let list = this.filteredRunsList || [];
+ let currentPage = this.currentPage;
+ let pageSize = this.pageSize;
+ return list.slice((currentPage - 1) * pageSize, currentPage * pageSize);
+ },
+ total() {
+ let list = this.tagList || [];
+ return list.length;
+ }
+ },
+ data() {
+ return {
+ // current page
+ currentPage: 1,
+ // item per page
+ pageSize: 8
+ };
+ },
+};
+</script>
+<style lang="stylus">
+@import '../../style/variables';
+
++prefix-classes('visual-dl-')
+ .chart-page
+ .image-chart-box
+ overflow hidden
+ float left
+ .visual-dl-chart-image
+ float left
+ .image-chart-box:after
+ content ""
+ clear both
+ display block
+ .sm-pagination
+ height 50px
+ float left
+ width 100%
+</style>
+
+

frontend/src/images/ui/Config.vue

@@ -0,0 +1,63 @@
+<template>
+ <div class="visual-dl-image-config-com">
+ <v-text-field
+ label="Group name RegExp"
+ hint="input a tag group name to search"
+ v-model="config.groupNameReg"
+ dark
+ ></v-text-field>
+
+ <v-checkbox label="Show actual image size" v-model="config.isActualImageSize" dark></v-checkbox>
+
+ <label class="label">Runs</label>
+ <v-checkbox v-for="item in runsItems"
+ :key="item.name"
+ :label="item.name"
+ :value="item.value"
+ v-model="config.runs"
+ dark
+ ></v-checkbox>
+
+ <v-btn :color="config.running ? 'primary' : 'error'"
+ v-model="config.running"
+ @click="toggleAllRuns"
+ dark
+ >
+ {{config.running ? 'Running' : 'Stopped'}}
+ </v-btn>
+ </div>
+</template>
+<script>
+// TODO: Maybe migrate the CheckBoxGroup from San to Vue
+//import CheckBoxGroup from '../../common/component/CheckBoxGroup';
+
+export default {
+ props: {
+ runsItems: Array,
+ config: Object
+ },
+ data() {
+ return {
+ };
+ },
+ methods: {
+ toggleAllRuns() {
+ this.config.running = !this.config.running;
+ }
+ }
+};
+
+</script>
+<style lang="stylus">
+@import '../../style/variables';
++prefix-classes('visual-dl-image-')
+ .config-com
+ width 90%
+ margin 20px auto
+ .run-toggle
+ width 100%
+ margin-top 20px
+
+.label
+ color white
+</style>