feat(ui/kapacitor): add logs view

ui/src/kapacitor/containers/FluxTaskPage.tsx

@@ -157,6 +157,11 @@ const FluxTaskPage: FC<Props> = ({source, params: {taskID, kid}, router}) => {
     )
   } else if (task) {
     contents = (
+      <>
+        <div className="fluxtask-controls">
+          {task.name} <i>{task.status}</i>
+        </div>
+        <div className="fluxtask-editor">
           <FluxScriptEditor
             onChangeScript={noop}
             onSubmitScript={noop}
@@ -167,6 +172,8 @@ const FluxTaskPage: FC<Props> = ({source, params: {taskID, kid}, router}) => {
             visibility="visible"
             readOnly={true}
           />
+        </div>
+      </>
     )
   }
 

ui/src/style/pages/fluxtask-detail.scss

@@ -1,20 +1,26 @@
-/*
+$fluxtask-controls-height: 60px;
-    Styles for fluxtask Editor
-    ----------------------------------------------------------------------------
-*/
 
 .fluxtask {
   flex: 1 0 0;
   position: relative;
-  max-width: 100%;
 }
+.fluxtask-controls,
 .fluxtask-editor {
   // cannot use 100%, since it does not work in FireFox
   // see https://github.com/influxdata/chronograf/issues/5037
   width: calc(100vw - 60px);
+  max-width: 100%
+}
+.fluxtask-controls {
+  padding: 0 60px;
+  display: flex;
+  align-items: center;
+  height: $fluxtask-controls-height;
+  justify-content: space-between;
+  background-color: $g3-castle;
 }
 .fluxtask-editor {
-  height: 100%;
+  height: calc(100% - #{$fluxtask-controls-height});
 }
 .page.fluxtask-editor-page {
   // The default page layout (flex) does not work well on FireFox, the height of fluxtask-editor grows