Skip to content

N
nexpie-grafana-theme
Commit fade3c47 by Torkel Ödegaard Committed by GitHub
Options

Merge pull request #14071 from grafana/react-panels-query-editor-fixes 

React panels query editor fixes
parents ebc5b3e6 c0197bcb
Showing with 61 additions and 32 deletions
public/app/features/dashboard/dashgrid/DataPanel.tsx
...@@ -132,6 +132,7 @@ export class DataPanel extends Component<Props, State> { ...@@ -132,6 +132,7 @@ export class DataPanel extends Component<Props, State> {
}; };
render() { render() {
const { queries } = this.props;
const { response, loading, isFirstLoad } = this.state; const { response, loading, isFirstLoad } = this.state;
const timeSeries = response.data; const timeSeries = response.data;
...@@ -139,6 +140,14 @@ export class DataPanel extends Component<Props, State> { ...@@ -139,6 +140,14 @@ export class DataPanel extends Component<Props, State> {
return this.renderLoadingSpinner(); return this.renderLoadingSpinner();
} }
if (!queries.length) {
return (
<div className="panel-empty">
<p>Add a query to get some data!</p>
</div>
);
}
return ( return (
<> <>
{this.renderLoadingSpinner()} {this.renderLoadingSpinner()}
......
public/app/features/panel/metrics_panel_ctrl.ts
...@@ -27,7 +27,6 @@ class MetricsPanelCtrl extends PanelCtrl { ...@@ -27,7 +27,6 @@ class MetricsPanelCtrl extends PanelCtrl {
dataStream: any; dataStream: any;
dataSubscription: any; dataSubscription: any;
dataList: any; dataList: any;
nextRefId: string;
constructor($scope, $injector) { constructor($scope, $injector) {
super($scope, $injector); super($scope, $injector);
...@@ -263,25 +262,6 @@ class MetricsPanelCtrl extends PanelCtrl { ...@@ -263,25 +262,6 @@ class MetricsPanelCtrl extends PanelCtrl {
this.$timeout(() => this.$location.url(url)); this.$timeout(() => this.$location.url(url));
} }
} }
addQuery(target) {
target.refId = this.dashboard.getNextQueryLetter(this.panel);
this.panel.targets.push(target);
this.nextRefId = this.dashboard.getNextQueryLetter(this.panel);
}
removeQuery(target) {
const index = _.indexOf(this.panel.targets, target);
this.panel.targets.splice(index, 1);
this.nextRefId = this.dashboard.getNextQueryLetter(this.panel);
this.refresh();
}
moveQuery(target, direction) {
const index = _.indexOf(this.panel.targets, target);
_.move(this.panel.targets, index, index + direction);
}
} }
export { MetricsPanelCtrl }; export { MetricsPanelCtrl };
public/app/features/panel/metrics_tab.ts
...@@ -5,6 +5,7 @@ import Remarkable from 'remarkable'; ...@@ -5,6 +5,7 @@ import Remarkable from 'remarkable';
// Services & utils // Services & utils
import coreModule from 'app/core/core_module'; import coreModule from 'app/core/core_module';
import config from 'app/core/config'; import config from 'app/core/config';
import { Emitter } from 'app/core/utils/emitter';
// Types // Types
import { DashboardModel } from '../dashboard/dashboard_model'; import { DashboardModel } from '../dashboard/dashboard_model';
...@@ -25,6 +26,7 @@ export class MetricsTabCtrl { ...@@ -25,6 +26,7 @@ export class MetricsTabCtrl {
hasQueryHelp: boolean; hasQueryHelp: boolean;
helpHtml: string; helpHtml: string;
queryOptions: any; queryOptions: any;
events: Emitter;
/** @ngInject */ /** @ngInject */
constructor($scope, private $sce, datasourceSrv, private backendSrv) { constructor($scope, private $sce, datasourceSrv, private backendSrv) {
...@@ -39,6 +41,10 @@ export class MetricsTabCtrl { ...@@ -39,6 +41,10 @@ export class MetricsTabCtrl {
this.datasources = datasourceSrv.getMetricSources(); this.datasources = datasourceSrv.getMetricSources();
this.panelDsValue = this.panelCtrl.panel.datasource; this.panelDsValue = this.panelCtrl.panel.datasource;
// addded here as old query controller expects this on panelCtrl but
// they are getting MetricsTabCtrl instead
this.events = this.panel.events;
for (const ds of this.datasources) { for (const ds of this.datasources) {
if (ds.value === this.panelDsValue) { if (ds.value === this.panelDsValue) {
this.datasourceInstance = ds; this.datasourceInstance = ds;
...@@ -48,7 +54,7 @@ export class MetricsTabCtrl { ...@@ -48,7 +54,7 @@ export class MetricsTabCtrl {
this.addQueryDropdown = { text: 'Add Query', value: null, fake: true }; this.addQueryDropdown = { text: 'Add Query', value: null, fake: true };
// update next ref id // update next ref id
this.panelCtrl.nextRefId = this.dashboard.getNextQueryLetter(this.panel); this.nextRefId = this.dashboard.getNextQueryLetter(this.panel);
this.updateDatasourceOptions(); this.updateDatasourceOptions();
} }
...@@ -112,10 +118,6 @@ export class MetricsTabCtrl { ...@@ -112,10 +118,6 @@ export class MetricsTabCtrl {
this.addQueryDropdown = { text: 'Add Query', value: null, fake: true }; this.addQueryDropdown = { text: 'Add Query', value: null, fake: true };
} }
addQuery() {
this.panelCtrl.addQuery({ isNew: true });
}
toggleHelp() { toggleHelp() {
this.optionsOpen = false; this.optionsOpen = false;
this.queryTroubleshooterOpen = false; this.queryTroubleshooterOpen = false;
...@@ -138,6 +140,35 @@ export class MetricsTabCtrl { ...@@ -138,6 +140,35 @@ export class MetricsTabCtrl {
this.optionsOpen = false; this.optionsOpen = false;
this.queryTroubleshooterOpen = !this.queryTroubleshooterOpen; this.queryTroubleshooterOpen = !this.queryTroubleshooterOpen;
} }
addQuery(query?) {
query = query || {};
query.refId = this.dashboard.getNextQueryLetter(this.panel);
query.isNew = true;
this.panel.targets.push(query);
this.nextRefId = this.dashboard.getNextQueryLetter(this.panel);
}
refresh() {
this.panel.refresh();
}
render() {
this.panel.render();
}
removeQuery(target) {
const index = _.indexOf(this.panel.targets, target);
this.panel.targets.splice(index, 1);
this.nextRefId = this.dashboard.getNextQueryLetter(this.panel);
this.panel.refresh();
}
moveQuery(target, direction) {
const index = _.indexOf(this.panel.targets, target);
_.move(this.panel.targets, index, index + direction);
}
} }
/** @ngInject */ /** @ngInject */
......
public/app/features/panel/partials/metrics_tab.html
...@@ -83,7 +83,7 @@ ...@@ -83,7 +83,7 @@
<span class="gf-form-query-letter-cell-carret"> <span class="gf-form-query-letter-cell-carret">
<i class="fa fa-caret-down"></i> <i class="fa fa-caret-down"></i>
</span> </span>
<span class="gf-form-query-letter-cell-letter">{{ctrl.panelCtrl.nextRefId}}</span> <span class="gf-form-query-letter-cell-letter">{{ctrl.nextRefId}}</span>
</label> </label>
<button class="btn btn-secondary gf-form-btn" ng-click="ctrl.addQuery()" ng-hide="ctrl.datasourceInstance.meta.mixed"> <button class="btn btn-secondary gf-form-btn" ng-click="ctrl.addQuery()" ng-hide="ctrl.datasourceInstance.meta.mixed">
Add Query Add Query
......
public/app/features/plugins/plugin_component.ts
...@@ -116,7 +116,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $ ...@@ -116,7 +116,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
bindings: { target: '=', panelCtrl: '=', datasource: '=' }, bindings: { target: '=', panelCtrl: '=', datasource: '=' },
attrs: { attrs: {
target: 'target', target: 'target',
'panel-ctrl': 'ctrl.panelCtrl', 'panel-ctrl': 'ctrl',
datasource: 'datasource', datasource: 'datasource',
}, },
Component: dsModule.QueryCtrl, Component: dsModule.QueryCtrl,
......
public/app/plugins/panel/table/module.ts
...@@ -154,11 +154,6 @@ class TablePanelCtrl extends MetricsPanelCtrl { ...@@ -154,11 +154,6 @@ class TablePanelCtrl extends MetricsPanelCtrl {
this.render(); this.render();
} }
moveQuery(target, direction) {
super.moveQuery(target, direction);
super.refresh();
}
exportCsv() { exportCsv() {
const scope = this.$scope.$new(true); const scope = this.$scope.$new(true);
scope.tableData = this.renderer.render_values(); scope.tableData = this.renderer.render_values();
......
public/sass/pages/_dashboard.scss
...@@ -148,6 +148,20 @@ div.flot-text { ...@@ -148,6 +148,20 @@ div.flot-text {
color: $text-color-weak; color: $text-color-weak;
} }
.panel-empty {
display: flex;
align-items: center;
height: 100%;
width: 100%;
p {
text-align: center;
color: $text-muted;
font-size: $font-size-lg;
width: 100%;
}
}
.panel-header { .panel-header {
&:hover { &:hover {
transition: background-color 0.1s ease-in-out; transition: background-color 0.1s ease-in-out;
......
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