monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 张凯
Commit 7f98eb15e9a10d63f031c820144a7fcd32b5e701 2 parents 045d3a39 2088d6f0

Merge branch 'master-500-dev' of http://113.200.75.45:82/monitor_v3/hg-monitor-w… 

…eb into master-500-dev-joke
Inline Side-by-side
Showing 5 changed files with 258 additions and 13 deletions
  1 +layui.define(['commonDetail', 'common', 'sessions'], function (exports) {
  2 + var commonDetail = layui.commonDetail;
  3 + var $ = layui.$
  4 + //对外暴露的接口
  5 + exports('snapshot_detail', function (data) {
  6 + var common = layui.common;
  7 + var sessions = layui.sessions;
  8 + var resId = '';
  9 + var resType = '';
  10 + var showFlag = common.getUrlParam("show");
  11 + if (showFlag && showFlag == '0') {
  12 + resId = common.getUrlParam("resId");
  13 + resType = common.getUrlParam("resType");
  14 + } else {
  15 + resId = data.resId;
  16 + resType = data.resType;
  17 + }
  18 + //获取小型机分区中安装的oracle数据库的resId
  19 + var oracleRelationByResId = findOracleRelationByResId();
  20 +
  21 + commonDetail.bindTips();
  22 + //基本信息
  23 + var jbxxKpiId = 'KPIE13DD9A3,KPIF74D9D2B,KPI67076676,KPI30D23EF4,KPI1C777D98,KPI4419E8A1,KPI61B55EAF';
  24 + //关键信息
  25 + var gjxxKpiId = 'KPI899DBD7B,KPID3EBE40F,KPI0990CD44,KPI8266B6781,KPI1584BE1C,KPI0E5EB8ED';
  26 + //CPU使用率
  27 + var cpuUsekpiId = 'KPI7054BC34';
  28 + //内存使用率
  29 + var memoryUsekpiId = 'KPI31CB8D97';
  30 + //虚拟内存使用率
  31 + var xnMemoryUsekpiId = 'KPI20352505';
  32 + //CPU使用率走势（12小时）
  33 + var cpuRunKpiId = 'KPI7054BC34';
  34 + //内存使用率走势（12小时）
  35 + var memoryRunKpiId = 'KPI31CB8D97';
  36 + //虚拟内存使用率走势（12小时）
  37 + var vmemoryRunKpiId = 'KPI20352505';
  38 + //文件系统
  39 + var sysfileKpiId = 'KPI7AC1664E,KPI449F5365,KPIA91F44E7,KPI98306224,KPIE25925F7,KPI77C28BBA';
  40 + //网卡信息
  41 + var wkinfoKpiId = 'KPIFABFD741,KPIA0A69A33,KPID339D51B,KPI02062F43';
  42 + //磁盘
  43 + var cpinfoKpiId = 'KPI9D22EAB6,KPI5CA7AA50,KPI97373ED0,KPI95378FE0,KPI012E7B14,KPI1503B2E0';
  44 + //ASM磁盘组
  45 + var asmKpiId = 'KPI50267025,KPID7AF034D,KPI922F8FF7,KPI4D710FDA,KPI811E751E,KPIF7B8841E,KPI7E2BCC80';
  46 + //errpt
  47 + var errptKpiId = 'KPIBD21AF52,KPI87FB568B,KPIB9ECE18C,KPI0D61F837,KPI6FCC4160,KPI35BA4A26';
  48 + //端口存活侦测（二维表格）
  49 + var portDetTableKpiId = 'KPI39C76443,KPIC6A062EC,KPI5212EE93,KPIDCBEA93D';
  50 +
  51 + reload()
  52 +
  53 + //渲染页面
  54 + function reload() {
  55 + //基本信息
  56 + commonDetail.renderText('hostminicomputerpartition_jbxx', resId, jbxxKpiId);
  57 + //维保信息 joke add 20200528
  58 + // commonDetail.renderMaintenanceInfo('hostminicomputerpartition_wbxx',resId,resType);
  59 + //关键信息
  60 + commonDetail.renderText('hostminicomputerpartition_gjxx', resId, gjxxKpiId);
  61 +
  62 + //资源状态
  63 + commonDetail.renderResHealth('hostminicomputerpartition_resstate', resId);
  64 +
  65 + //CPU使用率
  66 + commonDetail.renderGauge('hostminicomputerpartition_cpurate', resId, cpuUsekpiId, false);
  67 +
  68 + //内存使用率
  69 + commonDetail.renderGauge('hostminicomputerpartition_memoryrate', resId, memoryUsekpiId, false);
  70 +
  71 + //虚拟内存使用率
  72 + commonDetail.renderGauge('hostminicomputerpartition_xnmemoryrate', resId, xnMemoryUsekpiId, false);
  73 +
  74 + //CPU使用率走势（12小时）
  75 + commonDetail.renderLineCharat('hostminicomputerpartition_cpurun', resId, cpuRunKpiId, 'CPU使用率', 'cpu');
  76 + //内存使用率走势（12小时）
  77 + commonDetail.renderLineCharat('hostminicomputerpartition_memoryrun', resId, memoryRunKpiId, '内存使用率', 'mem');
  78 + //虚拟内存使用率走势（12小时）
  79 + commonDetail.renderLineCharat('hostminicomputerpartition_vmemoryrun', resId, vmemoryRunKpiId, '虚拟内存使用率', 'vmem');
  80 + //文件系统
  81 + commonDetail.renderTable('hostminicomputerpartition_sysfile', false, resId, sysfileKpiId, '文件系统', 'fs');
  82 + //网卡信息
  83 + commonDetail.renderTable('hostminicomputerpartition_wkinfo', false, resId, wkinfoKpiId, '网卡信息', 'net');
  84 + //磁盘
  85 + commonDetail.renderTable('hostminicomputerpartition_cpinfo', false, resId, cpinfoKpiId, '磁盘信息', 'disk');
  86 + //ASM磁盘组
  87 + if (oracleRelationByResId !== '') {
  88 + commonDetail.renderTable('hostminicomputerpartition_asm', false, oracleRelationByResId, asmKpiId, 'ASM磁盘组', 'asm')
  89 + } else {
  90 + $('#hostminicomputerpartition_asm').parent().parent().hide();
  91 + }
  92 + //errpt
  93 + commonDetail.renderTable('hostminicomputerpartition_errpt', false, resId, errptKpiId, 'ERRPT信息', 'errpt');
  94 + //端口存活侦测（二维表格）
  95 + commonDetail.renderTable('hostminicomputerpartition_port_detection_id', false, resId, portDetTableKpiId, '端口存活侦测', 'port');
  96 + //活动告警
  97 + commonDetail.renderActiveAlarms('hostminicomputerpartition_alarmlist', resId);
  98 + //存储信息
  99 + commonDetail.renderStoreAlarms('hostminicomputerpartition_store', resId);
  100 + }
  101 +
  102 + function findOracleRelationByResId() {
  103 + let leftUrl = common.domainName + '/api-web/detail/findRelationGroupByResId';
  104 + let oracleResId = '';
  105 + $.ajax({
  106 + url: leftUrl,
  107 + type: 'get',
  108 + async: false,
  109 + headers: {
  110 + "Authorization": "Bearer " + sessions.getToken().access_token + ""
  111 + },
  112 + data: {resId: resId},
  113 + success: function (res) {
  114 + if (res && res.success && res.map) {
  115 + let relation = res.map['relation-installreverse'];
  116 + if (relation && relation.length > 0) {
  117 + for (let object of relation) {
  118 + if (object.targetType === 'DATABASE_ORACLE') {
  119 + oracleResId = object.targetId;
  120 + }
  121 + }
  122 + }
  123 + }
  124 + }
  125 + })
  126 + return oracleResId;
  127 + }
  128 +
  129 + //定时任务
  130 + var timer = setInterval(function () {
  131 + reload()
  132 + }, commonDetail.timerTime);
  133 + commonDetail.detailTimer.push(timer);
  134 +
  135 + });
  136 +});
  1 +<!--快照详细页面-->
  2 +<article class="page-container template">
  3 + <div class="page-panel">
  4 + <div class="main">
  5 + <div class="layui-card">
  6 + <div class="layui-card-body">
  7 + <div class="lay-row">
  8 + <div class="lay-row-item">
  9 + <h5 class="lay-row-title">资源状态</h5>
  10 + <div class="res-state" id="hostminicomputerpartition_resstate">
  11 + <div class="res-state-pie res-state-pie--good">优</div>
  12 + <ul>
  13 + <li>严重告警：0</li>
  14 + <li>重要告警：0</li>
  15 + <li>一般告警：0</li>
  16 + </ul>
  17 + </div>
  18 + </div>
  19 + <div class="lay-row-item">
  20 + <h5 class="lay-row-title">基本信息</h5>
  21 + <ul class="info-table" id="hostminicomputerpartition_jbxx">
  22 + </ul>
  23 + </div>
  24 + </div>
  25 + <div class="lay-row">
  26 + <div class="lay-row-item">
  27 + <h5 class="lay-row-title">性能信息</h5>
  28 + <div id="hostminicomputerpartition_sysfile"></div>
  29 + </div>
  30 + </div>
  31 +
  32 + <div class="lay-row">
  33 + <div class="lay-row-item">
  34 + <h5 class="lay-row-title">文件系统<span class="layui-table-link"
  35 + id="hostminicomputerpartition_wkinfoDownload"
  36 + style="margin-left: 10px;">下载</span><span
  37 + class="layui-table-link" id="hostminicomputerpartition_wkinfoMore">更多</span></h5>
  38 + <div id="hostminicomputerpartition_wkinfo"></div>
  39 + </div>
  40 + </div>
  41 + <div class="lay-row">
  42 + <div class="lay-row-item">
  43 + <h5 class="lay-row-title">INODE信息<span class="layui-table-link"
  44 + id="hostminicomputerpartition_asmDownload"
  45 + style="margin-left: 10px;">下载</span><span
  46 + class="layui-table-link" id="databaseoracle_asmMore">更多</span></h5>
  47 + <div id="hostminicomputerpartition_asm"></div>
  48 + </div>
  49 + </div>
  50 + <div class="lay-row">
  51 + <div class="lay-row-item">
  52 + <h5 class="lay-row-title">网卡信息<span class="layui-table-link"
  53 + id="hostminicomputerpartition_errptDownload" style="margin-left: 10px;">下载</span><span
  54 + class="layui-table-link" id="hostminicomputerpartition_errptMore">更多</span></h5>
  55 + <div id="hostminicomputerpartition_errpt"></div>
  56 + </div>
  57 + </div>
  58 + <div class="lay-row">
  59 + <div class="lay-row-item">
  60 + <h5 class="lay-row-title">磁盘信息<span class="layui-table-link"
  61 + id="hostminicomputerpartition_cpinfoDownload"
  62 + style="margin-left: 10px;">下载</span><span
  63 + class="layui-table-link" id="hostminicomputerpartition_cpinfoMore">更多</span></h5>
  64 + <div id="hostminicomputerpartition_cpinfo"></div>
  65 + </div>
  66 + </div>
  67 +
  68 +
  69 + <div class="lay-row">
  70 + <div class="lay-row-item">
  71 + <h5 class="lay-row-title">实时告警Top5<span
  72 + class="layui-table-link" id="hostminicomputerpartition_port_detection_idDownload"
  73 + style="margin-left: 10px;">下载</span><span
  74 + class="layui-table-link"
  75 + id="hostminicomputerpartition_port_detection_idMore">更多</span></h5>
  76 + <div id="hostminicomputerpartition_port_detection_id"></div>
  77 + </div>
  78 + </div>
  79 + </div>
  80 + </div>
  81 + </div>
  82 + </div>
  83 +</article>
  84 +<textarea id="snapshot_detail_param_id" style="display: none;">{{d}}</textarea>
  85 +<script>
  86 + layui.use('snapshot_detail', function (fn) {
  87 + var $ = layui.$;
  88 + var parm = $("#snapshot_detail_param_id").val();
  89 + if (parm.indexOf('{{d') != -1) {
  90 + fn();
  91 + } else {
  92 + fn(JSON.parse(parm));
  93 + }
  94 + });
  95 +</script>
