运行监控

back/src/views/modules/sys/CapabilityOperationMonitoring/components/AnalysisOfTheRequest.vue

@@ -91,16 +91,23 @@
 
 <script>
 import * as echarts from 'echarts'
+import * as moment from 'moment'
 export default {
   components: {},
-  props: {},
+  props: {
+    callTheTrendData: {
+      type: Object,
+      default: () => {}
+    }
+  },
   data () {
     return {
+      endAndstartTime: {},
       requestOverviewData: [
         { name: '请求次数', tatol: '99999' },
         { name: '请求成功次数', tatol: '99999' },
         { name: '请求失败次数', tatol: '99999' },
-        { name: '平均时延', tatol: '99999' }
+        { name: '平均时延', tatol: '0' }
       ], // 请求概况初始化数据
       requestOverviewBg: [
         {
@@ -134,6 +141,14 @@ export default {
           labalColor: '#1182fb'
         }
       ],
+      qingQiuQuShiTime: [],
+      qingQiuQuShiValue: [],
+      qingQiuQuShiValue2: [],
+      shuJuLiuLiang: {
+        time: [],
+        chuvalue: [],
+        ruvalue: []
+      },
       abilityListTabData: ['请求次数', '请求失败次数', '平均延时'], // 能力排行榜tab切换
       newTab: '请求次数',
       abilityListData: [
@@ -180,7 +195,235 @@ export default {
       ] // 能力排行数据初始化
     }
   },
-  watch: {},
+  watch: {
+    callTheTrendData: {
+      deep: true,
+      handler () {
+        this.endAndstartTime = this.callTheTrendData
+        if (this.endAndstartTime.end != this.endAndstartTime.start) {
+          this.$http
+            .get(
+              '/metrics/api/v1/query?' +
+                'query=sum(increase(apigateway_http_status[1d]))&start=' +
+                this.endAndstartTime.start +
+                '&end=' +
+                this.endAndstartTime.end +
+                '&step=' +
+                this.endAndstartTime.end +
+                ')'
+            )
+            .then((res) => {
+              if (res.data.data.result[0]) {
+                this.requestOverviewData[0].tatol = parseInt(
+                  res.data.data.result[0].value[1]
+                )
+              } else {
+                this.requestOverviewData[0].tatol = 0
+              }
+            })
+          this.$http
+            .get(
+              '/metrics/api/v1/query?query=sum(apigateway_http_status{code=~"^4..|^5.."} offset ' +
+                this.endAndstartTime.start +
+                ' - apigateway_http_status{code=~"^4..|^5.."} offset ' +
+                this.endAndstartTime.end +
+                ')&time=' +
+                this.endAndstartTime.end
+            )
+            .then((res) => {
+              if (res.data) {
+                this.requestOverviewData[1].tatol = parseInt(
+                  res.data.data.result[0].value[1]
+                )
+              } else {
+                this.requestOverviewData[1].tatol = 0
+              }
+            })
+        } else {
+          this.$http
+            .get(
+              '/metrics/api/v1/query?query=sum(apigateway_http_status)&time=' +
+                this.endAndstartTime.end
+            )
+            .then((res) => {
+              if (res.data.data.result[0]) {
+                this.requestOverviewData[0].tatol = parseInt(
+                  res.data.data.result[0].value[1]
+                )
+              } else {
+                this.requestOverviewData[0].tatol = 0
+              }
+            })
+          // 请求成功
+          this.$http
+            .get(
+              '/metrics/api/v1/query?query=sum(apigateway_http_status%7Bcode%3D~%22%5E2..%22%7D)&time=' +
+                this.endAndstartTime.end
+            )
+            .then((res) => {
+              if (res.data.data.result.length != 0) {
+                this.requestOverviewData[1].tatol = parseInt(
+                  res.data.data.result[0].value[1]
+                )
+                this.requestOverviewData[2].tatol =
+                  this.requestOverviewData[0].tatol -
+                  this.requestOverviewData[1].tatol
+              } else {
+                this.requestOverviewData[1].tatol = 0
+                this.requestOverviewData[2].tatol = 0
+              }
+            })
+          // 平均时延
+          this.$http
+            .get(
+              '/metrics/api/v1/query?query=histogram_quantile(0.99, sum(rate(apigateway_http_latency_bucket%5B1d%5D))%20by%20(le))&time=' +
+                this.endAndstartTime.end -
+                24 * 60 * 60
+            )
+            .then((res) => {
+              if (res.data.data.result[0]) {
+                debugger
+                this.requestOverviewData[3].tatol = parseInt(
+                  res.data.data.result[0].value[1]
+                )
+              } else {
+                this.requestOverviewData[3].tatol = 0
+              }
+            })
+          // 趋势接口
+          const starttime = parseInt(
+            (Date.parse(new Date()) - 168 * 60 * 60 * 1000) / 1000
+          )
+          // 失败
+          this.$http
+            .get(
+              '/metrics/api/v1/query_range?query=sum(increase(apigateway_http_status%7Bcode%3D~%22%5E4..%7C%5E5..%22%7D%5B1d%5D))&start=' +
+                starttime +
+                '&end=' +
+                this.endAndstartTime.end +
+                '&step=86400'
+            )
+            .then((res) => {
+              if (res.data.data.result[0]) {
+                res.data.data.result[0].values.map((item) => {
+                  this.qingQiuQuShiValue2.push(parseInt(item[1]))
+                  console.log(this.qingQiuQuShiTime)
+                })
+                this.myCharts1()
+                this.myCharts3()
+              } else {
+                this.requestOverviewData[0].tatol = 0
+              }
+            })
+          // 成功
+          this.$http
+            .get(
+              '/metrics/api/v1/query_range?query=sum(increase(apigateway_http_status%5B1d%5D))&start=' +
+                starttime +
+                '&end=' +
+                this.endAndstartTime.end +
+                '&step=' +
+                86400
+            )
+            .then((res) => {
+              if (res.data.data.result[0]) {
+                this.qingQiuQuShiTime = []
+                res.data.data.result[0].values.map((item, index) => {
+                  this.qingQiuQuShiTime.push(
+                    moment(item[0] * 1000).format('MM-DD')
+                  )
+                  this.qingQiuQuShiValue.push(
+                    parseInt(item[1]) - this.qingQiuQuShiValue2[index]
+                  )
+                  console.log(this.qingQiuQuShiTime)
+                })
+                this.myCharts1()
+                this.myCharts3()
+              } else {
+                this.requestOverviewData[0].tatol = 0
+              }
+            })
+          // 数据流量出口
+          this.$http
+            .get(
+              '/metrics/api/v1/query_range?query=sum(increase(apigateway_bandwidth%7Btype%3D%22egress%22%7D%5B1d%5D))&start=' +
+                starttime +
+                '&end=' +
+                this.endAndstartTime.end +
+                '&step=' +
+                86400
+            )
+            .then((res) => {
+              this.shuJuLiuLiang.chuvalue = []
+              this.shuJuLiuLiang.time = []
+              if (res.data.data.result[0]) {
+                res.data.data.result[0].values.map((item, index) => {
+                  this.shuJuLiuLiang.time.push(
+                    moment(item[0] * 1000).format('MM-DD')
+                  )
+                  this.shuJuLiuLiang.chuvalue.push(
+                    parseInt(item[1]) - this.qingQiuQuShiValue2[index]
+                  )
+                  console.log(this.qingQiuQuShiTime)
+                })
+                this.myCharts2()
+              } else {
+                this.requestOverviewData[0].tatol = 0
+              }
+            })
+          // 数据流量入口
+          this.$http
+            .get(
+              '/metrics/api/v1/query_range?query=sum(increase(apigateway_bandwidth%7Btype%3D%22ingress%22%7D%5B1d%5D))&start=' +
+                starttime +
+                '&end=' +
+                this.endAndstartTime.end +
+                '&step=' +
+                86400
+            )
+            .then((res) => {
+              this.shuJuLiuLiang.ruvalue = []
+              if (res.data.data.result[0]) {
+                res.data.data.result[0].values.map((item, index) => {
+                  this.shuJuLiuLiang.ruvalue.push(
+                    parseInt(item[1]) - this.qingQiuQuShiValue2[index]
+                  )
+                  console.log(this.qingQiuQuShiTime)
+                })
+                this.myCharts2()
+              } else {
+                this.requestOverviewData[0].tatol = 0
+              }
+            })
+          // 时延
+          this.$http
+            .get(
+              '/metrics/api/v1/query_range?query=histogram_quantile(0.99, sum(rate(apigateway_http_latency_bucket%7Btype%3D%22request%22%7D%5B1d%5D)) by (le))&start=' +
+                starttime +
+                '&end=' +
+                this.endAndstartTime.end +
+                '&step=' +
+                86400
+            )
+            .then((res) => {
+              debugger
+              if (res.data.data.result[0]) {
+                res.data.data.result[0].values.map((item, index) => {
+                  this.shuJuLiuLiang.ruvalue.push(
+                    parseInt(item[1]) - this.qingQiuQuShiValue2[index]
+                  )
+                  console.log(this.qingQiuQuShiTime)
+                })
+                this.myCharts2()
+              } else {
+                this.requestOverviewData[0].tatol = 0
+              }
+            })
+        }
+        console.log('this.endAndstartTime', this.endAndstartTime)
+      }
+    }
+  },
   computed: {},
   methods: {
     // echarts通用方法
@@ -236,7 +479,7 @@ export default {
                 color: '#ebebeb'
               }
             },
-            data: ['1', '2', '3', '4', '5', '6', '7', '8']
+            data: this.qingQiuQuShiTime
           }
         ],
         yAxis: [
@@ -313,7 +556,7 @@ export default {
                 borderWidth: 12
               }
             },
-            data: [20, 82, 91, 34, 50, 20, 10, 25]
+            data: this.qingQiuQuShiValue
           },
           {
             name: '失败次数',
@@ -357,7 +600,7 @@ export default {
                 borderWidth: 12
               }
             },
