Merge pull request #14283 from grafana/explore-styling-fixes

Misc styling fixes to explore

public/app/core/components/code_editor/theme-grafana-dark.js

@@ -14,7 +14,7 @@ ace.define("ace/theme/grafana-dark",["require","exports","module","ace/lib/dom"]
   background: #555651\
   }\
   .gf-code-dark {\
-  background-color: #111;\
+  background-color: #09090b;\
   color: #e0e0e0\
   }\
   .gf-code-dark .ace_cursor {\

public/app/plugins/datasource/logging/components/LoggingCheatSheet.tsx

@@ -15,7 +15,7 @@ const CHEAT_SHEET_ITEMS = [
 
 export default (props: any) => (
   <div>
-    <h1>Logging Cheat Sheet</h1>
+    <h2>Logging Cheat Sheet</h2>
     {CHEAT_SHEET_ITEMS.map(item => (
       <div className="cheat-sheet-item" key={item.expression}>
         <div className="cheat-sheet-item__title">{item.title}</div>

public/app/plugins/datasource/logging/components/LoggingStartPage.tsx

@@ -1,59 +1,15 @@
 import React, { PureComponent } from 'react';
-import classNames from 'classnames';
-
 import LoggingCheatSheet from './LoggingCheatSheet';
 
-const TAB_MENU_ITEMS = [
-  {
-    text: 'Start',
-    id: 'start',
-    icon: 'fa fa-rocket',
-  },
-];
-
-export default class LoggingStartPage extends PureComponent<any, { active: string }> {
-  state = {
-    active: 'start',
-  };
-
-  onClickTab = active => {
-    this.setState({ active });
-  };
+interface Props {
+  onClickExample: () => void;
+}
 
+export default class LoggingStartPage extends PureComponent<Props> {
   render() {
-    const { active } = this.state;
-    const customCss = '';
-
     return (
-      <div style={{ margin: '45px 0', border: '1px solid #ddd', borderRadius: 5 }}>
-        <div className="page-header-canvas">
-          <div className="page-container">
-            <div className="page-header">
-              <nav>
-                <ul className={`gf-tabs ${customCss}`}>
-                  {TAB_MENU_ITEMS.map((tab, idx) => {
-                    const tabClasses = classNames({
-                      'gf-tabs-link': true,
-                      active: tab.id === active,
-                    });
-
-                    return (
-                      <li className="gf-tabs-item" key={tab.id}>
-                        <a className={tabClasses} onClick={() => this.onClickTab(tab.id)}>
-                          <i className={tab.icon} />
-                          {tab.text}
-                        </a>
-                      </li>
-                    );
-                  })}
-                </ul>
-              </nav>
-            </div>
-          </div>
-        </div>
-        <div className="page-container page-body">
-          {active === 'start' && <LoggingCheatSheet onClickExample={this.props.onClickExample} />}
-        </div>
+      <div className="grafana-info-box grafana-info-box--max-lg">
+        <LoggingCheatSheet onClickExample={this.props.onClickExample} />
       </div>
     );
   }

public/app/plugins/datasource/logging/syntax.ts

@@ -18,6 +18,7 @@ const tokenizer = {
         greedy: true,
         alias: 'attr-value',
       },
+      punctuation: /[{]/,
     },
   },
   // number: /\b-?\d+((\.\d*)?([eE][+-]?\d+)?)?\b/,

public/app/plugins/datasource/prometheus/components/PromCheatSheet.tsx

@@ -21,7 +21,7 @@ const CHEAT_SHEET_ITEMS = [
 
 export default (props: any) => (
   <div>
-    <h1>PromQL Cheat Sheet</h1>
+    <h2>PromQL Cheat Sheet</h2>
     {CHEAT_SHEET_ITEMS.map(item => (
       <div className="cheat-sheet-item" key={item.expression}>
         <div className="cheat-sheet-item__title">{item.title}</div>

public/app/plugins/datasource/prometheus/components/PromStart.tsx

@@ -1,59 +1,15 @@
 import React, { PureComponent } from 'react';
-import classNames from 'classnames';
-
 import PromCheatSheet from './PromCheatSheet';
 
-const TAB_MENU_ITEMS = [
-  {
-    text: 'Start',
-    id: 'start',
-    icon: 'fa fa-rocket',
-  },
-];
-
-export default class PromStart extends PureComponent<any, { active: string }> {
-  state = {
-    active: 'start',
-  };
-
-  onClickTab = active => {
-    this.setState({ active });
-  };
+interface Props {
+  onClickExample: () => void;
+}
 
+export default class PromStart extends PureComponent<Props> {
   render() {
-    const { active } = this.state;
-    const customCss = '';
-
     return (
-      <div style={{ margin: '45px 0', border: '1px solid #ddd', borderRadius: 5 }}>
-        <div className="page-header-canvas">
-          <div className="page-container">
-            <div className="page-header">
-              <nav>
-                <ul className={`gf-tabs ${customCss}`}>
-                  {TAB_MENU_ITEMS.map((tab, idx) => {
-                    const tabClasses = classNames({
-                      'gf-tabs-link': true,
-                      active: tab.id === active,
-                    });
-
-                    return (
-                      <li className="gf-tabs-item" key={tab.id}>
-                        <a className={tabClasses} onClick={() => this.onClickTab(tab.id)}>
-                          <i className={tab.icon} />
-                          {tab.text}
-                        </a>
-                      </li>
-                    );
-                  })}
-                </ul>
-              </nav>
-            </div>
-          </div>
-        </div>
-        <div className="page-container page-body">
-          {active === 'start' && <PromCheatSheet onClickExample={this.props.onClickExample} />}
-        </div>
+      <div className="grafana-info-box grafana-info-box--max-lg">
+        <PromCheatSheet onClickExample={this.props.onClickExample} />
       </div>
     );
   }

public/app/plugins/datasource/prometheus/promql.ts

@@ -386,9 +386,10 @@ const tokenizer = {
     lookbehind: true,
     inside: {
       'label-key': {
-        pattern: /[^,\s][^,]*[^,\s]*/,
+        pattern: /[^(),\s][^,)]*[^),\s]*/,
         alias: 'attr-name',
       },
+      punctuation: /[()]/,
     },
   },
   'context-labels': {
@@ -403,6 +404,7 @@ const tokenizer = {
         greedy: true,
         alias: 'attr-value',
       },
+      punctuation: /[{]/,
     },
   },
   function: new RegExp(`\\b(?:${FUNCTIONS.map(f => f.label).join('|')})(?=\\s*\\()`, 'i'),

public/sass/_variables.dark.scss

@@ -44,9 +44,10 @@ $brand-success: $green;
 $brand-warning: $brand-primary;
 $brand-danger: $red;
 
-$query-red: $red;
-$query-green: $green;
-$query-purple: $purple;
+$query-red: #e24d42;
+$query-green: #74e680;
+$query-purple: #fe85fc;
+$query-keyword: #66d9ef;
 $query-orange: $orange;
 
 // Status colors
@@ -203,7 +204,7 @@ $search-filter-box-bg: $gray-blue;
 // Typeahead
 $typeahead-shadow: 0 5px 10px 0 $black;
 $typeahead-selected-bg: $dark-4;
-$typeahead-selected-color: $blue;
+$typeahead-selected-color: $yellow;
 
 // Dropdowns
 // -------------------------

public/sass/_variables.light.scss

@@ -49,6 +49,7 @@ $query-red: $red;
 $query-green: $green;
 $query-purple: $purple;
 $query-orange: $orange;
+$query-keyword: $blue;
 
 // Status colors
 // -------------------------
@@ -219,8 +220,8 @@ $search-filter-box-bg: $gray-7;
 
 // Typeahead
 $typeahead-shadow: 0 5px 10px 0 $gray-5;
-$typeahead-selected-bg: lighten($blue, 57%);
-$typeahead-selected-color: $blue;
+$typeahead-selected-bg: $gray-6;
+$typeahead-selected-color: $yellow;
 
 // Dropdowns
 // -------------------------

public/sass/components/_infobox.scss

@@ -32,6 +32,10 @@
   a {
     @extend .external-link;
   }
+
+  &--max-lg {
+    max-width: map-get($grid-breakpoints, 'lg');
+  }
 }
 
 .grafana-info-box__close {

public/sass/components/_slate_editor.scss

@@ -12,8 +12,8 @@
   width: 100%;
   cursor: text;
   line-height: $line-height-base;
-  color: $text-color-weak;
-  background-color: $panel-bg;
+  color: $text-color;
+  background-color: $input-bg;
   background-image: none;
   border: $panel-border;
   border-radius: $border-radius;
@@ -95,45 +95,45 @@
     color: $text-color-weak;
   }
 
-  .token.punctuation {
-    color: $text-color-weak;
+  .token.variable,
+  .token.entity {
+    color: $text-color;
   }
 
   .token.property,
   .token.tag,
-  .token.boolean,
-  .token.number,
-  .token.function-name,
   .token.constant,
   .token.symbol,
   .token.deleted {
     color: $query-red;
   }
 
+  .token.attr-value,
   .token.selector,
-  .token.attr-name,
   .token.string,
   .token.char,
-  .token.function,
   .token.builtin,
   .token.inserted {
     color: $query-green;
   }
 
+  .token.boolean,
+  .token.number,
   .token.operator,
-  .token.entity,
-  .token.url,
-  .token.variable {
+  .token.url {
     color: $query-purple;
   }
 
+  .token.function,
+  .token.attr-name,
+  .token.function-name,
   .token.atrule,
-  .token.attr-value,
   .token.keyword,
   .token.class-name {
-    color: $blue;
+    color: $query-keyword;
   }
 
+  .token.punctuation,
   .token.regex,
   .token.important {
     color: $query-orange;

public/sass/pages/_explore.scss

@@ -2,7 +2,7 @@
   width: 100%;
 
   &-container {
-    padding: 2rem;
+    padding: $dashboard-padding;
   }
 
   &-wrapper {
@@ -36,10 +36,6 @@
     transition: all 0.1s linear;
   }
 
-  .explore-panel__header:hover {
-    transform: translateY(-1px);
-  }
-
   .explore-panel__header-label {
     font-weight: 500;
     margin-right: $panel-margin;
@@ -308,7 +304,7 @@
 
       color: $typeahead-selected-color;
       border-bottom: 1px solid $typeahead-selected-color;
-      background-color: lighten($typeahead-selected-color, 60%);
+      background-color: rgba($typeahead-selected-color, 0.1);
     }
 
     .logs-row-level {