fixed logging start page

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">
+        <LoggingCheatSheet onClickExample={this.props.onClickExample} />
       </div>
     );
   }

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,8 +1,11 @@
 import React, { PureComponent } from 'react';
-
 import PromCheatSheet from './PromCheatSheet';
 
-export default class PromStart extends PureComponent<any> {
+interface Props {
+  onClickExample: () => void;
+}
+
+export default class PromStart extends PureComponent<Props> {
   render() {
     return (
       <div className="grafana-info-box">

public/sass/_variables.light.scss

@@ -218,7 +218,7 @@ $tab-border-color: $gray-5;
 $search-shadow: 0 5px 30px 0 $gray-4;
 $search-filter-box-bg: $gray-7;
 
-// ypeahead
+// Typeahead
 $typeahead-shadow: 0 5px 10px 0 $gray-5;
 $typeahead-selected-bg: $gray-6;
 $typeahead-selected-color: $yellow;