#872 ping详情数据联调 #1

鲁尚清
Commit 50cb5baee9da431deb0557a918f6055295855aff 1 parent b0fe846f
Showing 3 changed files with 80 additions and 33 deletions
hg-monitor-web-base/src/main/resources/static/src/controller/commonDetail.js
hg-monitor-web-base/src/main/resources/static/vue3/src/views/ping/index.html
hg-monitor-web-base/src/main/resources/static/vue3/src/views/ping/index.js
--- a/hg-monitor-web-base/src/main/resources/static/src/controller/commonDetail.js
View file @50cb5ba
+++ b/hg-monitor-web-base/src/main/resources/static/src/controller/commonDetail.js
View file @50cb5ba
@@ -3187,6 +3187,12 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
                             }
                         });
                         var uuid = generateUUID();
+                        console.log("**************",res)
+                        //start lsq 资源名称、资源类型名称、责任人字段值传递 2022-04-25
+                        var resName=res.resName;
+                        var resTypeName=res.resTypeName;
+                        var adminName=res.adminName;
+                        //end lsq 2022-04-25
                         if (li != '') {
                             html = `<ul class="info-table hide" id="${uuid}">` + li + `</ul>`
@@ -3204,7 +3210,8 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
                         }
                         title += `<a class="layui-icon filterList" data-id=${resId} lay-tips="指标过滤清单" style="margin-left: 10px"><i class="iconfont">&#XE516;</i></a>`;
                         title += `<a class="layui-icon res-view-relation-topo" data-id=${resId} lay-tips="查看资源关系拓扑" style="margin-left: 10px"><i class="iconfont">&#XE515;</i></a>`;