-            data: [20, 10, 25, 45, 22, 65, 22, 20]
+            data: this.qingQiuQuShiValue2
           }
         ]
       }
@@ -415,7 +658,7 @@ export default {
                 color: '#ebebeb'
               }
             },
-            data: ['1', '2', '3', '4', '5', '6', '7', '8']
+            data: this.shuJuLiuLiang.time
           }
         ],
         yAxis: [
@@ -492,7 +735,7 @@ export default {
                 borderWidth: 12
               }
             },
-            data: [20, 82, 91, 34, 50, 20, 10, 25]
+            data: this.shuJuLiuLiang.chuvalue
           },
           {
             name: '入口流量',
@@ -536,7 +779,7 @@ export default {
                 borderWidth: 12
               }
             },
-            data: [20, 10, 25, 45, 22, 65, 22, 20]
+            data: this.shuJuLiuLiang.ruvalue
           }
         ]
       }
@@ -594,7 +837,7 @@ export default {
                 color: '#ebebeb'
               }
             },
-            data: ['1', '2', '3', '4', '5', '6', '7', '8']
+            data: this.qingQiuQuShiTime
           }
         ],
         yAxis: [
@@ -671,7 +914,7 @@ export default {
                 borderWidth: 12
               }
             },
-            data: [20, 10, 25, 45, 22, 65, 22, 20]
+            data: this.qingQiuQuShiValue2
           }
         ]
       }

