mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
refactor(): refactoring submenu to directive
This commit is contained in:
Torkel Ödegaard
parent
edcef7d078
commit
00802d035a
@ -1,9 +1,8 @@
|
||||
<topnav title="Apps" icon="fa fa-fw fa-cubes" subnav="true">
|
||||
<navbar title="Apps" title-url="apps" icon="fa fa-fw fa-cubes" subnav="true">
|
||||
<ul class="nav">
|
||||
<li ><a href="apps">Overview</a></li>
|
||||
<li class="active" ><a href="apps/edit/{{ctrl.current.type}}">Edit</a></li>
|
||||
<li class="active" ><a href="apps/edit/{{ctrl.current.type}}">{{ctrl.appModel.name}}</a></li>
|
||||
</ul>
|
||||
</topnav>
|
||||
</navbar>
|
||||
|
||||
<div class="page-container">
|
||||
<div class="apps-side-box">
|
||||
|
||||
@ -2,11 +2,11 @@ define([
|
||||
'./dashboardCtrl',
|
||||
'./dashboardLoaderSrv',
|
||||
'./dashnav/dashnav',
|
||||
'./submenu/submenu',
|
||||
'./saveDashboardAsCtrl',
|
||||
'./rowCtrl',
|
||||
'./shareModalCtrl',
|
||||
'./shareSnapshotCtrl',
|
||||
'./submenuCtrl',
|
||||
'./dashboardSrv',
|
||||
'./keybindings',
|
||||
'./viewStateSrv',
|
||||
|
||||
30
public/app/features/dashboard/submenu/submenu.html
Normal file
30
public/app/features/dashboard/submenu/submenu.html
Normal file
@ -0,0 +1,30 @@
|
||||
<div class="submenu-controls">
|
||||
<div class="tight-form borderless">
|
||||
|
||||
<ul class="tight-form-list" ng-if="ctrl.dashboard.templating.list.length > 0">
|
||||
<li ng-repeat="variable in ctrl.variables" class="submenu-item">
|
||||
<span class="template-variable tight-form-item" ng-show="!variable.hideLabel" style="padding-right: 5px">
|
||||
{{variable.label || variable.name}}:
|
||||
</span>
|
||||
<value-select-dropdown variable="variable" on-updated="ctrl.variableUpdated(variable)" get-values-for-tag="ctrl.getValuesForTag(variable, tagKey)"></value-select-dropdown>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="tight-form-list" ng-if="ctrl.dashboard.annotations.list.length > 0">
|
||||
<li ng-repeat="annotation in ctrl.dashboard.annotations.list" class="submenu-item annotation-segment" ng-class="{'annotation-disabled': !annotation.enable}">
|
||||
<a ng-click="ctrl.disableAnnotation(annotation)">
|
||||
<i class="fa fa-bolt" style="color:{{annotation.iconColor}}"></i>
|
||||
{{annotation.name}}
|
||||
<input class="cr1" id="hideYAxis" type="checkbox" ng-model="annotation.enable" ng-checked="annotation.enable">
|
||||
<label for="hideYAxis" class="cr1"></label>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="tight-form-list pull-right" ng-if="ctrl.dashboard.links.length > 0">
|
||||
<dash-links-container links="ctrl.dashboard.links"></dash-links-container>
|
||||
</ul>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</div>
|
||||
46
public/app/features/dashboard/submenu/submenu.ts
Normal file
46
public/app/features/dashboard/submenu/submenu.ts
Normal file
@ -0,0 +1,46 @@
|
||||
///<reference path="../../../headers/common.d.ts" />
|
||||
|
||||
import angular from 'angular';
|
||||
|
||||
export class SubmenuCtrl {
|
||||
annotations: any;
|
||||
variables: any;
|
||||
dashboard: any;
|
||||
|
||||
constructor(private $rootScope, private templateValuesSrv, private dynamicDashboardSrv) {
|
||||
this.annotations = this.dashboard.templating.list;
|
||||
this.variables = this.dashboard.templating.list;
|
||||
}
|
||||
|
||||
disableAnnotation(annotation) {
|
||||
annotation.enable = !annotation.enable;
|
||||
this.$rootScope.$broadcast('refresh');
|
||||
}
|
||||
|
||||
getValuesForTag(variable, tagKey) {
|
||||
return this.templateValuesSrv.getValuesForTag(variable, tagKey);
|
||||
}
|
||||
|
||||
variableUpdated(variable) {
|
||||
this.templateValuesSrv.variableUpdated(variable).then(() => {
|
||||
this.dynamicDashboardSrv.update(this.dashboard);
|
||||
this.$rootScope.$emit('template-variable-value-updated');
|
||||
this.$rootScope.$broadcast('refresh');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export function submenuDirective() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
templateUrl: 'app/features/dashboard/submenu/submenu.html',
|
||||
controller: SubmenuCtrl,
|
||||
bindToController: true,
|
||||
controllerAs: 'ctrl',
|
||||
scope: {
|
||||
dashboard: "=",
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
angular.module('grafana.directives').directive('dashboardSubmenu', submenuDirective);
|
||||
@ -1,39 +0,0 @@
|
||||
define([
|
||||
'angular',
|
||||
],
|
||||
function (angular) {
|
||||
'use strict';
|
||||
|
||||
var module = angular.module('grafana.controllers');
|
||||
|
||||
module.controller('SubmenuCtrl', function($scope, $q, $rootScope, templateValuesSrv, dynamicDashboardSrv) {
|
||||
|
||||
$scope.init = function() {
|
||||
$scope.panel = $scope.pulldown;
|
||||
$scope.row = $scope.pulldown;
|
||||
$scope.annotations = $scope.dashboard.templating.list;
|
||||
$scope.variables = $scope.dashboard.templating.list;
|
||||
};
|
||||
|
||||
$scope.disableAnnotation = function (annotation) {
|
||||
annotation.enable = !annotation.enable;
|
||||
$rootScope.$broadcast('refresh');
|
||||
};
|
||||
|
||||
$scope.getValuesForTag = function(variable, tagKey) {
|
||||
return templateValuesSrv.getValuesForTag(variable, tagKey);
|
||||
};
|
||||
|
||||
$scope.variableUpdated = function(variable) {
|
||||
templateValuesSrv.variableUpdated(variable).then(function() {
|
||||
dynamicDashboardSrv.update($scope.dashboard);
|
||||
$rootScope.$emit('template-variable-value-updated');
|
||||
$rootScope.$broadcast('refresh');
|
||||
});
|
||||
};
|
||||
|
||||
$scope.init();
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
@ -6,8 +6,7 @@
|
||||
<div dash-search-view></div>
|
||||
<div class="clearfix"></div>
|
||||
|
||||
<div ng-if="submenuEnabled" ng-include="'app/partials/submenu.html'">
|
||||
</div>
|
||||
<dashboard-submenu ng-if="submenuEnabled" dashboard="dashboard"></dashboard-submenu>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
|
||||
|
||||
@ -1,30 +0,0 @@
|
||||
<div class="submenu-controls" ng-controller="SubmenuCtrl">
|
||||
<div class="tight-form borderless">
|
||||
|
||||
<ul class="tight-form-list" ng-if="dashboard.templating.list.length > 0">
|
||||
<li ng-repeat="variable in variables" class="submenu-item">
|
||||
<span class="template-variable tight-form-item" ng-show="!variable.hideLabel" style="padding-right: 5px">
|
||||
{{variable.label || variable.name}}:
|
||||
</span>
|
||||
<value-select-dropdown variable="variable" on-updated="variableUpdated(variable)" get-values-for-tag="getValuesForTag(variable, tagKey)"></value-select-dropdown>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="tight-form-list" ng-if="dashboard.annotations.list.length > 0">
|
||||
<li ng-repeat="annotation in dashboard.annotations.list" class="submenu-item annotation-segment" ng-class="{'annotation-disabled': !annotation.enable}">
|
||||
<a ng-click="disableAnnotation(annotation)">
|
||||
<i class="fa fa-bolt" style="color:{{annotation.iconColor}}"></i>
|
||||
{{annotation.name}}
|
||||
<input class="cr1" id="hideYAxis" type="checkbox" ng-model="annotation.enable" ng-checked="annotation.enable">
|
||||
<label for="hideYAxis" class="cr1"></label>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="tight-form-list pull-right" ng-if="dashboard.links.length > 0">
|
||||
<dash-links-container links="dashboard.links"></dash-links-container>
|
||||
</ul>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -27,6 +27,7 @@
|
||||
|
||||
<body ng-cloak>
|
||||
<grafana-app>
|
||||
|
||||
<aside class="sidemenu-wrapper">
|
||||
<sidemenu ng-if="contextSrv.sidemenu"></sidemenu>
|
||||
</aside>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user