energylink/public/app/features/dashboard/settings/settings.ts

import { coreModule, appEvents, contextSrv } from "app/core/core";
import { DashboardModel } from "../dashboard_model";
import $ from "jquery";
import _ from "lodash";

export class SettingsCtrl {
  dashboard: DashboardModel;
  isOpen: boolean;
  viewId: string;
  json: string;
  alertCount: number;
  canSaveAs: boolean;
  canDelete: boolean;
  sections: any[];

  /** @ngInject */
  constructor(
    private $scope,
    private $location,
    private $rootScope,
    private backendSrv,
    private dashboardSrv
  ) {
    // temp hack for annotations and variables editors
    // that rely on inherited scope
    $scope.dashboard = this.dashboard;

    this.$scope.$on("$destroy", () => {
      this.dashboard.updateSubmenuVisibility();
      this.$rootScope.$broadcast("refresh");
    });

    this.canSaveAs = contextSrv.isEditor;
    this.canDelete = this.dashboard.meta.canSave;

    this.buildSectionList();
    this.onRouteUpdated();

    $rootScope.onAppEvent(
      "$routeUpdate",
      this.onRouteUpdated.bind(this),
      $scope
    );
  }

  buildSectionList() {
    this.sections = [];

    if (this.dashboard.meta.canEdit) {
      this.sections.push({
        title: "General",
        id: "settings",
        icon: "gicon gicon-preferences"
      });
      this.sections.push({
        title: "Annotations",
        id: "annotations",
        icon: "gicon gicon-annotation"
      });
      this.sections.push({
        title: "Variables",
        id: "templating",
        icon: "gicon gicon-variable"
      });
      this.sections.push({
        title: "Links",
        id: "links",
        icon: "gicon gicon-link"
      });
    }

    if (this.dashboard.id && this.dashboard.meta.canSave) {
      this.sections.push({
        title: "Versions",
        id: "versions",
        icon: "fa fa-fw fa-history"
      });
    }

    if (this.dashboard.meta.canMakeEditable) {
      this.sections.push({
        title: "Make Editable",
        icon: "fa fa-fw fa-edit",
        id: "make_editable"
      });
    }

    this.sections.push({
      title: "View JSON",
      id: "view_json",
      icon: "gicon gicon-json"
    });

    const params = this.$location.search();
    const url = this.$location.path();

    for (let section of this.sections) {
      const sectionParams = _.defaults({ editview: section.id }, params);
      section.url = url + "?" + $.param(sectionParams);
    }
  }

  onRouteUpdated() {
    this.viewId = this.$location.search().editview;

    if (this.viewId) {
      this.json = JSON.stringify(this.dashboard.getSaveModelClone(), null, 2);
    }

    if (this.viewId === "settings" && this.dashboard.meta.canMakeEditable) {
      this.viewId = "make_editable";
    }

    const currentSection = _.find(this.sections, { id: this.viewId });
    if (!currentSection) {
      this.sections.unshift({
        title: "Not found",
        id: "404",
        icon: "fa fa-fw fa-warning"
      });
      this.viewId = "404";
    }
  }

  openSaveAsModal() {
    this.dashboardSrv.showSaveAsModal();
  }

  hideSettings() {
    var urlParams = this.$location.search();
    delete urlParams.editview;
    setTimeout(() => {
      this.$rootScope.$apply(() => {
        this.$location.search(urlParams);
      });
    });
  }

  makeEditable() {
    this.dashboard.editable = true;

    return this.dashboardSrv
      .saveDashboard({ makeEditable: true, overwrite: false })
      .then(() => {
        // force refresh whole page
        window.location.href = window.location.href;
      });
  }

  deleteDashboard() {
    var confirmText = "";
    var text2 = this.dashboard.title;

    const alerts = _.sumBy(this.dashboard.panels, panel => {
      return panel.alert ? 1 : 0;
    });

    if (alerts > 0) {
      confirmText = "DELETE";
      text2 = `This dashboard contains ${alerts} alerts. Deleting this dashboard will also delete those alerts`;
    }

    appEvents.emit("confirm-modal", {
      title: "Delete",
      text: "Do you want to delete this dashboard?",
      text2: text2,
      icon: "fa-trash",
      confirmText: confirmText,
      yesText: "Delete",
      onConfirm: () => {
        this.dashboard.meta.canSave = false;
        this.deleteDashboardConfirmed();
      }
    });
  }

  deleteDashboardConfirmed() {
    this.backendSrv.deleteDashboard(this.dashboard.meta.slug).then(() => {
      appEvents.emit("alert-success", [
        "Dashboard Deleted",
        this.dashboard.title + " has been deleted"
      ]);
      this.$location.url("/");
    });
  }

  onFolderChange(folder) {
    this.dashboard.folderId = folder.id;
    this.dashboard.meta.folderId = folder.id;
    this.dashboard.meta.folderTitle = folder.title;
  }
}

export function dashboardSettings() {
  return {
    restrict: "E",
    templateUrl: "public/app/features/dashboard/settings/settings.html",
    controller: SettingsCtrl,
    bindToController: true,
    controllerAs: "ctrl",
    transclude: true,
    scope: { dashboard: "=" }
  };
}

coreModule.directive("dashboardSettings", dashboardSettings);