From 499e01d8327fea2636e1519713ba7658b3bd0ef4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 20 May 2017 18:21:41 +0200 Subject: [PATCH] feat: metrics tab reworking --- public/app/features/panel/metrics_tab.ts | 5 +- public/app/features/panel/panel_editor_tab.ts | 7 +- .../app/features/panel/partials/metrics.html | 1 + .../panel/partials/metrics_tab.html} | 1 - .../features/panel/query_troubleshooter.ts | 8 +-- .../graphite/partials/query.options.html | 2 +- public/sass/_variables.dark.scss | 18 ++++++ public/sass/_variables.light.scss | 20 ++++++ public/sass/components/_collapse_box.scss | 24 +++---- public/sass/components/_json_explorer.scss | 64 +++++-------------- public/sass/grafana.dark.scss | 1 + 11 files changed, 81 insertions(+), 70 deletions(-) create mode 100644 public/app/features/panel/partials/metrics.html rename public/app/{partials/metrics.html => features/panel/partials/metrics_tab.html} (99%) diff --git a/public/app/features/panel/metrics_tab.ts b/public/app/features/panel/metrics_tab.ts index 375c20b0ae0..8f5e3dfdded 100644 --- a/public/app/features/panel/metrics_tab.ts +++ b/public/app/features/panel/metrics_tab.ts @@ -1,6 +1,7 @@ /// 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); diff --git a/public/app/features/panel/panel_editor_tab.ts b/public/app/features/panel/panel_editor_tab.ts index f6c11306678..9bbb979bcc0 100644 --- a/public/app/features/panel/panel_editor_tab.ts +++ b/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, }); } }); diff --git a/public/app/features/panel/partials/metrics.html b/public/app/features/panel/partials/metrics.html new file mode 100644 index 00000000000..5d44948df4a --- /dev/null +++ b/public/app/features/panel/partials/metrics.html @@ -0,0 +1 @@ + diff --git a/public/app/partials/metrics.html b/public/app/features/panel/partials/metrics_tab.html similarity index 99% rename from public/app/partials/metrics.html rename to public/app/features/panel/partials/metrics_tab.html index 46f690bd775..9ecfd769f7a 100644 --- a/public/app/partials/metrics.html +++ b/public/app/features/panel/partials/metrics_tab.html @@ -1,4 +1,3 @@ -
diff --git a/public/app/features/panel/query_troubleshooter.ts b/public/app/features/panel/query_troubleshooter.ts index 658d3bce003..bbbe0e70935 100644 --- a/public/app/features/panel/query_troubleshooter.ts +++ b/public/app/features/panel/query_troubleshooter.ts @@ -9,10 +9,10 @@ const template = ` ng-class="{'collapse-box--error': ctrl.hasError}"> - Expand All + Expand All - Collapse All + Collapse All Copy to Clipboard @@ -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); diff --git a/public/app/plugins/datasource/graphite/partials/query.options.html b/public/app/plugins/datasource/graphite/partials/query.options.html index 05aecf4b44a..22c7d8c0be8 100644 --- a/public/app/plugins/datasource/graphite/partials/query.options.html +++ b/public/app/plugins/datasource/graphite/partials/query.options.html @@ -1,4 +1,4 @@ -
+
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 7e7865b6b88..c6bee53b14b 100644 --- a/public/sass/_variables.dark.scss +++ b/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; diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index a10f94afc1b..de23ae512f1 100644 --- a/public/sass/_variables.light.scss +++ b/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; + diff --git a/public/sass/components/_collapse_box.scss b/public/sass/components/_collapse_box.scss index 38dbb3d8ca6..a8a5db46abe 100644 --- a/public/sass/components/_collapse_box.scss +++ b/public/sass/components/_collapse_box.scss @@ -1,12 +1,5 @@ .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 { diff --git a/public/sass/components/_json_explorer.scss b/public/sass/components/_json_explorer.scss index d372c332176..b6a2f089db6 100644 --- a/public/sass/components/_json_explorer.scss +++ b/public/sass/components/_json_explorer.scss @@ -1,21 +1,9 @@ -@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); -} diff --git a/public/sass/grafana.dark.scss b/public/sass/grafana.dark.scss index 53193d213e6..858d6ace336 100644 --- a/public/sass/grafana.dark.scss +++ b/public/sass/grafana.dark.scss @@ -1,3 +1,4 @@ @import "variables"; @import "variables.dark"; @import "grafana"; +