back/src/views/modules/sys/CapabilityOperationMonitoring/index.vue

@@ -5,15 +5,40 @@
       <h1 class="topTitle">能力运行平台</h1>
       <div class="topNav">
         <div class="topTab">
-          <div @click="timeSwitch('日')" :class="timeSwitchindex == '日' ? 'timeDown' : ''">当天</div>
+          <div
-          <div @click="timeSwitch('周')" :class="timeSwitchindex == '周' ? 'timeDown' : ''">最近一周</div>
+            @click="timeSwitch('日')"
-          <div @click="timeSwitch('月')" :class="timeSwitchindex == '月' ? 'timeDown' : ''">最近一月</div>
+            :class="timeSwitchindex == '日' ? 'timeDown' : ''"
+          >
+            当天
+          </div>
+          <div
+            @click="timeSwitch('周')"
+            :class="timeSwitchindex == '周' ? 'timeDown' : ''"
+          >
+            最近一周
+          </div>
+          <div
+            @click="timeSwitch('月')"
+            :class="timeSwitchindex == '月' ? 'timeDown' : ''"
+          >
+            最近一月
+          </div>
         </div>
         <div class="topTimme">
           <span>选择时间段</span>
-          <el-date-picker v-model="timeStart" type="date" placeholder="请选择起始时间" :picker-options="pickerOptions0">
+          <el-date-picker
+            v-model="timeStart"
+            type="date"
+            placeholder="请选择起始时间"
+            :picker-options="pickerOptions0"
+          >
           </el-date-picker>
