Skip to content

Commit de0c688

Browse files
nawazdhandalanawazdhandala
committed
refactor: update styles and layout for log viewer components
1 parent 43ac4a7 commit de0c688

9 files changed

Lines changed: 64 additions & 67 deletions

File tree

‎Common/UI/Components/CopyTextButton/CopyTextButton.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,14 +54,14 @@ const CopyTextButton: FunctionComponent<ComponentProps> = (
5454

5555
const variantClasses: Record<typeof variant, string> = {
5656
ghost:
57-
"bg-transparent border border-slate-600 text-slate-300 hover:bg-slate-700/40",
58-
soft: "bg-slate-700 text-white border border-slate-600 hover:bg-slate-600",
57+
"bg-transparent border border-gray-200 text-gray-400 hover:bg-gray-50 hover:text-gray-600",
58+
soft: "bg-gray-100 text-gray-600 border border-gray-200 hover:bg-gray-200",
5959
solid:
6060
"bg-indigo-600 text-white border border-indigo-600 hover:bg-indigo-500",
6161
} as const;
6262

6363
const copiedClasses: string =
64-
"bg-emerald-600/20 border border-emerald-500 text-emerald-300";
64+
"bg-emerald-50 border border-emerald-200 text-emerald-600";
6565

6666
return (
6767
<button

‎Common/UI/Components/LogsViewer/LogsViewer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -427,7 +427,7 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
427427
props.showFacetSidebar !== false && !!props.facetData;
428428

429429
return (
430-
<div className="space-y-4">
430+
<div className="space-y-2">
431431
{props.showFilters && (
432432
<div>
433433
<LogsFilterCard
@@ -476,7 +476,7 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
476476
)}
477477

478478
{/* Main content: sidebar + table */}
479-
<div className="flex gap-4">
479+
<div className="flex gap-3">
480480
{showSidebar && props.facetData && (
481481
<LogsFacetSidebar
482482
facetData={props.facetData}

‎Common/UI/Components/LogsViewer/components/FacetSection.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const FacetSection: FunctionComponent<FacetSectionProps> = (
3838
: 0;
3939

4040
return (
41-
<div className="border-b border-gray-100 py-2.5">
41+
<div className="border-b border-gray-100 py-2">
4242
<button
4343
type="button"
4444
className="flex w-full items-center justify-between px-2 py-1 text-left"

‎Common/UI/Components/LogsViewer/components/FacetValueRow.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const FacetValueRow: FunctionComponent<FacetValueRowProps> = (
4242
</button>
4343

4444
<div className="flex items-center gap-1.5">
45-
<div className="w-14">
45+
<div className="w-12">
4646
<div className="h-1.5 w-full rounded-full bg-gray-100">
4747
<div
4848
className="h-1.5 rounded-full opacity-70 transition-all"
@@ -53,7 +53,7 @@ const FacetValueRow: FunctionComponent<FacetValueRowProps> = (
5353
/>
5454
</div>
5555
</div>
56-
<span className="min-w-[2.5rem] text-right font-mono text-[11px] text-gray-400">
56+
<span className="min-w-[2rem] text-right font-mono text-[10px] tabular-nums text-gray-400">
5757
{props.count.toLocaleString()}
5858
</span>
5959
</div>

‎Common/UI/Components/LogsViewer/components/LogsFacetSidebar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ const LogsFacetSidebar: FunctionComponent<LogsFacetSidebarProps> = (
106106
}, [props.facetData]);
107107

108108
return (
109-
<div className="flex h-full w-52 flex-none flex-col overflow-y-auto rounded-lg border border-gray-200 bg-white">
109+
<div className="flex h-full w-56 flex-none flex-col overflow-y-auto rounded-lg border border-gray-200 bg-white">
110110
<div className="border-b border-gray-100 px-3 py-2.5">
111111
<h3 className="text-[11px] font-semibold uppercase tracking-widest text-gray-400">
112112
Filters

‎Common/UI/Components/LogsViewer/components/LogsFilterCard.tsx‎

Lines changed: 39 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -33,55 +33,54 @@ const LogsFilterCard: FunctionComponent<LogsFilterCardProps> = (
3333
];
3434

3535
return (
36-
<div className="rounded-lg border border-gray-200 bg-white shadow-sm">
37-
<div className="p-4">
38-
<div className="mb-3">
36+
<div>
37+
<div className="flex items-start gap-3">
38+
<div className="min-w-0 flex-1">
3939
<LogSearchBar
4040
value={props.searchQuery}
4141
onChange={props.onSearchQueryChange}
4242
onSubmit={props.onSearchSubmit}
4343
suggestions={searchBarSuggestions}
4444
/>
4545
</div>
46-
47-
<FiltersForm<Log>
48-
id="logs-filter"
49-
showFilter={true}
50-
filterData={props.filterData}
51-
onFilterChanged={props.onFilterChanged}
52-
onAdvancedFiltersToggle={props.onAdvancedFiltersToggle}
53-
isFilterLoading={props.isFilterLoading}
54-
filterError={props.filterError}
55-
onFilterRefreshClick={props.onFilterRefreshClick}
56-
filters={[
57-
{
58-
key: "severityText",
59-
filterDropdownOptions:
60-
DropdownUtil.getDropdownOptionsFromEnum(LogSeverity),
61-
type: FieldType.Dropdown,
62-
title: "Log Severity",
63-
isAdvancedFilter: true,
64-
},
65-
{
66-
key: "time",
67-
type: FieldType.DateTime,
68-
title: "Start and End Date",
69-
isAdvancedFilter: true,
70-
},
71-
{
72-
key: "attributes",
73-
type: FieldType.JSON,
74-
title: "Filter by Attributes",
75-
jsonKeys: props.logAttributes,
76-
isAdvancedFilter: true,
77-
},
78-
]}
79-
/>
46+
<div className="flex-none pt-0.5">
47+
{props.toolbar}
48+
</div>
8049
</div>
8150

82-
<div className="border-t border-gray-100 bg-gray-50/50 px-4 py-2.5">
83-
{props.toolbar}
84-
</div>
51+
<FiltersForm<Log>
52+
id="logs-filter"
53+
showFilter={true}
54+
filterData={props.filterData}
55+
onFilterChanged={props.onFilterChanged}
56+
onAdvancedFiltersToggle={props.onAdvancedFiltersToggle}
57+
isFilterLoading={props.isFilterLoading}
58+
filterError={props.filterError}
59+
onFilterRefreshClick={props.onFilterRefreshClick}
60+
filters={[
61+
{
62+
key: "severityText",
63+
filterDropdownOptions:
64+
DropdownUtil.getDropdownOptionsFromEnum(LogSeverity),
65+
type: FieldType.Dropdown,
66+
title: "Log Severity",
67+
isAdvancedFilter: true,
68+
},
69+
{
70+
key: "time",
71+
type: FieldType.DateTime,
72+
title: "Start and End Date",
73+
isAdvancedFilter: true,
74+
},
75+
{
76+
key: "attributes",
77+
type: FieldType.JSON,
78+
title: "Filter by Attributes",
79+
jsonKeys: props.logAttributes,
80+
isAdvancedFilter: true,
81+
},
82+
]}
83+
/>
8584
</div>
8685
);
8786
};

‎Common/UI/Components/LogsViewer/components/LogsHistogram.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,7 @@ const LogsHistogram: FunctionComponent<LogsHistogramProps> = (
145145

146146
if (props.isLoading && pivotedData.length === 0) {
147147
return (
148-
<div className="flex h-20 items-center justify-center rounded-lg border border-gray-100 bg-white">
148+
<div className="flex h-16 items-center justify-center bg-white">
149149
<ComponentLoader />
150150
</div>
151151
);
@@ -156,16 +156,16 @@ const LogsHistogram: FunctionComponent<LogsHistogramProps> = (
156156
}
157157

158158
return (
159-
<div className="rounded-lg border border-gray-100 bg-white px-2 pb-1 pt-3">
160-
<div className="h-20">
159+
<div className="bg-white px-2 pb-0 pt-2">
160+
<div className="h-16">
161161
<ResponsiveContainer width="100%" height="100%">
162162
<BarChart
163163
data={pivotedData}
164164
margin={{ top: 2, right: 4, bottom: 0, left: 0 }}
165165
onMouseDown={handleMouseDown}
166166
onMouseMove={handleMouseMove}
167167
onMouseUp={handleMouseUp}
168-
barCategoryGap="12%"
168+
barCategoryGap="15%"
169169
>
170170
<XAxis
171171
dataKey="time"
@@ -192,7 +192,7 @@ const LogsHistogram: FunctionComponent<LogsHistogramProps> = (
192192
dataKey={severity}
193193
stackId="severity"
194194
fill={getSeverityColor(severity).fill}
195-
radius={[1, 1, 0, 0]}
195+
radius={[3, 3, 0, 0]}
196196
isAnimationActive={false}
197197
/>
198198
))}

‎Common/UI/Components/LogsViewer/components/LogsTable.tsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import OneUptimeDate from "../../../../Types/Date";
66
import CopyTextButton from "../../CopyTextButton/CopyTextButton";
77
import ComponentLoader from "../../ComponentLoader/ComponentLoader";
88
import SeverityBadge from "./SeverityBadge";
9+
import { getSeverityTheme, SeverityTheme } from "./severityTheme";
910
import SortOrder from "../../../../Types/BaseDatabase/SortOrder";
1011
import Icon from "../../Icon/Icon";
1112
import IconProp from "../../../../Types/Icon/IconProp";
@@ -114,7 +115,7 @@ const LogsTable: FunctionComponent<LogsTableProps> = (
114115
</button>
115116
</th>
116117
<th scope="col" className="px-4 py-2.5">
117-
Service
118+
<span>Service</span>
118119
</th>
119120
<th scope="col" className="px-4 py-2.5">
120121
<button
@@ -162,29 +163,32 @@ const LogsTable: FunctionComponent<LogsTableProps> = (
162163
const spanId: string = log.spanId?.toString() || "";
163164

164165
const isSelected: boolean = props.selectedLogId === rowId;
166+
const severityTheme: SeverityTheme = getSeverityTheme(
167+
log.severityText,
168+
);
165169

166170
return (
167171
<Fragment key={rowId}>
168172
<tr
169173
onClick={() => {
170174
props.onRowClick(log, rowId);
171175
}}
172-
className={`group cursor-pointer align-top transition-colors hover:bg-gray-50/70 ${
176+
className={`group cursor-pointer align-top transition-colors hover:bg-gray-50/70 border-l-[3px] ${severityTheme.borderClass} ${
173177
isSelected
174178
? "bg-indigo-50/50 ring-1 ring-inset ring-indigo-200"
175179
: ""
176180
}`}
177181
aria-selected={isSelected}
178182
aria-expanded={isSelected}
179183
>
180-
<td className="whitespace-nowrap px-4 py-2.5 text-[13px] font-mono text-gray-600">
184+
<td className="whitespace-nowrap px-4 py-2 text-[13px] font-mono text-gray-600">
181185
{log.time
182186
? OneUptimeDate.getDateAsUserFriendlyFormattedString(
183187
log.time,
184188
)
185189
: "-"}
186190
</td>
187-
<td className="px-4 py-2.5">
191+
<td className="px-4 py-2">
188192
<div className="flex items-center gap-3 text-sm text-gray-700">
189193
<span
190194
className="h-2.5 w-2.5 flex-none rounded-full shadow-sm"
@@ -196,10 +200,10 @@ const LogsTable: FunctionComponent<LogsTableProps> = (
196200
</span>
197201
</div>
198202
</td>
199-
<td className="px-4 py-2.5">
203+
<td className="px-4 py-2">
200204
<SeverityBadge severity={log.severityText} />
201205
</td>
202-
<td className="px-4 py-2.5">
206+
<td className="px-4 py-2">
203207
<div className="flex items-start justify-between gap-3">
204208
<div className="flex min-w-0 flex-1 flex-col gap-1">
205209
<p
@@ -221,6 +225,7 @@ const LogsTable: FunctionComponent<LogsTableProps> = (
221225
variant="ghost"
222226
iconOnly={true}
223227
title="Copy log message"
228+
className="opacity-0 group-hover:opacity-100 transition-opacity"
224229
/>
225230
</div>
226231
</td>

‎Internal/Roadmap/Logs.md‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -271,13 +271,6 @@ These changes directly improve the daily log investigation experience for every
271271

272272
## Phase 4: Advanced Features (P3) — Differentiation
273273

274-
### 4.1 Log Patterns (ML Clustering)
275-
276-
- Implement a clustering algorithm that groups logs by message structure
277-
- Replace variable parts (IPs, UUIDs, numbers) with wildcards
278-
- Show pattern frequency over time with sparklines
279-
- Enable creating alerts directly from a pattern
280-
- This is a significant backend feature requiring a background job that periodically clusters recent logs
281274

282275
### 4.2 Keyboard Shortcuts
283276

0 commit comments

Comments
 (0)