From 538ace0a480e9e0e220b8b803c70f855d3acbe5a Mon Sep 17 00:00:00 2001
From: Christopher Henn <chris@chrishenn.net>
Date: Mon, 4 Jun 2018 16:10:20 -0700
Subject: [PATCH] Improve display of table names in table sidebar

Co-authored-by: Andrew Watkins <andrew.watkinz@gmail.com>
Co-authored-by: Chris Henn <chris.henn@influxdata.com>
---
 ui/src/ifql/components/TableSidebar.tsx       |  3 +-
 ui/src/ifql/components/TableSidebarItem.tsx   | 26 ++++++++++--
 ui/src/ifql/components/TimeMachineVis.tsx     |  2 +-
 .../time-machine/visualization.scss           | 41 ++++++++++++++++++-
 4 files changed, 66 insertions(+), 6 deletions(-)

diff --git a/ui/src/ifql/components/TableSidebar.tsx b/ui/src/ifql/components/TableSidebar.tsx
index e2c9684394..62b647abac 100644
--- a/ui/src/ifql/components/TableSidebar.tsx
+++ b/ui/src/ifql/components/TableSidebar.tsx
@@ -27,12 +27,13 @@ export default class TableSidebar extends PureComponent<Props> {
         )}
         <FancyScrollbar>
           <div className="time-machine-vis--sidebar query-builder--list">
-            {data.map(({name, id}) => {
+            {data.map(({partitionKey, id}) => {
               return (
                 <TableSidebarItem
                   id={id}
                   key={id}
                   name={name}
+                  partitionKey={partitionKey}
                   onSelect={onSelectResult}
                   isSelected={id === selectedResultID}
                 />
diff --git a/ui/src/ifql/components/TableSidebarItem.tsx b/ui/src/ifql/components/TableSidebarItem.tsx
index 9db1b37ac6..1fa44d67cc 100644
--- a/ui/src/ifql/components/TableSidebarItem.tsx
+++ b/ui/src/ifql/components/TableSidebarItem.tsx
@@ -1,11 +1,16 @@
-import React, {PureComponent} from 'react'
+import React, {Fragment, PureComponent} from 'react'
 
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
+interface PartitionKey {
+  [x: string]: string
+}
+
 interface Props {
   name: string
   id: string
   isSelected: boolean
+  partitionKey: PartitionKey
   onSelect: (id: string) => void
 }
 
@@ -14,14 +19,29 @@ export default class TableSidebarItem extends PureComponent<Props> {
   public render() {
     return (
       <div
-        className={`query-builder--list-item flux-table ${this.active}`}
+        className={`time-machine-sidebar--item ${this.active}`}
         onClick={this.handleClick}
       >
-        {this.props.name}
+        {this.name}
       </div>
     )
   }
 
+  private get name(): JSX.Element[] {
+    const keysIHate = ['_start', '_stop']
+    return Object.entries(this.props.partitionKey)
+      .filter(([k]) => !keysIHate.includes(k))
+      .map(([k, v], i) => {
+        return (
+          <Fragment key={i}>
+            <span className="key">{k}</span>
+            <span className="equals">=</span>
+            <span className="value">{v}</span>
+          </Fragment>
+        )
+      })
+  }
+
   private get active(): string {
     if (this.props.isSelected) {
       return 'active'
diff --git a/ui/src/ifql/components/TimeMachineVis.tsx b/ui/src/ifql/components/TimeMachineVis.tsx
index a5d1f39e00..9472da6a2b 100644
--- a/ui/src/ifql/components/TimeMachineVis.tsx
+++ b/ui/src/ifql/components/TimeMachineVis.tsx
@@ -30,7 +30,7 @@ class TimeMachineVis extends PureComponent<Props, State> {
 
     this.state = {
       selectedResultID: this.initialResultID,
-      visType: VisType.Line,
+      visType: VisType.Table,
     }
   }
 
diff --git a/ui/src/style/components/time-machine/visualization.scss b/ui/src/style/components/time-machine/visualization.scss
index f23910b2ed..2701d60c87 100644
--- a/ui/src/style/components/time-machine/visualization.scss
+++ b/ui/src/style/components/time-machine/visualization.scss
@@ -69,9 +69,48 @@
   flex: 1 0 0;
 }
 
-.query-builder--list-item.flux-table {
+
+.time-machine-sidebar--item {
+  @include no-user-select();
+  background-color: $query-builder--list-item-bg;
+  color: $query-builder--list-item-text;
+  height: $query-builder--list-item-height;
+  list-style-type: none;
+  cursor: default;
+  display: flex;
+  align-items: center;
+  margin: 0;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 0 $query-builder--list-gutter;
+  transition: color 0.25s ease, background-color 0.25s ease;
   white-space: nowrap;
   overflow-x: hidden;
+
+  &:hover {
+    background-color: $query-builder--list-item-bg-hover;
+    color: $query-builder--list-item-text-hover;
+    cursor: pointer;
+  }
+
+  &.active {
+    background-color: $query-builder--list-item-bg-active;
+    color: $query-builder--list-item-text-active;
+  }
+
+  > span {
+    padding-right: 1px;
+    padding-left: 1px;
+  }
+
+  > span.key {
+    color: $g9-mountain;
+  }
+
+  > span.value {
+    padding-right: 5px;
+    color: $g11-sidewalk;
+  }
 }
 
 .flux-graph {