Skip to content

N
nexpie-grafana-theme
Commit 499e01d8 by Torkel Ödegaard
Options

feat: metrics tab reworking

parent 5e090b84
Showing with 81 additions and 70 deletions
public/app/features/panel/metrics_tab.ts
///<reference path="../../headers/common.d.ts" /> ///<reference path="../../headers/common.d.ts" />
import _ from 'lodash'; import _ from 'lodash';
//import {coreModule} from 'app/core/core';
import {DashboardModel} from '../dashboard/model'; import {DashboardModel} from '../dashboard/model';
export class MetricsTabCtrl { export class MetricsTabCtrl {
...@@ -79,7 +80,9 @@ export function metricsTabDirective() { ...@@ -79,7 +80,9 @@ export function metricsTabDirective() {
return { return {
restrict: 'E', restrict: 'E',
scope: true, scope: true,
templateUrl: 'public/app/partials/metrics.html', templateUrl: 'public/app/features/panel/partials/metrics_tab.html',
controller: MetricsTabCtrl, controller: MetricsTabCtrl,
}; };
} }
//coreModule.directive('metricsTab', metricsTabDirective);
public/app/features/panel/panel_editor_tab.ts
...@@ -16,10 +16,15 @@ function panelEditorTab(dynamicDirectiveSrv) { ...@@ -16,10 +16,15 @@ function panelEditorTab(dynamicDirectiveSrv) {
directive: scope => { directive: scope => {
var pluginId = scope.ctrl.pluginId; var pluginId = scope.ctrl.pluginId;
var tabIndex = scope.index; var tabIndex = scope.index;
// create a wrapper for directiveFn
// required for metrics tab directive
// that is the same for many panels but
// given different names in this function
var fn = () => scope.editorTab.directiveFn();
return Promise.resolve({ return Promise.resolve({
name: `panel-editor-tab-${pluginId}${tabIndex}`, name: `panel-editor-tab-${pluginId}${tabIndex}`,
fn: scope.editorTab.directiveFn, fn: fn,
}); });
} }
}); });
......
public/app/features/panel/partials/metrics.html 0 → 100644
<metrics-tab panel-ctrl="ctrl"></metrics-tab>
public/app/partials/metrics.html → public/app/features/panel/partials/metrics_tab.html
<div class="gf-form-group"> <div class="gf-form-group">
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form"> <div class="gf-form">
......
public/app/features/panel/query_troubleshooter.ts
...@@ -9,10 +9,10 @@ const template = ` ...@@ -9,10 +9,10 @@ const template = `
ng-class="{'collapse-box--error': ctrl.hasError}"> ng-class="{'collapse-box--error': ctrl.hasError}">
<collapse-box-actions> <collapse-box-actions>
<a class="pointer" ng-click="ctrl.toggleExpand()" ng-hide="ctrl.allNodesExpanded"> <a class="pointer" ng-click="ctrl.toggleExpand()" ng-hide="ctrl.allNodesExpanded">
<i class="fa fa-expand"></i> Expand All <i class="fa fa-plus-square-o"></i> Expand All
</a> </a>
<a class="pointer" ng-click="ctrl.toggleExpand()" ng-show="ctrl.allNodesExpanded"> <a class="pointer" ng-click="ctrl.toggleExpand()" ng-show="ctrl.allNodesExpanded">
<i class="fa fa-expand"></i> Collapse All <i class="fa fa-minus-square-o"></i> Collapse All
</a> </a>
<a class="pointer" clipboard-button="ctrl.getClipboardText()"><i class="fa fa-clipboard"></i> Copy to Clipboard</a> <a class="pointer" clipboard-button="ctrl.getClipboardText()"><i class="fa fa-clipboard"></i> Copy to Clipboard</a>
</collapse-box-actions> </collapse-box-actions>
...@@ -124,9 +124,7 @@ export function queryTroubleshooter() { ...@@ -124,9 +124,7 @@ export function queryTroubleshooter() {
ctrl.renderJsonExplorer = function(data) { ctrl.renderJsonExplorer = function(data) {
var jsonElem = elem.find('.query-troubleshooter-json'); var jsonElem = elem.find('.query-troubleshooter-json');
ctrl.jsonExplorer = new JsonExplorer(data, 3, { ctrl.jsonExplorer = new JsonExplorer(data, 3, { });
theme: 'dark',
});
const html = ctrl.jsonExplorer.render(true); const html = ctrl.jsonExplorer.render(true);
jsonElem.html(html); jsonElem.html(html);
......
public/app/plugins/datasource/graphite/partials/query.options.html
<section class="grafana-metric-options gf-form-group"> <section class="gf-form-group">
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form max-width-15"> <div class="gf-form max-width-15">
<span class="gf-form-label width-8"> <span class="gf-form-label width-8">
......
public/sass/_variables.dark.scss
...@@ -280,3 +280,21 @@ $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .3) ...@@ -280,3 +280,21 @@ $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .3)
$footer-link-color: $gray-1; $footer-link-color: $gray-1;
$footer-link-hover: $gray-4; $footer-link-hover: $gray-4;
// collapse box
$collapse-box-body-border: $dark-5;
$collapse-box-body-error-border: $red;
// json-explorer
$json-explorer-default-color: white;
$json-explorer-string-color: #31F031;
$json-explorer-number-color: #66C2FF;
$json-explorer-boolean-color: #EC4242;
$json-explorer-null-color: #EEC97D;
$json-explorer-undefined-color: rgb(239, 143, 190);
$json-explorer-function-color: #FD48CB;
$json-explorer-rotate-time: 100ms;
$json-explorer-toggler-opacity: 0.6;
$json-explorer-toggler-color: #45376F;
$json-explorer-bracket-color: #9494FF;
$json-explorer-key-color: #23A0DB;
$json-explorer-url-color: #027BFF;
public/sass/_variables.light.scss
...@@ -303,3 +303,23 @@ $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1) ...@@ -303,3 +303,23 @@ $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1)
// footer // footer
$footer-link-color: $gray-3; $footer-link-color: $gray-3;
$footer-link-hover: $dark-5; $footer-link-hover: $dark-5;
// collapse box
$collapse-box-body-border: $gray-4;
$collapse-box-body-error-border: $red;
// json explorer
$json-explorer-default-color: black;
$json-explorer-string-color: green;
$json-explorer-number-color: blue;
$json-explorer-boolean-color: red;
$json-explorer-null-color: #855A00;
$json-explorer-undefined-color: rgb(202, 11, 105);
$json-explorer-function-color: #FF20ED;
$json-explorer-rotate-time: 100ms;
$json-explorer-toggler-opacity: 0.6;
$json-explorer-toggler-color: #45376F;
$json-explorer-bracket-color: blue;
$json-explorer-key-color: #00008B;
$json-explorer-url-color: blue;
public/sass/components/_collapse_box.scss
.collapse-box { .collapse-box {
margin-bottom: $spacer; margin-bottom: $spacer;
&--error {
.collapse-box__header {
background-color: $red;
color: $white;
}
}
} }
.collapse-box__header { .collapse-box__header {
...@@ -14,12 +7,15 @@ ...@@ -14,12 +7,15 @@
flex-direction: row; flex-direction: row;
padding: $input-padding-y $input-padding-x; padding: $input-padding-y $input-padding-x;
margin-right: $gf-form-margin; margin-right: $gf-form-margin;
background-color: $input-bg; background-color: $input-label-bg;
font-size: $font-size-sm; font-size: $font-size-sm;
margin-right: $gf-form-margin; margin-right: $gf-form-margin;
border: $input-btn-border-width solid $collapse-box-body-border;
border: $input-btn-border-width solid transparent;
@include border-radius($label-border-radius-sm); @include border-radius($label-border-radius-sm);
&--error {
border-color: $collapse-box-body-error-border;
}
} }
.collapse-box__header-title { .collapse-box__header-title {
...@@ -28,11 +24,15 @@ ...@@ -28,11 +24,15 @@
.collapse-box__body { .collapse-box__body {
padding: $input-padding-y*2 $input-padding-x; padding: $input-padding-y*2 $input-padding-x;
background-color: $input-label-bg;
display: block; display: block;
margin-right: $gf-form-margin; margin-right: $gf-form-margin;
border: $input-btn-border-width solid transparent; border: $input-btn-border-width solid $collapse-box-body-border;
border-top: none;
@include border-radius($label-border-radius-sm); @include border-radius($label-border-radius-sm);
&--error {
border-color: $collapse-box-body-error-border;
}
} }
.collapse-box__header-actions { .collapse-box__header-actions {
......
public/sass/components/_json_explorer.scss
@mixin json-explorer-theme(
$default-color: black,
$string-color: green,
$number-color: blue,
$boolean-color: red,
$null-color: #855A00,
$undefined-color: rgb(202, 11, 105),
$function-color: #FF20ED,
$rotate-time: 100ms,
$toggler-opacity: 0.6,
$toggler-color: #45376F,
$bracket-color: blue,
$key-color: #00008B,
$url-color: blue) {
.json-formatter-row {
font-family: monospace; font-family: monospace;
&, a, a:hover { &, a, a:hover {
color: $default-color; color: $json-explorer-default-color;
text-decoration: none; text-decoration: none;
} }
...@@ -35,25 +23,25 @@ ...@@ -35,25 +23,25 @@
} }
.json-formatter-string { .json-formatter-string {
color: $string-color; color: $json-explorer-string-color;
white-space: normal; white-space: normal;
word-wrap: break-word; word-wrap: break-word;
} }
.json-formatter-number { color: $number-color; } .json-formatter-number { color: $json-explorer-number-color; }
.json-formatter-boolean { color: $boolean-color; } .json-formatter-boolean { color: $json-explorer-boolean-color; }
.json-formatter-null { color: $null-color; } .json-formatter-null { color: $json-explorer-null-color; }
.json-formatter-undefined { color: $undefined-color; } .json-formatter-undefined { color: $json-explorer-undefined-color; }
.json-formatter-function { color: $function-color; } .json-formatter-function { color: $json-explorer-function-color; }
.json-formatter-date { background-color: fade($default-color, 5%); } .json-formatter-date { background-color: fade($json-explorer-default-color, 5%); }
.json-formatter-url { .json-formatter-url {
text-decoration: underline; text-decoration: underline;
color: $url-color; color: $json-explorer-url-color;
cursor: pointer; cursor: pointer;
} }
.json-formatter-bracket { color: $bracket-color; } .json-formatter-bracket { color: $json-explorer-bracket-color; }
.json-formatter-key { .json-formatter-key {
color: $key-color; color: $json-explorer-key-color;
cursor: pointer; cursor: pointer;
padding-right: 0.2rem; padding-right: 0.2rem;
} }
...@@ -65,13 +53,13 @@ ...@@ -65,13 +53,13 @@
line-height: 1.2rem; line-height: 1.2rem;
font-size: 0.7rem; font-size: 0.7rem;
vertical-align: middle; vertical-align: middle;
opacity: $toggler-opacity; opacity: $json-explorer-toggler-opacity;
cursor: pointer; cursor: pointer;
padding-right: 0.2rem; padding-right: 0.2rem;
&::after { &::after {
display: inline-block; display: inline-block;
transition: transform $rotate-time ease-in; transition: transform $json-explorer-rotate-time ease-in;
content: "►"; content: "►";
} }
} }
...@@ -104,25 +92,3 @@ ...@@ -104,25 +92,3 @@
} }
} }
.json-formatter-row {
@include json-explorer-theme();
}
// Dark theme
.json-formatter-dark.json-formatter-row {
@include json-explorer-theme(
$default-color: white,
$string-color: #31F031,
$number-color: #66C2FF,
$boolean-color: #EC4242,
$null-color: #EEC97D,
$undefined-color: rgb(239, 143, 190),
$function-color: #FD48CB,
$rotate-time: 100ms,
$toggler-opacity: 0.6,
$toggler-color: #45376F,
$bracket-color: #9494FF,
$key-color: #23A0DB,
$url-color: #027BFF);
}
public/sass/grafana.dark.scss
@import "variables"; @import "variables";
@import "variables.dark"; @import "variables.dark";
@import "grafana"; @import "grafana";
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