mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
migrated viewstatesrv to ts
This commit is contained in:
Patrick O'Carroll
parent
ac17684f50
commit
e3f45546d1
@ -9,7 +9,7 @@ import './save_modal';
|
|||||||
import './shareModalCtrl';
|
import './shareModalCtrl';
|
||||||
import './shareSnapshotCtrl';
|
import './shareSnapshotCtrl';
|
||||||
import './dashboard_srv';
|
import './dashboard_srv';
|
||||||
import './viewStateSrv';
|
import './view_state_srv';
|
||||||
import './time_srv';
|
import './time_srv';
|
||||||
import './unsavedChangesSrv';
|
import './unsavedChangesSrv';
|
||||||
import './unsaved_changes_modal';
|
import './unsaved_changes_modal';
|
||||||
|
|||||||
@ -1,204 +0,0 @@
|
|||||||
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);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$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());
|
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// remember if editStateChanged
|
|
||||||
this.editStateChanged = state.edit !== this.state.edit;
|
|
||||||
|
|
||||||
_.extend(this.state, state);
|
|
||||||
this.dashboard.meta.fullscreen = this.state.fullscreen;
|
|
||||||
|
|
||||||
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 no edit state cleanup tab parm
|
|
||||||
if (!this.state.edit) {
|
|
||||||
delete this.state.tab;
|
|
||||||
}
|
|
||||||
|
|
||||||
// do not update url params if we are here
|
|
||||||
// from routeUpdated event
|
|
||||||
if (fromRouteUpdated !== true) {
|
|
||||||
$location.search(this.serializeToUrl());
|
|
||||||
}
|
|
||||||
|
|
||||||
this.syncState();
|
|
||||||
};
|
|
||||||
|
|
||||||
DashboardViewState.prototype.syncState = function() {
|
|
||||||
if (this.panelScopes.length === 0) { return; }
|
|
||||||
|
|
||||||
if (this.dashboard.meta.fullscreen) {
|
|
||||||
var panelScope = this.getPanelScope(this.state.panelId);
|
|
||||||
if (!panelScope) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.fullscreenPanel) {
|
|
||||||
// if already fullscreen
|
|
||||||
if (this.fullscreenPanel === panelScope && this.editStateChanged === false) {
|
|
||||||
return;
|
|
||||||
} else {
|
|
||||||
this.leaveFullscreen(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!panelScope.ctrl.editModeInitiated) {
|
|
||||||
panelScope.ctrl.initEditMode();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!panelScope.ctrl.fullscreen) {
|
|
||||||
this.enterFullscreen(panelScope);
|
|
||||||
}
|
|
||||||
} else if (this.fullscreenPanel) {
|
|
||||||
this.leaveFullscreen(true);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
DashboardViewState.prototype.getPanelScope = function(id) {
|
|
||||||
return _.find(this.panelScopes, function(panelScope) {
|
|
||||||
return panelScope.ctrl.panel.id === id;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
DashboardViewState.prototype.leaveFullscreen = function(render) {
|
|
||||||
var self = this;
|
|
||||||
var ctrl = self.fullscreenPanel.ctrl;
|
|
||||||
|
|
||||||
ctrl.editMode = false;
|
|
||||||
ctrl.fullscreen = false;
|
|
||||||
|
|
||||||
this.dashboard.setViewMode(ctrl.panel, false, false);
|
|
||||||
this.$scope.appEvent('panel-fullscreen-exit', {panelId: ctrl.panel.id});
|
|
||||||
|
|
||||||
if (!render) { return false;}
|
|
||||||
|
|
||||||
$timeout(function() {
|
|
||||||
if (self.oldTimeRange !== ctrl.range) {
|
|
||||||
$rootScope.$broadcast('refresh');
|
|
||||||
} 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();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var unbind = panelScope.$on('$destroy', function() {
|
|
||||||
self.panelScopes = _.without(self.panelScopes, panelScope);
|
|
||||||
unbind();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return {
|
|
||||||
create: function($scope) {
|
|
||||||
return new DashboardViewState($scope);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
});
|
|
||||||
});
|
|
||||||
217
public/app/features/dashboard/view_state_srv.ts
Normal file
217
public/app/features/dashboard/view_state_srv.ts
Normal file
@ -0,0 +1,217 @@
|
|||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// remember if editStateChanged
|
||||||
|
this.editStateChanged = state.edit !== this.state.edit;
|
||||||
|
|
||||||
|
_.extend(this.state, state);
|
||||||
|
this.dashboard.meta.fullscreen = this.state.fullscreen;
|
||||||
|
|
||||||
|
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 no edit state cleanup tab parm
|
||||||
|
if (!this.state.edit) {
|
||||||
|
delete this.state.tab;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.dashboard.meta.fullscreen) {
|
||||||
|
var panelScope = this.getPanelScope(this.state.panelId);
|
||||||
|
if (!panelScope) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.fullscreenPanel) {
|
||||||
|
// if already fullscreen
|
||||||
|
if (
|
||||||
|
this.fullscreenPanel === panelScope &&
|
||||||
|
this.editStateChanged === false
|
||||||
|
) {
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
this.leaveFullscreen(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!panelScope.ctrl.editModeInitiated) {
|
||||||
|
panelScope.ctrl.initEditMode();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!panelScope.ctrl.fullscreen) {
|
||||||
|
this.enterFullscreen(panelScope);
|
||||||
|
}
|
||||||
|
} else if (this.fullscreenPanel) {
|
||||||
|
this.leaveFullscreen(true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getPanelScope(id) {
|
||||||
|
return _.find(this.panelScopes, function(panelScope) {
|
||||||
|
return panelScope.ctrl.panel.id === id;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
leaveFullscreen(render) {
|
||||||
|
var self = this;
|
||||||
|
var ctrl = self.fullscreenPanel.ctrl;
|
||||||
|
|
||||||
|
ctrl.editMode = false;
|
||||||
|
ctrl.fullscreen = false;
|
||||||
|
|
||||||
|
this.dashboard.setViewMode(ctrl.panel, false, false);
|
||||||
|
this.$scope.appEvent("panel-fullscreen-exit", { panelId: ctrl.panel.id });
|
||||||
|
|
||||||
|
if (!render) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$timeout(function() {
|
||||||
|
if (self.oldTimeRange !== ctrl.range) {
|
||||||
|
self.$rootScope.$broadcast("refresh");
|
||||||
|
} else {
|
||||||
|
self.$rootScope.$broadcast("render");
|
||||||
|
}
|
||||||
|
delete self.fullscreenPanel;
|
||||||
|
});
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
enterFullscreen(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 });
|
||||||
|
}
|
||||||
|
|
||||||
|
registerPanel(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();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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);
|
||||||
Loading…
Reference in New Issue
Block a user