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

@@ -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}
                 />

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'

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,
     }
   }
 

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 {