Merge branch 'master' of https://github.com/grafana/grafana into piechart-react

CHANGELOG.md

@@ -29,20 +29,19 @@
 * **Login**: Anonymous usage stats for token auth [#15288](https://github.com/grafana/grafana/issues/15288)
 * **AzureMonitor**: improve autocomplete for Log Analytics and App Insights editor [#15131](https://github.com/grafana/grafana/issues/15131)
 * **LDAP**: Fix IPA/FreeIPA v4.6.4 does not allow LDAP searches with empty attributes [#14432](https://github.com/grafana/grafana/issues/14432)
+* **Provisioning**: Allow testing data sources that were added by config [#12164](https://github.com/grafana/grafana/issues/12164)
 
 ### Breaking changes
 
 * **Internal Metrics** Edition has been added to the build_info metric. This will break any Graphite queries using this metric. Edition will be a new label for the Prometheus metric. [#15363](https://github.com/grafana/grafana/pull/15363)
 
-### 6.0.0-beta1 fixes
+### Bug fixes
 
-* **Postgres**: Fix default port not added when port not configured [#15189](https://github.com/grafana/grafana/issues/15189)
-* **Alerting**: Fixes crash bug when alert notifier folders are missing [#15295](https://github.com/grafana/grafana/issues/15295)
-* **Dashboard**: Fix save provisioned dashboard modal [#15219](https://github.com/grafana/grafana/pull/15219)
-* **Dashboard**: Fix having a long query in prometheus dashboard query editor blocks 30% of the query field when on OSX and having native scrollbars [#15122](https://github.com/grafana/grafana/issues/15122)
-* **Explore**: Fix issue with wrapping on long queries [#15222](https://github.com/grafana/grafana/issues/15222)
-* **Explore**: Fix cut & paste adds newline before and after selection [#15223](https://github.com/grafana/grafana/issues/15223)
-* **Dataproxy**: Fix global datasource proxy timeout not added to correct http client [#15258](https://github.com/grafana/grafana/issues/15258) [#5699](https://github.com/grafana/grafana/issues/5699)
+* **Gauge**: Fix issue with gauge requests being cancelled [#15366](https://github.com/grafana/grafana/issues/15366)
+* **Gauge**: Accept decimal inputs for thresholds [#15372](https://github.com/grafana/grafana/issues/15372)
+* **UI**: Fix error caused by named colors that are not part of named colors palette [#15373](https://github.com/grafana/grafana/issues/15373)
+* **Search**: Bug pressing special regexp chars in input fields [#12972](https://github.com/grafana/grafana/issues/12972)
+* **Permissions**: No need to have edit permissions to be able to "Save as" [#13066](https://github.com/grafana/grafana/issues/13066)
 
 # 6.0.0-beta1 (2019-01-30)
 
@@ -91,6 +90,13 @@
 * **Prometheus**: Query for annotation always uses 60s step regardless of dashboard range, fixes [#14795](https://github.com/grafana/grafana/issues/14795)
 * **Annotations**: Fix creating annotation when graph panel has no data points position the popup outside viewport [#13765](https://github.com/grafana/grafana/issues/13765), thx [@banjeremy](https://github.com/banjeremy)
 * **Piechart/Flot**: Fixes multiple piechart instances with donut bug [#15062](https://github.com/grafana/grafana/pull/15062)
+* **Postgres**: Fix default port not added when port not configured [#15189](https://github.com/grafana/grafana/issues/15189)
+* **Alerting**: Fixes crash bug when alert notifier folders are missing [#15295](https://github.com/grafana/grafana/issues/15295)
+* **Dashboard**: Fix save provisioned dashboard modal [#15219](https://github.com/grafana/grafana/pull/15219)
+* **Dashboard**: Fix having a long query in prometheus dashboard query editor blocks 30% of the query field when on OSX and having native scrollbars [#15122](https://github.com/grafana/grafana/issues/15122)
+* **Explore**: Fix issue with wrapping on long queries [#15222](https://github.com/grafana/grafana/issues/15222)
+* **Explore**: Fix cut & paste adds newline before and after selection [#15223](https://github.com/grafana/grafana/issues/15223)
+* **Dataproxy**: Fix global datasource proxy timeout not added to correct http client [#15258](https://github.com/grafana/grafana/issues/15258) [#5699](https://github.com/grafana/grafana/issues/5699)
 
 ### Breaking changes
 * **Text Panel**: The text panel does no longer by default allow unsantizied HTML. [#4117](https://github.com/grafana/grafana/issues/4117). This means that if you have text panels with scripts tags they will no longer work as before. To enable unsafe javascript execution in text panels enable the settings `disable_sanitize_html` under the section `[panels]` in your Grafana ini file, or set env variable  `GF_PANELS_DISABLE_SANITIZE_HTML=true`.

packages/grafana-ui/src/components/Gauge/Gauge.test.tsx

@@ -84,9 +84,9 @@ describe('Get thresholds formatted', () => {
   it('should get the correct formatted values when thresholds are added', () => {
     const { instance } = setup({
       thresholds: [
-        { index: 2, value: 75, color: '#6ED0E0' },
-        { index: 1, value: 50, color: '#EAB839' },
         { index: 0, value: -Infinity, color: '#7EB26D' },
+        { index: 1, value: 50, color: '#EAB839' },
+        { index: 2, value: 75, color: '#6ED0E0' },
       ],
     });
 

packages/grafana-ui/src/components/Gauge/Gauge.tsx

@@ -98,16 +98,15 @@ export class Gauge extends PureComponent<Props> {
   getFormattedThresholds() {
     const { maxValue, minValue, thresholds, theme } = this.props;
 
-    const thresholdsSortedByIndex = [...thresholds].sort((t1, t2) => t1.index - t2.index);
-    const lastThreshold = thresholdsSortedByIndex[thresholdsSortedByIndex.length - 1];
+    const lastThreshold = thresholds[thresholds.length - 1];
 
     return [
-      ...thresholdsSortedByIndex.map(threshold => {
+      ...thresholds.map(threshold => {
         if (threshold.index === 0) {
           return { value: minValue, color: getColorFromHexRgbOrName(threshold.color, theme.type) };
         }
 
-        const previousThreshold = thresholdsSortedByIndex[threshold.index - 1];
+        const previousThreshold = thresholds[threshold.index - 1];
         return { value: threshold.value, color: getColorFromHexRgbOrName(previousThreshold.color, theme.type) };
       }),
       { value: maxValue, color: getColorFromHexRgbOrName(lastThreshold.color, theme.type) },

packages/grafana-ui/src/components/Switch/Switch.tsx

@@ -17,7 +17,7 @@ export interface State {
 
 export class Switch extends PureComponent<Props, State> {
   state = {
-    id: _.uniqueId(),
+    id: _.uniqueId('check-'),
   };
 
   internalOnChange = (event: React.FormEvent<HTMLInputElement>) => {
@@ -29,18 +29,20 @@ export class Switch extends PureComponent<Props, State> {
   render() {
     const { labelClass = '', switchClass = '', label, checked, transparent, className } = this.props;
 
-    const labelId = `check-${this.state.id}`;
+    const labelId = this.state.id;
     const labelClassName = `gf-form-label ${labelClass} ${transparent ? 'gf-form-label--transparent' : ''} pointer`;
     const switchClassName = `gf-form-switch ${switchClass} ${transparent ? 'gf-form-switch--transparent' : ''}`;
 
     return (
-      <label htmlFor={labelId} className={`gf-form gf-form-switch-container ${className}`}>
-        {label && <div className={labelClassName}>{label}</div>}
-        <div className={switchClassName}>
-          <input id={labelId} type="checkbox" checked={checked} onChange={this.internalOnChange} />
-          <span className="gf-form-switch__slider" />
-        </div>
-      </label>
+      <div className="gf-form-switch-container-react">
+        <label htmlFor={labelId} className={`gf-form gf-form-switch-container ${className || ''}`}>
+          {label && <div className={labelClassName}>{label}</div>}
+          <div className={switchClassName}>
+            <input id={labelId} type="checkbox" checked={checked} onChange={this.internalOnChange} />
+            <span className="gf-form-switch__slider" />
+          </div>
+        </label>
+      </div>
     );
   }
 }

packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.test.tsx

@@ -1,9 +1,8 @@
 import React, { ChangeEvent } from 'react';
-import { shallow } from 'enzyme';
-
+import { mount } from 'enzyme';
 import { ThresholdsEditor, Props } from './ThresholdsEditor';
 
-const setup = (propOverrides?: object) => {
+const setup = (propOverrides?: Partial<Props>) => {
   const props: Props = {
     onChange: jest.fn(),
     thresholds: [],
@@ -11,12 +10,26 @@ const setup = (propOverrides?: object) => {
 
   Object.assign(props, propOverrides);
 
-  return shallow(<ThresholdsEditor {...props} />).instance() as ThresholdsEditor;
+  const wrapper = mount(<ThresholdsEditor {...props} />);
+  const instance = wrapper.instance() as ThresholdsEditor;
+
+  return {
+    instance,
+    wrapper,
+  };
 };
 
+describe('Render', () => {
+  it('should render with base threshold', () => {
+    const { wrapper } = setup();
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});
+
 describe('Initialization', () => {
   it('should add a base threshold if missing', () => {
-    const instance = setup();
+    const { instance } = setup();
 
     expect(instance.state.thresholds).toEqual([{ index: 0, value: -Infinity, color: '#7EB26D' }]);
   });
@@ -24,7 +37,7 @@ describe('Initialization', () => {
 
 describe('Add threshold', () => {
   it('should not add threshold at index 0', () => {
-    const instance = setup();
+    const { instance } = setup();
 
     instance.onAddThreshold(0);
 
@@ -32,32 +45,32 @@ describe('Add threshold', () => {
   });
 
   it('should add threshold', () => {
-    const instance = setup();
+    const { instance } = setup();
 
     instance.onAddThreshold(1);
 
     expect(instance.state.thresholds).toEqual([
-      { index: 1, value: 50, color: '#EAB839' },
       { index: 0, value: -Infinity, color: '#7EB26D' },
+      { index: 1, value: 50, color: '#EAB839' },
     ]);
   });
 
   it('should add another threshold above a first', () => {
-    const instance = setup({
+    const { instance } = setup({
       thresholds: [{ index: 0, value: -Infinity, color: '#7EB26D' }, { index: 1, value: 50, color: '#EAB839' }],
     });
 
     instance.onAddThreshold(2);
 
     expect(instance.state.thresholds).toEqual([
-      { index: 2, value: 75, color: '#6ED0E0' },
-      { index: 1, value: 50, color: '#EAB839' },
       { index: 0, value: -Infinity, color: '#7EB26D' },
+      { index: 1, value: 50, color: '#EAB839' },
+      { index: 2, value: 75, color: '#6ED0E0' },
     ]);
   });
 
   it('should add another threshold between first and second index', () => {
-    const instance = setup({
+    const { instance } = setup({
       thresholds: [
         { index: 0, value: -Infinity, color: '#7EB26D' },
         { index: 1, value: 50, color: '#EAB839' },
@@ -68,10 +81,10 @@ describe('Add threshold', () => {
     instance.onAddThreshold(2);
 
     expect(instance.state.thresholds).toEqual([
-      { index: 3, value: 75, color: '#6ED0E0' },
-      { index: 2, value: 62.5, color: '#EF843C' },
-      { index: 1, value: 50, color: '#EAB839' },
       { index: 0, value: -Infinity, color: '#7EB26D' },
+      { index: 1, value: 50, color: '#EAB839' },
+      { index: 2, value: 62.5, color: '#EF843C' },
+      { index: 3, value: 75, color: '#6ED0E0' },
     ]);
   });
 });
@@ -83,7 +96,7 @@ describe('Remove threshold', () => {
       { index: 1, value: 50, color: '#EAB839' },
       { index: 2, value: 75, color: '#6ED0E0' },
     ];
-    const instance = setup({ thresholds });
+    const { instance } = setup({ thresholds });
 
     instance.onRemoveThreshold(thresholds[0]);
 
@@ -96,9 +109,7 @@ describe('Remove threshold', () => {
       { index: 1, value: 50, color: '#EAB839' },
       { index: 2, value: 75, color: '#6ED0E0' },
     ];
-    const instance = setup({
-      thresholds,
-    });
+    const { instance } = setup({ thresholds });
 
     instance.onRemoveThreshold(thresholds[1]);
 
@@ -116,7 +127,7 @@ describe('change threshold value', () => {
       { index: 1, value: 50, color: '#EAB839' },
       { index: 2, value: 75, color: '#6ED0E0' },
     ];
-    const instance = setup({ thresholds });
+    const { instance } = setup({ thresholds });
 
     const mockEvent = ({ target: { value: '12' } } as any) as ChangeEvent<HTMLInputElement>;
 
@@ -126,7 +137,7 @@ describe('change threshold value', () => {
   });
 
   it('should update value', () => {
-    const instance = setup();
+    const { instance } = setup();
     const thresholds = [
       { index: 0, value: -Infinity, color: '#7EB26D' },
       { index: 1, value: 50, color: '#EAB839' },
@@ -150,24 +161,24 @@ describe('change threshold value', () => {
 });
 
 describe('on blur threshold value', () => {
-  it('should resort rows and update indexes', () => {
-    const instance = setup();
+  it.only('should resort rows and update indexes', () => {
+    const { instance } = setup();
     const thresholds = [
       { index: 0, value: -Infinity, color: '#7EB26D' },
       { index: 1, value: 78, color: '#EAB839' },
       { index: 2, value: 75, color: '#6ED0E0' },
     ];
 
-    instance.state = {
+    instance.setState({
       thresholds,
-    };
+    });
 
     instance.onBlur();
 
     expect(instance.state.thresholds).toEqual([
-      { index: 2, value: 78, color: '#EAB839' },
-      { index: 1, value: 75, color: '#6ED0E0' },
       { index: 0, value: -Infinity, color: '#7EB26D' },
+      { index: 1, value: 75, color: '#6ED0E0' },
+      { index: 2, value: 78, color: '#EAB839' },
     ]);
   });
 });

packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx

@@ -1,7 +1,7 @@
 import React, { PureComponent, ChangeEvent } from 'react';
 import { Threshold } from '../../types';
-import { ColorPicker } from '../ColorPicker/ColorPicker';
-import { PanelOptionsGroup } from '../PanelOptionsGroup/PanelOptionsGroup';
+import { ColorPicker } from '..';
+import { PanelOptionsGroup } from '..';
 import { colors } from '../../utils';
 import { getColorFromHexRgbOrName, ThemeContext } from '@grafana/ui';
 
@@ -54,16 +54,16 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
     const value = afterThresholdValue - (afterThresholdValue - beforeThresholdValue) / 2;
 
     // Set a color
-    const color = colors.filter(c => newThresholds.some(t => t.color === c) === false)[0];
+    const color = colors.filter(c => !newThresholds.some(t => t.color === c))[0];
 
     this.setState(
       {
         thresholds: this.sortThresholds([
           ...newThresholds,
           {
+            color,
             index,
             value: value as number,
-            color,
           },
         ]),
       },
@@ -137,10 +137,11 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
   onBlur = () => {
     this.setState(prevState => {
       const sortThresholds = this.sortThresholds([...prevState.thresholds]);
-      let index = sortThresholds.length - 1;
+      let index = 0;
       sortThresholds.forEach(t => {
-        t.index = index--;
+        t.index = index++;
       });
+
       return { thresholds: sortThresholds };
     });
 
@@ -153,12 +154,11 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
 
   sortThresholds = (thresholds: Threshold[]) => {
     return thresholds.sort((t1, t2) => {
-      return t2.value - t1.value;
+      return t1.value - t2.value;
     });
   };
 
   renderInput = (threshold: Threshold) => {
-    const value = threshold.index === 0 ? 'Base' : threshold.value;
     return (
       <div className="thresholds-row-input-inner">
         <span className="thresholds-row-input-inner-arrow" />
@@ -169,51 +169,60 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
             </div>
           )}
         </div>
-        <div className="thresholds-row-input-inner-value">
-          <input
-            type="number"
-            step="0.0001"
-            onChange={event => this.onChangeThresholdValue(event, threshold)}
-            value={value}
-            onBlur={this.onBlur}
-            readOnly={threshold.index === 0}
-          />
-        </div>
-        {threshold.index > 0 && (
-          <div className="thresholds-row-input-inner-remove" onClick={() => this.onRemoveThreshold(threshold)}>
-            <i className="fa fa-times" />
+        {threshold.index === 0 && (
+          <div className="thresholds-row-input-inner-value">
+            <input type="text" value="Base" readOnly />
           </div>
         )}
+        {threshold.index > 0 && (
+          <>
+            <div className="thresholds-row-input-inner-value">
+              <input
+                type="number"
+                step="0.0001"
+                onChange={event => this.onChangeThresholdValue(event, threshold)}
+                value={threshold.value}
+                onBlur={this.onBlur}
+                readOnly={threshold.index === 0}
+              />
+            </div>
+            <div className="thresholds-row-input-inner-remove" onClick={() => this.onRemoveThreshold(threshold)}>
+              <i className="fa fa-times" />
+            </div>
+          </>
+        )}
       </div>
     );
   };
 
   render() {
     const { thresholds } = this.state;
-
     return (
       <ThemeContext.Consumer>
         {theme => {
           return (
             <PanelOptionsGroup title="Thresholds">
               <div className="thresholds">
-                {thresholds.map((threshold, index) => {
-                  return (
-                    <div className="thresholds-row" key={`${threshold.index}-${index}`}>
-                      <div
-                        className="thresholds-row-add-button"
-                        onClick={() => this.onAddThreshold(threshold.index + 1)}
-                      >
-                        <i className="fa fa-plus" />
+                {thresholds
+                  .slice(0)
+                  .reverse()
+                  .map((threshold, index) => {
+                    return (
+                      <div className="thresholds-row" key={`${threshold.index}-${index}`}>
+                        <div
+                          className="thresholds-row-add-button"
+                          onClick={() => this.onAddThreshold(threshold.index + 1)}
+                        >
+                          <i className="fa fa-plus" />
+                        </div>
+                        <div
+                          className="thresholds-row-color-indicator"
+                          style={{ backgroundColor: getColorFromHexRgbOrName(threshold.color, theme.type) }}
+                        />
+                        <div className="thresholds-row-input">{this.renderInput(threshold)}</div>
                       </div>
-                      <div
-                        className="thresholds-row-color-indicator"
-                        style={{ backgroundColor: getColorFromHexRgbOrName(threshold.color, theme.type) }}
-                      />
-                      <div className="thresholds-row-input">{this.renderInput(threshold)}</div>
-                    </div>
-                  );
-                })}
+                    );
+                  })}
               </div>
             </PanelOptionsGroup>
           );

packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss

@@ -43,7 +43,7 @@
 }
 
 .thresholds-row-input {
-  margin-top: 49px;
+  margin-top: 44px;
   margin-left: 2px;
 }
 

packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render should render with base threshold 1`] = `
+<ContextConsumer>
+  <Component />
+</ContextConsumer>
+`;

pkg/api/index.go

@@ -145,7 +145,7 @@ func (hs *HTTPServer) setIndexViewData(c *m.ReqContext) (*dtos.IndexViewData, er
 			Text:     "Explore",
 			Id:       "explore",
 			SubTitle: "Explore your data",
-			Icon:     "fa fa-rocket",
+			Icon:     "gicon gicon-explore",
 			Url:      setting.AppSubUrl + "/explore",
 		})
 	}

pkg/services/auth/token_cleanup.go

@@ -52,6 +52,6 @@ func (srv *UserAuthTokenService) deleteExpiredTokens(maxInactiveLifetime, maxLif
 		return 0, nil
 	}
 
-	srv.log.Info("cleanup of expired auth tokens done", "count", affected)
+	srv.log.Debug("cleanup of expired auth tokens done", "count", affected)
 	return affected, err
 }

public/app/features/dashboard/components/DashNav/DashNav.tsx

@@ -65,7 +65,7 @@ export class DashNav extends PureComponent<Props> {
       });
     } else {
       this.props.updateLocation({
-        query: { panelId: null, edit: null, fullscreen: null },
+        query: { panelId: null, edit: null, fullscreen: null, tab: null },
         partial: true,
       });
     }

public/app/features/dashboard/services/DashboardSrv.ts

@@ -43,6 +43,7 @@ export class DashboardSrv {
         delete urlParams.fullscreen;
         delete urlParams.edit;
         delete urlParams.panelId;
+        delete urlParams.tab;
         this.$location.search(urlParams);
         return;
       }
@@ -58,6 +59,7 @@ export class DashboardSrv {
       urlParams.edit = true;
     } else {
       delete urlParams.edit;
+      delete urlParams.tab;
     }
 
     if (options.panelId || options.panelId === 0) {

public/app/features/dashboard/state/DashboardMigrator.ts

@@ -399,6 +399,12 @@ export class DashboardMigrator {
             prefix: panel.options.prefix,
             suffix: panel.options.suffix,
           };
+
+          // correct order
+          if (panel.options.thresholds) {
+            panel.options.thresholds.reverse();
+          }
+
           // this options prop was due to a bug
           delete panel.options.options;
           delete panel.options.unit;

public/app/features/explore/ExploreToolbar.tsx

@@ -103,18 +103,16 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> {
             <div className="explore-toolbar-header-title">
               {exploreId === 'left' && (
                 <span className="navbar-page-btn">
-                  <i className="fa fa-rocket fa-fw" />
+                  <i className="gicon gicon-explore" />
                   Explore
                 </span>
               )}
             </div>
-            <div className="explore-toolbar-header-close">
-              {exploreId === 'right' && (
-                <a onClick={this.props.closeSplit}>
-                  <i className="fa fa-times fa-fw" />
-                </a>
-              )}
-            </div>
+            {exploreId === 'right' && (
+              <a className="explore-toolbar-header-close" onClick={this.props.closeSplit}>
+                <i className="fa fa-times fa-fw" />
+              </a>
+            )}
           </div>
         </div>
         <div className="explore-toolbar-item">
@@ -156,7 +154,7 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> {
                 splitted,
                 title: 'Run Query',
                 onClick: this.onRunQuery,
-                buttonClassName: 'navbar-button--primary',
+                buttonClassName: 'navbar-button--secondary',
                 iconClassName: loading ? 'fa fa-spinner fa-fw fa-spin run-icon' : 'fa fa-level-down fa-fw run-icon',
                 iconSide: IconSide.right,
               })}

public/app/plugins/datasource/grafana/datasource.ts

@@ -57,10 +57,17 @@ class GrafanaDatasource {
       if (!_.isArray(options.annotation.tags) || options.annotation.tags.length === 0) {
         return this.$q.when([]);
       }
+      const delimiter = '__delimiter__';
       const tags = [];
       for (const t of params.tags) {
-        const renderedValues = this.templateSrv.replace(t, {}, 'pipe');
-        for (const tt of renderedValues.split('|')) {
+        const renderedValues = this.templateSrv.replace(t, {}, value => {
+          if (typeof value === 'string') {
+            return value;
+          }
+
+          return value.join(delimiter);
+        });
+        for (const tt of renderedValues.split(delimiter)) {
           tags.push(tt);
         }
       }

public/app/plugins/datasource/grafana/specs/datasource.test.ts

@@ -14,7 +14,7 @@ describe('grafana data source', () => {
 
     const templateSrvStub = {
       replace: val => {
-        return val.replace('$var2', 'replaced|replaced2').replace('$var', 'replaced');
+        return val.replace('$var2', 'replaced__delimiter__replaced2').replace('$var', 'replaced');
       },
     };
 

public/app/plugins/panel/graph2/module.tsx

@@ -1,4 +1,8 @@
-import { GraphPanel } from './GraphPanel';
+import { ReactPanelPlugin } from '@grafana/ui';
+
 import { GraphPanelEditor } from './GraphPanelEditor';
+import { GraphPanel } from './GraphPanel';
+import { Options } from './types';
 
-export { GraphPanel as Panel, GraphPanelEditor as PanelOptions };
+export const reactPanel = new ReactPanelPlugin<Options>(GraphPanel);
+reactPanel.setEditor(GraphPanelEditor);

public/img/icons_dark_theme/icon_explore.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="22px" height="22px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#E3E3E3;}
+</style>
+<g>
+	<polygon class="st0" points="7.93,14.21 6.99,17.47 9.52,15.21 9,14.28 	"/>
+	<polygon class="st0" points="14.15,7.86 15.08,4.6 12.56,6.86 13.08,7.79 	"/>
+	<polygon class="st0" points="14.28,13.07 14.22,14.14 17.47,15.08 15.22,12.55 	"/>
+	<polygon class="st0" points="7.8,9 7.86,7.93 4.61,6.99 6.86,9.52 	"/>
+	<path class="st0" d="M8.82,1.31L8.36,9.35l-7.05,3.9l8.04,0.46l3.9,7.05l0.46-8.04l7.05-3.9l-8.04-0.46L8.82,1.31z M11.38,11.78
+		c-0.41,0.19-0.89,0.01-1.08-0.4c-0.19-0.41-0.01-0.89,0.4-1.08c0.41-0.19,0.89-0.01,1.08,0.4C11.97,11.1,11.79,11.59,11.38,11.78z"
+		/>
+	<path class="st1" d="M21.72,8.56c-1.35-5.92-7.24-9.63-13.16-8.28C2.64,1.63-1.07,7.52,0.28,13.44s7.24,9.63,13.16,8.28
+		C19.36,20.37,23.07,14.48,21.72,8.56z M15.08,4.6l-0.94,3.25l-1.07-0.06l-0.52-0.94L15.08,4.6z M7.86,7.93L7.8,9L6.86,9.52
+		L4.61,6.99L7.86,7.93z M6.99,17.47l0.94-3.25L9,14.28l0.52,0.94L6.99,17.47z M14.22,14.14l0.06-1.07l0.94-0.52l2.25,2.53
+		L14.22,14.14z M13.72,12.72l-0.46,8.04l-3.9-7.05l-8.04-0.46l7.05-3.9l0.46-8.04l3.9,7.05l8.04,0.46L13.72,12.72z"/>
+	<path class="st1" d="M10.7,10.29c-0.41,0.19-0.59,0.67-0.4,1.08c0.19,0.41,0.67,0.59,1.08,0.4c0.41-0.19,0.59-0.67,0.4-1.08
+		C11.59,10.28,11.1,10.11,10.7,10.29z"/>
+</g>
+</svg>

public/img/icons_light_theme/icon_explore.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="22px" height="22px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#52545c;}
+</style>
+<g>
+	<polygon class="st0" points="7.93,14.21 6.99,17.47 9.52,15.21 9,14.28 	"/>
+	<polygon class="st0" points="14.15,7.86 15.08,4.6 12.56,6.86 13.08,7.79 	"/>
+	<polygon class="st0" points="14.28,13.07 14.22,14.14 17.47,15.08 15.22,12.55 	"/>
+	<polygon class="st0" points="7.8,9 7.86,7.93 4.61,6.99 6.86,9.52 	"/>
+	<path class="st0" d="M8.82,1.31L8.36,9.35l-7.05,3.9l8.04,0.46l3.9,7.05l0.46-8.04l7.05-3.9l-8.04-0.46L8.82,1.31z M11.38,11.78
+		c-0.41,0.19-0.89,0.01-1.08-0.4c-0.19-0.41-0.01-0.89,0.4-1.08c0.41-0.19,0.89-0.01,1.08,0.4C11.97,11.1,11.79,11.59,11.38,11.78z"
+		/>
+	<path class="st1" d="M21.72,8.56c-1.35-5.92-7.24-9.63-13.16-8.28C2.64,1.63-1.07,7.52,0.28,13.44s7.24,9.63,13.16,8.28
+		C19.36,20.37,23.07,14.48,21.72,8.56z M15.08,4.6l-0.94,3.25l-1.07-0.06l-0.52-0.94L15.08,4.6z M7.86,7.93L7.8,9L6.86,9.52
+		L4.61,6.99L7.86,7.93z M6.99,17.47l0.94-3.25L9,14.28l0.52,0.94L6.99,17.47z M14.22,14.14l0.06-1.07l0.94-0.52l2.25,2.53
+		L14.22,14.14z M13.72,12.72l-0.46,8.04l-3.9-7.05l-8.04-0.46l7.05-3.9l0.46-8.04l3.9,7.05l8.04,0.46L13.72,12.72z"/>
+	<path class="st1" d="M10.7,10.29c-0.41,0.19-0.59,0.67-0.4,1.08c0.19,0.41,0.67,0.59,1.08,0.4c0.41-0.19,0.59-0.67,0.4-1.08
+		C11.59,10.28,11.1,10.11,10.7,10.29z"/>
+</g>
+</svg>

public/sass/_grafana.scss

@@ -60,7 +60,6 @@
 @import 'components/panel_text';
 @import 'components/panel_heatmap';
 @import 'components/panel_logs';
-@import 'components/settings_permissions';
 @import 'components/tagsinput';
 @import 'components/tables_lists';
 @import 'components/search';
@@ -110,7 +109,6 @@
 @import 'pages/admin';
 @import 'pages/alerting';
 @import 'pages/history';
-@import 'pages/plugins';
 @import 'pages/signup';
 @import 'pages/styleguide';
 @import 'pages/errorpage';

public/sass/_variables.dark.scss

@@ -12,28 +12,31 @@ $sapphire-shade: #1f60c4;
 $lobster-base: #e02f44;
 $lobster-shade: #c4162a;
 $forest-light: #96d98d;
-$forest-base: #37872d;
-$forest-shade: #19730e;
 $green-base: #299c46;
 $green-shade: #23843b;
 
 // Grays
 // -------------------------
+
 $black: #000;
 $dark-1: #141414;
-$dark-2: #1f1f20;
-$dark-3: #262628;
-$dark-4: #333333;
-$dark-5: #444444;
+$dark-2: #161719;
+$dark-3: #1f1f20;
+$dark-4: #212124;
+$dark-5: #222426;
+$dark-6: #262628;
+$dark-7: #292a2d;
+$dark-8: #2f2f32;
+$dark-9: #343436;
+$dark-10: #424345;
 $gray-1: #555555;
 $gray-2: #8e8e8e;
 $gray-3: #b3b3b3;
 $gray-4: #d8d9da;
 $gray-5: #ececec;
-$gray-7: #fbfbfb;
 
-$gray-blue: #212327;
 $input-black: #09090b;
+$gray-blue: #212327;
 
 $white: #fff;
 
@@ -66,14 +69,14 @@ $critical: $lobster-base;
 
 // Scaffolding
 // -------------------------
-$body-bg: rgb(23, 24, 25);
-$page-bg: rgb(22, 23, 25);
+$body-bg: $dark-2;
+$page-bg: $dark-2;
 
 $body-color: $gray-4;
 $text-color: $gray-4;
 $text-color-strong: $white;
 $text-color-weak: $gray-2;
-$text-color-faint: $dark-5;
+$text-color-faint: $dark-10;
 $text-color-emphasis: $gray-5;
 
 $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
@@ -87,8 +90,8 @@ $brand-gradient: linear-gradient(
   rgba(255, 68, 0, 0.7) 100%
 );
 
-$page-gradient: linear-gradient(180deg, #222426 10px, rgb(22, 23, 25) 100px);
-$edit-gradient: linear-gradient(180deg, rgb(22, 23, 25) 50%, #090909);
+$page-gradient: linear-gradient(180deg, $dark-5 10px, dark-2 100px);
+$edit-gradient: linear-gradient(180deg, $dark-2 50%, $input-black);
 
 // Links
 // -------------------------
@@ -100,60 +103,58 @@ $external-link-color: $sapphire-light;
 // Typography
 // -------------------------
 $headings-color: darken($white, 11%);
-$abbr-border-color: $gray-3 !default;
+$abbr-border-color: $gray-2 !default;
 $text-muted: $text-color-weak;
 
-$hr-border-color: $dark-4;
+$hr-border-color: $dark-9;
 
 // Panel
 // -------------------------
-$panel-bg: #212124;
+$panel-bg: $dark-4;
 $panel-border: solid 1px $dark-1;
-$panel-header-hover-bg: $dark-4;
+$panel-header-hover-bg: $dark-9;
 $panel-corner: $panel-bg;
 
 // page header
-$page-header-bg: linear-gradient(90deg, #292a2d, black);
-$page-header-shadow: inset 0px -4px 14px $dark-2;
-$page-header-border-color: $dark-4;
+$page-header-bg: linear-gradient(90deg, $dark-7, $black);
+$page-header-shadow: inset 0px -4px 14px $dark-3;
+$page-header-border-color: $dark-9;
 
 $divider-border-color: $gray-1;
 
 // Graphite Target Editor
-$tight-form-bg: $dark-3;
-$tight-form-func-bg: $dark-4;
-$tight-form-func-highlight-bg: $dark-5;
+$tight-form-func-bg: $dark-9;
+$tight-form-func-highlight-bg: $dark-10;
 
 $modal-backdrop-bg: #353c42;
 $code-tag-bg: $dark-1;
-$code-tag-border: $dark-4;
+$code-tag-border: $dark-9;
 
 // cards
-$card-background: linear-gradient(135deg, #2f2f32, #262628);
-$card-background-hover: linear-gradient(135deg, #343436, #262628);
+$card-background: linear-gradient(135deg, $dark-8, $dark-6);
+$card-background-hover: linear-gradient(135deg, $dark-9, $dark-6);
 $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3);
 
 // Lists
 $list-item-bg: $card-background;
-$list-item-hover-bg: lighten($gray-blue, 2%);
+$list-item-hover-bg: $card-background-hover;
 $list-item-link-color: $text-color;
 $list-item-shadow: $card-shadow;
 
 $empty-list-cta-bg: $gray-blue;
 
 // Scrollbars
-$scrollbarBackground: #404357;
-$scrollbarBackground2: #3a3a3a;
-$scrollbarBorder: black;
+$scrollbarBackground: $dark-9;
+$scrollbarBackground2: $dark-9;
+$scrollbarBorder: $dark-10;
 
 // Tables
 // -------------------------
-$table-bg: transparent; // overall background-color
-$table-bg-accent: $dark-3; // for striping
-$table-border: $dark-3; // table and cell border
+$table-bg-accent: $dark-6; // for striping
+$table-border: $dark-6; // table and cell border
 
-$table-bg-odd: $dark-2;
-$table-bg-hover: $dark-3;
+$table-bg-odd: $dark-3;
+$table-bg-hover: $dark-6;
 
 // Buttons
 // -------------------------
@@ -170,8 +171,8 @@ $btn-success-bg-hl: $green-shade;
 $btn-danger-bg: $lobster-base;
 $btn-danger-bg-hl: $lobster-shade;
 
-$btn-inverse-bg: $dark-3;
-$btn-inverse-bg-hl: lighten($dark-3, 4%);
+$btn-inverse-bg: $dark-6;
+$btn-inverse-bg-hl: lighten($dark-6, 4%);
 $btn-inverse-text-color: $link-color;
 $btn-inverse-text-shadow: 0px 1px 0 rgba(0, 0, 0, 0.1);
 
@@ -179,24 +180,24 @@ $btn-link-color: $gray-3;
 
 $iconContainerBackground: $black;
 
-$btn-divider-left: $dark-4;
-$btn-divider-right: $dark-2;
+$btn-divider-left: $dark-9;
+$btn-divider-right: $dark-3;
 
 $btn-drag-image: '../img/grab_dark.svg';
 
 // Forms
 // -------------------------
 $input-bg: $input-black;
-$input-bg-disabled: $dark-3;
+$input-bg-disabled: $dark-6;
 
 $input-color: $gray-4;
-$input-border-color: $dark-3;
+$input-border-color: $dark-6;
 $input-box-shadow: inset 1px 0px 0.3rem 0px rgba(150, 150, 150, 0.1);
-$input-border-focus: $input-border-color;
-$input-box-shadow-focus: rgba(102, 175, 233, 0.6);
+$input-border-focus: $dark-6 !default;
+$input-box-shadow-focus: $sapphire-light !default;
 $input-color-placeholder: $gray-1 !default;
 $input-label-bg: $gray-blue;
-$input-label-border-color: $dark-3;
+$input-label-border-color: $dark-6;
 $input-color-select-arrow: $white;
 
 // Input placeholder text color
@@ -208,12 +209,12 @@ $search-filter-box-bg: $gray-blue;
 
 // Typeahead
 $typeahead-shadow: 0 5px 10px 0 $black;
-$typeahead-selected-bg: $dark-4;
+$typeahead-selected-bg: $dark-9;
 $typeahead-selected-color: $yellow;
 
 // Dropdowns
 // -------------------------
-$dropdownBackground: $dark-3;
+$dropdownBackground: $dark-6;
 $dropdownBorder: rgba(0, 0, 0, 0.2);
 $dropdownDividerTop: transparent;
 $dropdownDividerBottom: #444;
@@ -222,7 +223,7 @@ $dropdownLinkColor: $text-color;
 $dropdownLinkColorHover: $white;
 $dropdownLinkColorActive: $white;
 
-$dropdownLinkBackgroundHover: $dark-4;
+$dropdownLinkBackgroundHover: $dark-9;
 
 // Horizontal forms & lists
 // -------------------------
@@ -233,10 +234,7 @@ $horizontalComponentOffset: 180px;
 $navbarHeight: 55px;
 
 $navbarBackground: $panel-bg;
-$navbarBorder: 1px solid $dark-3;
-$navbarShadow: 0 0 20px black;
-
-$navbarLinkColor: $gray-4;
+$navbarBorder: 1px solid $dark-6;
 
 $navbarButtonBackground: $navbarBackground;
 $navbarButtonBackgroundHighlight: $body-bg;
@@ -247,19 +245,19 @@ $navbar-button-border: #2f2f32;
 // -------------------------
 $side-menu-bg: $black;
 $side-menu-bg-mobile: $side-menu-bg;
-$side-menu-item-hover-bg: $dark-2;
+$side-menu-item-hover-bg: $dark-3;
 $side-menu-shadow: 0 0 20px black;
 $side-menu-link-color: $link-color;
 
 // Menu dropdowns
 // -------------------------
 $menu-dropdown-bg: $body-bg;
-$menu-dropdown-hover-bg: $dark-2;
+$menu-dropdown-hover-bg: $dark-3;
 $menu-dropdown-shadow: 5px 5px 20px -5px $black;
 
 // Tabs
 // -------------------------
-$tab-border-color: $dark-4;
+$tab-border-color: $dark-9;
 
 // Toolbar
 $toolbar-bg: $input-black;
@@ -276,9 +274,9 @@ $alert-warning-bg: linear-gradient(90deg, $lobster-base, $lobster-shade);
 $alert-info-bg: linear-gradient(100deg, $sapphire-base, $sapphire-shade);
 
 // popover
-$popover-bg: $page-bg;
+$popover-bg: $dark-2;
 $popover-color: $text-color;
-$popover-border-color: $dark-4;
+$popover-border-color: $dark-9;
 $popover-shadow: 0 0 20px black;
 
 $popover-help-bg: $btn-secondary-bg;
@@ -324,13 +322,13 @@ $json-explorer-url-color: #027bff;
 
 // Changelog and diff
 // -------------------------
-$diff-label-bg: $dark-2;
+$diff-label-bg: $dark-3;
 $diff-label-fg: $white;
 
-$diff-group-bg: $dark-4;
+$diff-group-bg: $dark-9;
 $diff-arrow-color: $white;
 
-$diff-json-bg: $dark-4;
+$diff-json-bg: $dark-9;
 $diff-json-fg: $gray-5;
 
 $diff-json-added: $sapphire-shade;
@@ -342,7 +340,7 @@ $diff-json-new: #457740;
 $diff-json-changed-fg: $gray-5;
 $diff-json-changed-num: $text-color;
 
-$diff-json-icon: $gray-7;
+$diff-json-icon: $gray-5;
 
 //Submenu
 $variable-option-bg: $dropdownLinkBackgroundHover;
@@ -350,7 +348,7 @@ $variable-option-bg: $dropdownLinkBackgroundHover;
 //Switch Slider
 // -------------------------
 $switch-bg: $input-bg;
-$switch-slider-color: $dark-2;
+$switch-slider-color: $dark-3;
 $switch-slider-off-bg: $gray-1;
 $switch-slider-on-bg: linear-gradient(90deg, #eb7b18, #d44a3a);
 $switch-slider-shadow: 0 0 3px black;
@@ -366,8 +364,8 @@ $checkbox-color: $dark-1;
 // -------------------------
 $panel-editor-shadow: 0 0 20px black;
 $panel-editor-side-menu-shadow: drop-shadow(0 0 10px $black);
-$panel-editor-viz-item-shadow: 0 0 8px $dark-5;
-$panel-editor-viz-item-border: 1px solid $dark-5;
+$panel-editor-viz-item-shadow: 0 0 8px $dark-10;
+$panel-editor-viz-item-border: 1px solid $dark-10;
 $panel-editor-viz-item-shadow-hover: 0 0 4px $sapphire-light;
 $panel-editor-viz-item-border-hover: 1px solid $sapphire-light;
 $panel-editor-viz-item-bg: $input-black;
@@ -387,8 +385,8 @@ $logs-color-unkown: $gray-2;
 // toggle-group
 $button-toggle-group-btn-active-bg: linear-gradient(90deg, #eb7b18, #d44a3a);
 $button-toggle-group-btn-active-shadow: inset 0 0 4px $black;
-$button-toggle-group-btn-seperator-border: 1px solid $page-bg;
+$button-toggle-group-btn-seperator-border: 1px solid $dark-2;
 
-$vertical-resize-handle-bg: $dark-5;
+$vertical-resize-handle-bg: $dark-10;
 $vertical-resize-handle-dots: $gray-1;
 $vertical-resize-handle-dots-hover: $gray-2;

public/sass/_variables.light.scss

@@ -6,13 +6,11 @@ $theme-name: light;
 // New Colors
 // -------------------------
 $sapphire-faint: #f5f9ff;
-$sapphire-light: #a8caff;
+$sapphire-light: #5794f2;
 $sapphire-base: #3274d9;
 $sapphire-shade: #1f60c4;
 $lobster-base: #e02f44;
 $lobster-shade: #c4162a;
-$green-base: #37872d;
-$green-shade: #19730e;
 $green-base: #3eb15b;
 $green-shade: #369b4f;
 $purple-shade: #8f3bb8;
@@ -22,8 +20,6 @@ $yellow-base: #f2cc0c;
 // -------------------------
 $black: #000;
 $dark-2: #1e2028;
-$dark-3: #303133;
-$dark-4: #35373f;
 $dark-5: #41444b;
 $gray-1: #52545c;
 $gray-2: #767980;
@@ -38,7 +34,6 @@ $white: #fff;
 // Accent colors
 // -------------------------
 $blue: #0083b3;
-$blue-light: #00a8e6;
 $green: #3aa655;
 $red: $lobster-base;
 $yellow: #ff851b;
@@ -96,7 +91,7 @@ $headings-color: $text-color;
 $abbr-border-color: $gray-2 !default;
 $text-muted: $text-color-weak;
 
-$hr-border-color: $dark-3 !default;
+$hr-border-color: $gray-4 !default;
 
 // Panel
 // -------------------------
@@ -113,13 +108,12 @@ $page-header-border-color: $gray-4;
 $divider-border-color: $gray-2;
 
 // Graphite Target Editor
-$tight-form-bg: #eaebee;
 $tight-form-func-bg: $gray-5;
 $tight-form-func-highlight-bg: $gray-6;
 
 $modal-backdrop-bg: $body-bg;
 $code-tag-bg: $gray-6;
-$code-tag-border: darken($code-tag-bg, 3%);
+$code-tag-border: $gray-4;
 
 // cards
 $card-background: linear-gradient(135deg, $gray-6, $gray-5);
@@ -135,13 +129,12 @@ $list-item-shadow: $card-shadow;
 $empty-list-cta-bg: $gray-6;
 
 // Scrollbars
-$scrollbarBackground: $gray-5;
-$scrollbarBackground2: $gray-5;
-$scrollbarBorder: $gray-4;
+$scrollbarBackground: $gray-4;
+$scrollbarBackground2: $gray-4;
+$scrollbarBorder: $gray-3;
 
 // Tables
 // -------------------------
-$table-bg: transparent; // overall background-color
 $table-bg-accent: $gray-5; // for striping
 $table-border: $gray-3; // table and cell border
 
@@ -162,8 +155,9 @@ $btn-success-bg-hl: $green-shade;
 $btn-danger-bg: $lobster-base;
 $btn-danger-bg-hl: $lobster-shade;
 
-$btn-inverse-bg: $gray-6;
-$btn-inverse-bg-hl: darken($gray-6, 5%);
+$btn-inverse-bg: $gray-5;
+$btn-inverse-bg-hl: darken($gray-5, 5%);
+$btn-inverse-bg-hl: $gray-4;
 $btn-inverse-text-color: $gray-1;
 $btn-inverse-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
 
@@ -181,10 +175,10 @@ $btn-drag-image: '../img/grab_light.svg';
 $input-bg: $white;
 $input-bg-disabled: $gray-5;
 
-$input-color: $dark-3;
+$input-color: $dark-5;
 $input-border-color: $gray-5;
 $input-box-shadow: none;
-$input-border-focus: $sapphire-light !default;
+$input-border-focus: $gray-5 !default;
 $input-box-shadow-focus: $sapphire-light !default;
 $input-color-placeholder: $gray-4 !default;
 $input-label-bg: $gray-5;
@@ -210,7 +204,7 @@ $dropdownBorder: $gray-4;
 $dropdownDividerTop: $gray-6;
 $dropdownDividerBottom: $white;
 
-$dropdownLinkColor: $dark-3;
+$dropdownLinkColor: $dark-5;
 $dropdownLinkColorHover: $link-color;
 $dropdownLinkColorActive: $link-color;
 
@@ -225,10 +219,7 @@ $horizontalComponentOffset: 180px;
 $navbarHeight: 52px;
 
 $navbarBackground: $white;
-$navbarBorder: 1px solid $gray-4;
-$navbarShadow: 0 0 3px #c1c1c1;
-
-$navbarLinkColor: #444;
+$navbarBorder: 1px solid $gray-5;
 
 $navbarButtonBackground: lighten($navbarBackground, 3%);
 $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
@@ -265,7 +256,7 @@ $success-text-color: lighten($green, 10%);
 $alert-error-bg: linear-gradient(90deg, $lobster-base, $lobster-shade);
 $alert-success-bg: linear-gradient(90deg, $green-base, $green-shade);
 $alert-warning-bg: linear-gradient(90deg, $lobster-base, $lobster-shade);
-$alert-info-bg: $sapphire-base;
+$alert-info-bg: linear-gradient(100deg, $sapphire-base, $sapphire-shade);
 
 // popover
 $popover-bg: $page-bg;
@@ -273,7 +264,7 @@ $popover-color: $text-color;
 $popover-border-color: $gray-5;
 $popover-shadow: 0 0 20px $white;
 
-$popover-help-bg: $sapphire-base;
+$popover-help-bg: $btn-secondary-bg;
 $popover-help-color: $gray-6;
 
 $popover-error-bg: $btn-danger-bg;
@@ -316,13 +307,13 @@ $json-explorer-url-color: $sapphire-base;
 
 // Changelog and diff
 // -------------------------
-$diff-label-bg: $gray-5;
+$diff-label-bg: $gray-7;
 $diff-label-fg: $gray-2;
 
-$diff-arrow-color: $dark-3;
-$diff-group-bg: $gray-7;
+$diff-arrow-color: $dark-5;
+$diff-group-bg: $gray-6;
 
-$diff-json-bg: $gray-5;
+$diff-json-bg: $gray-6;
 $diff-json-fg: $gray-1;
 
 $diff-json-added: $sapphire-shade;
@@ -360,11 +351,13 @@ $panel-editor-shadow: 0px 0px 8px $gray-3;
 $panel-editor-side-menu-shadow: drop-shadow(0 0 2px $gray-3);
 $panel-editor-viz-item-shadow: 0 0 4px $gray-3;
 $panel-editor-viz-item-border: 1px solid $gray-3;
-$panel-editor-viz-item-shadow-hover: 0 0 4px $blue-light;
-$panel-editor-viz-item-border-hover: 1px solid $blue-light;
+$panel-editor-viz-item-shadow-hover: 0 0 4px $sapphire-light;
+$panel-editor-viz-item-border-hover: 1px solid $sapphire-light;
 $panel-editor-viz-item-bg: $white;
 $panel-editor-tabs-line-color: $dark-5;
-$panel-editor-viz-item-bg-hover: lighten($blue, 62%);
+
+$panel-editor-viz-item-bg-hover: lighten($sapphire-base, 45%);
+
 $panel-options-group-border: none;
 $panel-options-group-header-bg: $gray-5;
 

public/sass/base/_icons.scss

@@ -192,6 +192,10 @@
   background-image: url('../img/icons_#{$theme-name}_theme/icon_zoom_out.svg');
 }
 
+.gicon-explore {
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_explore.svg');
+}
+
 .sidemenu {
   .gicon-dashboard {
     background-image: url('../img/icons_dark_theme/icon_dashboard.svg');
@@ -205,6 +209,9 @@
   .gicon-question {
     background-image: url('../img/icons_dark_theme/icon_question.svg');
   }
+  .gicon-explore {
+    background-image: url('../img/icons_dark_theme/icon_explore.svg');
+  }
 }
 
 .fa--permissions-list {

public/sass/base/_reboot.scss

@@ -246,7 +246,7 @@ textarea {
 
 table {
   // Reset for nesting within parents with `background-color`.
-  background-color: $table-bg;
+  background-color: transparent;
 }
 
 caption {

public/sass/base/_type.scss

@@ -266,7 +266,7 @@ dd {
 // Abbreviations and acronyms
 abbr[title] {
   cursor: help;
-  border-bottom: 1px dotted $gray-2;
+  border-bottom: 1px dotted $abbr-border-color;
 }
 
 abbr.initialism {

public/sass/components/_navbar.scss

@@ -1,9 +1,8 @@
 .navbar {
   position: relative;
-  padding-left: 20px;
   z-index: $zindex-navbar-fixed;
   height: $navbarHeight;
-  padding-right: 20px;
+  padding: 0 20px 0 50px;
   display: flex;
   flex-grow: 1;
   border-bottom: 1px solid transparent;
@@ -57,15 +56,14 @@
   white-space: nowrap;
   display: block;
   margin: 0;
-  color: darken($link-color, 5%);
+  color: $headings-color;
   font-size: $font-size-lg;
-  padding-left: 1rem;
   min-height: $navbarHeight;
   line-height: $navbarHeight;
 
   .fa-caret-down {
     font-size: 60%;
-    padding-left: 0.2rem;
+    padding-left: 6px;
   }
 
   &--search {
@@ -73,12 +71,12 @@
   }
 
   .gicon {
+    top: -2px;
     position: relative;
-    top: -1px;
-    font-size: 19px;
+    font-size: 17px;
     line-height: 8px;
     opacity: 0.75;
-    margin-right: 13px;
+    margin-right: 10px;
     display: none;
   }
 
@@ -123,7 +121,7 @@
   height: 30px;
   color: $text-muted;
   border: 1px solid $navbar-button-border;
-  margin-right: 3px;
+  margin-left: 3px;
   white-space: nowrap;
 
   .gicon {
@@ -152,19 +150,19 @@
     }
   }
 
-  &--primary {
-    @include buttonBackground($btn-primary-bg, $btn-primary-bg-hl);
+  &--secondary {
+    @include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl);
   }
 }
 
 @include media-breakpoint-up(sm) {
   .navbar {
-    padding-left: 50px;
+    padding-left: 60px;
   }
 
   .sidemenu-open {
     .navbar {
-      padding-left: 15px;
+      padding-left: 25px;
       margin-left: 0;
     }
   }
@@ -180,7 +178,7 @@
   display: flex;
   height: $navbarHeight;
   align-items: center;
-  padding-left: 7px;
+  padding-right: 13px;
 }
 
 .navbar-edit__back-btn {

public/sass/components/_settings_permissions.scss

@@ -1,32 +0,0 @@
-.permissionlist {
-  .permissionlist__section {
-    margin-bottom: $spacer*2;
-  }
-
-  .permissionlist__section-header {
-    margin-bottom: $spacer;
-    display: flex;
-  }
-
-  .permissionlist__section-header h6 {
-    margin: auto 5px;
-    color: $text-color-weak;
-  }
-
-  .permissionlist__section-header__add-button {
-    margin-left: auto;
-    width: 105px;
-  }
-
-  .permissionlist__item {
-    background-color: $tight-form-bg;
-
-    &:hover {
-      background-color: $tight-form-func-bg;
-    }
-  }
-
-  .permissionlist__item-buttons {
-    margin-left: auto;
-  }
-}

public/sass/components/_sidemenu.scss

@@ -253,7 +253,7 @@ li.sidemenu-org-switcher {
     }
 
     .sidemenu__logo_small_breakpoint {
-      padding: 16px 10px 26px;
+      padding: 14px 10px 26px 13px;
       display: flex;
       flex-direction: row;
       justify-content: space-between;

public/sass/components/_switch.scss

@@ -13,6 +13,10 @@ gf-form-switch[disabled] {
   }
 }
 
+.gf-form-switch-container-react {
+  display: flex;
+}
+
 .gf-form-switch-container {
   display: flex;
   cursor: pointer;

public/sass/pages/_explore.scss

@@ -30,12 +30,6 @@
     padding: 0;
     margin-left: 0;
   }
-
-  .explore-toolbar-header-title {
-    .navbar-page-btn {
-      padding-left: 0;
-    }
-  }
 }
 
 .explore-toolbar {
@@ -44,7 +38,7 @@
   flex-flow: row wrap;
   justify-content: flex-start;
   height: auto;
-  padding: 0px $dashboard-padding;
+  padding: 0px $dashboard-padding 0 25px;
   border-bottom: 1px solid #0000;
   transition-duration: 0.35s;
   transition-timing-function: ease-in-out;
@@ -87,22 +81,9 @@
   align-items: center;
 }
 
-.explore-toolbar-header-title {
-  color: darken($link-color, 5%);
-
-  .navbar-page-btn {
-    padding-left: $dashboard-padding;
-  }
-
-  .fa {
-    font-size: 100%;
-    opacity: 0.75;
-    margin-right: 0.5em;
-  }
-}
-
 .explore-toolbar-header-close {
   margin-left: auto;
+  color: $text-color-weak;
 }
 
 .explore-toolbar-content {
@@ -156,7 +137,6 @@
   .sidemenu-open {
     .explore-toolbar-header-title {
       .navbar-page-btn {
-        padding-left: 0;
         margin-left: 0;
       }
     }
@@ -164,7 +144,6 @@
 
   .explore-toolbar-header-title {
     .navbar-page-btn {
-      padding-left: 0;
       margin-left: $dashboard-padding;
     }
   }
@@ -185,7 +164,6 @@
   .sidemenu-open {
     .explore-toolbar-header-title {
       .navbar-page-btn {
-        padding-left: 0;
         margin-left: $dashboard-padding;
       }
     }
@@ -193,7 +171,6 @@
 
   .explore-toolbar-header-title {
     .navbar-page-btn {
-      padding-left: 0;
       margin-left: $dashboard-padding;
     }
   }

public/sass/pages/_login.scss

@@ -176,12 +176,6 @@ select:-webkit-autofill:focus {
   }
 }
 
-.login-tab-header {
-  background: $tight-form-bg;
-  text-align: center;
-  margin-bottom: 3rem;
-}
-
 .login-change-password-info {
   padding-bottom: 1.5rem;
 
@@ -195,26 +189,6 @@ select:-webkit-autofill:focus {
   background-color: $btn-semi-transparent;
 }
 
-.btn-login-tab {
-  background: transparent;
-  border: none;
-  font-size: 15px;
-  padding: 10px 10px;
-  font-weight: bold;
-  display: inline-block;
-  width: 170px;
-  color: $text-color;
-
-  &.active {
-    background: darken($tight-form-bg, 5%);
-    color: $white;
-  }
-
-  &:focus {
-    outline: 0;
-  }
-}
-
 .password-strength {
   display: block;
   width: 15%;
@@ -252,15 +226,6 @@ select:-webkit-autofill:focus {
   width: 100%;
 }
 
-.password-recovery {
-  background: $tight-form-bg;
-  padding: 10px;
-
-  a {
-    color: $gray-2;
-  }
-}
-
 .login-divider {
   float: left;
   width: 100%;

public/sass/pages/_plugins.scss

@@ -1,31 +0,0 @@
-.get-more-plugins-link {
-  color: $gray-3;
-  font-size: $font-size-sm;
-  position: relative;
-  top: 1.2rem;
-
-  &:hover {
-    color: $link-hover-color;
-  }
-
-  img {
-    vertical-align: top;
-  }
-}
-
-@include media-breakpoint-down(sm) {
-  .get-more-plugins-link {
-    display: none;
-  }
-}
-
-.plugin-info-list-item {
-  white-space: nowrap;
-  max-width: $page-sidebar-width;
-  text-overflow: ellipsis;
-  overflow: hidden;
-
-  img {
-    width: 16px;
-  }
-}