Index: /branches/rel_apv_10_7/usr/click/webui/htdocs/new/src/apv/templates/monitoring/gslb/monitor/monitor.html
===================================================================
--- /branches/rel_apv_10_7/usr/click/webui/htdocs/new/src/apv/templates/monitoring/gslb/monitor/monitor.html	(revision 39225)
+++ /branches/rel_apv_10_7/usr/click/webui/htdocs/new/src/apv/templates/monitoring/gslb/monitor/monitor.html	(working copy)
@@ -328,6 +328,10 @@
                                 <el-main style="overflow-x: auto; height: 90vh;">
                                     <el-row :gutter="20">
                                         <el-col>
+                                            <el-radio-group v-model="detail.chart_type_radio" @change="handleChartRadioChange">
+                                                <el-radio-button label="Top Hits">{[gettext('Top Hits')]}</el-radio-button>
+                                                <el-radio-button label="Individual Hits">{[gettext('Individual Hits')]}</el-radio-button>
+                                            </el-radio-group>
                                             <el-card>
                                                 <div slot="header">
                                                     <span>{[widgets['hits'].title]}</span>
@@ -998,6 +1002,9 @@
                     },
                     detail: {
                         radio: '',
+                        chart_radio: '',
+                        chart_type_radio: 'Top Hits',
+                        list_type: '1',
                         statictics: {
                             region_policy_count: 4,
                             hit: 0,
@@ -1179,6 +1186,7 @@
                     this.detail.activeItem = service_name;
                     this.detail.itemType = type;
                     this.detail.radio = 'Topology'
+                    this.detail.chart_type_radio = 'Top Hits'
                     this.detail.itemProtocol = protocol;
                     this.detail.chart_radio = 'Normal'
                     this.reloadTimer();
@@ -1188,8 +1196,10 @@
                     this.topology.name = name;
                     if(type == '1') {
                         this.getTopologyDatByHost(name);
+                        this.detail.list_type = '1';
                     } else {
                         this.getTopologyDatByService(name);
+                        this.detail.list_type = '2';
                     }
                     this.getHitsChartData(type)
                     this.handleSelectTree(row.name, this.service_list.type, row.type);
@@ -1470,7 +1480,14 @@
                         draw(Position[0], Position[1], Position[2]);
                     }, 5);
                 },
-                getHitsChartData: function (type) {
+                handleChartRadioChange: function () {
+                    if (this.detail.chart_type_radio === 'Top Hits') {
+                        this.getHitsChartData(this.detail.list_type);
+                    } else if (this.detail.chart_type_radio === 'Individual Hits') {
+                        this.getIndividualHitsChartData(this.detail.list_type);
+                    }
+                },
+                getHitsChartData: function(type) {
                     const param = {
                         "type": type,
                         "from": "now-30m",
@@ -1501,6 +1518,40 @@
                         }
                     });
                 },
+                getIndividualHitsChartData: function (type) {
+                    const param = {
+                        "type": type,
+                        "from": "now-30m",
+                        "name": this.topology.name,
+                        "to": "now"
+                    }
+                    let that = this;
+                    $.ajax({
+                        headers: {
+                            "Content-Type": "application/json"
+                        },
+                        url: "/apv/gslb/get_hits_chart_data",
+                        type: "post",
+                        data: JSON.stringify(param),
+                        success: function (res) {
+                            const res_sort = res.data.sort((a, b) => b[1] - a[1]);
+                            let series_data = [];
+                            let xaxis_data = [];
+                            res_sort.forEach(item => {
+                                series_data.push({
+                                    name: item[0],
+                                    value: item[1]
+                                });
+                                xaxis_data.push(item[0]);
+                            })
+                            that.widgets['hits'].option.series[0].data = series_data;
+                            that.widgets['hits'].option.legend.data = xaxis_data;
+                        }
+                    });
+                },
+                vsDetail: function(name) {
+                    window.location.href = '/apv/gslb/host/host/_inst_status?name="' + name + '"';
+                }
             }
         });
     });