<template>
    <div>
        <el-row>
      <el-col :span="22">
        <h3>APIServer监控</h3>
      </el-col>
    </el-row>

   <el-row :gutter="100">
      <el-col :span="11" :offset="1">
        <h4>请求延迟毫秒</h4>
      </el-col>
    </el-row>

     <el-row type="flex" :gutter="90">
      <el-col :span="20" :offset="1">
        <el-card shadow="hover" body-style="padding:1px">
         <api-request-view :charData="apiserverRequest" :id="'api1'"></api-request-view>
        </el-card>
      </el-col>
     </el-row>

<el-row :gutter="100">
      <el-col :span="11" :offset="1">
        <h4>api调用速率（每秒请求次数）</h4>
      </el-col>
    </el-row>

     <el-row type="flex" :gutter="90">
      <el-col :span="20" :offset="1">
        <el-card shadow="hover" body-style="padding:1px">
          <apiserver-view :charData="apiserverRate" :id="'api2'"></apiserver-view>
        </el-card>
      </el-col>
     </el-row>
    </div>
</template>

<script >
import apiserverView from "./apiRateView.vue";
import apiRequestView from "./apiRequestView.vue"

export default{
    components:{
       apiserverView,
       apiRequestView,
    },
    computed:{
//api请求
  apiserverRequest() {
      var cpuUtil = [];
  
      const physical = this.$store.state.monitor.apiServerMonitor;
      // console.log(physical);
      // console.log("----------1--1--2-----");
         cpuUtil.splice(0, cpuUtil.length); //清零
         
       if(physical.apiserver_request_by_verb_latencies_PUT){
         //PUT
         //apiserver_request_by_verb_latencies_PUT
         
        
        physical.apiserver_request_by_verb_latencies_PUT.forEach((test) => {
           
        var time1 = this.formatTime(test[0]);
        var socre =this.formPointNumber(test[1]);
        cpuUtil.push({ name: time1, value: socre ,type:'PUT'});
      });
     
      //GET
        physical.apiserver_request_by_verb_latencies_GET.forEach((test) => {
             
        var time1 = this.formatTime(test[0]);
        var socre =this.formPointNumber(test[1]);
        cpuUtil.push({ name: time1, value: socre ,type: 'GET'});
     
       });
       //DELETE
      physical.apiserver_request_by_verb_latencies_DELETE.forEach((test) => {
        var time1 = this.formatTime(test[0]);
        var socre =this.formPointNumber(test[1]);
        cpuUtil.push({ name: time1, value: socre ,type: 'DELETE'});
    
       });
       //PATCH

       physical.apiserver_request_by_verb_latencies_PATCH.forEach((test) => {
           
        var time1 = this.formatTime(test[0]);
        var socre =this.formPointNumber(test[1]);
        cpuUtil.push({ name: time1, value: socre ,type: 'PATCH'});
     
       });

       //POST
       //apiserver_request__by_verb_latencies_POST
         physical.apiserver_request_by_verb_latencies_POST.forEach((test) => {
              
        var time1 = this.formatTime(test[0]);
        var socre =this.formPointNumber(test[1]);
        cpuUtil.push({ name: time1, value: socre ,type:'POST'});
     
       });
       //latencies
       physical.apiserver_request_latencies.forEach((test) => {
             
        var time1 = this.formatTime(test[0]);
        var socre =this.formPointNumber(test[1]);
        cpuUtil.push({ name: time1, value: socre ,type:'总均值'});
         });
     


       }
      return cpuUtil;
    },
 //api调用速率（每秒请求次数）
    apiserverRate() {
      var cpuUtil = [];
  
      const physical = this.$store.state.monitor.apiServerMonitor;

         cpuUtil.splice(0, cpuUtil.length); //清零
       if(physical.apiserver_request_rate){
           physical.apiserver_request_rate.forEach((test) => {
        var time1 = this.formatTime(test[0]);
        var socre =this.formPointNumber(test[1]);
        cpuUtil.push({ name: time1, value: socre });
      });

       }
  
      return cpuUtil;
    },




    },
    created(){
       this.getApiServerMonitor();  
    },
     methods: {
    init() {},
    //形成百分数
    formatNumber(num) {
      return num * 100;
    },

    //处理小数点后留两位
    formPointNumber(num) {
      return Math.floor(num * 100) / 100;
    },
    formatNumberBinary() {},
    //设置时间格式
    formatTime(time) {
      var newDate = new Date();
      Date.prototype.toLocaleString = function () {
        return (
          this.getHours() + ":" + this.getMinutes() + ":" + this.getSeconds()
        );
      };
      newDate.setTime(time * 1000);
      return newDate.toLocaleString();
    },
      
    //获取数据
    getApiServerMonitor() {
        //start=1628951076&end=1628957076&step=120s&times=50&metrics_filter=apiserver_request_latencies%7Capiserver_request_by_verb_latencies%7Capiserver_request_rate%24
      const physical = {};
      var nowtime = Math.round(new Date().getTime() / 1000).toString();
      this.$http({
        url: '/kubesphereApi/kapis/monitoring.kubesphere.io/v1alpha3/components/apiserver',
        method: "get",
        headers: {
          Authorization: this.$store.state.connect.Authentation,
        },
        params: this.$http.adornParams({
          start: nowtime - 4000,
          end: nowtime,
          step: "300s",
          times: 50,
          metrics_filter:
           "apiserver_request_latencies|apiserver_request_by_verb_latencies|apiserver_request_rate$",
     //   "apiserver_request_by_verb_latencies",
  
        }),
      }).then(({ data }) => {

        data.results.forEach((element) => {
          
          element.data.result.forEach((test)=>{
 
            var key;
            if(!test.metric.verb){
              key = element.metric_name;
            }else{
                key = element.metric_name+"_"+test.metric.verb;
            }

          const value = test.values;
               value.forEach((test1) => {


            physical[key] = value;
                });
          });
        

     
        });


        this.$store.dispatch("monitor/setApiServerMonitor", physical);
        //this.physical=physical;

      });
    },
  },

}
</script>

