Index: /branches/rel_apv_10_7/usr/click/webui/htdocs/new/src/apv/templates/monitoring/report/report/monitor.html
===================================================================
--- /branches/rel_apv_10_7/usr/click/webui/htdocs/new/src/apv/templates/monitoring/report/report/monitor.html	(revision 39362)
+++ /branches/rel_apv_10_7/usr/click/webui/htdocs/new/src/apv/templates/monitoring/report/report/monitor.html	(working copy)
@@ -21,23 +21,29 @@
                         </el-select>
                     </el-form-item>
                     <el-form-item>
-                    	<template slot="label">{[gettext('Module')]}</template>
-                        <el-cascader-panel 
+                        <template slot="label">{[gettext('Module')]}</template>
+                        <el-cascader-panel
                             class="report-custom"
                             :props="props"
+                            :options="first_node"
                             v-model="select_item"
+                            @expand-change="onExpandChange"
                         ></el-cascader-panel>
-                      </el-form-item>
-                      <el-form-item>
-	                      	<template slot="label">{[gettext('Report Type')]}</template>
-                        	<el-radio-group v-model="report_type">
-	                        	<el-radio label="pdf" checked></el-radio>
-	                        	<el-radio label="csv"></el-radio>
-	                      	</el-radio-group>
-                    </el-form-item>
-                      <el-form-item>
-                        <el-button type="primary" @click="generateReport">{[gettext('Generate')]}</el-button>
-                    </el-form-item>
+                        </el-form-item>
+                        <el-form-item>
+                                <template slot="label">{[gettext('Report Type')]}</template>
+                                <el-radio-group v-model="report_type">
+                                    <el-radio label="pdf" checked></el-radio>
+                                    <el-radio label="csv" ></el-radio>
+                                </el-radio-group>
+                        </el-form-item>
+                        <el-form-item>
+                            <el-button
+                                type="primary"
+                                @click="generateReport"
+                                :disabled="select_item.length === 0"
+                            >{[gettext('Generate')]}</el-button>
+                        </el-form-item>
                 </el-form>
             </el-card>
         </el-col>
@@ -45,7 +51,7 @@
 </div>
 <style>
 .monitor-nav-box {
-   height: 0px;
+    height: 0px;
 }
 .total-info img {
     float: left;
@@ -67,6 +73,20 @@
 .report-custom {
     overflow-x: scroll;
 }
+.first-node-list {
+    margin-bottom: 8px;
+}
+.first-node-item {
+    display: inline-block;
+    padding: 2px 10px;
+    border-radius: 3px;
+    margin-right: 6px;
+    background: #f5f7fa;
+    color: #606266;
+}
+.el-cascader-node.is-selectable.in-active-path {
+    color: #409eff;
+}
 </style>
 
 <script type="text/javascript">
@@ -93,81 +113,25 @@
                     },
                     props: {
                         multiple: true,
-                        lazy: true,
-                        lazyLoad: this.getNodes,
-                        checkStrictly: true,
+                        lazy: false,
+                        checkStrictly: false,
+                        emitPath: true,
                     },
+                    first_node: [
+                        { label: 'System', value: 'system', children: [] },
+                        { label: 'SLB', value: 'slb', children: [] },
+                        { label: 'LLB', value: 'llb', children: [] },
+                        { label: 'GSLB', value: 'gslb', children: [] },
+                        { label: 'TCP', value: 'tcp', children: [] }
+                    ],
                     global_level:[],
                     cur_node:[],
-                    select_item: '',
-                    report_type: '',
+                    select_item: [],
+                    report_type: 'pdf',
+                    expandValue: '',
                 }
             },
             methods: {
-                getNodes:function(node, resolve){
-                    const { level } = node;
-                    let that = this
-                    let ajax_node = ['slb_total','vs_report','rs_report','vh_report','rh_report']
-                    let ajax_url = ['/generate_slb_total_items','/generate_virtual_service_items','/generate_real_service_items','/generate_virtual_host_items','/generate_real_host_items']
-                    let resolve_node = function(cur_node) {
-                        if(cur_node && cur_node.length){
-                            const nodes = Array.from({ length: cur_node.length })
-                                .map((item,index) => {
-                                    if(cur_node[index].children){
-                                            return {
-                                                value: `${cur_node[index].value}`,
-                                                label: `${cur_node[index].label}`,
-                                                leaf: level >= 4
-                                            }
-                                    }else{
-                                        return {
-                                            value: `${cur_node[index].value}`,
-                                            label: `${cur_node[index].label}`,
-                                            leaf: true
-                                        }
-                                    }
-                                });
-                            // Return sub nodes by calling resolve and notify to component loading is completed
-                            resolve(nodes);
-                        }else{
-                            resolve();
-                        }
-                    }
-                    let get_options = function(url) {
-                        $.ajax({
-                            headers: {
-                                "Content-Type": "application/json"
-                            },
-                            url: url,
-                            type: "post",
-                            success: function (res) {
-                                that.global_level['level_'+level] = JSON.parse(res);
-                                that.cur_node = that.global_level['level_'+level]
-                                resolve_node(that.cur_node);
-                            }
-                        })
-                    }
-                    setTimeout(() => {
-                        if(level == 0){
-                            get_options('/generate_items')
-                        }else{
-                            let node_index = ajax_node.indexOf(node.value)
-                            if( node_index != -1 ){
-                                get_options(ajax_url[node_index])
-                            }else{
-                                let parent_level = that.global_level['level_'+(level-1)];
-                                let parent_node = parent_level.find(item => item.value == node.value)
-                                if (typeof(parent_node) != "undefined" && typeof(parent_node['children']) != "undefined") {
-                                    that.global_level['level_'+level] = parent_node['children'];
-                                } else {
-                                    that.global_level['level_'+level] = [];
-                                }
-                                that.cur_node = that.global_level['level_'+level]
-                                resolve_node(that.cur_node)
-                            }
-                        }
-                    }, 500);
-                },
                 generateReport: function() {
                     items = this.checkPath()
                     progressDlg = $HIVE.progressDlg(gettext('waiting...'));
@@ -202,16 +166,44 @@
                 checkPath: function() {
                     let that = this;
                     let b = JSON.parse(JSON.stringify(that.select_item));
-                    const result = b.filter(arr => 
-                        !b.some(other => 
+                    const result = b.filter(arr =>
+                        !b.some(other =>
                             other.length > arr.length && other.slice(0, arr.length).every((val, i) => val === arr[i])
                         )
                     );
                     return result;
                 },
+                onExpandChange: function(val) {
+                    if (Array.isArray(val) && val.length >= 1) {
+                        this.expandValue = val[0];
+                        this.loadChildren(val[0]);
+                    }
+                },
+                loadChildren: function(value) {
+                    let that = this;
+                    let node = that.first_node.find(item => item.value === value);
+                    if (!node || (node.children && node.children.length > 0)) return;
+                    fetch('/generate_items_by_type?type=' + encodeURIComponent(value), {
+                        method: 'GET',
+                        headers: {
+                            'Accept': 'application/json'
+                        }
+                    })
+                    .then(function(response) {
+                        return response.json();
+                    })
+                    .then(function(res) {
+                        if (res && res.children) {
+                            that.$set(node, 'children', res.children);
+                        }
+                    })
+                    .catch(function(err) {
+                        console.error(err);
+                    });
+                },
             },
             created: function () {
-            }
+            },
         })
     })
 </script>