IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Templating: removes old Angular variable system and featureToggle (#24779)

Browse Source 
* Chore: initial commit

* Tests: fixes MetricsQueryEditor.test.tsx

* Tests: fixes cloudwatch/specs/datasource.test.ts

* Tests: fixes stackdriver/specs/datasource.test.ts

* Tests: remove refrences to CustomVariable

* Refactor: moves DefaultVariableQueryEditor

* Refactor: moves utils

* Refactor: moves types

* Refactor: removes variableSrv

* Refactor: removes feature toggle newVariables

* Refactor: removes valueSelectDropDown

* Chore: removes GeneralTabCtrl

* Chore: migrates RowOptions

* Refactor: adds RowOptionsButton

* Refactor: makes the interface more explicit

* Refactor: small changes

* Refactor: changed type as it can be any variable type

* Tests: fixes broken test

* Refactor: changes after PR comments

* Refactor: adds loading state and call to onChange in componentDidMount
This commit is contained in:
Hugo Häggmark
2020-06-04 13:44:48 +02:00
committed by GitHub
parent 6b4d1dceb0
commit 00a9af00fc
166 changed files with 678 additions and 5917 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
public/app/features/panel/GeneralTabCtrl.ts
View File

@@ -1,46 +0,0 @@
import coreModule from 'app/core/core_module';
const obj2string = (obj: any) => {
return Object.keys(obj)
.reduce((acc, curr) => acc.concat(curr + '=' + obj[curr]), [])
.join();
};
export class GeneralTabCtrl {
panelCtrl: any;
/** @ngInject */
constructor($scope: any) {
this.panelCtrl = $scope.ctrl;
const updatePanel = () => {
console.log('panel.render()');
this.panelCtrl.panel.render();
};
const generateValueFromPanel = (scope: any) => {
const { panel } = scope.ctrl;
const panelPropsToTrack = ['title', 'description', 'transparent', 'repeat', 'repeatDirection', 'minSpan'];
const panelPropsString = panelPropsToTrack
.map(prop => prop + '=' + (panel[prop] && panel[prop].toString ? panel[prop].toString() : panel[prop]))
.join();
const panelLinks = panel.links || [];
const panelLinksString = panelLinks.map(obj2string).join();
return panelPropsString + panelLinksString;
};
$scope.$watch(generateValueFromPanel, updatePanel, true);
}
}
/** @ngInject */
export function generalTab() {
'use strict';
return {
restrict: 'E',
templateUrl: 'public/app/features/panel/partials/general_tab.html',
controller: GeneralTabCtrl,
};
}
coreModule.directive('panelGeneralTab', generalTab);

1
public/app/features/panel/all.ts
View File

@@ -2,5 +2,4 @@ import './panel_directive';
import './query_ctrl';
import './panel_editor_tab';
import './query_editor_row';
import './repeat_option';
import './panellinks/module';

49
public/app/features/panel/partials/general_tab.html
View File

@@ -1,49 +0,0 @@
<div class="panel-options-group">
<!-- <div class="panel&#45;option&#45;section__header">Information</div> -->
<div class="panel-options-group__body">
<div class="section">
<div class="gf-form">
<span class="gf-form-label width-7">Title</span>
<input type="text" class="gf-form-input width-25" ng-model='ctrl.panel.title' ng-model-onblur></input>
</div>
<gf-form-switch class="gf-form" label-class="width-7" switch-class="max-width-6" label="Transparent" checked="ctrl.panel.transparent" on-change="ctrl.render()"></gf-form-switch>
</div>
<div class="section">
<div class="gf-form gf-form--v-stretch">
<span class="gf-form-label width-7">Description</span>
<textarea class="gf-form-input width-25" rows="5" ng-model="ctrl.panel.description" ng-model-onblur placeholder="Panel description, supports markdown & links"></textarea>
</div>
</div>
</div>
</div>
<div class="panel-options-group">
<div class="panel-options-group__header">
<div class="panel-options-group__title">Repeating</div>
</div>
<div class="panel-options-group__body">
<div class="section">
<div class="gf-form">
<span class="gf-form-label width-9">Repeat</span>
<dash-repeat-option panel="ctrl.panel"></dash-repeat-option>
</div>
<div class="gf-form" ng-show="ctrl.panel.repeat">
<span class="gf-form-label width-9">Direction</span>
<select class="gf-form-input" ng-model="ctrl.panel.repeatDirection" ng-options="f.value as f.text for f in [{value: 'v', text: 'Vertical'}, {value: 'h', text: 'Horizontal'}]">
<option value=""></option>
</select>
</div>
<div class="gf-form" ng-show="ctrl.panel.repeat && ctrl.panel.repeatDirection == 'h'">
<span class="gf-form-label width-9">Max per row</span>
<select class="gf-form-input" ng-model="ctrl.panel.maxPerRow" ng-options="f for f in [2,3,4,6,12,24]">
<option value=""></option>
</select>
</div>
<div class="gf-form-hint">
<div class="gf-form-hint-text muted">
Note: You may need to change the variable selection to see this in action.
</div>
</div>
</div>
</div>
</div>

59
public/app/features/panel/repeat_option.ts
View File

@@ -1,59 +0,0 @@
import { coreModule } from 'app/core/core';
import { VariableSrv } from 'app/features/templating/variable_srv';
import { getConfig } from '../../core/config';
import { getVariables } from '../variables/state/selectors';
const template = `
<div class="gf-form-select-wrapper max-width-18">
<select class="gf-form-input" ng-model="panel.repeat" ng-options="f.value as f.text for f in variables" ng-change="optionChanged()">
<option value=""></option>
</div>
`;
/** @ngInject */
function dashRepeatOptionDirective(variableSrv: VariableSrv) {
return {
restrict: 'E',
template: template,
scope: {
panel: '=',
},
link: (scope: any, element: JQuery) => {
element.css({ display: 'block', width: '100%' });
if (getConfig().featureToggles.newVariables) {
scope.variables = getVariables().map((item: any) => {
return { text: item.name, value: item.name };
});
}
if (!getConfig().featureToggles.newVariables) {
scope.variables = variableSrv.variables.map((item: any) => {
return { text: item.name, value: item.name };
});
}
if (scope.variables.length === 0) {
scope.variables.unshift({
text: 'No template variables found',
value: null,
});
}
scope.variables.unshift({ text: 'Disabled', value: null });
// if repeat is set and no direction set to horizontal
if (scope.panel.repeat && !scope.panel.repeatDirection) {
scope.panel.repeatDirection = 'h';
}
scope.optionChanged = () => {
if (scope.panel.repeat) {
scope.panel.repeatDirection = 'h';
}
};
},
};
}
coreModule.directive('dashRepeatOption', dashRepeatOptionDirective);