Adaptive bar widths for log graph

public/app/features/explore/Explore.tsx

@@ -475,7 +475,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
       from: parseDate(range.from, false),
       to: parseDate(range.to, true),
     };
-    const { interval } = kbn.calculateInterval(absoluteRange, resolution, datasource.interval);
+    const { interval, intervalMs } = kbn.calculateInterval(absoluteRange, resolution, datasource.interval);
     const targets = [
       {
         ...targetOptions,
@@ -490,6 +490,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
 
     return {
       interval,
+      intervalMs,
       targets,
       range: queryRange,
     };

public/app/features/explore/Graph.tsx

@@ -6,6 +6,7 @@ import { withSize } from 'react-sizeme';
 import 'vendor/flot/jquery.flot';
 import 'vendor/flot/jquery.flot.time';
 import 'vendor/flot/jquery.flot.selection';
+import 'vendor/flot/jquery.flot.stack';
 
 import { RawTimeRange } from 'app/types/series';
 import * as dateMath from 'app/core/utils/datemath';

public/app/features/explore/Logs.tsx

@@ -12,7 +12,10 @@ const graphOptions = {
   series: {
     bars: {
       show: true,
+      lineWidth: 5,
+      // barWidth: 10,
     },
+    // stack: true,
   },
   yaxis: {
     tickDecimals: 0,

public/app/features/explore/TimePicker.tsx

@@ -43,7 +43,7 @@ interface TimePickerState {
   isUtc: boolean;
   rangeString: string;
   refreshInterval?: string;
-  initialRange: RawTimeRange;
+  initialRange?: RawTimeRange;
 
   // Input-controlled text, keep these in a shape that is human-editable
   fromRaw: string;
@@ -53,24 +53,27 @@ interface TimePickerState {
 export default class TimePicker extends PureComponent<TimePickerProps, TimePickerState> {
   dropdownEl: any;
 
-  state = {
-    isOpen: false,
-    isUtc: false,
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isOpen: props.isOpen,
+      isUtc: props.isUtc,
       rangeString: '',
-    initialRange: DEFAULT_RANGE,
       fromRaw: '',
       toRaw: '',
+      initialRange: DEFAULT_RANGE,
       refreshInterval: '',
     };
+  }
 
   static getDerivedStateFromProps(props, state) {
-    if (state.range && state.range === props.range) {
-      return null;
+    if (state.initialRange && state.initialRange === props.range) {
+      return state;
     }
 
     const from = props.range ? props.range.from : DEFAULT_RANGE.from;
     const to = props.range ? props.range.to : DEFAULT_RANGE.to;
-    const initialRange = props.range || DEFAULT_RANGE;
 
     // Ensure internal format
     const fromRaw = parseTime(from, props.isUtc);
@@ -81,10 +84,10 @@ export default class TimePicker extends PureComponent<TimePickerProps, TimePicke
     };
 
     return {
+      ...state,
       fromRaw,
       toRaw,
-      initialRange,
-      isUtc: props.isUtc,
+      initialRange: props.range,
       rangeString: rangeUtil.describeTimeRange(range),
     };
   }

public/app/plugins/datasource/logging/datasource.ts

@@ -105,7 +105,7 @@ export default class LoggingDatasource {
         });
         return [...acc, ...streams];
       }, []);
-      const processedStreams = allStreams.map(stream => processStream(stream, DEFAULT_LIMIT));
+      const processedStreams = allStreams.map(stream => processStream(stream, DEFAULT_LIMIT, options.intervalMs));
       return { data: processedStreams };
     });
   }

public/app/plugins/datasource/logging/result_transformer.ts

@@ -143,7 +143,7 @@ export function mergeStreams(streams: LogsStream[], limit?: number): LogsModel {
   return { meta, series, rows: sortedEntries };
 }
 
-export function processStream(stream: LogsStream, limit?: number): LogsStream {
+export function processStream(stream: LogsStream, limit?: number, intervalMs?: number): LogsStream {
   const sortedEntries: any[] = _.chain(stream.entries)
     .map(entry => processEntry(entry, stream))
     .sortBy('timestamp')
@@ -155,7 +155,7 @@ export function processStream(stream: LogsStream, limit?: number): LogsStream {
   let previousTime;
   const datapoints = sortedEntries.reduce((acc, entry, index) => {
     // Bucket to nearest minute
-    const time = Math.round(entry.timeJs / 1000 / 60) * 1000 * 60;
+    const time = Math.round(entry.timeJs / intervalMs / 10) * intervalMs * 10;
     // Entry for time
     if (time === previousTime) {
       acc[acc.length - 1][0]++;