jaegertracing · SOF3 · Jul 4, 2024 · yurishkuro · Jul 4, 2024
@@ -23,6 +23,7 @@ import { Link } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import AltViewOptions from './AltViewOptions';
 import KeyboardShortcutsHelp from './KeyboardShortcutsHelp';
+import TracePageSettings from './TracePageSettings';
 import SpanGraph from './SpanGraph';
 import TracePageSearchBar from './TracePageSearchBar';
 import { TUpdateViewRangeTimeFunction, IViewRange, ViewRangeTimeUpdate, ETraceViewType } from '../types';
@@ -58,6 +59,9 @@ type TracePageHeaderEmbedProps = {
  showViewOptions: boolean;
  slimView: boolean;
  textFilter: string | TNil;
+ availableTagKeys: string[];
+ selectedMarkerColorKey: string[];
+ setMarkerColorKey: (tagKey: string[]) => void;
  toSearch: string | null;
  trace: Trace;
  viewType: ETraceViewType;
@@ -127,6 +131,9 @@ export function TracePageHeaderFn(props: TracePageHeaderEmbedProps & { forwarded
  disableJsonView,
  slimView,
  textFilter,
+ availableTagKeys,
+ selectedMarkerColorKey,
+ setMarkerColorKey,
  toSearch,
  trace,
  viewType,
@@ -190,6 +197,12 @@ export function TracePageHeaderFn(props: TracePageHeaderEmbedProps & { forwarded
  textFilter={textFilter}
  navigable={viewType === ETraceViewType.TraceTimelineViewer}
  />
+ <TracePageSettings
+ className="ub-m2"
+ availableTagKeys={availableTagKeys}
+ selectedMarkerColorKey={selectedMarkerColorKey}
+ onMarkerColorKeyChange={setMarkerColorKey}
+ />
  {showShortcutsHelp && <KeyboardShortcutsHelp className="ub-m2" />}
  {showViewOptions && (
  <AltViewOptions

@@ -0,0 +1,25 @@
+/*
+Copyright (c) 2024 The Jaeger 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.
+*/
+
+.TracePageSettings--cta {
+ font-size: 1.2rem;
+ margin: -3px -7px;
+}
+
+.TracePageSettings-emptyColorKey,
+.TracePageSettings--noColorKey {
+ font-style: italic;
+}
@@ -0,0 +1,150 @@
+// Copyright (c) 2024 The Jaeger 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 * as React from 'react';
+import { Button, Dropdown, Form, Modal, Space, Tag } from 'antd';
+import { IoAdd, IoCheckmark, IoChevronDown, IoClose, IoSettings } from 'react-icons/io5';
+
+import keyboardMappings from '../keyboard-mappings';
+import track from './KeyboardShortcutsHelp.track';
+
+import './KeyboardShortcutsHelp.css';
+
+type Props = {
+ availableTagKeys: string[];
+ selectedMarkerColorKey: string[];
+ onMarkerColorKeyChange: (tagKey: string[]) => void;
+ className: string;
+};
+
+type State = {
+ visible: boolean;
+};
+
+type DataRecord = {
+ key: string;
+ kbds: React.JSX.Element;
+ description: string;
+};
+
+function renderTagKey(tag: string) {
+ if (tag === '') {
+ return <span className="TracePageSettings-emptyMarkerColorKey">(Empty string)</span>;
+ }
+
+ return <span>{tag}</span>;
+}
+
+function getMarkerColorKeyFormItem(props: Props) {
+ const items = [];
+ const callbacks: { [key: string]: boolean } = {}; // whether the key should be added or removed
+
+ for (const key of props.selectedMarkerColorKey) {
+ callbacks[key] = false;
+ items.push({
+ key: key,
+ label: (
+ <span>
+ {renderTagKey(key)}
+ <IoCheckmark />
+ </span>
+ ),
+ });
+ }
+
+ for (const key of props.availableTagKeys) {
+ if (callbacks.hasOwnProperty(key)) {
+ continue;
+ }
+
+ callbacks[key] = true;
+ items.push({
+ key: key,
+ label: renderTagKey(key),
+ });
+ }
+
+ const toggle = key => {
+ console.log(callbacks);
+ console.log(key, callbacks[key]);
+ let newList: string[];
+ if (callbacks[key]) {
+ newList = props.selectedMarkerColorKey.concat([key]);
+ newList.sort();
+ } else {
+ newList = props.selectedMarkerColorKey.filter(item => item != key);
+ }
+ console.log(newList);
+ props.onMarkerColorKeyChange(newList);
+ };
+
+ return (
+ <Form.Item label="Color log ticks by log field:">
+ <>
+ {props.selectedMarkerColorKey.map(key => (
+ <Tag
+ closeIcon={<IoClose />}
+ onClose={e => {
+ e.preventDefault();
+ toggle(key);
+ }}
+ >
+ {renderTagKey(key)}
+ </Tag>
+ ))}
+ </>
+ <Dropdown menu={{ items, onClick: ({ key }) => toggle(key) }}>
+ <Tag>
+ <IoAdd />
+ </Tag>
+ </Dropdown>
+ </Form.Item>
+ );
+}
+
+export default class TracePageSettings extends React.PureComponent<Props, State> {
+ state = {
+ visible: false,
+ };
+
+ onCtaClicked = () => {
+ track();
+ this.setState({ visible: true });
+ };
+
+ onCloserClicked = () => this.setState({ visible: false });
+
+ render() {
+ const { className } = this.props;
+ return (
+ <React.Fragment>
+ <Button className={className} htmlType="button" onClick={this.onCtaClicked}>
+ <span className="TracePageSettings--cta">
+ <IoSettings />
+ </span>
+ </Button>
+ <Modal
+ title="Page settings"
+ open={this.state.visible}
+ onOk={this.onCloserClicked}
+ onCancel={this.onCloserClicked}
+ cancelButtonProps={{ style: { display: 'none' } }}
+ bodyStyle={{ padding: 0 }}
+ >
+ <Form>{getMarkerColorKeyFormItem(this.props)}</Form>
+ </Modal>
+ </React.Fragment>
+ );
+ }
+}
@@ -101,7 +101,6 @@ limitations under the License.
 }
 
 .SpanBar--logMarker {
- background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  height: 60%;
  min-width: 1px;

@@ -21,6 +21,7 @@ import AccordianLogs from './SpanDetail/AccordianLogs';
 import { ViewedBoundsFunctionType } from './utils';
 import { TNil } from '../../../types';
 import { Span, criticalPathSection } from '../../../types/trace';
+import { ColorGenerator, ColorGeneratorView, Rgb } from '../../../utils/color-generator';
 
 import './SpanBar.css';
 
@@ -44,6 +45,8 @@ type TCommonProps = {
  span: Span;
  longLabel: string;
  shortLabel: string;
+ colorGenerator: ColorGenerator;
+ markerColorKey: string[];
 };
 
 function toPercent(value: number) {
@@ -68,6 +71,8 @@ function SpanBar(props: TCommonProps) {
  span,
  shortLabel,
  longLabel,
+ colorGenerator,
+ markerColorKey,
  } = props;
  // group logs based on timestamps
  const logGroups = _groupBy(span.logs, log => {
@@ -124,7 +129,15 @@ function SpanBar(props: TCommonProps) {
  <div
  data-testid="SpanBar--logMarker"
  className="SpanBar--logMarker"
- style={{ left: positionKey, zIndex: 3 }}
+ style={{
+ left: positionKey,
+ zIndex: 3,
+ background: logMarkerImage(
+ new ColorGeneratorView(colorGenerator, darkenRgb),
+ markerColorKey,
+ logGroups[positionKey]
+ ),
+ }}
  />
  </Popover>
  ))}
@@ -171,4 +184,33 @@ function SpanBar(props: TCommonProps) {
  );
 }
 
+function darkenRgb(rgb: Rgb): Rgb {
+ return rgb.map(comp => Math.floor((comp * 2) / 3));
+}
+
+function logMarkerImage(colorView: ColorGeneratorView, tags: string[], logs: Log[]): string {
+ if (tags.length === 0) {
+ return '#000000';
+ }
+
+ const tagSet = {};
+ for (const tag of tags) {
+ tagSet[tag] = true;
+ }
+
+ const sections = [];
+
+ for (const log of logs) {
+ const values = log.fields.filter(({ key }) => tagSet.hasOwnProperty(key)).map(({ value }) => value);
+ const color = values.length === 0 ? '#000000' : colorView.getColorByKey(JSON.stringify(values));
+
+ const start = Math.floor((sections.length * 100) / logs.length);
+ const end = Math.floor(((sections.length + 1) * 100) / logs.length);
+
+ sections.push(`${color} ${start}%`, `${color} ${end}%`);
+ }
+
+ return `linear-gradient(${sections.join(', ')})`;
+}
+
 export default SpanBar;
@@ -22,6 +22,7 @@ import SpanBar from './SpanBar';
 import Ticks from './Ticks';
 
 import { TNil } from '../../../types';
+import { ColorGenerator } from '../../../utils/color-generator';
 import { criticalPathSection, Span } from '../../../types/trace';
 
 import './SpanBarRow.css';
@@ -55,6 +56,8 @@ type SpanBarRowProps = {
  showErrorIcon: boolean;
  getViewedBounds: ViewedBoundsFunctionType;
  traceStartTime: number;
+ colorGenerator: ColorGenerator;
+ markerColorKey: string[];
  span: Span;
  focusSpan: (spanID: string) => void;
 };
@@ -98,6 +101,8 @@ export default class SpanBarRow extends React.PureComponent<SpanBarRowProps> {
  traceStartTime,
  span,
  focusSpan,
+ colorGenerator,
+ markerColorKey,
  } = this.props;
  const {
  duration,
@@ -211,6 +216,8 @@ export default class SpanBarRow extends React.PureComponent<SpanBarRowProps> {
  hintSide={hintSide}
  traceStartTime={traceStartTime}
  span={span}
+ colorGenerator={colorGenerator}
+ markerColorKey={markerColorKey}
  />
  </TimelineRow.Cell>
  </TimelineRow>

@@ -62,6 +62,7 @@ type TVirtualizedTraceViewOwnProps = {
  registerAccessors: (accesors: Accessors) => void;
  trace: Trace;
  criticalPath: criticalPathSection[];
+ markerColorKey: string[];
 };
 
 type TDispatchProps = {
@@ -386,6 +387,7 @@ export class VirtualizedTraceViewImpl extends React.Component<VirtualizedTraceVi
  spanNameColumnWidth,
  trace,
  criticalPath,
+ markerColorKey,
  } = this.props;
  // to avert flow error
  if (!trace) {
@@ -445,6 +447,8 @@ export class VirtualizedTraceViewImpl extends React.Component<VirtualizedTraceVi
  traceStartTime={trace.startTime}
  span={span}
  focusSpan={this.focusSpan}
+ colorGenerator={colorGenerator}
+ markerColorKey={markerColorKey}
  />
  </div>
  );

@@ -45,6 +45,7 @@ type TProps = TDispatchProps & {
  updateNextViewRangeTime: (update: ViewRangeTimeUpdate) => void;
  updateViewRangeTime: TUpdateViewRangeTimeFunction;
  viewRange: IViewRange;
+ markerColorKey: string[];
 };
 
 const NUM_TICKS = 5;