Add TraceTimelineHeader

zipkin-lens/src/components/TracePage/TraceSummary.jsx

@@ -17,6 +17,7 @@ import { AutoSizer } from 'react-virtualized';
 
 import TraceSummaryHeader from './TraceSummaryHeader';
 import TraceTimeline from './TraceTimeline';
+import TraceTimelineHeader from './TraceTimelineHeader';
 import SpanDetail from './SpanDetail';
 import { detailedTraceSummaryPropTypes } from '../../prop-types';
 
@@ -80,27 +81,33 @@ const TraceSummary = ({ traceSummary }) => {
         <TraceSummaryHeader traceSummary={traceSummary} />
       </Box>
       <Box height="100%" display="flex">
-        <Box height="100%" width="65%">
-          <AutoSizer>
-            {
-              ({ height, width }) => (
-                <Box
-                  height={height}
-                  width={width}
-                  overflow="auto"
-                >
-                  <TraceTimeline
-                    spans={filteredSpans}
-                    depth={traceSummary.depth}
+        <Box width="65%" display="flex" flexDirection="column">
+          <TraceTimelineHeader
+            startTs={0}
+            endTs={traceSummary.duration}
+          />
+          <Box height="100%" width="100%">
+            <AutoSizer>
+              {
+                ({ height, width }) => (
+                  <Box
+                    height={height}
                     width={width}
-                    closedSpans={closedSpans}
-                    onSpanClick={handleSpanClick}
-                    onSpanToggleButtonClick={handleSpanToggleButtonClick}
-                  />
-                </Box>
-              )
-            }
-          </AutoSizer>
+                    overflow="auto"
+                  >
+                    <TraceTimeline
+                      spans={filteredSpans}
+                      depth={traceSummary.depth}
+                      width={width}
+                      closedSpans={closedSpans}
+                      onSpanClick={handleSpanClick}
+                      onSpanToggleButtonClick={handleSpanToggleButtonClick}
+                    />
+                  </Box>
+                )
+              }
+            </AutoSizer>
+          </Box>
         </Box>
         <Box height="100%" width="35%">
           <AutoSizer>

zipkin-lens/src/components/TracePage/TraceTimeline/TraceTimeline.jsx

@@ -17,7 +17,7 @@ import React from 'react';
 import TraceTree from './TraceTree';
 import TraceTimelineRow from './TraceTimelineRow';
 import { detailedSpansPropTypes } from '../../../prop-types';
-import { spanDataRowLineHeight, spanBarRowLineHeight, spanTreeWidthPercent } from './constants';
+import { spanDataRowLineHeight, spanBarRowLineHeight, spanTreeWidthPercent } from '../constants';
 
 const propTypes = {
   spans: detailedSpansPropTypes.isRequired,

zipkin-lens/src/components/TracePage/TraceTimeline/TraceTimelineRow.jsx

@@ -16,7 +16,7 @@ import React, { useCallback } from 'react';
 import { makeStyles } from '@material-ui/styles';
 import grey from '@material-ui/core/colors/grey';
 
-import { spanDataRowLineHeight, spanBarRowLineHeight, spanBarHeight } from './constants';
+import { spanDataRowLineHeight, spanBarRowLineHeight, spanBarHeight } from '../constants';
 import { detailedSpanPropTypes } from '../../../prop-types';
 import { selectServiceColor } from '../../../colors';
 

zipkin-lens/src/components/TracePage/TraceTimeline/TraceTree.jsx

@@ -20,7 +20,7 @@ import {
   spanBarRowLineHeight,
   spanBarHeight,
   expandButtonLengthOfSide,
-} from './constants';
+} from '../constants';
 
 const useStyles = makeStyles({
   expandButton: {

zipkin-lens/src/components/TracePage/TraceTimelineHeader/TimeMarker.jsx

@@ -0,0 +1,98 @@
+/*
+ * Copyright 2015-2019 The OpenZipkin Authors
+ *
+ * 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 PropTypes from 'prop-types';
+import React from 'react';
+import { makeStyles } from '@material-ui/styles';
+import Box from '@material-ui/core/Box';
+
+import { spanTreeWidthPercent } from '../constants';
+import { formatDuration } from '../../../util/timestamp';
+
+const propTypes = {
+  startTs: PropTypes.number.isRequired,
+  endTs: PropTypes.number.isRequired,
+};
+
+const useStyles = makeStyles({
+  marker: {
+    height: '100%',
+    width: '1px',
+    backgroundColor: '#999',
+    position: 'absolute',
+  },
+  label: {
+    fontSize: '0.8rem',
+    left: '2px',
+    position: 'absolute',
+  },
+  lastLabel: {
+    fontSize: '0.8rem',
+    left: 'initial',
+    right: '2px',
+    position: 'absolute',
+  },
+});
+
+const numTimeMarkers = 4;
+
+const TimeMarker = ({ startTs, endTs }) => {
+  const classes = useStyles();
+
+  const timeMarkers = [];
+
+  for (let i = 0; i < numTimeMarkers; i += 1) {
+    const label = startTs + (i / (numTimeMarkers - 1)) * (endTs - startTs);
+    const portion = i / (numTimeMarkers - 1);
+
+    timeMarkers.push(
+      <Box
+        key={portion}
+        position="absolute"
+        className={
+          portion < 1 ? classes.marker : ''
+        }
+        style={{
+          left: `${portion * 100}%`,
+        }}
+      >
+        <Box
+          component="span"
+          position="absolute"
+          className={portion < 1 ? classes.label : classes.lastLabel}
+        >
+          {formatDuration(label)}
+        </Box>
+      </Box>,
+    );
+  }
+  return (
+    <Box
+      display="flex"
+      justifyContent="flex-end"
+    >
+      <Box
+        mt={1}
+        height={15}
+        position="relative"
+        width={`${100 - spanTreeWidthPercent}%`}
+      >
+        {timeMarkers}
+      </Box>
+    </Box>
+  );
+};
+
+TimeMarker.propTypes = propTypes;
+
+export default TimeMarker;

zipkin-lens/src/components/TracePage/TraceTimelineHeader/TraceTimelineHeader.jsx

@@ -0,0 +1,88 @@
+/*
+ * Copyright 2015-2019 The OpenZipkin Authors
+ *
+ * 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 PropTypes from 'prop-types';
+import React from 'react';
+import { makeStyles } from '@material-ui/styles';
+import Box from '@material-ui/core/Box';
+import Button from '@material-ui/core/Button';
+import ButtonGroup from '@material-ui/core/ButtonGroup';
+import grey from '@material-ui/core/colors/grey';
+import TimeMarker from './TimeMarker';
+
+const propTypes = {
+  startTs: PropTypes.number.isRequired,
+  endTs: PropTypes.number.isRequired,
+};
+
+const useStyles = makeStyles({
+  root: {
+    borderBottom: `1px solid ${grey[300]}`,
+    backgroundColor: grey[100],
+  },
+  textButton: {
+    fontSize: '1.2rem',
+    minWidth: '2rem',
+    width: '2rem',
+  },
+});
+
+const TraceTimelineHeader = ({ startTs, endTs }) => {
+  const classes = useStyles();
+
+  return (
+    <Box className={classes.root}>
+      <Box
+        display="flex"
+        alignItems="center"
+        mt={1}
+        mr={1}
+        ml={1}
+        justifyContent="space-between"
+      >
+        <Box>
+          <ButtonGroup>
+            <Button className={classes.textButton}>
+              <Box component="span" className="fas fa-angle-up" />
+            </Button>
+            <Button className={classes.textButton}>
+              <Box component="span" className="fas fa-angle-right" />
+            </Button>
+            <Button className={classes.textButton}>
+              <Box component="span" className="fas fa-angle-down" />
+            </Button>
+            <Button className={classes.textButton}>
+              <Box component="span" className="fas fa-angle-left" />
+            </Button>
+          </ButtonGroup>
+        </Box>
+        <ButtonGroup variant="contained">
+          <Button>
+            Show Minimap
+          </Button>
+          <Button>
+            Re-root
+          </Button>
+          <Button>
+            Reset root
+          </Button>
+        </ButtonGroup>
+      </Box>
+      <TimeMarker startTs={startTs} endTs={endTs} />
+    </Box>
+  );
+};
+
+TraceTimelineHeader.propTypes = propTypes;
+
+export default TraceTimelineHeader;

zipkin-lens/src/components/TracePage/TraceTimelineHeader/index.js

@@ -0,0 +1,14 @@
+/*
+ * Copyright 2015-2019 The OpenZipkin Authors
+ *
+ * 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.
+ */
+export { default } from './TraceTimelineHeader';