feat: metrics tab reworking

public/app/features/panel/metrics_tab.ts

@@ -1,6 +1,7 @@
 ///<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,0 +1 @@
+<metrics-tab panel-ctrl="ctrl"></metrics-tab>

public/app/partials/metrics.html → public/app/features/panel/partials/metrics_tab.html

@@ -1,4 +1,3 @@
-
 <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

@@ -1,4 +1,4 @@
-<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

@@ -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 {

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);
-}

public/sass/grafana.dark.scss

@@ -1,3 +1,4 @@
 @import "variables";
 @import "variables.dark";
 @import "grafana";
+