1 -<div class="container" :style="{'height':height+'px','max-height':height+'px'}"> 1 +<div class="container" :style="{'height':height+'px','max-height':height+'px','padding':'10px 0 10px 10px','background':'#fff','box-sizing':'border-box'}">
2 <div class="cm-card" :style="{'min-height':height+'px','max-height':height+'px','height':'100%','padding-top':'3px'}"> 2 <div class="cm-card" :style="{'min-height':height+'px','max-height':height+'px','height':'100%','padding-top':'3px'}">
3 <div class="search"> 3 <div class="search">
4 <div class="condition esData-conditon" style="justify-content: space-between;width: 100%;"> 4 <div class="condition esData-conditon" style="justify-content: space-between;width: 100%;">
@@ -83,26 +83,34 @@ @@ -83,26 +83,34 @@
83 :showTools="true" 83 :showTools="true"
84 :total="queryParams.count" 84 :total="queryParams.count"
85 @loaddata="loaddata"> 85 @loaddata="loaddata">
  86 + <template #default="{row,prop,column}">
  87 + <div v-if="prop == 'resName'">
  88 + <span class="resName-span"
  89 + style="cursor: pointer;color:#1e9fff">{{row.resName}}</span>
  90 + </div>
  91 + </template>
86 <template #tools="{scope}"> 92 <template #tools="{scope}">
87 <div class="list-handle"> 93 <div class="list-handle">
88 - <el-tootip effect="dark"  
89 - content="详情"  
90 - placement="top">  
91 - <span class="icon-bg" style="color: #69a1f6">  
92 - <i class="el-icon-document"></i> 94 +<!-- <el-tootip effect="dark"-->
  95 +<!-- content="详情"-->
  96 +<!-- placement="top">-->
  97 + <span class="icon-bg" @click="handleDetail(scope.row)" style="color: #69a1f6">
  98 + <i class="el-icon-document" title="详情"></i>
