Merge pull request #3520 from influxdata/log-viewer/layout

Layout Scaffolding for Logs Viewer

ui/src/data_explorer/containers/DataExplorer.tsx

@@ -103,7 +103,7 @@ export class DataExplorer extends PureComponent<Props, State> {
     const {showWriteForm} = this.state
 
     return (
-      <div className="data-explorer">
+      <>
         {showWriteForm ? (
           <OverlayTechnologies>
             <WriteDataForm
@@ -150,7 +150,7 @@ export class DataExplorer extends PureComponent<Props, State> {
             editQueryStatus={queryConfigActions.editQueryStatus}
           />
         </ResizeContainer>
-      </div>
+      </>
     )
   }
 

ui/src/logs/components/LogsGraphContainer.tsx

@@ -0,0 +1,17 @@
+import React, {PureComponent} from 'react'
+
+interface Props {
+  thing: string
+}
+
+class LogsGraphContainer extends PureComponent<Props> {
+  public render() {
+    return (
+      <div className="logs-viewer--graph-container">
+        <p>{this.props.thing}</p>
+      </div>
+    )
+  }
+}
+
+export default LogsGraphContainer

ui/src/logs/components/LogsTableContainer.tsx

@@ -0,0 +1,22 @@
+import React, {PureComponent} from 'react'
+
+interface Props {
+  thing: string
+}
+
+class LogsTableContainer extends PureComponent<Props> {
+  public render() {
+    return (
+      <>
+        <div className="logs-viewer--search-container">
+          <p>search</p>
+        </div>
+        <div className="logs-viewer--table-container">
+          <p>{this.props.thing}</p>
+        </div>
+      </>
+    )
+  }
+}
+
+export default LogsTableContainer

ui/src/logs/containers/LogsPage.tsx

@@ -4,6 +4,8 @@ import {getSourceAsync, setTimeRange, setNamespace} from 'src/logs/actions'
 import {getSourcesAsync} from 'src/shared/actions/sources'
 import {Source, Namespace, TimeRange} from 'src/types'
 import LogViewerHeader from 'src/logs/components/LogViewerHeader'
+import GraphContainer from 'src/logs/components/LogsGraphContainer'
+import TableContainer from 'src/logs/components/LogsTableContainer'
 
 interface Props {
   sources: Source[]
@@ -30,7 +32,7 @@ class LogsPage extends PureComponent<Props> {
 
   public render() {
     return (
-      <div className="page hosts-list-page">
+      <div className="page">
         <div className="page-header full-width">
           <div className="page-header__container">
             <div className="page-header__left">
@@ -39,6 +41,10 @@ class LogsPage extends PureComponent<Props> {
             <div className="page-header__right">{this.header}</div>
           </div>
         </div>
+        <div className="page-contents logs-viewer">
+          <GraphContainer thing="wooo" />
+          <TableContainer thing="snooo" />
+        </div>
       </div>
     )
   }

ui/src/side_nav/containers/SideNav.tsx

@@ -80,7 +80,7 @@ class SideNav extends PureComponent<Props> {
         <FeatureFlag name="log-viewer">
           <NavBlock
             highlightWhen={['logs']}
-            icon="cubo-node"
+            icon="text-block"
             link={'/logs'}
             location={location}
           >

ui/src/style/chronograf.scss

@@ -83,6 +83,7 @@
 @import 'pages/tickscript-editor';
 @import 'pages/time-machine';
 @import 'pages/manage-providers';
+@import 'pages/logs-viewer';
 
 // TODO
 @import 'unsorted';

ui/src/style/pages/logs-viewer.scss

@@ -0,0 +1,33 @@
+/*
+    Styles for Logs Viewer Page
+    ----------------------------------------------------------------------------
+*/
+
+$logs-viewer-graph-height: 240px;
+$logs-viewer-search-height: 108px;
+$logs-viewer-gutter: 60px;
+
+.logs-viewer {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  flex-wrap: none;
+}
+
+.logs-viewer--graph-container {
+  padding: 30px $logs-viewer-gutter 18px $logs-viewer-gutter;
+  height: $logs-viewer-graph-height;
+  @include gradient-v($g2-kevlar, $g0-obsidian);
+}
+
+.logs-viewer--search-container {
+  padding: 20px $logs-viewer-gutter;
+  height: $logs-viewer-search-height;
+  background-color: $g3-castle;
+}
+
+.logs-viewer--table-container {
+  padding: 12px $logs-viewer-gutter 30px $logs-viewer-gutter;
+  height: calc(100% - #{$logs-viewer-graph-height + $logs-viewer-search-height});
+  background-color: $g3-castle;
+}