Skip to content

Commit

Permalink
Parallelism UI improvements -- see #427
Browse files Browse the repository at this point in the history
1. Displays sub-applications inline
2. Adds additional tooling on hierarchy of traces
3. A few other miscellaneous fixes around highlighting/table spacing

Note that we change from having the sequence ID in the URL
to having the point in the highlighted state in the URL. This allows us
to have multiple applications at once.

The code can be a little messy, and there are a few more places we
should probably have this distinction made, but for now this really
improves the experience with parallelism
  • Loading branch information
elijahbenizzy committed Nov 22, 2024
1 parent e448beb commit 9d9d430
Show file tree
Hide file tree
Showing 7 changed files with 791 additions and 257 deletions.
5 changes: 3 additions & 2 deletions telemetry/ui/src/components/routes/AppList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,8 @@ export const AppListTable = (props: { apps: ApplicationSummary[]; projectId: str
}, new Map<string, ApplicationSummary[]>());

// Display the parents no matter what
const rootAppsToDisplay = appsToDisplay.filter((app) => app.spawning_parent_pointer === null);
// const rootAppsToDisplay = appsToDisplay.filter((app) => app.spawning_parent_pointer === null);
const rootAppsToDisplay = appsToDisplay;
const anyHavePartitionKey = rootAppsToDisplay.some(
(app) => !isNullPartitionKey(app.partition_key)
);
Expand Down Expand Up @@ -261,7 +262,7 @@ export const AppListTable = (props: { apps: ApplicationSummary[]; projectId: str
</TableRow>
</TableHead>
<TableBody>
{rootAppsToDisplay.map((app) => {
{appsToDisplay.map((app) => {
return (
<AppSubList
key={app.app_id}
Expand Down
36 changes: 29 additions & 7 deletions telemetry/ui/src/components/routes/app/AnnotationsView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import CreatableSelect from 'react-select/creatable';
import { FaClipboardList, FaExternalLinkAlt, FaThumbsDown, FaThumbsUp } from 'react-icons/fa';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../common/table';
import { Chip } from '../../common/chip';
import { Link, useParams } from 'react-router-dom';
import { Link } from 'react-router-dom';
import { useMutation, useQuery } from 'react-query';
import { Loading } from '../../common/loading';
import {
Expand All @@ -28,6 +28,7 @@ import {
import { classNames } from '../../../utils/tailwind';
import { DateTimeDisplay } from '../../common/dates';
import { Drawer } from '../../common/drawer';
import { useLocationParams } from '../../../utils';

export const InlineAppView = (props: {
projectId: string;
Expand All @@ -47,7 +48,11 @@ export const InlineAppView = (props: {
allowAnnotations={false}
restrictTabs={['data', 'code', 'reproduce', 'insights', 'graph']}
disableNavigateSteps={false}
forceCurrentActionIndex={props.sequenceID}
forceCurrentActionIndex={{
sequenceId: props.sequenceID,
appId: props.appId,
partitionKey: props.partitionKey
}}
partitionKey={props.partitionKey}
forceFullScreen={true}
/>
Expand Down Expand Up @@ -95,7 +100,6 @@ export const AnnotationsView = (props: {
setCurrentEditingAnnotationContext,
setCurrentHoverIndex,
setCurrentSelectedIndex,
currentSelectedIndex,
createAnnotation,
updateAnnotation,
refreshAnnotationData
Expand Down Expand Up @@ -170,14 +174,24 @@ export const AnnotationsView = (props: {
annotations={props.allAnnotations}
onClick={(annotation) => {
// TODO -- ensure that the indices are aligned/set correctly
setCurrentSelectedIndex(annotation.step_sequence_id);
setCurrentSelectedIndex({
sequenceId: annotation.step_sequence_id,
appId: props.appId,
partitionKey: props.partitionKey
});
}}
onHover={(annotation) => {
setCurrentHoverIndex(annotation.step_sequence_id);
setCurrentHoverIndex({
sequenceId: annotation.step_sequence_id,
appId: props.appId,
partitionKey: props.partitionKey
});
}}
displayProjectLevelAnnotationsLink={true} // we want to link back to the project level view
projectId={props.projectId}
highlightedSequence={currentSelectedIndex}
highlightedSequence={
currentEditingAnnotationContext ? currentEditingAnnotationContext.sequenceId : undefined
}
/>
</div>
);
Expand Down Expand Up @@ -717,6 +731,8 @@ export const AnnotationsTable = (props: {
{props.allowInlineEdit && (
<TableCell className="align-top">
<AnnotateButton
appID={annotation.app_id}
partitionKey={annotation.partition_key}
sequenceID={annotation.step_sequence_id}
spanID={annotation.span_id || undefined}
existingAnnotation={annotation}
Expand Down Expand Up @@ -964,12 +980,16 @@ const ObservationForm = (props: {
type AnnnotationDataPointerWithValue = AnnotationDataPointer & { value: string };

export const AnnotateButton = (props: {
appID: string;
partitionKey: string | null;
sequenceID: number;
spanID?: string;
attribute?: string; // TODO -- consider whether we want to remove, we generally annotate at the step level
// But we might want to prepopulate the attribute if we are annotating a specific attribute (in the observations field)
existingAnnotation: AnnotationOut | undefined;
setCurrentEditingAnnotationContext: (context: {
appId: string;
partitionKey: string | null;
sequenceId: number;
attributeName: string | undefined;
spanId: string | null;
Expand All @@ -983,6 +1003,8 @@ export const AnnotateButton = (props: {
className="hover:scale-125 h-4 w-4"
onClick={(e) => {
props.setCurrentEditingAnnotationContext({
appId: props.appID,
partitionKey: props.partitionKey,
sequenceId: props.sequenceID,
attributeName: props.attribute,
spanId: props.spanID || null,
Expand Down Expand Up @@ -1187,7 +1209,7 @@ const AnnotationEditCreateForm = (props: {
* @returns
*/
export const AnnotationsViewContainer = () => {
const { projectId } = useParams();
const { projectId } = useLocationParams();
const { data: backendSpec } = useQuery(['backendSpec'], () =>
DefaultService.getAppSpecApiV0MetadataAppSpecGet().then((response) => {
return response;
Expand Down
Loading

0 comments on commit 9d9d430

Please sign in to comment.