energylink/public/app/features/panel/metrics_panel_ctrl.ts

import config from "app/core/config";
import $ from "jquery";
import _ from "lodash";
import kbn from "app/core/utils/kbn";
import { PanelCtrl } from "app/features/panel/panel_ctrl";

import * as rangeUtil from "app/core/utils/rangeutil";
import * as dateMath from "app/core/utils/datemath";

import { metricsTabDirective } from "./metrics_tab";

class MetricsPanelCtrl extends PanelCtrl {
  scope: any;
  datasource: any;
  datasourceName: any;
  $q: any;
  $timeout: any;
  datasourceSrv: any;
  timeSrv: any;
  templateSrv: any;
  timing: any;
  range: any;
  interval: any;
  intervalMs: any;
  resolution: any;
  timeInfo: any;
  skipDataOnInit: boolean;
  dataStream: any;
  dataSubscription: any;
  dataList: any;
  nextRefId: string;

  constructor($scope, $injector) {
    super($scope, $injector);

    // make metrics tab the default
    this.editorTabIndex = 1;
    this.$q = $injector.get("$q");
    this.datasourceSrv = $injector.get("datasourceSrv");
    this.timeSrv = $injector.get("timeSrv");
    this.templateSrv = $injector.get("templateSrv");
    this.scope = $scope;
    this.panel.datasource = this.panel.datasource || null;

    if (!this.panel.targets) {
      this.panel.targets = [{}];
    }

    this.events.on("refresh", this.onMetricsPanelRefresh.bind(this));
    this.events.on(
      "init-edit-mode",
      this.onInitMetricsPanelEditMode.bind(this)
    );
    this.events.on("panel-teardown", this.onPanelTearDown.bind(this));
  }

  private onPanelTearDown() {
    if (this.dataSubscription) {
      this.dataSubscription.unsubscribe();
      this.dataSubscription = null;
    }
  }

  private onInitMetricsPanelEditMode() {
    this.addEditorTab("Metrics", metricsTabDirective);
    this.addEditorTab(
      "Time range",
      "public/app/features/panel/partials/panelTime.html"
    );
  }

  private onMetricsPanelRefresh() {
    // ignore fetching data if another panel is in fullscreen
    if (this.otherPanelInFullscreenMode()) {
      return;
    }

    // if we have snapshot data use that
    if (this.panel.snapshotData) {
      this.updateTimeRange();
      var data = this.panel.snapshotData;
      // backward compatability
      if (!_.isArray(data)) {
        data = data.data;
      }

      this.events.emit("data-snapshot-load", data);
      return;
    }

    // // ignore if we have data stream
    if (this.dataStream) {
      return;
    }

    // clear loading/error state
    delete this.error;
    this.loading = true;

    // load datasource service
    this.setTimeQueryStart();
    this.datasourceSrv
      .get(this.panel.datasource)
      .then(this.updateTimeRange.bind(this))
      .then(this.issueQueries.bind(this))
      .then(this.handleQueryResult.bind(this))
      .catch(err => {
        // if cancelled  keep loading set to true
        if (err.cancelled) {
          console.log("Panel request cancelled", err);
          return;
        }

        this.loading = false;
        this.error = err.message || "Request Error";
        this.inspector = { error: err };

        if (err.data) {
          if (err.data.message) {
            this.error = err.data.message;
          }
          if (err.data.error) {
            this.error = err.data.error;
          }
        }

        this.events.emit("data-error", err);
        console.log("Panel data error:", err);
      });
  }

  setTimeQueryStart() {
    this.timing.queryStart = new Date().getTime();
  }

  setTimeQueryEnd() {
    this.timing.queryEnd = new Date().getTime();
  }

  updateTimeRange(datasource?) {
    this.datasource = datasource || this.datasource;
    this.range = this.timeSrv.timeRange();

    this.applyPanelTimeOverrides();

    if (this.panel.maxDataPoints) {
      this.resolution = this.panel.maxDataPoints;
    } else {
      this.resolution = Math.ceil(
        $(window).width() * (this.panel.gridPos.w / 24)
      );
    }

    this.calculateInterval();

    return this.datasource;
  }

  calculateInterval() {
    var intervalOverride = this.panel.interval;

    // if no panel interval check datasource
    if (intervalOverride) {
      intervalOverride = this.templateSrv.replace(
        intervalOverride,
        this.panel.scopedVars
      );
    } else if (this.datasource && this.datasource.interval) {
      intervalOverride = this.datasource.interval;
    }

    var res = kbn.calculateInterval(
      this.range,
      this.resolution,
      intervalOverride
    );
    this.interval = res.interval;
    this.intervalMs = res.intervalMs;
  }

