Merge branch 'master' into condense-logs-further

ui/src/logs/actions/index.ts

@@ -39,11 +39,11 @@ const defaultTableData: TableData = {
     'time',
     'severity',
     'timestamp',
+    'message',
     'facility',
     'procid',
     'appname',
     'host',
-    'message',
   ],
   values: [],
 }

ui/src/logs/components/LogsTable.tsx

@@ -74,13 +74,7 @@ interface State {
 }
 
 const calculateScrollTop = scrollToRow => {
-  return _.reduce(
+  return scrollToRow * ROW_HEIGHT
-    _.range(0, scrollToRow),
-    acc => {
-      return acc + ROW_HEIGHT
-    },
-    0
-  )
 }
 
 class LogsTable extends Component<Props, State> {
@@ -107,7 +101,7 @@ class LogsTable extends Component<Props, State> {
       scrollTop = 0
     }
 
-    if (scrollToRow) {
+    if (_.isNumber(scrollToRow)) {
       scrollTop = calculateScrollTop(scrollToRow)
     }
 
@@ -164,7 +158,7 @@ class LogsTable extends Component<Props, State> {
       visibleColumnsCount,
     }
 
-    this.loadMoreAboveRows = _.throttle(this.loadMoreAboveRows, 5000)
+    this.loadMoreAboveRows = _.throttle(this.loadMoreAboveRows, 50)
   }
 
   public componentDidUpdate() {
@@ -291,7 +285,7 @@ class LogsTable extends Component<Props, State> {
       },
     }
 
-    if (scrollToRow) {
+    if (_.isNumber(scrollToRow)) {
       result.scrollToRow = scrollToRow
     }
 
@@ -352,7 +346,15 @@ class LogsTable extends Component<Props, State> {
     }
 
     const data = getValuesFromData(this.props.tableInfiniteData.forward)
-    const firstTime = getDeep(data, '0.0', new Date().getTime() / 1000)
+    const backwardData = getValuesFromData(
+      this.props.tableInfiniteData.backward
+    )
+    const firstTime = getDeep(
+      data,
+      '0.0',
+      getDeep(backwardData, '0.0', new Date().getTime())
+    )
+
     const {firstQueryTime} = this.state
     if (firstQueryTime && firstQueryTime > firstTime) {
       return
@@ -370,11 +372,12 @@ class LogsTable extends Component<Props, State> {
     }
 
     const data = getValuesFromData(this.props.tableInfiniteData.backward)
+    const forwardData = getValuesFromData(this.props.tableInfiniteData.forward)
 
     const lastTime = getDeep(
       data,
       `${data.length - 1}.0`,
-      new Date().getTime() / 1000
+      getDeep(forwardData, `${forwardData.length - 1}.0`, new Date().getTime())
     )
 
     // Guard against fetching on scrolling back up then down
@@ -445,13 +448,7 @@ class LogsTable extends Component<Props, State> {
   private calculateTotalHeight = (): number => {
     const data = getValuesFromData(this.props.data)
 
-    return _.reduce(
+    return data.length * ROW_HEIGHT
-      data,
-      (acc, __) => {
-        return acc + ROW_HEIGHT
-      },
-      0
-    )
   }
 
   private headerRenderer = ({key, style, columnIndex}) => {

ui/src/logs/components/expandable_message/ExpandableMessage.scss

@@ -44,4 +44,4 @@
   color: $g19-ghost;
   border-radius: $radius;
   cursor: text;
-}
+}

ui/src/logs/components/expandable_message/ExpandableMessage.tsx

@@ -24,13 +24,11 @@ export class ExpandableMessage extends Component<Props, State> {
     const trimmedValue = formattedValue.trimLeft()
 
     return (
-      <ClickOutside onClickOutside={this.collapse}>
+      <ClickOutside onClickOutside={this.handleClickOutside}>
-        <>
+        <div onClick={this.handleClick} className="expandable--message">
-          <div onClick={this.expand} className="expandable--message">
+          <div className="expandable--text">{trimmedValue}</div>
-            <div className="expandable--text">{trimmedValue}</div>
+          <div className={this.isExpanded}>{trimmedValue}</div>
-            <div className={this.isExpanded}>{trimmedValue}</div>
+        </div>
-          </div>
-        </>
       </ClickOutside>
     )
   }
@@ -44,13 +42,13 @@ export class ExpandableMessage extends Component<Props, State> {
     }
   }
 
-  private expand = () => {
+  private handleClick = () => {
     this.setState({
       expanded: true,
     })
   }
 
-  private collapse = () => {
+  private handleClickOutside = () => {
     this.setState({
       expanded: false,
     })

ui/src/logs/containers/LogsPage.tsx

@@ -214,6 +214,10 @@ class LogsPage extends Component<Props, State> {
   }
 
   private get tableScrollToRow() {
+    if (this.liveUpdatingStatus === LiveUpdating.Play) {
+      return 0
+    }
+
     if (this.loadingNewer && this.props.newRowsAdded) {
       this.loadingNewer = false
       return this.props.newRowsAdded || 0
@@ -285,7 +289,7 @@ class LogsPage extends Component<Props, State> {
   }
 
   private get isSpecificTimeRange(): boolean {
-    return !!getDeep(this.props, 'timeRange.upper', false)
+    return !!getDeep(this.props, 'tableTime.custom', false)
   }
 
   private startUpdating = () => {

ui/src/logs/reducers/index.ts

@@ -21,11 +21,11 @@ const defaultTableData: TableData = {
     'time',
     'severity',
     'timestamp',
+    'message',
     'facility',
     'procid',
     'appname',
     'host',
-    'message',
   ],
   values: [],
 }

ui/src/shared/components/HistogramChart.tsx

@@ -26,6 +26,14 @@ const PADDING_TOP = 0.2
 const DIGIT_WIDTH = 7
 const PERIOD_DIGIT_WIDTH = 4
 
+interface RenderPropArgs {
+  xScale: ScaleTime<number, number>
+  yScale: ScaleLinear<number, number>
+  adjustedWidth: number
+  adjustedHeight: number
+  margins: Margins
+}
+
 interface Props {
   data: HistogramData
   width: number
@@ -34,6 +42,7 @@ interface Props {
   colorScale: ColorScale
   onBarClick?: (time: string) => void
   sortBarGroups: SortFn
+  children?: (args: RenderPropArgs) => JSX.Element
 }
 
 interface State {
@@ -56,6 +65,7 @@ class HistogramChart extends PureComponent<Props, State> {
       colors,
       onBarClick,
       sortBarGroups,
+      children,
     } = this.props
     const {margins} = this
 
@@ -76,8 +86,16 @@ class HistogramChart extends PureComponent<Props, State> {
     const {hoverData} = this.state
     const {xScale, yScale, adjustedWidth, adjustedHeight, bodyTransform} = this
 
+    const renderPropArgs = {
+      xScale,
+      yScale,
+      adjustedWidth,
+      adjustedHeight,
+      margins,
+    }
+
     return (
-      <>
+      <div className="histogram-chart">
         <svg width={width} height={height} className="histogram-chart">
           <defs>
             <clipPath id="histogram-chart--bars-clip">
@@ -113,14 +131,17 @@ class HistogramChart extends PureComponent<Props, State> {
             />
           </g>
         </svg>
-        {hoverData && (
+        <div className="histogram-chart--overlays">
-          <HistogramChartTooltip
+          {!!children && children(renderPropArgs)}
-            data={hoverData}
+          {hoverData && (
-            colorScale={colorScale}
+            <HistogramChartTooltip
-            colors={colors}
+              data={hoverData}
-          />
+              colorScale={colorScale}
-        )}
+              colors={colors}
-      </>
+            />
+          )}
+        </div>
+      </div>
     )
   }
 

ui/src/style/components/histogram-chart.scss

@@ -1,5 +1,6 @@
 .histogram-chart {
   user-select: none;
+  position: relative;
 }
 
 .histogram-chart-bars--bar {
@@ -64,3 +65,9 @@
 .histogram-chart-tooltip--column:first-child {
   margin-right: 12px;
 }
+
+.histogram-chart--overlays {
+  position: absolute;
+  top: 0;
+  left: 0;
+}

ui/src/tempVars/components/KeysTemplateBuilder.tsx

@@ -196,7 +196,15 @@ class KeysTemplateBuilder extends PureComponent<Props, State> {
         nextValues[0].selected = true
       }
 
-      onUpdateTemplate({...template, values: nextValues})
+      onUpdateTemplate({
+        ...template,
+        query: {
+          ...template.query,
+          db: selectedDatabase,
+          measurement: selectedMeasurement,
+        },
+        values: nextValues,
+      })
     } catch (error) {
       this.setState({keysStatus: RemoteDataState.Error})
       console.error(error)

ui/src/tempVars/components/TagValuesTemplateBuilder.tsx

@@ -236,7 +236,16 @@ class KeysTemplateBuilder extends PureComponent<TemplateBuilderProps, State> {
         nextValues[0].selected = true
       }
 
-      onUpdateTemplate({...template, values: nextValues})
+      onUpdateTemplate({
+        ...template,
+        values: nextValues,
+        query: {
+          ...template.query,
+          db: selectedDatabase,
+          measurement: selectedMeasurement,
+          tagKey: selectedTagKey,
+        },
+      })
     } catch (error) {
       this.setState({tagValuesStatus: RemoteDataState.Error})
       console.error(error)

ui/test/shared/components/__snapshots__/HistogramChart.test.tsx.snap

@@ -177,247 +177,254 @@ exports[`HistogramChart displays the visualization with bars if nonempty data is
   sortBarGroups={[Function]}
   width={600}
 >
-  <svg
+  <div
     className="histogram-chart"
-    height={400}
-    width={600}
   >
-    <defs>
+    <svg
-      <clipPath
+      className="histogram-chart"
-        id="histogram-chart--bars-clip"
+      height={400}
-      >
+      width={600}
-        <rect
-          height={375}
-          width={575}
-          x="0"
-          y="0"
-        />
-      </clipPath>
-    </defs>
-    <g
-      className="histogram-chart--axes"
     >
-      <HistogramChartAxes
+      <defs>
-        height={400}
+        <clipPath
-        margins={
+          id="histogram-chart--bars-clip"
-          Object {
+        >
-            "bottom": 20,
+          <rect
-            "left": 25,
+            height={375}
-            "right": 0,
+            width={575}
-            "top": 5,
+            x="0"
+            y="0"
+          />
+        </clipPath>
+      </defs>
+      <g
+        className="histogram-chart--axes"
+      >
+        <HistogramChartAxes
+          height={400}
+          margins={
+            Object {
+              "bottom": 20,
+              "left": 25,
+              "right": 0,
+              "top": 5,
+            }
           }
-        }
+          width={600}
-        width={600}
+          xScale={[Function]}
-        xScale={[Function]}
+          yScale={[Function]}
-        yScale={[Function]}
-      >
-        <line
-          className="y-tick"
-          key="0-25-625-380"
-          x1={25}
-          x2={625}
-          y1={380}
-          y2={380}
-        />
-        <line
-          className="y-tick"
-          key="0.5-25-625-301.875"
-          x1={25}
-          x2={625}
-          y1={301.875}
-          y2={301.875}
-        />
-        <line
-          className="y-tick"
-          key="1-25-625-223.75"
-          x1={25}
-          x2={625}
-          y1={223.75}
-          y2={223.75}
-        />
-        <line
-          className="y-tick"
-          key="1.5-25-625-145.625"
-          x1={25}
-          x2={625}
-          y1={145.625}
-          y2={145.625}
-        />
-        <line
-          className="y-tick"
-          key="2-25-625-67.5"
-          x1={25}
-          x2={625}
-          y1={67.5}
-          y2={67.5}
-        />
-        <text
-          className="y-label"
-          key="0-25-625-380"
-          x={18}
-          y={380}
         >
-          0
+          <line
-        </text>
+            className="y-tick"
-        <text
+            key="0-25-625-380"
-          className="y-label"
+            x1={25}
-          key="0.5-25-625-301.875"
+            x2={625}
-          x={18}
+            y1={380}
-          y={301.875}
+            y2={380}
-        >
-          0.5
-        </text>
-        <text
-          className="y-label"
-          key="1-25-625-223.75"
-          x={18}
-          y={223.75}
-        >
-          1
-        </text>
-        <text
-          className="y-label"
-          key="1.5-25-625-145.625"
-          x={18}
-          y={145.625}
-        >
-          1.5
-        </text>
-        <text
-          className="y-label"
-          key="2-25-625-67.5"
-          x={18}
-          y={67.5}
-        >
-          2
-        </text>
-        <text
-          className="x-label"
-          key=".001-287.5-388"
-          x={287.5}
-          y={388}
-        >
-          .001
-        </text>
-        <text
-          className="x-label"
-          key=".002-575-388"
-          x={575}
-          y={388}
-        >
-          .002
-        </text>
-      </HistogramChartAxes>
-    </g>
-    <g
-      className="histogram-chart--bars"
-      clipPath="url(#histogram-chart--bars-clip)"
-      transform="translate(25, 5)"
-    >
-      <HistogramChartBars
-        colorScale={[Function]}
-        colors={Array []}
-        data={
-          Array [
-            Object {
-              "group": "a",
-              "key": "0",
-              "time": 0,
-              "value": 0,
-            },
-            Object {
-              "group": "a",
-              "key": "1",
-              "time": 1,
-              "value": 1,
-            },
-            Object {
-              "group": "b",
-              "key": "2",
-              "time": 2,
-              "value": 2,
-            },
-          ]
-        }
-        height={375}
-        onHover={[Function]}
-        sortBarGroups={[Function]}
-        width={575}
-        xScale={[Function]}
-        yScale={[Function]}
-      >
-        <g
-          className="histogram-chart-bars--bars"
-          data-key="1-1-193.5"
-          key="1-1-193.5"
-          onClick={[Function]}
-          onMouseOut={[Function]}
-          onMouseOver={[Function]}
-        >
-          <defs>
-            <clipPath
-              id="histogram-chart-bars--clip-1-1-193.5"
-            >
-              <rect
-                height={159.25}
-                rx={3}
-                ry={3}
-                width={188}
-                x={193.5}
-                y={218.75}
-              />
-            </clipPath>
-          </defs>
-          <rect
-            className="histogram-chart-bars--bar"
-            clipPath="url(#histogram-chart-bars--clip-1-1-193.5)"
-            data-group="a"
-            data-key="1"
-            fill="#0000ff"
-            height={156.25}
-            key="1"
-            width={188}
-            x={193.5}
-            y={218.75}
           />
-        </g>
+          <line
-        <g
+            className="y-tick"
-          className="histogram-chart-bars--bars"
+            key="0.5-25-625-301.875"
-          data-key="2-2-481"
+            x1={25}
-          key="2-2-481"
+            x2={625}
-          onClick={[Function]}
+            y1={301.875}
-          onMouseOut={[Function]}
+            y2={301.875}
-          onMouseOver={[Function]}
-        >
-          <defs>
-            <clipPath
-              id="histogram-chart-bars--clip-2-2-481"
-            >
-              <rect
-                height={315.5}
-                rx={3}
-                ry={3}
-                width={188}
-                x={481}
-                y={62.5}
-              />
-            </clipPath>
-          </defs>
-          <rect
-            className="histogram-chart-bars--bar"
-            clipPath="url(#histogram-chart-bars--clip-2-2-481)"
-            data-group="b"
-            data-key="2"
-            fill="#0000ff"
-            height={312.5}
-            key="2"
-            width={188}
-            x={481}
-            y={62.5}
           />
-        </g>
+          <line
-      </HistogramChartBars>
+            className="y-tick"
-    </g>
+            key="1-25-625-223.75"
-  </svg>
+            x1={25}
+            x2={625}
+            y1={223.75}
+            y2={223.75}
+          />
+          <line
+            className="y-tick"
+            key="1.5-25-625-145.625"
+            x1={25}
+            x2={625}
+            y1={145.625}
+            y2={145.625}
+          />
+          <line
+            className="y-tick"
+            key="2-25-625-67.5"
+            x1={25}
+            x2={625}
+            y1={67.5}
+            y2={67.5}
+          />
+          <text
+            className="y-label"
+            key="0-25-625-380"
+            x={18}
+            y={380}
+          >
+            0
+          </text>
+          <text
+            className="y-label"
+            key="0.5-25-625-301.875"
+            x={18}
+            y={301.875}
+          >
+            0.5
+          </text>
+          <text
+            className="y-label"
+            key="1-25-625-223.75"
+            x={18}
+            y={223.75}
+          >
+            1
+          </text>
+          <text
+            className="y-label"
+            key="1.5-25-625-145.625"
+            x={18}
+            y={145.625}
+          >
+            1.5
+          </text>
+          <text
+            className="y-label"
+            key="2-25-625-67.5"
+            x={18}
+            y={67.5}
+          >
+            2
+          </text>
+          <text
+            className="x-label"
+            key=".001-287.5-388"
+            x={287.5}
+            y={388}
+          >
+            .001
+          </text>
+          <text
+            className="x-label"
+            key=".002-575-388"
+            x={575}
+            y={388}
+          >
+            .002
+          </text>
+        </HistogramChartAxes>
+      </g>
+      <g
+        className="histogram-chart--bars"
+        clipPath="url(#histogram-chart--bars-clip)"
+        transform="translate(25, 5)"
+      >
+        <HistogramChartBars
+          colorScale={[Function]}
+          colors={Array []}
+          data={
+            Array [
+              Object {
+                "group": "a",
+                "key": "0",
+                "time": 0,
+                "value": 0,
+              },
+              Object {
+                "group": "a",
+                "key": "1",
+                "time": 1,
+                "value": 1,
+              },
+              Object {
+                "group": "b",
+                "key": "2",
+                "time": 2,
+                "value": 2,
+              },
+            ]
+          }
+          height={375}
+          onHover={[Function]}
+          sortBarGroups={[Function]}
+          width={575}
+          xScale={[Function]}
+          yScale={[Function]}
+        >
+          <g
+            className="histogram-chart-bars--bars"
+            data-key="1-1-193.5"
+            key="1-1-193.5"
+            onClick={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+          >
+            <defs>
+              <clipPath
+                id="histogram-chart-bars--clip-1-1-193.5"
+              >
+                <rect
+                  height={159.25}
+                  rx={3}
+                  ry={3}
+                  width={188}
+                  x={193.5}
+                  y={218.75}
+                />
+              </clipPath>
+            </defs>
+            <rect
+              className="histogram-chart-bars--bar"
+              clipPath="url(#histogram-chart-bars--clip-1-1-193.5)"
+              data-group="a"
+              data-key="1"
+              fill="#0000ff"
+              height={156.25}
+              key="1"
+              width={188}
+              x={193.5}
+              y={218.75}
+            />
+          </g>
+          <g
+            className="histogram-chart-bars--bars"
+            data-key="2-2-481"
+            key="2-2-481"
+            onClick={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+          >
+            <defs>
+              <clipPath
+                id="histogram-chart-bars--clip-2-2-481"
+              >
+                <rect
+                  height={315.5}
+                  rx={3}
+                  ry={3}
+                  width={188}
+                  x={481}
+                  y={62.5}
+                />
+              </clipPath>
+            </defs>
+            <rect
+              className="histogram-chart-bars--bar"
+              clipPath="url(#histogram-chart-bars--clip-2-2-481)"
+              data-group="b"
+              data-key="2"
+              fill="#0000ff"
+              height={312.5}
+              key="2"
+              width={188}
+              x={481}
+              y={62.5}
+            />
+          </g>
+        </HistogramChartBars>
+      </g>
+    </svg>
+    <div
+      className="histogram-chart--overlays"
+    />
+  </div>
 </HistogramChart>
 `;