Skip to content

Commit 5b98861

Browse files
kamilkisielan1ru4l
kamilkisiela
authored and
n1ru4l
committed
asdasd
1 parent 522cacb commit 5b98861

File tree

8 files changed

+406
-159
lines changed

8 files changed

+406
-159
lines changed

‎packages/web/app/package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@
7272
"@types/crypto-js": "^4.2.2",
7373
"@types/dompurify": "3.2.0",
7474
"@types/js-cookie": "3.0.6",
75+
"@types/lodash.debounce": "4.0.9",
7576
"@types/react": "18.3.18",
7677
"@types/react-dom": "18.3.5",
7778
"@types/react-highlight-words": "0.20.0",
@@ -103,10 +104,13 @@
103104
"js-cookie": "3.0.5",
104105
"json-schema-typed": "8.0.1",
105106
"json-schema-yup-transformer": "1.6.12",
107+
"jsurl2": "2.2.0",
108+
"lodash.debounce": "4.0.8",
106109
"lucide-react": "0.469.0",
107110
"mini-svg-data-uri": "1.4.4",
108111
"monaco-editor": "0.50.0",
109112
"monaco-themes": "0.4.4",
113+
"query-string": "9.1.1",
110114
"react": "18.3.1",
111115
"react-day-picker": "8.10.1",
112116
"react-dom": "18.3.1",

‎packages/web/app/src/components/layouts/target.tsx‎

Lines changed: 56 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ReactElement, ReactNode, useMemo, useState } from 'react';
1+
import { createContext, ReactElement, ReactNode, useContext, useMemo, useState } from 'react';
22
import { LinkIcon } from 'lucide-react';
33
import { useQuery } from 'urql';
44
import { Button } from '@/components/ui/button';
@@ -39,11 +39,48 @@ export enum Page {
3939
Checks = 'checks',
4040
History = 'history',
4141
Insights = 'insights',
42+
Traces = 'traces',
4243
Laboratory = 'laboratory',
4344
Apps = 'apps',
4445
Settings = 'settings',
4546
}
4647

