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;