  applyPanelTimeOverrides() {
    this.timeInfo = "";

    // check panel time overrrides
    if (this.panel.timeFrom) {
      var timeFromInterpolated = this.templateSrv.replace(
        this.panel.timeFrom,
        this.panel.scopedVars
      );
      var timeFromInfo = rangeUtil.describeTextRange(timeFromInterpolated);
      if (timeFromInfo.invalid) {
        this.timeInfo = "invalid time override";
        return;
      }

      if (_.isString(this.range.raw.from)) {
        var timeFromDate = dateMath.parse(timeFromInfo.from);
        this.timeInfo = timeFromInfo.display;
        this.range.from = timeFromDate;
        this.range.to = dateMath.parse(timeFromInfo.to);
        this.range.raw.from = timeFromInfo.from;
        this.range.raw.to = timeFromInfo.to;
      }
    }

    if (this.panel.timeShift) {
      var timeShiftInterpolated = this.templateSrv.replace(
        this.panel.timeShift,
        this.panel.scopedVars
      );
      var timeShiftInfo = rangeUtil.describeTextRange(timeShiftInterpolated);
      if (timeShiftInfo.invalid) {
        this.timeInfo = "invalid timeshift";
        return;
      }

      var timeShift = "-" + timeShiftInterpolated;
      this.timeInfo += " timeshift " + timeShift;
      this.range.from = dateMath.parseDateMath(
        timeShift,
        this.range.from,
        false
      );
      this.range.to = dateMath.parseDateMath(timeShift, this.range.to, true);
      this.range.raw = { from: this.range.from, to: this.range.to };
    }

    if (this.panel.hideTimeOverride) {
      this.timeInfo = "";
    }
  }

  issueQueries(datasource) {
    this.datasource = datasource;

    if (!this.panel.targets || this.panel.targets.length === 0) {
      return this.$q.when([]);
    }

    // make shallow copy of scoped vars,
    // and add built in variables interval and interval_ms
    var scopedVars = Object.assign({}, this.panel.scopedVars, {
      __interval: { text: this.interval, value: this.interval },
      __interval_ms: { text: this.intervalMs, value: this.intervalMs }
    });

    var metricsQuery = {
      timezone: this.dashboard.getTimezone(),
      panelId: this.panel.id,
      range: this.range,
      rangeRaw: this.range.raw,
      interval: this.interval,
      intervalMs: this.intervalMs,
      targets: this.panel.targets,
      maxDataPoints: this.resolution,
      scopedVars: scopedVars,
      cacheTimeout: this.panel.cacheTimeout
    };

    return datasource.query(metricsQuery);
  }

  handleQueryResult(result) {
    this.setTimeQueryEnd();
    this.loading = false;

    // check for if data source returns subject
    if (result && result.subscribe) {
      this.handleDataStream(result);
      return;
    }

    if (this.dashboard.snapshot) {
      this.panel.snapshotData = result.data;
    }

    if (!result || !result.data) {
      console.log(
        "Data source query result invalid, missing data field:",
        result
      );
      result = { data: [] };
    }

    this.events.emit("data-received", result.data);
  }

  handleDataStream(stream) {
    // if we already have a connection
    if (this.dataStream) {
      console.log("two stream observables!");
      return;
    }

    this.dataStream = stream;
    this.dataSubscription = stream.subscribe({
      next: data => {
        console.log("dataSubject next!");
        if (data.range) {
          this.range = data.range;
        }
        this.events.emit("data-received", data.data);
      },
      error: error => {
        this.events.emit("data-error", error);
        console.log("panel: observer got error");
      },
      complete: () => {
        console.log("panel: observer got complete");
        this.dataStream = null;
      }
    });
  }

  setDatasource(datasource) {
    // switching to mixed
    if (datasource.meta.mixed) {
      _.each(this.panel.targets, target => {
        target.datasource = this.panel.datasource;
        if (!target.datasource) {
          target.datasource = config.defaultDatasource;
        }
      });
    } else if (this.datasource && this.datasource.meta.mixed) {
      _.each(this.panel.targets, target => {
        delete target.datasource;
      });
    }

    this.panel.datasource = datasource.value;
    this.datasourceName = datasource.name;
    this.datasource = null;
    this.refresh();
  }

  addQuery(target) {
    target.refId = this.dashboard.getNextQueryLetter(this.panel);

    this.panel.targets.push(target);
    this.nextRefId = this.dashboard.getNextQueryLetter(this.panel);
  }

  removeQuery(target) {
    var index = _.indexOf(this.panel.targets, target);
    this.panel.targets.splice(index, 1);
    this.nextRefId = this.dashboard.getNextQueryLetter(this.panel);
    this.refresh();
  }

  moveQuery(target, direction) {
    var index = _.indexOf(this.panel.targets, target);
    _.move(this.panel.targets, index, index + direction);
  }
}

export { MetricsPanelCtrl };