Timeline Expand and Collapse Features

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.css

@@ -0,0 +1,26 @@
+/*
+Copyright (c) 2017 Uber Technologies, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.TimelineCollapser {
+  float: right;
+  margin: 0 0.8rem 0 0;
+  display: inline-block;
+}
+
+.TimelineCollapser > * {
+  margin-right: 0.3rem;
+  transform: rotate(90deg);
+}

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.js

@@ -0,0 +1,53 @@
+// @flow
+
+// Copyright (c) 2017 Uber Technologies, Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from 'react';
+
+import { Tooltip } from 'antd';
+
+import './TimelineCollapser.css';
+import type { Span } from '../../../../types';
+
+type CollapserProps = {
+  onCollapseAll: (Span[]) => void,
+  onCollapseOne: (Span[]) => void,
+  onExpandOne: (Span[]) => void,
+  onExpandAll: () => void,
+  spans: Span[],
+};
+
+export default function TimelineCollapser(props: CollapserProps) {
+  const { onExpandAll, onExpandOne, onCollapseAll, onCollapseOne, spans } = props;
+  const _onCollapseAll = () => onCollapseAll(spans);
+  const _onExpandOne = () => onExpandOne(spans);
+  const _onCollapseOne = () => onCollapseOne(spans);
+  return (
+    <span className="TimelineCollapser">
+      <Tooltip title="Expand +1">
+        <span className="anticon anticon-right" onClick={_onExpandOne} role={'button'} />
+      </Tooltip>
+      <Tooltip title="Collapse +1">
+        <span className="anticon anticon-left" onClick={_onCollapseOne} role={'button'} />
+      </Tooltip>
+      <Tooltip title="Expand All">
+        <span className="anticon anticon-double-right" onClick={onExpandAll} role={'button'} />
+      </Tooltip>
+      <Tooltip title="Collapse All">
+        <span className="anticon anticon-double-left" onClick={_onCollapseAll} role={'button'} />
+      </Tooltip>
+    </span>
+  );
+}

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.css

@@ -26,8 +26,9 @@ limitations under the License.
 }
 
 .TimelineHeaderRow--title {
+  display: inline-block;
   overflow: hidden;
-  margin: 0 0.75rem 0 0.5rem;
+  margin: 0 0 0 0.5rem;
   text-overflow: ellipsis;
   white-space: nowrap;
 }

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.js

@@ -16,19 +16,26 @@
 
 import * as React from 'react';
 
+import TimelineCollapser from './TimelineCollapser';
 import TimelineColumnResizer from './TimelineColumnResizer';
 import TimelineViewingLayer from './TimelineViewingLayer';
 import Ticks from '../Ticks';
 import TimelineRow from '../TimelineRow';
 import type { ViewRangeTime, ViewRangeTimeUpdate } from '../../types';
+import type { Span } from '../../../../types';
 
 import './TimelineHeaderRow.css';
 
 type TimelineHeaderRowProps = {
   duration: number,
   nameColumnWidth: number,
   numTicks: number,
+  onCollapseAll: (Span[]) => void,
+  onCollapseOne: (Span[]) => void,
   onColummWidthChange: number => void,
+  onExpandAll: () => void,
+  onExpandOne: (Span[]) => void,
+  spans: Span[],
   updateNextViewRangeTime: ViewRangeTimeUpdate => void,
   updateViewRangeTime: (number, number, ?string) => void,
   viewRangeTime: ViewRangeTime,
@@ -39,7 +46,12 @@ export default function TimelineHeaderRow(props: TimelineHeaderRowProps) {
     duration,
     nameColumnWidth,
     numTicks,
+    onCollapseAll,
+    onCollapseOne,
     onColummWidthChange,
+    onExpandAll,
+    onExpandOne,
+    spans,
     updateViewRangeTime,
     updateNextViewRangeTime,
     viewRangeTime,
@@ -49,6 +61,13 @@ export default function TimelineHeaderRow(props: TimelineHeaderRowProps) {
     <TimelineRow className="TimelineHeaderRow">
       <TimelineRow.Cell width={nameColumnWidth}>
         <h3 className="TimelineHeaderRow--title">Service &amp; Operation</h3>
+        <TimelineCollapser
+          onCollapseAll={onCollapseAll}
+          onExpandAll={onExpandAll}
+          onCollapseOne={onCollapseOne}
+          onExpandOne={onExpandOne}
+          spans={spans}
+        />
       </TimelineRow.Cell>
       <TimelineRow.Cell width={1 - nameColumnWidth}>
         <TimelineViewingLayer

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/duck.js

@@ -49,6 +49,10 @@ export const actionTypes = generateActionTypes('@jaeger-ui/trace-timeline-viewer
   'SET_TRACE',
   'SET_SPAN_NAME_COLUMN_WIDTH',
   'CHILDREN_TOGGLE',
+  'EXPAND_ALL',
+  'COLLAPSE_ALL',
+  'EXPAND_ONE',
+  'COLLAPSE_ONE',
   'DETAIL_TOGGLE',
   'DETAIL_TAGS_TOGGLE',
   'DETAIL_PROCESS_TOGGLE',
@@ -61,6 +65,10 @@ const fullActions = createActions({
   [actionTypes.SET_TRACE]: traceID => ({ traceID }),
   [actionTypes.SET_SPAN_NAME_COLUMN_WIDTH]: width => ({ width }),
   [actionTypes.CHILDREN_TOGGLE]: spanID => ({ spanID }),
+  [actionTypes.EXPAND_ALL]: () => ({}),
+  [actionTypes.EXPAND_ONE]: spans => ({ spans }),
+  [actionTypes.COLLAPSE_ALL]: spans => ({ spans }),
+  [actionTypes.COLLAPSE_ONE]: spans => ({ spans }),
   [actionTypes.DETAIL_TOGGLE]: spanID => ({ spanID }),
   [actionTypes.DETAIL_TAGS_TOGGLE]: spanID => ({ spanID }),
   [actionTypes.DETAIL_PROCESS_TOGGLE]: spanID => ({ spanID }),
@@ -97,6 +105,70 @@ function childrenToggle(state, { payload }) {
   return { ...state, childrenHiddenIDs };
 }
 
+function shouldDisableCollapse(allSpans, hiddenSpansIds) {
+  const allParentSpans = allSpans.filter(s => s.hasChildren);
+  return allParentSpans.length === hiddenSpansIds.size;
+}
+
+function expandAll(state) {
+  const childrenHiddenIDs = new Set();
+  return { ...state, childrenHiddenIDs };
+}
+
+function collapseAll(state, { payload }) {
+  const { spans } = payload;
+  if (shouldDisableCollapse(spans, state.childrenHiddenIDs)) {
+    return state;
+  }
+  const childrenHiddenIDs = spans.reduce((res, s) => {
+    if (s.hasChildren) {
+      res.add(s.spanID);
+    }
+    return res;
+  }, new Set());
+  return { ...state, childrenHiddenIDs };
+}
+
+function collapseOne(state, { payload }) {
+  const { spans } = payload;
+  if (shouldDisableCollapse(spans, state.childrenHiddenIDs)) {
+    return state;
+  }
+  let nearestCollapsedAncestor;
+  const childrenHiddenIDs = spans.reduce((res, curSpan) => {
+    if (nearestCollapsedAncestor && curSpan.depth <= nearestCollapsedAncestor.depth) {
+      res.add(nearestCollapsedAncestor.spanID);
+      nearestCollapsedAncestor = curSpan;
+    } else if (curSpan.hasChildren && !res.has(curSpan.spanID)) {
+      nearestCollapsedAncestor = curSpan;
+    }
+    return res;
+  }, new Set(state.childrenHiddenIDs));
+  childrenHiddenIDs.add(nearestCollapsedAncestor.spanID);
+  return { ...state, childrenHiddenIDs };
+}
+
+function expandOne(state, { payload }) {
+  const { spans } = payload;
+  if (state.childrenHiddenIDs.size === 0) {
+    return state;
+  }
+  let prevExpandedDepth = -1;
+  let expandNextHiddenSpan = true;
+  const childrenHiddenIDs = spans.reduce((res, s) => {
+    if (s.depth <= prevExpandedDepth) {
+      expandNextHiddenSpan = true;
+    }
+    if (expandNextHiddenSpan && res.has(s.spanID)) {
+      res.delete(s.spanID);
+      expandNextHiddenSpan = false;
+      prevExpandedDepth = s.depth;
+    }
+    return res;
+  }, new Set(state.childrenHiddenIDs));
+  return { ...state, childrenHiddenIDs };
+}
+
 function detailToggle(state, { payload }) {
   const { spanID } = payload;
   const detailStates = new Map(state.detailStates);
@@ -149,6 +221,10 @@ export default handleActions(
     [actionTypes.SET_TRACE]: setTrace,
     [actionTypes.SET_SPAN_NAME_COLUMN_WIDTH]: setColumnWidth,
     [actionTypes.CHILDREN_TOGGLE]: childrenToggle,
+    [actionTypes.EXPAND_ALL]: expandAll,
+    [actionTypes.EXPAND_ONE]: expandOne,
+    [actionTypes.COLLAPSE_ALL]: collapseAll,
+    [actionTypes.COLLAPSE_ONE]: collapseOne,
     [actionTypes.DETAIL_TOGGLE]: detailToggle,
     [actionTypes.DETAIL_TAGS_TOGGLE]: detailTagsToggle,
     [actionTypes.DETAIL_PROCESS_TOGGLE]: detailProcessToggle,

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/index.js

@@ -22,13 +22,17 @@ import TimelineHeaderRow from './TimelineHeaderRow';
 import VirtualizedTraceView from './VirtualizedTraceView';
 import type { Accessors } from '../ScrollManager';
 import type { ViewRange, ViewRangeTimeUpdate } from '../types';
-import type { Trace } from '../../../types';
+import type { Span, Trace } from '../../../types';
 
 import './index.css';
 
 type TraceTimelineViewerProps = {
   registerAccessors: Accessors => void,
   setSpanNameColumnWidth: number => void,
+  collapseAll: (Span[]) => void,
+  collapseOne: (Span[]) => void,
+  expandAll: () => void,
+  expandOne: (Span[]) => void,
   spanNameColumnWidth: number,
   textFilter: ?string,
   trace: Trace,
@@ -47,14 +51,19 @@ const NUM_TICKS = 5;
  */
 function TraceTimelineViewer(props: TraceTimelineViewerProps) {
   const { setSpanNameColumnWidth, updateNextViewRangeTime, updateViewRangeTime, viewRange, ...rest } = props;
-  const { spanNameColumnWidth, trace } = rest;
+  const { spanNameColumnWidth, trace, expandAll, collapseAll, expandOne, collapseOne } = rest;
   return (
     <div className="TraceTimelineViewer">
       <TimelineHeaderRow
         duration={trace.duration}
         nameColumnWidth={spanNameColumnWidth}
         numTicks={NUM_TICKS}
+        onCollapseAll={collapseAll}
+        onCollapseOne={collapseOne}
         onColummWidthChange={setSpanNameColumnWidth}
+        onExpandAll={expandAll}
+        onExpandOne={expandOne}
+        spans={trace.spans}
         viewRangeTime={viewRange.time}
         updateNextViewRangeTime={updateNextViewRangeTime}
         updateViewRangeTime={updateViewRangeTime}
@@ -74,7 +83,23 @@ function mapDispatchToProps(dispatch) {
     const action = actions.setSpanNameColumnWidth(...args);
     return dispatch(action);
   };
-  return { setSpanNameColumnWidth };
+  const expandAll = () => {
+    const action = actions.expandAll();
+    return dispatch(action);
+  };
+  const expandOne = spans => {
+    const action = actions.expandOne(spans);
+    return dispatch(action);
+  };
+  const collapseAll = spans => {
+    const action = actions.collapseAll(spans);
+    return dispatch(action);
+  };
+  const collapseOne = spans => {
+    const action = actions.collapseOne(spans);
+    return dispatch(action);
+  };
+  return { setSpanNameColumnWidth, expandAll, expandOne, collapseAll, collapseOne };
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(TraceTimelineViewer);