93 </span> 99 </span>
94 - </el-tootip> 100 +<!-- </el-tootip>-->
95 101
96 - <el-tootip effect="dark"  
97 - content="删除"  
98 - placement="top"> 102 +<!-- <el-tootip effect="dark"-->
  103 +<!-- content="删除"-->
  104 +<!-- placement="top">-->
99 <span class="icon-bg" style="color:#dd3532" @click="handleDel(scope.row)"> 105 <span class="icon-bg" style="color:#dd3532" @click="handleDel(scope.row)">
100 <i class="el-icon-delete"></i> 106 <i class="el-icon-delete"></i>
101 </span> 107 </span>
102 - </el-tootip> 108 +<!-- </el-tootip>-->
103 </div> 109 </div>
104 </template> 110 </template>
105 </cm-table-page> 111 </cm-table-page>
106 </div> 112 </div>
107 </div> 113 </div>
108 -</div>  
  114 +</div>
  115 +
  116 +
@@ -370,6 +370,11 @@ export default { @@ -370,6 +370,11 @@ export default {
370 }) 370 })
371 } 371 }
372 372
  373 + let handleDetail = (row)=>{
  374 + console.log(row);
  375 + proxy.$global.openNewWin('template/detail/snapshot_detail', "快照详情", {},false);
  376 + }
  377 +
373 Vue.onMounted(()=>{ 378 Vue.onMounted(()=>{
374 getEcharts(); 379 getEcharts();
375 getDataList(); 380 getDataList();
@@ -394,6 +399,7 @@ export default { @@ -394,6 +399,7 @@ export default {
394 handleQuery, 399 handleQuery,
395 loaddata, 400 loaddata,
396 handleDel, 401 handleDel,
  402 + handleDetail,
397 } 403 }
398 } 404 }
399 } 405 }
1 -<div class="container" :style="{'height':height+'px','max-height':height+'px'}"> 1 +<div class="container" :style="{'height':height+'px','max-height':height+'px','padding':'10px 0 10px 10px','background':'#fff','box-sizing':'border-box'}">
2 <div class="cm-card" :style="{'min-height':height+'px','max-height':height+'px','height':'100%','padding-top':'3px'}"> 2 <div class="cm-card" :style="{'min-height':height+'px','max-height':height+'px','height':'100%','padding-top':'3px'}">
3 <div class="search"> 3 <div class="search">
4 <div class="condition esData-conditon" style="justify-content: end;width: 100%;"> 4 <div class="condition esData-conditon" style="justify-content: end;width: 100%;">