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 './shareSnapshotCtrl';
|
||||
import './dashboard_srv';
|
||||
import './viewStateSrv';
|
||||
import './view_state_srv';
|
||||
import './time_srv';
|
||||
import './unsavedChangesSrv';
|
||||
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