Skip to content

N
nexpie-grafana-theme
Commit e3f45546 by Patrick O'Carroll
Options

migrated viewstatesrv to ts

parent ac17684f
Showing with 185 additions and 172 deletions
public/app/features/dashboard/all.ts
......@@ -9,7 +9,7 @@ import './save_modal';
import './shareModalCtrl';
import './shareSnapshotCtrl';
import './dashboard_srv';
import './viewStateSrv';
import './view_state_srv';
import './time_srv';
import './unsavedChangesSrv';
import './unsaved_changes_modal';
......
public/app/features/dashboard/viewStateSrv.js → public/app/features/dashboard/view_state_srv.ts
define([
'angular',
'lodash',
'jquery',
'app/core/config'
],
function (angular, _, $, config) {
'use strict';
config = config.default;
var module = angular.module('grafana.services');
module.factory('dashboardViewStateSrv', function($location, $timeout, $rootScope) {
// represents the transient view state
// like fullscreen panel & edit
function DashboardViewState($scope) {
var self = this;
self.state = {};
self.panelScopes = [];
self.$scope = $scope;
self.dashboard = $scope.dashboard;
$scope.onAppEvent('$routeUpdate', function() {
var urlState = self.getQueryStringState();
if (self.needsSync(urlState)) {
self.update(urlState, true);
import angular from "angular";
import _ from "lodash";
import config from "app/core/config";
// represents the transient view state
// like fullscreen panel & edit
export class DashboardViewState {
state: any;
panelScopes: any;
$scope: any;
dashboard: any;
editStateChanged: any;
fullscreenPanel: any;
oldTimeRange: any;
/** @ngInject */
constructor($scope, private $location, private $timeout, private $rootScope) {
var self = this;
self.state = {};
self.panelScopes = [];
self.$scope = $scope;
self.dashboard = $scope.dashboard;
$scope.onAppEvent("$routeUpdate", function() {
var urlState = self.getQueryStringState();
if (self.needsSync(urlState)) {
self.update(urlState, true);
}
});
$scope.onAppEvent("panel-change-view", function(evt, payload) {
self.update(payload);
});
$scope.onAppEvent("panel-initialized", function(evt, payload) {
self.registerPanel(payload.scope);
});
// this marks changes to location during this digest cycle as not to add history item
// dont want url changes like adding orgId to add browser history
$location.replace();
this.update(this.getQueryStringState());
}
needsSync(urlState) {
return _.isEqual(this.state, urlState) === false;
}
getQueryStringState() {
var state = this.$location.search();
state.panelId = parseInt(state.panelId) || null;
state.fullscreen = state.fullscreen ? true : null;
state.edit = state.edit === "true" || state.edit === true || null;
state.editview = state.editview || null;
state.orgId = config.bootData.user.orgId;
return state;
}
serializeToUrl() {
var urlState = _.clone(this.state);
urlState.fullscreen = this.state.fullscreen ? true : null;
urlState.edit = this.state.edit ? true : null;
return urlState;
}
update(state, fromRouteUpdated?) {
// implement toggle logic
if (state.toggle) {
delete state.toggle;
if (this.state.fullscreen && state.fullscreen) {
if (this.state.edit === state.edit) {
state.fullscreen = !state.fullscreen;
}
});
}
}
$scope.onAppEvent('panel-change-view', function(evt, payload) {
self.update(payload);
});
// remember if editStateChanged
this.editStateChanged = state.edit !== this.state.edit;
$scope.onAppEvent('panel-initialized', function(evt, payload) {
self.registerPanel(payload.scope);
});
_.extend(this.state, state);
this.dashboard.meta.fullscreen = this.state.fullscreen;
// this marks changes to location during this digest cycle as not to add history item
// dont want url changes like adding orgId to add browser history
$location.replace();
this.update(this.getQueryStringState());
if (!this.state.fullscreen) {
this.state.fullscreen = null;
this.state.edit = null;
// clear panel id unless in solo mode
if (!this.dashboard.meta.soloMode) {
this.state.panelId = null;
}
}
DashboardViewState.prototype.needsSync = function(urlState) {
return _.isEqual(this.state, urlState) === false;
};
DashboardViewState.prototype.getQueryStringState = function() {
var state = $location.search();
state.panelId = parseInt(state.panelId) || null;
state.fullscreen = state.fullscreen ? true : null;
state.edit = (state.edit === "true" || state.edit === true) || null;
state.editview = state.editview || null;
state.orgId = config.bootData.user.orgId;
return state;
};
DashboardViewState.prototype.serializeToUrl = function() {
var urlState = _.clone(this.state);
urlState.fullscreen = this.state.fullscreen ? true : null;
urlState.edit = this.state.edit ? true : null;
return urlState;
};
DashboardViewState.prototype.update = function(state, fromRouteUpdated) {
// implement toggle logic
if (state.toggle) {
delete state.toggle;
if (this.state.fullscreen && state.fullscreen) {
if (this.state.edit === state.edit) {
state.fullscreen = !state.fullscreen;
}
}
}
// if no edit state cleanup tab parm
if (!this.state.edit) {
delete this.state.tab;
}
// remember if editStateChanged
this.editStateChanged = state.edit !== this.state.edit;
// do not update url params if we are here
// from routeUpdated event
if (fromRouteUpdated !== true) {
this.$location.search(this.serializeToUrl());
}
this.syncState();
}
syncState() {
if (this.panelScopes.length === 0) {
return;
}
_.extend(this.state, state);
this.dashboard.meta.fullscreen = this.state.fullscreen;
if (this.dashboard.meta.fullscreen) {
var panelScope = this.getPanelScope(this.state.panelId);
if (!panelScope) {
return;
}
if (!this.state.fullscreen) {
this.state.fullscreen = null;
this.state.edit = null;
// clear panel id unless in solo mode
if (!this.dashboard.meta.soloMode) {
this.state.panelId = null;
if (this.fullscreenPanel) {
// if already fullscreen
if (
this.fullscreenPanel === panelScope &&
this.editStateChanged === false
) {
return;
} else {
this.leaveFullscreen(false);
}
}
// if no edit state cleanup tab parm
if (!this.state.edit) {
delete this.state.tab;
if (!panelScope.ctrl.editModeInitiated) {
panelScope.ctrl.initEditMode();
}
// do not update url params if we are here
// from routeUpdated event
if (fromRouteUpdated !== true) {
$location.search(this.serializeToUrl());
if (!panelScope.ctrl.fullscreen) {
this.enterFullscreen(panelScope);
}
} else if (this.fullscreenPanel) {
this.leaveFullscreen(true);
}
}
this.syncState();
};
getPanelScope(id) {
return _.find(this.panelScopes, function(panelScope) {
return panelScope.ctrl.panel.id === id;
});
}
DashboardViewState.prototype.syncState = function() {
if (this.panelScopes.length === 0) { return; }
leaveFullscreen(render) {
var self = this;
var ctrl = self.fullscreenPanel.ctrl;
if (this.dashboard.meta.fullscreen) {
var panelScope = this.getPanelScope(this.state.panelId);
if (!panelScope) {
return;
}
ctrl.editMode = false;
ctrl.fullscreen = false;
if (this.fullscreenPanel) {
// if already fullscreen
if (this.fullscreenPanel === panelScope && this.editStateChanged === false) {
return;
} else {
this.leaveFullscreen(false);
}
}
this.dashboard.setViewMode(ctrl.panel, false, false);
this.$scope.appEvent("panel-fullscreen-exit", { panelId: ctrl.panel.id });
if (!panelScope.ctrl.editModeInitiated) {
panelScope.ctrl.initEditMode();
}
if (!render) {
return false;
}
if (!panelScope.ctrl.fullscreen) {
this.enterFullscreen(panelScope);
}
} else if (this.fullscreenPanel) {
this.leaveFullscreen(true);
this.$timeout(function() {
if (self.oldTimeRange !== ctrl.range) {
self.$rootScope.$broadcast("refresh");
} else {
self.$rootScope.$broadcast("render");
}
};
delete self.fullscreenPanel;
});
return true;
}
DashboardViewState.prototype.getPanelScope = function(id) {
return _.find(this.panelScopes, function(panelScope) {
return panelScope.ctrl.panel.id === id;
});
};
enterFullscreen(panelScope) {
var ctrl = panelScope.ctrl;
DashboardViewState.prototype.leaveFullscreen = function(render) {
var self = this;
var ctrl = self.fullscreenPanel.ctrl;
ctrl.editMode = this.state.edit && this.dashboard.meta.canEdit;
ctrl.fullscreen = true;
ctrl.editMode = false;
ctrl.fullscreen = false;
this.oldTimeRange = ctrl.range;
this.fullscreenPanel = panelScope;
this.dashboard.setViewMode(ctrl.panel, false, false);
this.$scope.appEvent('panel-fullscreen-exit', {panelId: ctrl.panel.id});
this.dashboard.setViewMode(ctrl.panel, true, ctrl.editMode);
this.$scope.appEvent("panel-fullscreen-enter", { panelId: ctrl.panel.id });
}
if (!render) { return false;}
registerPanel(panelScope) {
var self = this;
self.panelScopes.push(panelScope);
$timeout(function() {
if (self.oldTimeRange !== ctrl.range) {
$rootScope.$broadcast('refresh');
if (!self.dashboard.meta.soloMode) {
if (self.state.panelId === panelScope.ctrl.panel.id) {
if (self.state.edit) {
panelScope.ctrl.editPanel();
} else {
$rootScope.$broadcast('render');
}
delete self.fullscreenPanel;
});
};
DashboardViewState.prototype.enterFullscreen = function(panelScope) {
var ctrl = panelScope.ctrl;
ctrl.editMode = this.state.edit && this.dashboard.meta.canEdit;
ctrl.fullscreen = true;
this.oldTimeRange = ctrl.range;
this.fullscreenPanel = panelScope;
this.dashboard.setViewMode(ctrl.panel, true, ctrl.editMode);
this.$scope.appEvent('panel-fullscreen-enter', {panelId: ctrl.panel.id});
};
DashboardViewState.prototype.registerPanel = function(panelScope) {
var self = this;
self.panelScopes.push(panelScope);
if (!self.dashboard.meta.soloMode) {
if (self.state.panelId === panelScope.ctrl.panel.id) {
if (self.state.edit) {
panelScope.ctrl.editPanel();
} else {
panelScope.ctrl.viewPanel();
}
panelScope.ctrl.viewPanel();
}
}
}
var unbind = panelScope.$on('$destroy', function() {
self.panelScopes = _.without(self.panelScopes, panelScope);
unbind();
});
};
return {
create: function($scope) {
return new DashboardViewState($scope);
}
};
var unbind = panelScope.$on("$destroy", function() {
self.panelScopes = _.without(self.panelScopes, panelScope);
unbind();
});
}
}
/** @ngInject */
export function dashboardViewStateSrv($location, $timeout, $rootScope) {
return {
create: function($scope) {
return new DashboardViewState($scope, $location, $timeout, $rootScope);
}
};
}
});
});
angular
.module("grafana.services")
.factory("dashboardViewStateSrv", dashboardViewStateSrv);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment