- {this.state.hasResolvedLocation ?
-
- {operationName}
- :
- ❗️
-
- }
-
{operationName}
- } - { - typeof this.state.importance === "number" && [1,2].includes(this.state.importance) && this.state.hasResolvedLocation && -
+
+ {this.state.hasCodeLocation ? (
+
+ {operationName}
+
+ ) : (
+
+ {operationName}
+ )} +
+ {this.state.insights.map(insight => {
+ const insightTypeInfo = getInsightTypeInfo(insight.type);
+
+ return insightTypeInfo ? (
+
+
+
+ ) : null;
+ })}
+
+
diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.css b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.css
index 5c8bab68b7..14964efe41 100644
--- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.css
+++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.css
@@ -38,4 +38,5 @@ limitations under the License.
.TimelineHeaderRow--loading-text {
margin: 0 8px;
+ line-height: 14px;
}
diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.tsx b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.tsx
index 36d5d87f89..a710eb92af 100644
--- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.tsx
+++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.tsx
@@ -43,30 +43,33 @@ type TimelineHeaderRowProps = {
type TimelineHeaderRowState = {
isLoading: boolean;
-}
+};
-export default class SpanDetailRow extends React.PureComponent {
+export default class SpanDetailRow extends React.PureComponent<
+ TimelineHeaderRowProps,
+ TimelineHeaderRowState
+> {
constructor(props: TimelineHeaderRowProps) {
- super(props)
+ super(props);
this.state = {
- isLoading: Boolean(globalState.pendingOperationsCount)
- }
+ isLoading: Boolean(globalState.pendingOperationsCount),
+ };
}
-
+
componentDidMount(): void {
- dispatcher.addActionListener(actions.SET_SPANS_WITH_RESOLVED_LOCATION, this.updateIsLoading);
+ dispatcher.addActionListener(actions.SET_SPANS_DATA, this.updateIsLoading);
}
componentWillUnmount(): void {
- dispatcher.removeActionListener(actions.SET_SPANS_WITH_RESOLVED_LOCATION, this.updateIsLoading);
+ dispatcher.removeActionListener(actions.SET_SPANS_DATA, this.updateIsLoading);
}
updateIsLoading = () => {
this.setState({
- isLoading: false
+ isLoading: false,
});
- }
-
+ };
+
render() {
const {
duration,
@@ -87,10 +90,12 @@ export default class SpanDetailRow extends React.PureComponent
{
componentDidUpdate({ id: prevID, trace: prevTrace }: TProps) {
const { id, trace } = this.props;
- if (
- trace &&
- trace !== prevTrace &&
- trace.data &&
- trace.state &&
- trace.state === fetchedState.DONE
- ) {
- this.getSpansWithResolvedLocations(trace.data)
+ if (trace && trace !== prevTrace && trace.data && trace.state && trace.state === fetchedState.DONE) {
+ this.getSpansWithResolvedLocations(trace.data);
}
this._scrollManager.setTrace(trace && trace.data);
@@ -222,27 +217,30 @@ export class TracePageImpl extends React.PureComponent {
scrollBy,
scrollTo,
});
+ dispatcher.dispatch(actions.CLEAR);
}
getSpansWithResolvedLocations(trace: Trace) {
// Get all the trace spans and send it Digma IDE plugin
- // to verify if they have resolved location
window.sendMessageToDigma({
- action: actions.GET_SPANS_WITH_RESOLVED_LOCATION,
+ action: actions.GET_SPANS_DATA,
payload: {
- spans: trace.spans.map(span => {
- const otelLibraryNameTag = span.tags.find(tag => tag.key === "otel.library.name");
- const functionTag = span.tags.find(tag => tag.key === "code.function");
- const namespaceTag = span.tags.find(tag => tag.key === "code.namespace");
-
- return {
- id: span.spanID,
- name: span.operationName,
- instrumentationLibrary: otelLibraryNameTag && otelLibraryNameTag.value,
- ...(functionTag ? {function: functionTag.value} : {}),
- ...(namespaceTag ? {namespace: namespaceTag.value} : {}),
- }}).filter(span => span.instrumentationLibrary)
- }
+ spans: trace.spans
+ .map(span => {
+ const otelLibraryNameTag = span.tags.find(tag => tag.key === 'otel.library.name');
+ const functionTag = span.tags.find(tag => tag.key === 'code.function');
+ const namespaceTag = span.tags.find(tag => tag.key === 'code.namespace');
+
+ return {
+ id: span.spanID,
+ name: span.operationName,
+ instrumentationLibrary: otelLibraryNameTag && otelLibraryNameTag.value,
+ ...(functionTag ? { function: functionTag.value } : {}),
+ ...(namespaceTag ? { namespace: namespaceTag.value } : {}),
+ };
+ })
+ .filter(span => span.instrumentationLibrary),
+ },
});
}
diff --git a/packages/jaeger-ui/src/components/common/ErrorMessage.css b/packages/jaeger-ui/src/components/common/ErrorMessage.css
index 9aac574aff..df9aaea832 100644
--- a/packages/jaeger-ui/src/components/common/ErrorMessage.css
+++ b/packages/jaeger-ui/src/components/common/ErrorMessage.css
@@ -62,3 +62,62 @@ limitations under the License.
padding: 0.5em;
white-space: pre;
}
+
+.CustomErrorMessage {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ flex-grow: 1;
+}
+
+.CustomErrorMessage--iconContainer {
+ width: 72px;
+ height: 72px;
+ border-radius: 50%;
+ background: #f5f5f5;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.CustomErrorMessage--text {
+ display: flex;
+ flex-direction: column;
+ font-weight: 500;
+ align-items: center;
+ margin: 12px 0 14px;
+}
+
+.CustomErrorMessage--title {
+ font-size: 14px;
+ line-height: 17px;
+ color: #49494d;
+ margin-bottom: 4px;
+}
+
+.CustomErrorMessage--description {
+ font-size: 12px;
+ line-height: 14px;
+ color: #828797;
+ text-align: center;
+}
+
+.CustomErrorMessage--link {
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 14px;
+ text-decoration: underline;
+ color: #426dda;
+}
+
+.CustomErrorMessage--slackLink {
+ display: flex;
+ gap: 4px;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 14px;
+ text-transform: capitalize;
+ text-decoration: underline;
+ color: #426dda;
+}
diff --git a/packages/jaeger-ui/src/components/common/ErrorMessage.tsx b/packages/jaeger-ui/src/components/common/ErrorMessage.tsx
index e48a72bca7..59b5e38e56 100644
--- a/packages/jaeger-ui/src/components/common/ErrorMessage.tsx
+++ b/packages/jaeger-ui/src/components/common/ErrorMessage.tsx
@@ -17,6 +17,13 @@ import * as React from 'react';
import { ApiError } from '../../types/api-error';
import './ErrorMessage.css';
+import { CrossedCrosshairCircleIcon } from './icons/CrossedCrosshairCircleIcon';
+import { SlackLogoIcon } from './icons/SlackLogoIcon';
+import { BrokenLinkCircleIcon } from './icons/BrokenLinkCircleIcon';
+import { isString } from '../../utils/ts/typeGuards/isString';
+
+const SLACK_CHANNEL_URL =
+ 'https://join.slack.com/t/continuous-feedback/shared_invite/zt-1hk5rbjow-yXOIxyyYOLSXpCZ4RXstgA';
type ErrorMessageProps = {
className?: string;
@@ -32,6 +39,12 @@ type SubPartProps = {
wrapperClassName?: string;
};
+type DigmaErrorMessageProps = {
+ icon: React.ReactNode;
+ title: string;
+ content: React.ReactNode;
+};
+
function ErrorAttr({ name, value }: { name: string; value: any }) {
return (
@@ -95,6 +108,25 @@ Details.defaultProps = {
wrapperClassName: undefined,
};
+export const DigmaErrorMessage = (props: DigmaErrorMessageProps) => (
+
+ No need to worry! Please run some more actions and check again +
+
+ If you're using your your own Jaeger instance, please check that Digma knows to send traces + to it as well. +
+ Check the "Jaeger Query URL" parameter in the Digma plugin settings and make sure it + matches your Jaeger address + + } + /> + ); + } + + if (error.message.includes('Failed to fetch')) { + const isUserDefinedJaegerQueryURL = window.isUserDefinedJaegerQueryURL === true; + return ( +
+ Please makes sure the link you specified in the +
+ Digma plugin settings is correct. + + ) : ( + <> + Something is wrong and we are unable to communicate +
+ with the Digma Jaeger instance. +
+ Please make sure Digma is fully up and running +
+ and try updating to the latest version. + + ) + } + /> + ); + } + return (
Service & Operation
- {this.state.isLoading &&
-
}
+ {this.state.isLoading && (
+
+
+ )}
+ {props.icon}
+
+);
+
export default function ErrorMessage({
className,
detailClassName,
@@ -107,6 +139,75 @@ export default function ErrorMessage({
if (typeof error === 'string') {
return
+ {props.title}
+ {props.content}
+
+
+ + No need to worry! Please run some more actions and check again +
+
+ If you're using your your own Jaeger instance, please check that Digma knows to send traces + to it as well. +
+ Check the "Jaeger Query URL" parameter in the Digma plugin settings and make sure it + matches your Jaeger address + + } + /> + ); + } + + if (error.message.includes('Failed to fetch')) { + const isUserDefinedJaegerQueryURL = window.isUserDefinedJaegerQueryURL === true; + return ( +
+ Please makes sure the link you specified in the +
+ Digma plugin settings is correct. + + ) : ( + <> + Something is wrong and we are unable to communicate +
+ with the Digma Jaeger instance. +
+ Please make sure Digma is fully up and running +
+ and try updating to the latest version. + + ) + } + /> + ); + } + return (