mirror of
https://github.com/hyperdxio/hyperdx
synced 2026-04-21 13:37:15 +00:00
fix: improve UI layout and styling in DBSearchPage and related components (#1798)
This commit is contained in:
Elizabet Oliveira
GitHub
parent
8b267371e0
commit
1eede5ed2e
6 changed files with 159 additions and 156 deletions
7
.changeset/fix-patterns-header-align.md
Normal file
7
.changeset/fix-patterns-header-align.md
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
"@hyperdx/app": patch
|
||||
---
|
||||
|
||||
fix: align event patterns table headers to the left
|
||||
fix: remove empty wrapper div on Event Deltas and Event Patterns tabs
|
||||
fix: add consistent padding to Results Table, Event Deltas, and Event Patterns tabs
|
||||
|
|
@ -1873,7 +1873,7 @@ function DBSearchPage() {
|
|||
/>
|
||||
</Box>
|
||||
)}
|
||||
<Box flex="1" mih="0">
|
||||
<Box flex="1" mih="0" px="sm">
|
||||
<PatternTable
|
||||
source={searchedSource}
|
||||
config={{
|
||||
|
|
@ -1902,10 +1902,9 @@ function DBSearchPage() {
|
|||
source={searchedSource}
|
||||
/>
|
||||
)}
|
||||
<Flex direction="column" mih="0">
|
||||
{analysisMode === 'results' &&
|
||||
chartConfig &&
|
||||
histogramTimeChartConfig && (
|
||||
{analysisMode === 'results' && (
|
||||
<Flex direction="column" mih="0">
|
||||
{chartConfig && histogramTimeChartConfig && (
|
||||
<>
|
||||
<Box className={searchPageStyles.searchStatsContainer}>
|
||||
<Group
|
||||
|
|
@ -1919,7 +1918,6 @@ function DBSearchPage() {
|
|||
/>
|
||||
<Group gap="sm" align="center">
|
||||
{shouldShowLiveModeHint &&
|
||||
analysisMode === 'results' &&
|
||||
denoiseResults != true && (
|
||||
<ResumeLiveTailButton
|
||||
handleResumeLiveTail={handleResumeLiveTail}
|
||||
|
|
@ -1956,109 +1954,95 @@ function DBSearchPage() {
|
|||
)}
|
||||
</>
|
||||
)}
|
||||
{hasQueryError && queryError ? (
|
||||
<>
|
||||
<div className="h-100 w-100 px-4 mt-4 align-items-center justify-content-center text-muted overflow-auto">
|
||||
{whereSuggestions && whereSuggestions.length > 0 && (
|
||||
<Box mb="xl">
|
||||
<Text size="lg">
|
||||
<b>Query Helper</b>
|
||||
{hasQueryError && queryError ? (
|
||||
<>
|
||||
<div className="h-100 w-100 px-4 mt-4 align-items-center justify-content-center text-muted overflow-auto">
|
||||
{whereSuggestions && whereSuggestions.length > 0 && (
|
||||
<Box mb="xl">
|
||||
<Text size="lg">
|
||||
<b>Query Helper</b>
|
||||
</Text>
|
||||
<Grid>
|
||||
{whereSuggestions!.map(s => (
|
||||
<>
|
||||
<Grid.Col span={10}>
|
||||
<Text>{s.userMessage('where')}</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={2}>
|
||||
<Button
|
||||
onClick={() =>
|
||||
setValue('where', s.corrected())
|
||||
}
|
||||
>
|
||||
Accept
|
||||
</Button>
|
||||
</Grid.Col>
|
||||
</>
|
||||
))}
|
||||
</Grid>
|
||||
</Box>
|
||||
)}
|
||||
<Box mt="sm">
|
||||
<Text my="sm" size="sm">
|
||||
Error encountered for query with inputs:
|
||||
</Text>
|
||||
<Grid>
|
||||
{whereSuggestions!.map(s => (
|
||||
<>
|
||||
<Grid.Col span={10}>
|
||||
<Text>{s.userMessage('where')}</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={2}>
|
||||
<Button
|
||||
onClick={() =>
|
||||
setValue('where', s.corrected())
|
||||
}
|
||||
>
|
||||
Accept
|
||||
</Button>
|
||||
</Grid.Col>
|
||||
</>
|
||||
))}
|
||||
</Grid>
|
||||
</Box>
|
||||
)}
|
||||
<Box mt="sm">
|
||||
<Text my="sm" size="sm">
|
||||
Error encountered for query with inputs:
|
||||
</Text>
|
||||
<Paper
|
||||
flex="auto"
|
||||
p={'sm'}
|
||||
shadow="none"
|
||||
radius="sm"
|
||||
style={{ overflow: 'hidden' }}
|
||||
>
|
||||
<Grid>
|
||||
<Grid.Col span={2}>
|
||||
<Text>SELECT</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={10}>
|
||||
<SQLPreview
|
||||
data={`${chartConfig.select as string}`}
|
||||
formatData={false}
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={2}>
|
||||
<Text>ORDER BY</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={10}>
|
||||
<SQLPreview
|
||||
data={`${chartConfig.orderBy}`}
|
||||
formatData={false}
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={2}>
|
||||
<Text>
|
||||
{chartConfig.whereLanguage === 'lucene'
|
||||
? 'Searched For'
|
||||
: 'WHERE'}
|
||||
</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={10}>
|
||||
{chartConfig.whereLanguage === 'lucene' ? (
|
||||
<CodeMirror
|
||||
indentWithTab={false}
|
||||
value={chartConfig.where}
|
||||
theme="dark"
|
||||
basicSetup={{
|
||||
lineNumbers: false,
|
||||
foldGutter: false,
|
||||
highlightActiveLine: false,
|
||||
highlightActiveLineGutter: false,
|
||||
}}
|
||||
editable={false}
|
||||
<Paper
|
||||
flex="auto"
|
||||
p={'sm'}
|
||||
shadow="none"
|
||||
radius="sm"
|
||||
style={{ overflow: 'hidden' }}
|
||||
>
|
||||
<Grid>
|
||||
<Grid.Col span={2}>
|
||||
<Text>SELECT</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={10}>
|
||||
<SQLPreview
|
||||
data={`${chartConfig.select as string}`}
|
||||
formatData={false}
|
||||
/>
|
||||
) : (
|
||||
<SQLPreview data={`${chartConfig.where}`} />
|
||||
)}
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Paper>
|
||||
</Box>
|
||||
<Box mt="lg">
|
||||
<Text my="sm" size="sm">
|
||||
Error Message:
|
||||
</Text>
|
||||
<Code
|
||||
block
|
||||
style={{
|
||||
whiteSpace: 'pre-wrap',
|
||||
}}
|
||||
>
|
||||
{queryError.message}
|
||||
</Code>
|
||||
</Box>
|
||||
{queryError instanceof ClickHouseQueryError && (
|
||||
</Grid.Col>
|
||||
<Grid.Col span={2}>
|
||||
<Text>ORDER BY</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={10}>
|
||||
<SQLPreview
|
||||
data={`${chartConfig.orderBy}`}
|
||||
formatData={false}
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={2}>
|
||||
<Text>
|
||||
{chartConfig.whereLanguage === 'lucene'
|
||||
? 'Searched For'
|
||||
: 'WHERE'}
|
||||
</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={10}>
|
||||
{chartConfig.whereLanguage === 'lucene' ? (
|
||||
<CodeMirror
|
||||
indentWithTab={false}
|
||||
value={chartConfig.where}
|
||||
theme="dark"
|
||||
basicSetup={{
|
||||
lineNumbers: false,
|
||||
foldGutter: false,
|
||||
highlightActiveLine: false,
|
||||
highlightActiveLineGutter: false,
|
||||
}}
|
||||
editable={false}
|
||||
/>
|
||||
) : (
|
||||
<SQLPreview data={`${chartConfig.where}`} />
|
||||
)}
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Paper>
|
||||
</Box>
|
||||
<Box mt="lg">
|
||||
<Text my="sm" size="sm">
|
||||
Original Query:
|
||||
Error Message:
|
||||
</Text>
|
||||
<Code
|
||||
block
|
||||
|
|
@ -2066,38 +2050,52 @@ function DBSearchPage() {
|
|||
whiteSpace: 'pre-wrap',
|
||||
}}
|
||||
>
|
||||
<SQLPreview data={queryError.query} formatData />
|
||||
{queryError.message}
|
||||
</Code>
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<Box flex="1" mih="0">
|
||||
{chartConfig &&
|
||||
searchedConfig.source &&
|
||||
dbSqlRowTableConfig &&
|
||||
analysisMode === 'results' && (
|
||||
<DBSqlRowTableWithSideBar
|
||||
context={rowTableContext}
|
||||
config={dbSqlRowTableConfig}
|
||||
sourceId={searchedConfig.source}
|
||||
onSidebarOpen={onSidebarOpen}
|
||||
onExpandedRowsChange={onExpandedRowsChange}
|
||||
enabled={isReady}
|
||||
isLive={isLive ?? true}
|
||||
queryKeyPrefix={QUERY_KEY_PREFIX}
|
||||
onScroll={onTableScroll}
|
||||
onError={handleTableError}
|
||||
denoiseResults={denoiseResults}
|
||||
collapseAllRows={collapseAllRows}
|
||||
onSortingChange={onSortingChange}
|
||||
initialSortBy={initialSortBy}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
</Flex>
|
||||
{queryError instanceof ClickHouseQueryError && (
|
||||
<Box mt="lg">
|
||||
<Text my="sm" size="sm">
|
||||
Original Query:
|
||||
</Text>
|
||||
<Code
|
||||
block
|
||||
style={{
|
||||
whiteSpace: 'pre-wrap',
|
||||
}}
|
||||
>
|
||||
<SQLPreview data={queryError.query} formatData />
|
||||
</Code>
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<Box flex="1" mih="0" px="sm">
|
||||
{chartConfig &&
|
||||
searchedConfig.source &&
|
||||
dbSqlRowTableConfig && (
|
||||
<DBSqlRowTableWithSideBar
|
||||
context={rowTableContext}
|
||||
config={dbSqlRowTableConfig}
|
||||
sourceId={searchedConfig.source}
|
||||
onSidebarOpen={onSidebarOpen}
|
||||
onExpandedRowsChange={onExpandedRowsChange}
|
||||
enabled={isReady}
|
||||
isLive={isLive ?? true}
|
||||
queryKeyPrefix={QUERY_KEY_PREFIX}
|
||||
onScroll={onTableScroll}
|
||||
onError={handleTableError}
|
||||
denoiseResults={denoiseResults}
|
||||
collapseAllRows={collapseAllRows}
|
||||
onSortingChange={onSortingChange}
|
||||
initialSortBy={initialSortBy}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
</Flex>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -551,7 +551,7 @@ export default function DBDeltaChart({
|
|||
return (
|
||||
<Box
|
||||
ref={containerRef}
|
||||
p="md"
|
||||
p="sm"
|
||||
style={{
|
||||
overflow: 'hidden',
|
||||
height: '100%',
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@ export default function TableHeader({
|
|||
width: header.getSize() === UNDEFINED_WIDTH ? '100%' : header.getSize(),
|
||||
// Allow unknown width columns to shrink to 0
|
||||
minWidth: header.getSize() === UNDEFINED_WIDTH ? 0 : header.getSize(),
|
||||
textAlign: 'left',
|
||||
}}
|
||||
>
|
||||
<Group wrap="nowrap" gap={0} align="center">
|
||||
|
|
|
|||
|
|
@ -13,8 +13,7 @@ import {
|
|||
TSource,
|
||||
} from '@hyperdx/common-utils/dist/types';
|
||||
import { Box, Flex } from '@mantine/core';
|
||||
import { ActionIcon } from '@mantine/core';
|
||||
import { Paper } from '@mantine/core';
|
||||
import { Button } from '@mantine/core';
|
||||
import { Center } from '@mantine/core';
|
||||
import { Text } from '@mantine/core';
|
||||
import { IconPlayerPlay } from '@tabler/icons-react';
|
||||
|
|
@ -57,7 +56,7 @@ export function DBSearchHeatmapChart({
|
|||
style={{ overflow: 'hidden' }}
|
||||
ref={setContainer}
|
||||
>
|
||||
<Box mx="lg" mt="xs" mb={0}>
|
||||
<Box px="sm" pt="xs" mb={0}>
|
||||
<DBSearchHeatmapForm
|
||||
connection={tcFromSource(source)}
|
||||
defaultValues={{
|
||||
|
|
@ -122,14 +121,12 @@ export function DBSearchHeatmapChart({
|
|||
yMax={fields.yMax}
|
||||
/>
|
||||
) : (
|
||||
<Paper shadow="xs" p="xl" h="100%">
|
||||
<Center mih={100} h="100%">
|
||||
<Text size="sm">
|
||||
Please highlight an outlier range in the heatmap to view the delta
|
||||
chart.
|
||||
</Text>
|
||||
</Center>
|
||||
</Paper>
|
||||
<Center mih={100} h="100%">
|
||||
<Text size="sm">
|
||||
Please highlight an outlier range in the heatmap to view the delta
|
||||
chart.
|
||||
</Text>
|
||||
</Center>
|
||||
)}
|
||||
</Flex>
|
||||
);
|
||||
|
|
@ -189,15 +186,15 @@ function DBSearchHeatmapForm({
|
|||
rules={{ required: true }}
|
||||
/>
|
||||
</div>
|
||||
<ActionIcon
|
||||
w="40px"
|
||||
variant="primary"
|
||||
|
||||
<Button
|
||||
variant="secondary"
|
||||
type="submit"
|
||||
h="auto"
|
||||
title="Run"
|
||||
size="xs"
|
||||
leftSection={<IconPlayerPlay size={16} />}
|
||||
>
|
||||
<IconPlayerPlay />
|
||||
</ActionIcon>
|
||||
Run
|
||||
</Button>
|
||||
</Flex>
|
||||
</form>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -151,14 +151,14 @@
|
|||
|
||||
.searchStatsContainer {
|
||||
background-color: var(--color-bg-body);
|
||||
padding-inline: var(--mantine-spacing-xs);
|
||||
padding-inline: var(--mantine-spacing-sm);
|
||||
padding-block: var(--mantine-spacing-xxs);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.timeChartContainer {
|
||||
background-color: var(--color-bg-body);
|
||||
padding-inline: var(--mantine-spacing-xs);
|
||||
padding-inline: var(--mantine-spacing-sm);
|
||||
padding-block: var(--mantine-spacing-xxs);
|
||||
height: 120px;
|
||||
z-index: 3;
|
||||
|
|
|
|||
Loading…
Reference in a new issue