-                        title += `<a class="layui-icon res-view-ping" data-id=${resId} data-resName=${name} data-ip=${ip} data-resTypeName=${res.resTypeName} data-adminName=${res.adminName} lay-tips="查看资源ping详情" style="margin-left: 10px"> <img width="20" src="/src/style/img/ping.png" ></a>`;
+                        //lsq 2022-04-25 增加ping详情提交按钮
+                        title += `<a class="layui-icon res-view-ping" data-id=${resId} data-resname=${resName} data-ip=${ip} data-restypename=${resTypeName} data-adminname=${adminName} lay-tips="原始数据" style="margin-left: 10px;position:relative;top:-3px;"> <img width="20" src="/src/style/img/ping.png" ></a>`;
                         if (resCategory === 'share' && hardwareFlag.endsWith("Y")) {
 /*
                             title += `<a class="layui-icon res-view-assets-details" data-ip=${ip} data-name=${name} data-restype=${resType} data-id=${resId} lay-tips="资产配置信息"><i class="iconfont">&#XE517;</i></a>`;
@@ -3228,6 +3235,8 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
                         title += `<a class="layui-icon layui-icon-rate" data-id=${resId} lay-tips="加入收藏夹"></a>`;
                         title += `<a class="layui-icon filterList" data-id=${resId} lay-tips="指标过滤清单" style="margin-left: 10px"><i class="iconfont">&#XE516;</i></a>`;
                         title += `<a class="layui-icon res-view-relation-topo" data-id=${resId} lay-tips="查看资源关系拓扑" style="margin-left: 10px"><i class="iconfont">&#XE515;</i></a>`;
+                        //lsq 2022-04-25 增加ping详情提交按钮
+                        title += `<a class="layui-icon res-view-ping" data-id=${resId} data-resname=${res.resName} data-ip=${ip} data-restypename=${res.resTypeName} data-adminname=${res.adminName} lay-tips="查看资源ping详情" style="margin-left: 10px;position:relative;top:-3px;"> <img width="20" src="/src/style/img/ping.png" ></a>`;
                         if (resCategory === 'share' && hardwareFlag.endsWith("Y")) {
 /*
                             title += `<a class="layui-icon res-view-assets-details" data-ip=${ip} data-name=${name} data-restype=${resType} data-id=${resId} lay-tips="资产配置信息"><i class="iconfont">&#XE517;</i></a>`;
@@ -3501,7 +3510,7 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
                             //     layer.msg('暂无权限!', {icon: 0});
                             //     return;
                             // }
-                            let paramStr='?resId='+$(this).data('id')+'&resName='+$(this).data('resName')+'&resTypeName='+$(this).data('resTypeName')+'&adminName='+$(this).data('adminName')+'&ip='+$(this).data('ip')
+                            let paramStr='?resId='+$(this).data('id')+'&resName='+$(this).data('resname')+'&resTypeName='+$(this).data('restypename')+'&adminName='+$(this).data('adminname')+'&ip='+$(this).data('ip')
                             layer.open({
                                 title: ['ping详情', 'font-size:18px;'],
--- a/hg-monitor-web-base/src/main/resources/static/vue3/src/views/ping/index.html
View file @50cb5ba
+++ b/hg-monitor-web-base/src/main/resources/static/vue3/src/views/ping/index.html
View file @50cb5ba
-<div class="container" :style="{'height':height+'px','max-height':height+'px'}">
+<div class="container" :style="{'height':height+'px','max-height':height+'px','padding':'10px 0 10px 10px','background':'#fff','box-sizing':'border-box'}">
   <div class="cm-card" :style="{'min-height':height+'px','max-height':height+'px','height':'100%','padding-top':'3px'}">
-    <div class="ping-detail">
+    <div class="ping-detail" style="margin-bottom: 10px;padding:0 10px;">
       <el-descriptions
               class=""
               title=""
@@ -51,9 +51,9 @@
             <el-select v-model="search.kpiId" class="m-2" placeholder="指标" clearable  @change="kpiChange">
               <el-option
                       v-for="item in kpiData"
-                      :key="item.ddicCode"
-                      :label="item.ddicName"
-                      :value="item.ddicCode"
+                      :key="item.kpiId"
+                      :label="item.kpiName"
+                      :value="item.kpiId"
               />
             </el-select>
@@ -62,9 +62,9 @@
           <el-select v-model="search.flag" class="m-2" placeholder="flag" clearable>
             <el-option
                     v-for="item in flagData"
-                    :key="item.ddicCode"
-                    :label="item.ddicName"
-                    :value="item.ddicCode"
+                    :key="item.flag"
+                    :label="item.flag"
+                    :value="item.flag"
             />
           </el-select>
         </el-form-item>
@@ -95,27 +95,37 @@
                      :loading="false"
                      :pageSize="search.pageSize"
                      :showPage="true"
-                     :showTools="true"
-                     :height="height - 110">
+                     :showTools="false"
+                     :height="height - 210">
         <template #default="{row,prop,column}">
-          <!--<div v-if="prop == 'message'" >
+        <!--  <div v-if="prop == 'message'" style="text-align: left;" >
             <el-tooltip >
               <template #content>
-                <div style="max-width:400px;overflow: hidden;	text-overflow: ellipsis;display: -webkit-box;	-webkit-line-clamp: 5;	-webkit-box-orient: vertical;">
+                <pre style="max-width:400px;overflow: hidden;	text-overflow: ellipsis;display: -webkit-box;	-webkit-line-clamp: 5;	-webkit-box-orient: vertical;">
                   {{row.message}}
-                </div>
+                </pre>
               </template>
-              <div v-html="row.message" style="overflow: hidden;	text-overflow: ellipsis;display: -webkit-box;	-webkit-line-clamp: 1;	-webkit-box-orient: vertical;"></div>
+              <pre style="overflow: hidden;	text-overflow: ellipsis;display: -webkit-box;	-webkit-line-clamp: 3;	-webkit-box-orient: vertical;">
+                {{row.message}}
+              </pre>
             </el-tooltip>
           </div>-->
+
+          <div v-if="prop == 'ext'" style="text-align: left;" >
+            <pre>{{row.ext}}</pre>
+          </div>
+          <div v-if="prop == 'message'" style="text-align: left;" >
+            <pre>{{row.message}}</pre>
+          </div>
+
         </template>
-        <template #tools="{scope}">
+      <!--  <template #tools="{scope}">
           <div class="list-handle">
                         <span class="icon-bg">
                             <i class="el-icon-view" title="查看" @click="handleView(scope.row)"></i>
                         </span>
           </div>
-        </template>
+        </template>-->
       </cm-table-page>
     </div>
   </div>
--- a/hg-monitor-web-base/src/main/resources/static/vue3/src/views/ping/index.js
View file @50cb5ba
+++ b/hg-monitor-web-base/src/main/resources/static/vue3/src/views/ping/index.js
View file @50cb5ba
@@ -18,10 +18,9 @@ export default {
             sortBy:'dbTime',
             scopeBy:'dbTimeStr.keyword',
             keyword: '',
-            type:'syslog',
             pageNum: 1,
             pageSize: 20,
-            dateTime:[],
+            dateTime:'',
             resType:'',
         });
         let dialog = Vue.ref({
@@ -39,21 +38,21 @@ export default {
                     label: '采集时间',
                     sortable: true,
                     align: 'center',
-                    width: '250',
+                    width: '150',
                 },
                 {
-                    prop: 'dbTime',
+                    prop: 'dbTimeStr',
                     label: '入库时间',
                     sortable: true,
                     align: 'center',
-                    width: '250'
+                    width: '150'
                 },
                {
                     prop: 'kpiValue',
                     label: '采集值',
                     sortable: true,
                     align: 'center',
-                    width: '200'
+                    width: '100'
                 },
                 {
                     prop: 'taskName',
@@ -80,7 +79,7 @@ export default {
                     label: '扩展信息',
                     sortable: true,
                     align: 'center',
-                    width: '200',
+                    width: '260',
                     render:function (row){
                         return `<pre>${row.ext}</pre>`
                     }
@@ -89,9 +88,12 @@ export default {
                     label: '异常信息',
                     sortable: true,
                     align: 'center',
+                    width:'500',
                     render:function (row){
-                        return `<pre>${row.message}</pre>`
+                        let str=JSON.stringify(JSON.parse(row.message))
+                        return `<pre>${str}</pre>`
                     }
+
                 }
             ]
         })
@@ -125,10 +127,13 @@ export default {
         let getDataList = () => {
             let nowDate=getDateTime(new Date());
             let dateStr='';
+            let type='collector';
             if(kpiIdent.value==1){
                 dateStr='monitor-performance_';
+                type='performance';
             }else{
                 dateStr='monitor-collector_';
+                type='collector';
             }
             if(search.value.dateTime){
                 dateStr+=search.value.dateTime;
@@ -137,16 +142,12 @@ export default {
             }
             let params={
-                resId:resId.value,
-                kpiId:search.value.kpiId,
-                flag:search.value.flag,
                 indexName:dateStr,
                 pageNum: search.value.pageNum,
                 pageSize: search.value.pageSize,
-                type:search.value.type,
+                type:type,
                 sortBy:search.value.sortBy,
                 scopeBy:search.value.scopeBy,
-                resType:search.value.resType,
                 param:{}
             }
             if(search.value.keyword){
@@ -156,9 +157,15 @@ export default {
                     'message.keyword':search.value.keyword,
                 }
             }
+            if(resId.value){
+                params['param']['resId.keyword']=resId.value;
+            }
             if(search.value.kpiId){
                     params['param']['kpiId.keyword']=search.value.kpiId;
             }
+            if(search.value.flag){
+                params['param']['flag.keyword']=search.value.flag;
+            }
              proxy.$http.post(`/api-web/esData/list`, params, function (res) {
                  if (res && res.object) {
                      let dataList=res.object.content;
@@ -172,6 +179,9 @@ export default {
                      tableData.value.dataList = [];
                      tableData.value.count = 0;
                  }
+                /* tableData.value.dataList=[{
+                     message:dataJSON('{"resId":"4044b7e0f1344aefb80c89018b2a52a5","kpiId":"","indexName":"monitor-collector_2022-04-19","pageNum":1,"pageSize":20,"type":"syslog","sortBy":"dbTime","scopeBy":"dbTimeStr.keyword","resType":"","param":{"resId":"4044b7e0f1344aefb80c89018b2a52a5","kpiId":""}}')
+                 }]*/
              });
         }
