Skip to content

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

ux: working on query troubleshooting

parent 78dbb4dc
Showing with 216 additions and 31 deletions
package.json
...@@ -68,6 +68,7 @@ ...@@ -68,6 +68,7 @@
"grunt-jscs": "3.0.1", "grunt-jscs": "3.0.1",
"grunt-sass-lint": "^0.2.2", "grunt-sass-lint": "^0.2.2",
"grunt-sync": "^0.6.2", "grunt-sync": "^0.6.2",
"json-formatter-js": "^2.2.0",
"karma-sinon": "^1.0.5", "karma-sinon": "^1.0.5",
"lodash": "^4.17.2", "lodash": "^4.17.2",
"mousetrap": "^1.6.0", "mousetrap": "^1.6.0",
......
public/app/core/components/jsonview/helpers.ts 0 → 100644
// #<{(|
// * Escapes `"` charachters from string
// |)}>#
// function escapeString(str: string): string {
// return str.replace('"', '\"');
// }
//
// #<{(|
// * Determines if a value is an object
// |)}>#
// export function isObject(value: any): boolean {
// var type = typeof value;
// return !!value && (type === 'object');
// }
//
// #<{(|
// * Gets constructor name of an object.
// * From http://stackoverflow.com/a/332429
// *
// |)}>#
// export function getObjectName(object: Object): string {
// if (object === undefined) {
// return '';
// }
// if (object === null) {
// return 'Object';
// }
// if (typeof object === 'object' && !object.constructor) {
// return 'Object';
// }
//
// const funcNameRegex = /function ([^(]*)/;
// const results = (funcNameRegex).exec((object).constructor.toString());
// if (results && results.length > 1) {
// return results[1];
// } else {
// return '';
// }
// }
//
// #<{(|
// * Gets type of an object. Returns "null" for null objects
// |)}>#
// export function getType(object: Object): string {
// if (object === null) { return 'null'; }
// return typeof object;
// }
//
// #<{(|
// * Generates inline preview for a JavaScript object based on a value
// |)}>#
// export function getValuePreview (object: Object, value: string): string {
// var type = getType(object);
//
// if (type === 'null' || type === 'undefined') { return type; }
//
// if (type === 'string') {
// value = '"' + escapeString(value) + '"';
// }
// if (type === 'function'){
//
// // Remove content of the function
// return object.toString()
// .replace(/[\r\n]/g, '')
// .replace(/\{.*\}/, '') + '{…}';
// }
// return value;
// }
//
// #<{(|
// * Generates inline preview for a JavaScript object
// |)}>#
// export function getPreview(object: string): string {
// let value = '';
// if (isObject(object)) {
// value = getObjectName(object);
// if (Array.isArray(object)) {
// value += '[' + object.length + ']';
// }
// } else {
// value = getValuePreview(object, object);
// }
// return value;
// }
//
// #<{(|
// * Generates a prefixed CSS class name
// |)}>#
// export function cssClass(className: string): string {
// return `json-formatter-${className}`;
// }
//
// #<{(|
// * Creates a new DOM element wiht given type and class
// * TODO: move me to helpers
// |)}>#
// export function createElement(type: string, className?: string, content?: Element|string): Element {
// const el = document.createElement(type);
// if (className) {
// el.classList.add(cssClass(className));
// }
// if (content !== undefined) {
// if (content instanceof Node) {
// el.appendChild(content);
// } else {
// el.appendChild(document.createTextNode(String(content)));
// }
// }
// return el;
// }
public/app/core/components/response_viewer.ts 0 → 100644
///<reference path="../../headers/common.d.ts" />
import coreModule from 'app/core/core_module';
import JsonFormatter from 'json-formatter-js';
const template = `
<div class="response-viewer">
<div class="response-viewer-json"></div>
</div>
`;
export function responseViewer() {
return {
restrict: 'E',
template: template,
scope: {response: "="},
link: function(scope, elem) {
var jsonElem = elem.find('.response-viewer-json');
scope.$watch("response", newVal => {
if (!newVal) {
elem.empty();
return;
}
if (scope.response.headers) {
delete scope.response.headers;
}
if (scope.response.data) {
scope.response.response = scope.response.data;
delete scope.response.data;
}
if (scope.response.config) {
scope.response.request = scope.response.config;
delete scope.response.config;
delete scope.response.request.transformRequest;
delete scope.response.request.transformResponse;
delete scope.response.request.paramSerializer;
delete scope.response.request.jsonpCallbackParam;
delete scope.response.request.headers;
delete scope.response.request.requestId;
delete scope.response.request.inspect;
delete scope.response.request.retry;
delete scope.response.request.timeout;
}
const formatter = new JsonFormatter(scope.response, 2, {
theme: 'dark',
});
const html = formatter.render();
jsonElem.html(html);
});
}
};
}
coreModule.directive('responseViewer', responseViewer);
public/app/core/core.ts
...@@ -45,7 +45,7 @@ import {assignModelProperties} from './utils/model_utils'; ...@@ -45,7 +45,7 @@ import {assignModelProperties} from './utils/model_utils';
import {contextSrv} from './services/context_srv'; import {contextSrv} from './services/context_srv';
import {KeybindingSrv} from './services/keybindingSrv'; import {KeybindingSrv} from './services/keybindingSrv';
import {helpModal} from './components/help/help'; import {helpModal} from './components/help/help';
import {responseViewer} from './components/response_viewer';
export { export {
arrayJoin, arrayJoin,
...@@ -69,4 +69,5 @@ export { ...@@ -69,4 +69,5 @@ export {
contextSrv, contextSrv,
KeybindingSrv, KeybindingSrv,
helpModal, helpModal,
responseViewer,
}; };
public/app/features/panel/metrics_ds_selector.ts
...@@ -8,16 +8,8 @@ var module = angular.module('grafana.directives'); ...@@ -8,16 +8,8 @@ var module = angular.module('grafana.directives');
var template = ` var template = `
<div class="gf-form-group" ng-if="ctrl.lastError">
<div class="gf-form">
<pre class="gf-form-pre alert alert-error">{{ctrl.lastError}}</pre>
</div>
</div>
<div class="gf-form-group" ng-if="ctrl.showResponse"> <div class="gf-form-group" ng-if="ctrl.showResponse">
<div class="gf-form"> <response-viewer response="ctrl.responseData" />
<pre class="gf-form-pre alert alert-info">{{ctrl.lastResponse}}</pre>
</div>
</div> </div>
<div class="gf-form-group"> <div class="gf-form-group">
...@@ -49,9 +41,9 @@ var template = ` ...@@ -49,9 +41,9 @@ var template = `
</div> </div>
<div class="gf-form gf-form--offset-1"> <div class="gf-form gf-form--offset-1">
<button class="btn btn-secondary gf-form-btn" ng-click="ctrl.toggleShowResponse()" ng-show="ctrl.lastResponse"> <button class="btn btn-inverse gf-form-btn" ng-click="ctrl.toggleShowResponse()" ng-show="ctrl.responseData">
<i class="fa fa-info"></i>&nbsp; <i class="fa fa-binoculars"></i>&nbsp;
Show Response Request & Response
</button> </button>
</div> </div>
...@@ -68,7 +60,7 @@ export class MetricsDsSelectorCtrl { ...@@ -68,7 +60,7 @@ export class MetricsDsSelectorCtrl {
datasources: any[]; datasources: any[];
current: any; current: any;
lastResponse: any; lastResponse: any;
lastError: any; responseData: any;
showResponse: boolean; showResponse: boolean;
/** @ngInject */ /** @ngInject */
...@@ -95,9 +87,8 @@ export class MetricsDsSelectorCtrl { ...@@ -95,9 +87,8 @@ export class MetricsDsSelectorCtrl {
} }
onRequestResponse(data) { onRequestResponse(data) {
console.log(data); this.responseData = data;
this.lastResponse = JSON.stringify(data, null, 2); this.showResponse = true;
this.lastError = null;
} }
toggleShowResponse() { toggleShowResponse() {
...@@ -105,8 +96,9 @@ export class MetricsDsSelectorCtrl { ...@@ -105,8 +96,9 @@ export class MetricsDsSelectorCtrl {
} }
onRequestError(err) { onRequestError(err) {
console.log(err); this.responseData = err;
this.lastError = JSON.stringify(err, null, 2); this.responseData.isError = true;
this.showResponse = true;
} }
getOptions(includeBuiltin) { getOptions(includeBuiltin) {
...@@ -122,8 +114,7 @@ export class MetricsDsSelectorCtrl { ...@@ -122,8 +114,7 @@ export class MetricsDsSelectorCtrl {
if (ds) { if (ds) {
this.current = ds; this.current = ds;
this.panelCtrl.setDatasource(ds); this.panelCtrl.setDatasource(ds);
this.lastError = null; this.responseData = null;
this.lastResponse = null;
} }
} }
......
public/app/headers/common.d.ts
...@@ -72,3 +72,8 @@ declare module 'd3' { ...@@ -72,3 +72,8 @@ declare module 'd3' {
var d3: any; var d3: any;
export default d3; export default d3;
} }
declare module 'json-formatter-js' {
var JSONFormatter: any;
export default JSONFormatter;
}
public/app/system.conf.js
...@@ -32,7 +32,8 @@ System.config({ ...@@ -32,7 +32,8 @@ System.config({
"jquery.flot.fillbelow": "vendor/flot/jquery.flot.fillbelow", "jquery.flot.fillbelow": "vendor/flot/jquery.flot.fillbelow",
"jquery.flot.gauge": "vendor/flot/jquery.flot.gauge", "jquery.flot.gauge": "vendor/flot/jquery.flot.gauge",
"d3": "vendor/d3/d3.js", "d3": "vendor/d3/d3.js",
"jquery.flot.dashes": "vendor/flot/jquery.flot.dashes" "jquery.flot.dashes": "vendor/flot/jquery.flot.dashes",
"json-formatter-js": "vendor/npm/json-formatter-js/dist/json-formatter"
}, },
packages: { packages: {
......
public/sass/_grafana.scss
...@@ -75,6 +75,7 @@ ...@@ -75,6 +75,7 @@
@import "components/jsontree"; @import "components/jsontree";
@import "components/edit_sidemenu.scss"; @import "components/edit_sidemenu.scss";
@import "components/row.scss"; @import "components/row.scss";
@import "components/response_viewer.scss";
// PAGES // PAGES
@import "pages/login"; @import "pages/login";
......
public/sass/components/_response_viewer.scss 0 → 100644
.response-viewer {
background: $card-background;
box-shadow: $card-shadow;
padding: 1rem;
border-radius: 4px;
}
public/test/test-main.js
...@@ -40,7 +40,8 @@ ...@@ -40,7 +40,8 @@
"jquery.flot.fillbelow": "vendor/flot/jquery.flot.fillbelow", "jquery.flot.fillbelow": "vendor/flot/jquery.flot.fillbelow",
"jquery.flot.gauge": "vendor/flot/jquery.flot.gauge", "jquery.flot.gauge": "vendor/flot/jquery.flot.gauge",
"d3": "vendor/d3/d3.js", "d3": "vendor/d3/d3.js",
"jquery.flot.dashes": "vendor/flot/jquery.flot.dashes" "jquery.flot.dashes": "vendor/flot/jquery.flot.dashes",
"json-formatter-js": "vendor/npm/json-formatter-js/dist/json-formatter"
}, },
packages: { packages: {
......
tasks/options/copy.js
...@@ -34,6 +34,7 @@ module.exports = function(config) { ...@@ -34,6 +34,7 @@ module.exports = function(config) {
'remarkable/dist/*', 'remarkable/dist/*',
'virtual-scroll/**/*', 'virtual-scroll/**/*',
'mousetrap/**/*', 'mousetrap/**/*',
'json-formatter-js/dist/*.js',
], ],
dest: '<%= srcDir %>/vendor/npm' dest: '<%= srcDir %>/vendor/npm'
} }
......
yarn.lock
...@@ -1663,9 +1663,9 @@ glob@7.0.5: ...@@ -1663,9 +1663,9 @@ glob@7.0.5:
once "^1.3.0" once "^1.3.0"
path-is-absolute "^1.0.0" path-is-absolute "^1.0.0"
glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@~7.0.0: glob@^7.0.0, glob@^7.1.1, glob@~7.1.1:
version "7.0.6" version "7.1.1"
resolved "https://registry.yarnpkg.com/glob/-/glob-7.0.6.tgz#211bafaf49e525b8cd93260d14ab136152b3f57a" resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.1.tgz#805211df04faaf1c63a3600306cdf5ade50b2ec8"
dependencies: dependencies:
fs.realpath "^1.0.0" fs.realpath "^1.0.0"
inflight "^1.0.4" inflight "^1.0.4"
...@@ -1674,9 +1674,9 @@ glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@~7.0.0: ...@@ -1674,9 +1674,9 @@ glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@~7.0.0:
once "^1.3.0" once "^1.3.0"
path-is-absolute "^1.0.0" path-is-absolute "^1.0.0"
glob@^7.1.1, glob@~7.1.1: glob@^7.0.3, glob@^7.0.5, glob@~7.0.0:
version "7.1.1" version "7.0.6"
resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.1.tgz#805211df04faaf1c63a3600306cdf5ade50b2ec8" resolved "https://registry.yarnpkg.com/glob/-/glob-7.0.6.tgz#211bafaf49e525b8cd93260d14ab136152b3f57a"
dependencies: dependencies:
fs.realpath "^1.0.0" fs.realpath "^1.0.0"
inflight "^1.0.4" inflight "^1.0.4"
...@@ -2561,6 +2561,10 @@ jshint@~2.9.4: ...@@ -2561,6 +2561,10 @@ jshint@~2.9.4:
shelljs "0.3.x" shelljs "0.3.x"
strip-json-comments "1.0.x" strip-json-comments "1.0.x"
json-formatter-js@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/json-formatter-js/-/json-formatter-js-2.2.0.tgz#1ed987223ef2f1d945304597faae78b580a8212b"
json-schema@0.2.3: json-schema@0.2.3:
version "0.2.3" version "0.2.3"
resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13" resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
...@@ -3807,11 +3811,11 @@ resolve-pkg@^0.1.0: ...@@ -3807,11 +3811,11 @@ resolve-pkg@^0.1.0:
dependencies: dependencies:
resolve-from "^2.0.0" resolve-from "^2.0.0"
resolve@1.1.x, resolve@^1.1.6, resolve@~1.1.0: resolve@1.1.x, resolve@~1.1.0:
version "1.1.7" version "1.1.7"
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
resolve@^1.3.2: resolve@^1.1.6, resolve@^1.3.2:
version "1.3.3" version "1.3.3"
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.3.3.tgz#655907c3469a8680dc2de3a275a8fdd69691f0e5" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.3.3.tgz#655907c3469a8680dc2de3a275a8fdd69691f0e5"
dependencies: dependencies:
......
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