grafana/public/app/plugins/panel/gettingstarted/module.ts

///<reference path="../../../headers/common.d.ts" />

import { PanelCtrl } from "app/plugins/sdk";

import { contextSrv } from "app/core/core";

class GettingStartedPanelCtrl extends PanelCtrl {
  static templateUrl = "public/app/plugins/panel/gettingstarted/module.html";
  checksDone: boolean;
  stepIndex: number;
  steps: any;

  /** @ngInject **/
  constructor(
    $scope,
    $injector,
    private backendSrv,
    datasourceSrv,
    private $q
  ) {
    super($scope, $injector);

    this.stepIndex = 0;
    this.steps = [];

    this.steps.push({
      title: "Install Grafana",
      icon: "icon-gf icon-gf-check",
      href: "http://docs.grafana.org/",
      target: "_blank",
      note: "Review the installation docs",
      check: () => $q.when(true)
    });

    this.steps.push({
      title: "Create your first data source",
      cta: "Add data source",
      icon: "icon-gf icon-gf-datasources",
      href: "datasources/new?gettingstarted",
      check: () => {
        return $q.when(
          datasourceSrv.getMetricSources().filter(item => {
            return item.meta.builtIn !== true;
          }).length > 0
        );
      }
    });

    this.steps.push({
      title: "Create your first dashboard",
      cta: "New dashboard",
      icon: "icon-gf icon-gf-dashboard",
      href: "dashboard/new?gettingstarted",
      check: () => {
        return this.backendSrv.search({ limit: 1 }).then(result => {
          return result.length > 0;
        });
      }
    });

    this.steps.push({
      title: "Invite your team",
      cta: "Add Users",
      icon: "icon-gf icon-gf-users",
      href: "org/users?gettingstarted",
      check: () => {
        return this.backendSrv.get("/api/org/users").then(res => {
          return res.length > 1;
        });
      }
    });

    this.steps.push({
      title: "Install apps & plugins",
      cta: "Explore plugin repository",
      icon: "icon-gf icon-gf-apps",
      href: "https://grafana.com/plugins?utm_source=grafana_getting_started",
      check: () => {
        return this.backendSrv
          .get("/api/plugins", { embedded: 0, core: 0 })
          .then(plugins => {
            return plugins.length > 0;
          });
      }
    });
  }

  $onInit() {
    this.stepIndex = -1;
    return this.nextStep().then(res => {
      this.checksDone = true;
    });
  }

  nextStep() {
    if (this.stepIndex === this.steps.length - 1) {
      return this.$q.when();
    }

    this.stepIndex += 1;
    var currentStep = this.steps[this.stepIndex];
    return currentStep.check().then(passed => {
      if (passed) {
        currentStep.cssClass = "completed";
        return this.nextStep();
      }

      currentStep.cssClass = "active";
      return this.$q.when();
    });
  }

  dismiss() {
    this.dashboard.removePanel(this.panel, false);

    this.backendSrv
      .request({
        method: "PUT",
        url: "/api/user/helpflags/1",
        showSuccessAlert: false
      })
      .then(res => {
        contextSrv.user.helpFlags1 = res.helpFlags1;
      });
  }
}

export { GettingStartedPanelCtrl, GettingStartedPanelCtrl as PanelCtrl };