mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Fixes and cleanup
This commit is contained in:
Torkel Ödegaard
parent
248015c937
commit
f67e0827b2
@ -20,6 +20,7 @@ export default class AppNotificationItem extends Component<Props> {
|
||||
|
||||
render() {
|
||||
const { appNotification, onClearNotification } = this.props;
|
||||
|
||||
return (
|
||||
<div className={`alert-${appNotification.severity} alert`}>
|
||||
<div className="alert-icon">
|
||||
|
||||
@ -252,7 +252,7 @@ export class QueriesTab extends PureComponent<Props, State> {
|
||||
<EditorTabBody heading="Queries" renderToolbar={this.renderToolbar} toolbarItems={[queryInspector, dsHelp]}>
|
||||
<>
|
||||
<PanelOptionSection>
|
||||
<div className="query-editor-rows gf-form-group">
|
||||
<div className="query-editor-rows">
|
||||
<div ref={element => (this.element = element)} />
|
||||
|
||||
<div className="gf-form-query">
|
||||
@ -260,9 +260,11 @@ export class QueriesTab extends PureComponent<Props, State> {
|
||||
<label className="gf-form-label">
|
||||
<span className="gf-form-query-letter-cell-carret muted">
|
||||
<i className="fa fa-caret-down" />
|
||||
</span>
|
||||
</span>{' '}
|
||||
<span className="gf-form-query-letter-cell-letter">{panel.getNextQueryLetter()}</span>
|
||||
</label>
|
||||
</div>
|
||||
<div className="gf-form">
|
||||
{!isAddingMixed && (
|
||||
<button className="btn btn-secondary gf-form-btn" onClick={this.onAddQueryClick}>
|
||||
Add Query
|
||||
|
||||
@ -91,7 +91,7 @@ export class DashNavCtrl {
|
||||
|
||||
this.dashboard.addPanel({
|
||||
type: 'add-panel',
|
||||
gridPos: { x: 0, y: 0, w: 12, h: 9 },
|
||||
gridPos: { x: 0, y: 0, w: 12, h: 8 },
|
||||
title: 'Panel Title',
|
||||
});
|
||||
}
|
||||
|
||||
@ -4,4 +4,3 @@ import './solo_panel_ctrl';
|
||||
import './query_ctrl';
|
||||
import './panel_editor_tab';
|
||||
import './query_editor_row';
|
||||
import './query_troubleshooter';
|
||||
|
||||
@ -1,188 +0,0 @@
|
||||
import _ from 'lodash';
|
||||
import appEvents from 'app/core/app_events';
|
||||
import { coreModule, JsonExplorer } from 'app/core/core';
|
||||
|
||||
const template = `
|
||||
<div class="query-troubleshooter" ng-if="ctrl.isOpen">
|
||||
<div class="query-troubleshooter__header">
|
||||
<a class="pointer" ng-click="ctrl.toggleMocking()">Mock Response</a>
|
||||
<a class="pointer" ng-click="ctrl.toggleExpand()" ng-hide="ctrl.allNodesExpanded">
|
||||
<i class="fa fa-plus-square-o"></i> Expand All
|
||||
</a>
|
||||
<a class="pointer" ng-click="ctrl.toggleExpand()" ng-show="ctrl.allNodesExpanded">
|
||||
<i class="fa fa-minus-square-o"></i> Collapse All
|
||||
</a>
|
||||
<a class="pointer" clipboard-button="ctrl.getClipboardText()"><i class="fa fa-clipboard"></i> Copy to Clipboard</a>
|
||||
</div>
|
||||
<div class="query-troubleshooter__body" ng-hide="ctrl.isMocking">
|
||||
<i class="fa fa-spinner fa-spin" ng-show="ctrl.isLoading"></i>
|
||||
<div class="query-troubleshooter-json"></div>
|
||||
</div>
|
||||
<div class="query-troubleshooter__body" ng-show="ctrl.isMocking">
|
||||
<div class="gf-form p-l-1 gf-form--v-stretch">
|
||||
<textarea class="gf-form-input" style="width: 95%" rows="10" ng-model="ctrl.mockedResponse" placeholder="JSON"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
export class QueryTroubleshooterCtrl {
|
||||
isOpen: any;
|
||||
isLoading: boolean;
|
||||
showResponse: boolean;
|
||||
panelCtrl: any;
|
||||
renderJsonExplorer: (data) => void;
|
||||
onRequestErrorEventListener: any;
|
||||
onRequestResponseEventListener: any;
|
||||
hasError: boolean;
|
||||
allNodesExpanded: boolean;
|
||||
isMocking: boolean;
|
||||
mockedResponse: string;
|
||||
jsonExplorer: JsonExplorer;
|
||||
|
||||
/** @ngInject */
|
||||
constructor($scope, private $timeout) {
|
||||
this.onRequestErrorEventListener = this.onRequestError.bind(this);
|
||||
this.onRequestResponseEventListener = this.onRequestResponse.bind(this);
|
||||
|
||||
appEvents.on('ds-request-response', this.onRequestResponseEventListener);
|
||||
appEvents.on('ds-request-error', this.onRequestErrorEventListener);
|
||||
|
||||
$scope.$on('$destroy', this.removeEventsListeners.bind(this));
|
||||
$scope.$watch('ctrl.isOpen', this.stateChanged.bind(this));
|
||||
}
|
||||
|
||||
removeEventsListeners() {
|
||||
appEvents.off('ds-request-response', this.onRequestResponseEventListener);
|
||||
appEvents.off('ds-request-error', this.onRequestErrorEventListener);
|
||||
}
|
||||
|
||||
toggleMocking() {
|
||||
this.isMocking = !this.isMocking;
|
||||
}
|
||||
|
||||
onRequestError(err) {
|
||||
// ignore if closed
|
||||
if (!this.isOpen) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.isOpen = true;
|
||||
this.hasError = true;
|
||||
this.onRequestResponse(err);
|
||||
}
|
||||
|
||||
stateChanged() {
|
||||
if (this.isOpen) {
|
||||
this.panelCtrl.refresh();
|
||||
this.isLoading = true;
|
||||
}
|
||||
}
|
||||
|
||||
getClipboardText(): string {
|
||||
if (this.jsonExplorer) {
|
||||
return JSON.stringify(this.jsonExplorer.json, null, 2);
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
handleMocking(data) {
|
||||
let mockedData;
|
||||
try {
|
||||
mockedData = JSON.parse(this.mockedResponse);
|
||||
} catch (err) {
|
||||
appEvents.emit('alert-error', ['Failed to parse mocked response']);
|
||||
return;
|
||||
}
|
||||
|
||||
data.data = mockedData;
|
||||
}
|
||||
|
||||
onRequestResponse(data) {
|
||||
// ignore if closed
|
||||
if (!this.isOpen) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.isMocking) {
|
||||
this.handleMocking(data);
|
||||
return;
|
||||
}
|
||||
|
||||
this.isLoading = false;
|
||||
data = _.cloneDeep(data);
|
||||
|
||||
if (data.headers) {
|
||||
delete data.headers;
|
||||
}
|
||||
|
||||
if (data.config) {
|
||||
data.request = data.config;
|
||||
delete data.config;
|
||||
delete data.request.transformRequest;
|
||||
delete data.request.transformResponse;
|
||||
delete data.request.paramSerializer;
|
||||
delete data.request.jsonpCallbackParam;
|
||||
delete data.request.headers;
|
||||
delete data.request.requestId;
|
||||
delete data.request.inspect;
|
||||
delete data.request.retry;
|
||||
delete data.request.timeout;
|
||||
}
|
||||
|
||||
if (data.data) {
|
||||
data.response = data.data;
|
||||
|
||||
if (data.status === 200) {
|
||||
// if we are in error state, assume we automatically opened
|
||||
// and auto close it again
|
||||
if (this.hasError) {
|
||||
this.hasError = false;
|
||||
this.isOpen = false;
|
||||
}
|
||||
}
|
||||
|
||||
delete data.data;
|
||||
delete data.status;
|
||||
delete data.statusText;
|
||||
delete data.$$config;
|
||||
}
|
||||
|
||||
this.$timeout(_.partial(this.renderJsonExplorer, data));
|
||||
}
|
||||
|
||||
toggleExpand(depth) {
|
||||
if (this.jsonExplorer) {
|
||||
this.allNodesExpanded = !this.allNodesExpanded;
|
||||
this.jsonExplorer.openAtDepth(this.allNodesExpanded ? 20 : 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function queryTroubleshooter() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
template: template,
|
||||
controller: QueryTroubleshooterCtrl,
|
||||
bindToController: true,
|
||||
controllerAs: 'ctrl',
|
||||
scope: {
|
||||
panelCtrl: '=',
|
||||
isOpen: '=',
|
||||
},
|
||||
link: (scope, elem, attrs, ctrl) => {
|
||||
ctrl.renderJsonExplorer = data => {
|
||||
const jsonElem = elem.find('.query-troubleshooter-json');
|
||||
|
||||
ctrl.jsonExplorer = new JsonExplorer(data, 3, {
|
||||
animateOpen: true,
|
||||
});
|
||||
|
||||
const html = ctrl.jsonExplorer.render(true);
|
||||
jsonElem.html(html);
|
||||
};
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
coreModule.directive('queryTroubleshooter', queryTroubleshooter);
|
||||
@ -1,71 +0,0 @@
|
||||
import coreModule from 'app/core/core_module';
|
||||
import { DashboardModel } from '../dashboard/dashboard_model';
|
||||
import { VizTypePicker } from '../dashboard/dashgrid/VizTypePicker';
|
||||
import { react2AngularDirective } from 'app/core/utils/react2angular';
|
||||
import { PanelPlugin } from 'app/types/plugins';
|
||||
|
||||
export class VizTabCtrl {
|
||||
panelCtrl: any;
|
||||
dashboard: DashboardModel;
|
||||
|
||||
/** @ngInject */
|
||||
constructor($scope) {
|
||||
this.panelCtrl = $scope.ctrl;
|
||||
this.dashboard = this.panelCtrl.dashboard;
|
||||
|
||||
$scope.ctrl = this;
|
||||
}
|
||||
|
||||
onTypeChanged = (plugin: PanelPlugin) => {};
|
||||
}
|
||||
|
||||
const template = `
|
||||
<div class="gf-form-group ">
|
||||
<div class="gf-form-query">
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label">
|
||||
<img src="public/app/plugins/panel/graph/img/icn-graph-panel.svg" style="width: 16px; height: 16px" />
|
||||
Graph
|
||||
<i class="fa fa-caret-down" />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="gf-form gf-form--grow">
|
||||
<label class="gf-form-label gf-form-label--grow"></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<div class="query-editor-rows gf-form-group">
|
||||
<div ng-repeat="tab in ctrl.panelCtrl.optionTabs">
|
||||
<div class="gf-form-query">
|
||||
<div class="gf-form gf-form-query-letter-cell">
|
||||
<label class="gf-form-label">
|
||||
<span class="gf-form-query-letter-cell-carret">
|
||||
<i class="fa fa-caret-down"></i>
|
||||
</span>
|
||||
<span class="gf-form-query-letter-cell-letter">{{tab.title}}</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="gf-form gf-form--grow">
|
||||
<label class="gf-form-label gf-form-label--grow"></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
/** @ngInject */
|
||||
export function vizTabDirective() {
|
||||
'use strict';
|
||||
return {
|
||||
restrict: 'E',
|
||||
template: template,
|
||||
controller: VizTabCtrl,
|
||||
};
|
||||
}
|
||||
|
||||
react2AngularDirective('vizTypePicker', VizTypePicker, ['currentType', ['onTypeChanged', { watchDepth: 'reference' }]]);
|
||||
coreModule.directive('vizTab', vizTabDirective);
|
||||
@ -257,7 +257,7 @@
|
||||
.btn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 2px;
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
}
|
||||
|
||||
.query-editor-rows {
|
||||
margin-top: 20px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.gf-form-query {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user