@@ -203,7 +213,10 @@ export default {
         //指标数据
         let kpiData=Vue.ref([]);
         let getKpiData=()=>{
-            proxy.$http.post(`/api-web/manage/ddic/findSucDdics/LOG_SOURCE_TYPE`, {}, function (res) {
+            let param={
+                resId:resId.value,
+            }
+            proxy.$http.get(`/api-web/ping/getKpi`, param, function (res) {
                 if (res && res.data) {
                     kpiData.value = res.data;
                 }
@@ -212,7 +225,11 @@ export default {
         //flag数据
         let flagData=Vue.ref([]);
         let getFlagData=()=>{
-            proxy.$http.post(`/api-web/manage/ddic/findSucDdics/LOG_SOURCE_TYPE?kpiId=`+search.kpiId+'&resId='+resId.value, {}, function (res) {
+            let param={
+                resId:resId.value,
+                kpiId:search.value.kpiId
+            }
+            proxy.$http.get(`/api-web/ping/getKpi`, param, function (res) {
                 if (res && res.data) {
                     flagData.value = res.data;
                 }
@@ -220,6 +237,11 @@ export default {
         }
         //指标改变事件
         let kpiChange=(val)=>{
+            kpiData.value.map(item=>{
+                if(val==item.kpiId){
+                    kpiIdent.value=item.kpiIdent;
+                }
+            })
             getFlagData();
         }
         let detail=Vue.ref({})
@@ -229,6 +251,11 @@ export default {
             resId.value=proxy.$route.query.resId;
         }
+        //json格式化方法
+        let dataJSON=(val)=>{
+            let str=val.trim()
+            return JSON.parse(str);
+        }
         // 挂载完
         Vue.onMounted(() => {
             getResId();
@@ -238,6 +265,7 @@ export default {
         return {
+            dataJSON,
             resId,
             getResId,
             detail,