Skip to content

N
nexpie-grafana-theme
Commit f67e0827 by Torkel Ödegaard
Options

Fixes and cleanup

parent 248015c9
Showing with 8 additions and 265 deletions
public/app/core/components/AppNotifications/AppNotificationItem.tsx
...@@ -20,6 +20,7 @@ export default class AppNotificationItem extends Component<Props> { ...@@ -20,6 +20,7 @@ export default class AppNotificationItem extends Component<Props> {
render() { render() {
const { appNotification, onClearNotification } = this.props; const { appNotification, onClearNotification } = this.props;
return ( return (
<div className={`alert-${appNotification.severity} alert`}> <div className={`alert-${appNotification.severity} alert`}>
<div className="alert-icon"> <div className="alert-icon">
......
public/app/features/dashboard/dashgrid/QueriesTab.tsx
...@@ -252,7 +252,7 @@ export class QueriesTab extends PureComponent<Props, State> { ...@@ -252,7 +252,7 @@ export class QueriesTab extends PureComponent<Props, State> {
<EditorTabBody heading="Queries" renderToolbar={this.renderToolbar} toolbarItems={[queryInspector, dsHelp]}> <EditorTabBody heading="Queries" renderToolbar={this.renderToolbar} toolbarItems={[queryInspector, dsHelp]}>
<> <>
<PanelOptionSection> <PanelOptionSection>
<div className="query-editor-rows gf-form-group"> <div className="query-editor-rows">
<div ref={element => (this.element = element)} /> <div ref={element => (this.element = element)} />
<div className="gf-form-query"> <div className="gf-form-query">
...@@ -260,9 +260,11 @@ export class QueriesTab extends PureComponent<Props, State> { ...@@ -260,9 +260,11 @@ export class QueriesTab extends PureComponent<Props, State> {
<label className="gf-form-label"> <label className="gf-form-label">
<span className="gf-form-query-letter-cell-carret muted"> <span className="gf-form-query-letter-cell-carret muted">
<i className="fa fa-caret-down" /> <i className="fa fa-caret-down" />
</span> </span>{' '}
<span className="gf-form-query-letter-cell-letter">{panel.getNextQueryLetter()}</span> <span className="gf-form-query-letter-cell-letter">{panel.getNextQueryLetter()}</span>
</label> </label>
</div>
<div className="gf-form">
{!isAddingMixed && ( {!isAddingMixed && (
<button className="btn btn-secondary gf-form-btn" onClick={this.onAddQueryClick}> <button className="btn btn-secondary gf-form-btn" onClick={this.onAddQueryClick}>
Add Query Add Query
......
public/app/features/dashboard/dashnav/dashnav.ts
...@@ -91,7 +91,7 @@ export class DashNavCtrl { ...@@ -91,7 +91,7 @@ export class DashNavCtrl {
this.dashboard.addPanel({ this.dashboard.addPanel({
type: 'add-panel', type: 'add-panel',
gridPos: { x: 0, y: 0, w: 12, h: 9 }, gridPos: { x: 0, y: 0, w: 12, h: 8 },
title: 'Panel Title', title: 'Panel Title',
}); });
} }
......
public/app/features/panel/all.ts
...@@ -4,4 +4,3 @@ import './solo_panel_ctrl'; ...@@ -4,4 +4,3 @@ import './solo_panel_ctrl';
import './query_ctrl'; import './query_ctrl';
import './panel_editor_tab'; import './panel_editor_tab';
import './query_editor_row'; import './query_editor_row';
import './query_troubleshooter';
public/app/features/panel/query_troubleshooter.ts deleted 100644 → 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);
public/app/features/panel/viz_tab.ts deleted 100644 → 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);
public/sass/components/_panel_editor.scss
...@@ -257,7 +257,7 @@ ...@@ -257,7 +257,7 @@
.btn { .btn {
position: absolute; position: absolute;
right: 0; right: 0;
top: 2px; top: 0px;
} }
} }
......
public/sass/components/_query_editor.scss
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
} }
.query-editor-rows { .query-editor-rows {
margin-top: 20px; margin: 20px 0;
} }
.gf-form-query { .gf-form-query {
......
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