From 47523f80ddbf4396053e0335aeb3d203d3e8f6e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Tue, 4 Dec 2018 12:59:24 +0100
Subject: [PATCH] fixed logging start page

---
 .../logging/components/LoggingCheatSheet.tsx  |  2 +-
 .../logging/components/LoggingStartPage.tsx   | 56 ++-----------------
 .../prometheus/components/PromCheatSheet.tsx  |  2 +-
 .../prometheus/components/PromStart.tsx       |  7 ++-
 public/sass/_variables.light.scss             |  2 +-
 5 files changed, 14 insertions(+), 55 deletions(-)

diff --git a/public/app/plugins/datasource/logging/components/LoggingCheatSheet.tsx b/public/app/plugins/datasource/logging/components/LoggingCheatSheet.tsx
index 651c28783d9..4dbf8d1ab89 100644
--- a/public/app/plugins/datasource/logging/components/LoggingCheatSheet.tsx
+++ b/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>
diff --git a/public/app/plugins/datasource/logging/components/LoggingStartPage.tsx b/public/app/plugins/datasource/logging/components/LoggingStartPage.tsx
index 2c25a248fa9..fee64af27ca 100644
--- a/public/app/plugins/datasource/logging/components/LoggingStartPage.tsx
+++ b/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>
     );
   }
diff --git a/public/app/plugins/datasource/prometheus/components/PromCheatSheet.tsx b/public/app/plugins/datasource/prometheus/components/PromCheatSheet.tsx
index ea9a373e67a..41606d198c6 100644
--- a/public/app/plugins/datasource/prometheus/components/PromCheatSheet.tsx
+++ 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>
diff --git a/public/app/plugins/datasource/prometheus/components/PromStart.tsx b/public/app/plugins/datasource/prometheus/components/PromStart.tsx
index 19d704d7c0e..eed654f7cfa 100644
--- a/public/app/plugins/datasource/prometheus/components/PromStart.tsx
+++ b/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">
diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss
index 24485b1c826..c70f75c9946 100644
--- a/public/sass/_variables.light.scss
+++ b/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;