-          <el-date-picker v-model="timeEnd" type="date" placeholder="请选择结束时间" :picker-options="pickerOptions1">
+          <el-date-picker
+            v-model="timeEnd"
+            type="date"
+            placeholder="请选择结束时间"
+            :picker-options="pickerOptions1"
+          >
           </el-date-picker>
           <el-button type="primary" round>确定</el-button>
         </div>
@@ -23,7 +48,9 @@
       <abnormal-situation></abnormal-situation>
     </div>
     <div class="capability-operation-monitoring-bottom">
-      <analysis-of-the-request></analysis-of-the-request>
+      <analysis-of-the-request
+        :callTheTrendData="callTheTrendData"
+      ></analysis-of-the-request>
     </div>
   </div>
 </template>
@@ -31,7 +58,6 @@
 <script>
 import AbnormalSituation from './components/AbnormalSituation.vue'
 import AnalysisOfTheRequest from './components/AnalysisOfTheRequest.vue'
-import * as moment from 'moment'
 export default {
   components: {
     AbnormalSituation,
@@ -55,7 +81,10 @@ export default {
           return time.getTime() < this.timeStart
         }
       },
-      callTheTrendData: []
+      callTheTrendData: {
+        start: '',
+        end: ''
+      }
     }
   },
   watch: {},
@@ -63,27 +92,27 @@ export default {
   methods: {
     timeSwitch (name) {
       this.timeSwitchindex = name
-      this.callTheTrendData = []
       if (name == '周') {
-        for (let i = 0; i < 7; i++) {
+        const start = parseInt(
-          const time = moment()
+          (Date.parse(new Date()) - 168 * 60 * 60 * 1000) / 1000
-            .subtract('days', 6 - i)
+        )
-            .format('MM-DD')
+        this.callTheTrendData.start = start
-          this.callTheTrendData.push(time)
+        console.log(
-        } console.log('time', this.callTheTrendData, name)
+          'this.callTheTrendData',
-      // callTheTrend(callTheTrendData.value)
+          parseInt((Date.parse(new Date()) - 168 * 60 * 60 * 1000) / 1000)
+        )
       } else if (name == '月') {
-        for (let i = 0; i < 31; i++) {
+        const start = parseInt(
-          const time = moment()
+          (Date.parse(new Date()) - 720 * 60 * 60 * 1000) / 1000
-            .subtract('days', 30 - i)
+        )
-            .format('MM-DD')
+        this.callTheTrendData.start = start
-          this.callTheTrendData.push(time)
+        console.log(
-        } console.log('time', this.callTheTrendData, name)
+          'this.callTheTrendData',
-      // callTheTrend(callTheTrendData.value)
+          parseInt((Date.parse(new Date()) - 720 * 60 * 60 * 1000) / 1000)
+        )
       } else {
-        const time = moment().startOf('day').format('YYYY-MM-DD 23:59:59')
+        this.callTheTrendData.start = Date.parse(new Date()) / 1000
-        this.callTheTrendData.push(time)
+        this.callTheTrendData.end = Date.parse(new Date()) / 1000
-        console.log(time, this.callTheTrendData)
       }
     }
   },
@@ -161,7 +190,6 @@ export default {
             display: none;
           }
         }
-
       }
     }
   }