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

    <el-row :gutter="100">
      <el-col :span="11" :offset="1">
        <h4>调度次数</h4>
      </el-col>
      <el-col :span="6" :offset="1">
        <h4>调度速率</h4>
      </el-col>
    </el-row>

    <el-row type="flex" :gutter="90">
      <el-col :span="11" :offset="1">
        <el-card shadow="hover" body-style="padding:1px">
          <scheduler-attempts
            :charData="scheduAttempts"
            :id="'scheduler1'"
          ></scheduler-attempts>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card shadow="hover" body-style="padding:1px">
          <schedu-rate-view
            :charData="scheduRate"
            :id="'scheduler2'"
          ></schedu-rate-view>
        </el-card>
      </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">
          <!-- <apiserver-view :charData="apiserverRate" :id="'api2'"></apiserver-view> -->
          <scheduler
            :charData="schedulerLatency"
            :id="'scheduler3'"
          ></scheduler>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script >
import scheduler from "./schedulerLatencyView.vue";
import schedulerAttempts from "./schedulerScheduleLattempts.vue";
import scheduRateView from "./scheduRateView.vue";

export default {
  components: {
    scheduler,
    schedulerAttempts,
    scheduRateView,
  },
  computed: {
    //scheduler_e2e_scheduling_latency调度延迟
    //scheduler_e2e_scheduling_latency

    schedulerLatency() {
      var cpuUtil = [];
      const physical = this.$store.state.monitor.schedulerMonitor;

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

    scheduAttempts() {
      var cpuUtil = [];
      const physical = this.$store.state.monitor.schedulerMonitor;

      cpuUtil.splice(0, cpuUtil.length); //清零
      if (physical.scheduler_schedule_attempts) {
        physical.scheduler_schedule_attempts.forEach((test) => {
          var time1 = this.formatTime(test[0]);
          var socre = this.formPointNumber(test[1]);
          cpuUtil.push({ name: time1, value: socre });
        });
      }
      return cpuUtil;
    },
    //scheduler_schedule_attempt_rate  调度速率
    scheduRate() {
      var cpuUtil = [];
      const physical = this.$store.state.monitor.schedulerMonitor;

      cpuUtil.splice(0, cpuUtil.length); //清零
      if (physical.scheduler_schedule_attempt_rate) {
        physical.scheduler_schedule_attempt_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
      //?start=1629005964&end=1629011964&step=120s&times=50&metrics_filter=scheduler_schedule_attempts%7Cscheduler_schedule_attempt_rate%7Cscheduler_e2e_scheduling_latency%7Cscheduler_e2e_scheduling_latency_quantile%24

      const physical = {};
      var nowtime = Math.round(new Date().getTime() / 1000).toString();
      this.$http({
        url: "/kubesphereApi/kapis/monitoring.kubesphere.io/v1alpha3/components/scheduler",
        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",
            "scheduler_schedule_attempts|scheduler_schedule_attempt_rate|scheduler_e2e_scheduling_latency|scheduler_e2e_scheduling_latency_quantile$",
        }),
      }).then(({ data }) => {
        console.log("data", data);
        data.results.forEach((element) => {
          // console.log("results");
          element.data.result.forEach((test) => {
            //   console.log("result");
            //console.log(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(() => {
              physical[key] = value;
            });
          });
        });

        this.$store.dispatch("monitor/setSchedulerMonitor", physical);
        //this.physical=physical;
      });
    },
  },
};
</script>

