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" />
import _ from 'lodash';
//import {coreModule} from 'app/core/core';
import {DashboardModel} from '../dashboard/model';
export class MetricsTabCtrl {
......@@ -79,7 +80,9 @@ export function metricsTabDirective() {
return {
restrict: 'E',
scope: true,
templateUrl: 'public/app/partials/metrics.html',
templateUrl: 'public/app/features/panel/partials/metrics_tab.html',
controller: MetricsTabCtrl,
};
}
//coreModule.directive('metricsTab', metricsTabDirective);
public/app/features/panel/panel_editor_tab.ts
......@@ -16,10 +16,15 @@ function panelEditorTab(dynamicDirectiveSrv) {
directive: scope => {
var pluginId = scope.ctrl.pluginId;
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({
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-inline">
<div class="gf-form">
......
public/app/features/panel/query_troubleshooter.ts
......@@ -9,10 +9,10 @@ const template = `
ng-class="{'collapse-box--error': ctrl.hasError}">
<collapse-box-actions>
<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 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 class="pointer" clipboard-button="ctrl.getClipboardText()"><i class="fa fa-clipboard"></i> Copy to Clipboard</a>
</collapse-box-actions>
......@@ -124,9 +124,7 @@ export function queryTroubleshooter() {
ctrl.renderJsonExplorer = function(data) {
var jsonElem = elem.find('.query-troubleshooter-json');
ctrl.jsonExplorer = new JsonExplorer(data, 3, {
theme: 'dark',
});
ctrl.jsonExplorer = new JsonExplorer(data, 3, { });
const html = ctrl.jsonExplorer.render(true);
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 max-width-15">
<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)
$footer-link-color: $gray-1;
$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)
// footer
$footer-link-color: $gray-3;
$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 {
margin-bottom: $spacer;
&--error {
.collapse-box__header {
background-color: $red;
color: $white;
}
}
}
.collapse-box__header {
......@@ -14,12 +7,15 @@
flex-direction: row;
padding: $input-padding-y $input-padding-x;
margin-right: $gf-form-margin;
background-color: $input-bg;
background-color: $input-label-bg;
font-size: $font-size-sm;
margin-right: $gf-form-margin;
border: $input-btn-border-width solid transparent;
border: $input-btn-border-width solid $collapse-box-body-border;
@include border-radius($label-border-radius-sm);
&--error {
border-color: $collapse-box-body-error-border;
}
}
.collapse-box__header-title {
......@@ -28,11 +24,15 @@
.collapse-box__body {
padding: $input-padding-y*2 $input-padding-x;
background-color: $input-label-bg;
display: block;
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);
&--error {
border-color: $collapse-box-body-error-border;
}
}
.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;
&, a, a:hover {
color: $default-color;
color: $json-explorer-default-color;
text-decoration: none;
}
......@@ -35,25 +23,25 @@
}
.json-formatter-string {
color: $string-color;
color: $json-explorer-string-color;
white-space: normal;
word-wrap: break-word;
}
.json-formatter-number { color: $number-color; }
.json-formatter-boolean { color: $boolean-color; }
.json-formatter-null { color: $null-color; }
.json-formatter-undefined { color: $undefined-color; }
.json-formatter-function { color: $function-color; }
.json-formatter-date { background-color: fade($default-color, 5%); }
.json-formatter-number { color: $json-explorer-number-color; }
.json-formatter-boolean { color: $json-explorer-boolean-color; }
.json-formatter-null { color: $json-explorer-null-color; }
.json-formatter-undefined { color: $json-explorer-undefined-color; }
.json-formatter-function { color: $json-explorer-function-color; }
.json-formatter-date { background-color: fade($json-explorer-default-color, 5%); }
.json-formatter-url {
text-decoration: underline;
color: $url-color;
color: $json-explorer-url-color;
cursor: pointer;
}
.json-formatter-bracket { color: $bracket-color; }
.json-formatter-bracket { color: $json-explorer-bracket-color; }
.json-formatter-key {
color: $key-color;
color: $json-explorer-key-color;
cursor: pointer;
padding-right: 0.2rem;
}
......@@ -65,13 +53,13 @@
line-height: 1.2rem;
font-size: 0.7rem;
vertical-align: middle;
opacity: $toggler-opacity;
opacity: $json-explorer-toggler-opacity;
cursor: pointer;
padding-right: 0.2rem;
&::after {
display: inline-block;
transition: transform $rotate-time ease-in;
transition: transform $json-explorer-rotate-time ease-in;
content: "►";
}
}
......@@ -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.dark";
@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