48+
type TargetReference = {
49+
organizationSlug: string;
50+
projectSlug: string;
51+
targetSlug: string;
52+
};
53+
54+
const TargetReferenceContext = createContext<TargetReference | undefined>(undefined);
55+
56+
type TargetReferenceProviderProps = {
57+
children: ReactNode;
58+
organizationSlug: string;
59+
projectSlug: string;
60+
targetSlug: string;
61+
};
62+
63+
export const TargetReferenceProvider = ({
64+
children,
65+
organizationSlug,
66+
projectSlug,
67+
targetSlug,
68+
}: TargetReferenceProviderProps) => {
69+
return (
70+
<TargetReferenceContext.Provider value={{ organizationSlug, projectSlug, targetSlug }}>
71+
{children}
72+
</TargetReferenceContext.Provider>
73+
);
74+
};
75+
76+
export const useTargetReference = () => {
77+
const context = useContext(TargetReferenceContext);
78+
if (!context) {
79+
throw new Error('useTargetReference must be used within a TargetReferenceProvider');
80+
}
81+
return context;
82+
};
83+
4784
const TargetLayoutQuery = graphql(`
4885
query TargetLayoutQuery($organizationSlug: String!, $projectSlug: String!, $targetSlug: String!) {
4986
me {
@@ -109,7 +146,11 @@ export const TargetLayout = ({
109146
useLastVisitedOrganizationWriter(currentOrganization?.slug);
110147

111148
return (
112-
<>
149+
<TargetReferenceProvider
150+
organizationSlug={props.organizationSlug}
151+
projectSlug={props.projectSlug}
152+
targetSlug={props.targetSlug}
153+
>
113154
<header>
114155
<div className="container flex h-[--header-height] items-center justify-between">
115156
<div className="flex flex-row items-center gap-4">
@@ -202,6 +243,18 @@ export const TargetLayout = ({
202243
Insights
203244
</Link>
204245
</TabsTrigger>
246+
<TabsTrigger variant="menu" value={Page.Traces} asChild>
247+
<Link
248+
to="/$organizationSlug/$projectSlug/$targetSlug/traces"
249+
params={{
250+
organizationSlug: props.organizationSlug,
251+
projectSlug: props.projectSlug,
252+
targetSlug: props.targetSlug,
253+
}}
254+
>
255+
Traces
256+
</Link>
257+
</TabsTrigger>
205258
{currentTarget.viewerCanViewAppDeployments && (
206259
<TabsTrigger variant="menu" value={Page.Apps} asChild>
207260
<Link
@@ -279,7 +332,7 @@ export const TargetLayout = ({
279332
</div>
280333
</>
281334
)}
282-
</>
335+
</TargetReferenceProvider>
283336
);
284337
};
285338

‎packages/web/app/src/pages/target-insights-new-trace.tsx‎ renamed to ‎packages/web/app/src/pages/target-trace.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/componen
99
import { ScrollArea } from '@/components/ui/scroll-area';
1010
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
1111
import { cn } from '@/lib/utils';
12-
import { useWidthSync, WidthSyncProvider } from './target-insights-new-width';
12+
import { useWidthSync, WidthSyncProvider } from './target-traces-width';
1313

1414
const rootSpan: SpanProps = {
1515
id: 'root',
@@ -1247,19 +1247,20 @@ function TargetInsightsNewPageContent() {
12471247
return <TraceSheet trace={traceInSheet} />;
12481248
}
12491249

1250-
export function TargetInsightsNewTracePage(props: {
1250+
export function TargetTracePage(props: {
1251+
traceId: string;
12511252
organizationSlug: string;
12521253
projectSlug: string;
12531254
targetSlug: string;
12541255
}) {
12551256
return (
12561257
<>
1257-
<Meta title="Trace 12323134" />
1258+
<Meta title={`Trace ${props.traceId}`} />
12581259
<TargetLayout
12591260
organizationSlug={props.organizationSlug}
12601261
projectSlug={props.projectSlug}
12611262
targetSlug={props.targetSlug}
1262-
page={Page.Insights}
1263+
page={Page.Traces}
12631264
className="flex flex-col"
12641265
>
12651266
<div className="flex flex-1 flex-col">

‎packages/web/app/src/pages/target-insights-new-filter.tsx‎ renamed to ‎packages/web/app/src/pages/target-traces-filter.tsx‎

Lines changed: 67 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {
2+
ChangeEventHandler,
23
ComponentPropsWithoutRef,
34
ElementRef,
45
forwardRef,
@@ -7,10 +8,12 @@ import {
78
memo,
89
ReactNode,
910
useCallback,
11+
useEffect,
1012
useMemo,
1113
useState,
1214
} from 'react';
1315
import { addDays, formatDate } from 'date-fns';
16+
import debounce from 'lodash.debounce';
1417
import {
1518
CalendarIcon,
1619
CheckIcon,
@@ -88,27 +91,25 @@ export function FilterTitle(props: { children: ReactNode; changes?: number; onRe
8891
className="group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm"
8992
>
9093
<CollapsibleTrigger>
91-
<>
92-
<ChevronRightIcon className="mr-2 transition-transform group-data-[state=open]/collapsible:rotate-90" />
93-
{props.children}
94-
{props.changes ? (
95-
<Button
96-
variant="secondary"
97-
size="sm"
98-
className="hover:bg-secondary group ml-auto h-6 w-8 px-1 py-0 text-xs text-gray-500"
99-
onClick={e => {
100-
e.preventDefault();
101-
props.onReset();
102-
}}
103-
asChild
104-
>
105-
<>
106-
<CircleXIcon className="hidden size-3 group-hover:block" />
107-
<span className="block group-hover:hidden">{props.changes}</span>
108-
</>
109-
</Button>
110-
) : null}
111-
</>
94+
<ChevronRightIcon className="mr-2 transition-transform group-data-[state=open]/collapsible:rotate-90" />
95+
{props.children}
96+
{props.changes ? (
97+
<Button
98+
variant="secondary"
99+
size="sm"
100+
className="hover:bg-secondary group ml-auto h-6 w-8 px-1 py-0 text-xs text-gray-500"
101+
onClick={e => {
102+
e.preventDefault();
103+
props.onReset();
104+
}}
105+
asChild
106+
>
107+
<div>
108+
<CircleXIcon className="hidden size-3 group-hover:block" />
109+
<span className="block group-hover:hidden">{props.changes}</span>
110+
</div>
111+
</Button>
112+
) : null}
112113
</CollapsibleTrigger>
113114
</SidebarGroupLabel>
114115
);
@@ -345,18 +346,51 @@ export const DurationFilter = memo(
345346
const minValue = 0;
346347
const maxValue = 100000;
347348
const defaultValues: [number, number] = [minValue, maxValue];
348-
const values: [number, number] = props.value.length ? props.value : defaultValues;
349+
const [values, setValues] = useState<[number, number]>(
350+
props.value.length ? props.value : defaultValues,
351+
);
349352

350-
const handleSliderChange = (newValues: [number, number]) => {
351-
props.onChange(newValues);
352-
};
353+
const handleStateChange = useMemo(
354+
() =>
355+
debounce((newValues: [number, number]) => {
356+
props.onChange(newValues);
357+
}, 1000),
358+
[props.onChange],
359+
);
360+
361+
const handleSliderChange = useCallback(
362+
(newValues: [number, number]) => {
363+
handleStateChange(newValues);
364+
setValues(newValues);
365+
},
366+
[handleStateChange, setValues],
367+
);
368+
369+
useEffect(() => {
370+
return () => handleStateChange.cancel();
371+
}, [handleStateChange]);
372+
373+
const handleInputChange = useCallback(
374+
(index: number, value: string) => {
375+
const numValue = Number.parseInt(value) || minValue;
376+
const newValues: [number, number] = [...values];
377+
newValues[index] = Math.min(Math.max(numValue, minValue), maxValue);
353378

354-
const handleInputChange = (index: number, value: string) => {
355-
const numValue = Number.parseInt(value) || minValue;
356-
const newValues: [number, number] = [...values];
357-
newValues[index] = Math.min(Math.max(numValue, minValue), maxValue);
358-
props.onChange(newValues);
359-
};
379+
handleStateChange(newValues);
380+
setValues(newValues);
381+
},
382+
[handleStateChange, setValues],
383+
);
384+
385+
const handleMinInputChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
386+
e => handleInputChange(0, e.target.value),
387+
[handleInputChange],
388+
);
389+
390+
const handleMaxInputChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
391+
e => handleInputChange(1, e.target.value),
392+
[handleInputChange],
393+
);
360394

361395
return (
362396
<Filter name="Duration">
@@ -374,7 +408,7 @@ export const DurationFilter = memo(
374408
<FilterInput
375409
type="number"
376410
value={values[0]}
377-
onChange={e => handleInputChange(0, e.target.value)}
411+
onChange={handleMinInputChange}
378412
className="h-7 border-zinc-800 bg-transparent px-2 pr-8 font-mono text-white"
379413
/>
380414
<span className="absolute right-2 top-1/2 -translate-y-1/2 font-mono text-xs text-zinc-400">
@@ -388,7 +422,7 @@ export const DurationFilter = memo(
388422
<FilterInput
389423
type="number"
390424
value={values[1]}
391-
onChange={e => handleInputChange(1, e.target.value)}
425+
onChange={handleMaxInputChange}
392426
className="h-7 border-gray-800 bg-transparent px-2 pr-8 font-mono text-white"
393427
/>
394428
<span className="absolute right-2 top-1/2 -translate-y-1/2 font-mono text-xs text-gray-400">

‎packages/web/app/src/pages/target-insights-new-width.tsx‎ renamed to ‎packages/web/app/src/pages/target-traces-width.tsx‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,4 @@
1-
import {
2-
createContext,
3-
FC,
4-
ReactNode,
5-
useCallback,
6-
useContext,
7-
useDeferredValue,
8-
useRef,
9-
useState,
10-
} from 'react';
1+
import { createContext, FC, ReactNode, useCallback, useContext, useRef, useState } from 'react';
112

123
interface WidthSyncContextType {
134
width: number;

0 commit comments

Comments
 (0)