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 @@
"grunt-jscs": "3.0.1",
"grunt-sass-lint": "^0.2.2",
"grunt-sync": "^0.6.2",
"json-formatter-js": "^2.2.0",
"karma-sinon": "^1.0.5",
"lodash": "^4.17.2",
"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';
import {contextSrv} from './services/context_srv';
import {KeybindingSrv} from './services/keybindingSrv';
import {helpModal} from './components/help/help';
import {responseViewer} from './components/response_viewer';
export {
arrayJoin,
......@@ -69,4 +69,5 @@ export {
contextSrv,
KeybindingSrv,
helpModal,
responseViewer,
};
public/app/features/panel/metrics_ds_selector.ts
......@@ -8,16 +8,8 @@ var module = angular.module('grafana.directives');
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">
<pre class="gf-form-pre alert alert-info">{{ctrl.lastResponse}}</pre>
</div>
<response-viewer response="ctrl.responseData" />
</div>
<div class="gf-form-group">
......@@ -49,9 +41,9 @@ var template = `
</div>
<div class="gf-form gf-form--offset-1">
<button class="btn btn-secondary gf-form-btn" ng-click="ctrl.toggleShowResponse()" ng-show="ctrl.lastResponse">
<i class="fa fa-info"></i>&nbsp;
Show Response
<button class="btn btn-inverse gf-form-btn" ng-click="ctrl.toggleShowResponse()" ng-show="ctrl.responseData">
<i class="fa fa-binoculars"></i>&nbsp;
Request & Response
</button>
</div>
......@@ -68,7 +60,7 @@ export class MetricsDsSelectorCtrl {
datasources: any[];
current: any;
lastResponse: any;
lastError: any;
responseData: any;
showResponse: boolean;
/** @ngInject */
......@@ -95,9 +87,8 @@ export class MetricsDsSelectorCtrl {
}
onRequestResponse(data) {
console.log(data);
this.lastResponse = JSON.stringify(data, null, 2);
this.lastError = null;
this.responseData = data;
this.showResponse = true;
}
toggleShowResponse() {
......@@ -105,8 +96,9 @@ export class MetricsDsSelectorCtrl {
}
onRequestError(err) {
console.log(err);
this.lastError = JSON.stringify(err, null, 2);
this.responseData = err;
this.responseData.isError = true;
this.showResponse = true;
}
getOptions(includeBuiltin) {
......@@ -122,8 +114,7 @@ export class MetricsDsSelectorCtrl {
if (ds) {
this.current = ds;
this.panelCtrl.setDatasource(ds);
this.lastError = null;
this.lastResponse = null;
this.responseData = null;
}
}
......
public/app/headers/common.d.ts
......@@ -72,3 +72,8 @@ declare module 'd3' {
var d3: any;
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({
"jquery.flot.fillbelow": "vendor/flot/jquery.flot.fillbelow",
"jquery.flot.gauge": "vendor/flot/jquery.flot.gauge",
"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: {
......
public/sass/_grafana.scss
......@@ -75,6 +75,7 @@
@import "components/jsontree";
@import "components/edit_sidemenu.scss";
@import "components/row.scss";
@import "components/response_viewer.scss";
// PAGES
@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 @@
"jquery.flot.fillbelow": "vendor/flot/jquery.flot.fillbelow",
"jquery.flot.gauge": "vendor/flot/jquery.flot.gauge",
"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: {
......
tasks/options/copy.js
......@@ -34,6 +34,7 @@ module.exports = function(config) {
'remarkable/dist/*',
'virtual-scroll/**/*',
'mousetrap/**/*',
'json-formatter-js/dist/*.js',
],
dest: '<%= srcDir %>/vendor/npm'
}
......
yarn.lock
......@@ -1663,9 +1663,9 @@ glob@7.0.5:
once "^1.3.0"
path-is-absolute "^1.0.0"
glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@~7.0.0:
version "7.0.6"
resolved "https://registry.yarnpkg.com/glob/-/glob-7.0.6.tgz#211bafaf49e525b8cd93260d14ab136152b3f57a"
glob@^7.0.0, glob@^7.1.1, glob@~7.1.1:
version "7.1.1"
resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.1.tgz#805211df04faaf1c63a3600306cdf5ade50b2ec8"
dependencies:
fs.realpath "^1.0.0"
inflight "^1.0.4"
......@@ -1674,9 +1674,9 @@ glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@~7.0.0:
once "^1.3.0"
path-is-absolute "^1.0.0"
glob@^7.1.1, glob@~7.1.1:
version "7.1.1"
resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.1.tgz#805211df04faaf1c63a3600306cdf5ade50b2ec8"
glob@^7.0.3, glob@^7.0.5, glob@~7.0.0:
version "7.0.6"
resolved "https://registry.yarnpkg.com/glob/-/glob-7.0.6.tgz#211bafaf49e525b8cd93260d14ab136152b3f57a"
dependencies:
fs.realpath "^1.0.0"
inflight "^1.0.4"
......@@ -2561,6 +2561,10 @@ jshint@~2.9.4:
shelljs "0.3.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:
version "0.2.3"
resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
......@@ -3807,11 +3811,11 @@ resolve-pkg@^0.1.0:
dependencies:
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"
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"
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.3.3.tgz#655907c3469a8680dc2de3a275a8fdd69691f0e5"
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