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

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>