Skip to content

Commit

Permalink
fix most errors
Browse files Browse the repository at this point in the history 
use FormControl properly

don't use lists, or set a key for each element

change casing of some css properties
  • Loading branch information
@trinity-1686a
trinity-1686a committed May 16, 2024
1 parent 0880ae3 commit 15be541
Show file tree
Hide file tree
Showing 5 changed files with 78 additions and 66 deletions.
133 changes: 72 additions & 61 deletions quickwit/quickwit-ui/src/components/QueryEditor/AggregationEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,24 +71,26 @@ export function MetricKind(props: SearchComponentProps) {
};

return (
<Box>
<FormControl variant="standard" sx={{ m: 1, minWidth: 120, display: 'flex', flexDirection: 'row', }}>
<Box sx={{ m: 1, minWidth: 120, display: 'flex', flexDirection: 'row', }}>
<FormControl variant="standard">
<Select
value={metricRef.current ? metricRef.current.type : "count"}
onChange={handleTypeChange}
sx={{ "min-height": "44px" }}
sx={{ "minHeight": "44px" }}
>
<MenuItem value="count">Count</MenuItem>
<MenuItem value="avg">Average</MenuItem>
<MenuItem value="sum">Sum</MenuItem>
<MenuItem value="max">Max</MenuItem>
<MenuItem value="min">Min</MenuItem>
</Select>
<TextField
</FormControl>
<FormControl variant="standard">
<TextField
variant="standard"
label="Field"
onChange={handleNameChange}
sx={{ "margin-left": "10px", ... ( !metricRef.current && {display: "none"}) }}
sx={{ "marginLeft": "10px", ... ( !metricRef.current && {display: "none"}) }}
/>
</FormControl>
</Box>
Expand All @@ -104,7 +106,7 @@ export function AggregationKind(props: SearchComponentProps) {
};
const [aggregations, setAggregations] = useState<({term: TermAgg} | {histogram: HistogramAgg})[]>(
[defaultAgg]);

const updateAggregationProp = (newAggregations: ({term: TermAgg} | {histogram: HistogramAgg})[]) => {
const metric = props.searchRequest.aggregationConfig.metric;
const updatedAggregation = Object.assign({}, {metric: metric}, ...newAggregations);
Expand Down Expand Up @@ -205,7 +207,7 @@ export function AggregationKind(props: SearchComponentProps) {
const options = [];
if (pos >= agg.length) {
options.push((
<MenuItem value="new">Add aggregation</MenuItem>
<MenuItem value="new" key="new">Add aggregation</MenuItem>
))
}
let addHistogram = true;
Expand All @@ -216,14 +218,14 @@ export function AggregationKind(props: SearchComponentProps) {
if (getAggregationKind(agg[i]) === "term") addTerm = false;
}
if (addHistogram) {
options.push((<MenuItem value="histogram">Histogram aggregation</MenuItem>))
options.push((<MenuItem value="histogram" key="histogram">Histogram aggregation</MenuItem>))
}
if (addTerm) {
options.push((<MenuItem value="term">Term aggregation</MenuItem>));
options.push((<MenuItem value="term" key="term">Term aggregation</MenuItem>));
}
if (agg.length > 1) {
options.push((
<MenuItem value="rm">Remove aggregation</MenuItem>
<MenuItem value="rm" key="rm">Remove aggregation</MenuItem>
))
}
return options;
Expand All @@ -241,65 +243,74 @@ export function AggregationKind(props: SearchComponentProps) {
const agg = aggs[pos]
if (isHistogram(agg)) {
return (
<Select
value={agg.histogram.interval}
onChange={(e) => handleHistogramChange(pos, e)}
sx={{ "margin-left": "10px", "min-height": "44px" }}
>
<MenuItem value="auto">Auto</MenuItem>
<MenuItem value="10s">10 seconds</MenuItem>
<MenuItem value="1m">1 minute</MenuItem>
<MenuItem value="5m">5 minutes</MenuItem>
<MenuItem value="10m">10 minutes</MenuItem>
<MenuItem value="1h">1 hour</MenuItem>
<MenuItem value="1d">1 day</MenuItem>
</Select>
<FormControl variant="standard">
<Select
value={agg.histogram.interval}
onChange={(e) => handleHistogramChange(pos, e)}
sx={{ "marginLeft": "10px", "minHeight": "44px" }}
>
<MenuItem value="auto">Auto</MenuItem>
<MenuItem value="10s">10 seconds</MenuItem>
<MenuItem value="1m">1 minute</MenuItem>
<MenuItem value="5m">5 minutes</MenuItem>
<MenuItem value="10m">10 minutes</MenuItem>
<MenuItem value="1h">1 hour</MenuItem>
<MenuItem value="1d">1 day</MenuItem>
</Select>
</FormControl>
);
}
if (isTerm(agg)) {
return [(
<TextField
variant="standard"
label="Field"
onChange={(e) => handleTermFieldChange(pos, e)}
sx={{ "margin-left": "10px" }}
/>
),(
<TextField
variant="standard"
label="Return top"
type="number"
onChange={(e) => handleTermCountChange(pos, e)}
value={agg.term.size}
sx={{ "margin-left": "10px" }}
/>
)]
return (<>
<FormControl variant="standard">
<TextField
variant="standard"
label="Field"
onChange={(e) => handleTermFieldChange(pos, e)}
sx={{ "margin-left": "10px" }}
/>
</FormControl>
<FormControl variant="standard">
<TextField
variant="standard"
label="Return top"
type="number"
onChange={(e) => handleTermCountChange(pos, e)}
value={agg.term.size}
sx={{ "margin-left": "10px" }}
/>
</FormControl>
</>)
}
return (null);
}

return (
<Box>
<FormControl variant="standard" sx={{ m: 1, minWidth: 120, display: 'flex', flexDirection: 'row', }}>
<Select
value={getAggregationKind(aggregations[0])}
onChange={(e) => handleAggregationChange(0, e)}
sx={{ "min-height": "44px", width: "190px" }}
>
{ makeOptions(0, aggregations) }
</Select>
<>
<Box sx={{ m: 1, minWidth: 120, display: 'flex', flexDirection: 'row', }}>
<FormControl variant="standard">
<Select
value={getAggregationKind(aggregations[0])}
onChange={(e) => handleAggregationChange(0, e)}
sx={{ "minHeight": "44px", width: "190px" }}
>
{ makeOptions(0, aggregations) }
</Select>
</FormControl>
{drawAdditional(0, aggregations)}
</FormControl>
<FormControl variant="standard" sx={{ m: 1, minWidth: 120, display: 'flex', flexDirection: 'row', }}>
<Select
value={getAggregationKind(aggregations[1])}
onChange={(e) => handleAggregationChange(1, e)}
sx={{ "min-height": "44px", width: "190px" }}
>
{ makeOptions(1, aggregations) }
</Select>
{drawAdditional(1, aggregations)}
</FormControl>
</Box>
</Box>
<Box sx={{ m: 1, minWidth: 120, display: 'flex', flexDirection: 'row', }}>
<FormControl variant="standard" sx={{ m: 1, minWidth: 120, display: 'flex', flexDirection: 'row', }}>
<Select
value={getAggregationKind(aggregations[1])}
onChange={(e) => handleAggregationChange(1, e)}
sx={{ "minHeight": "44px", width: "190px" }}
>
{ makeOptions(1, aggregations) }
</Select>
{drawAdditional(1, aggregations)}
</FormControl>
</Box>
</>
)
}
3 changes: 2 additions & 1 deletion quickwit/quickwit-ui/src/components/SearchResult/AggregationResult.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ export function AggregationResult({searchResponse}: {searchResponse: SearchRespo
};
});
series;
// we don't customize colors because we would need a full palette.
return (
<LineChart
xAxis={xAxis}
Expand All @@ -57,7 +58,7 @@ export function AggregationResult({searchResponse}: {searchResponse: SearchRespo
)
} else if (isTerm(result)) {
return (<BarChart
series={[{ data: result.map(entry => entry.value)}]}
series={[{ data: result.map(entry => entry.value), color: "#004BD9A5"}]}
xAxis={[{ data: result.map(entry => entry.term), scaleType: 'band' }]}
margin={{ top: 10, bottom: 30, left: 40, right: 10 }}
/>)
Expand Down
4 changes: 2 additions & 2 deletions quickwit/quickwit-ui/src/components/SearchResult/SearchResult.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ export default function SearchResult(props: SearchResultProps) {
const result = useMemo(
() => {
if (props.searchResponse == null || props.index == null) {
return null;
return null;
} else if (props.searchResponse.aggregations === undefined) {
console.log("result table");
return (<ResultTable searchResponse={props.searchResponse} index={props.index} />);
Expand All @@ -83,7 +83,7 @@ export default function SearchResult(props: SearchResultProps) {
);

return (
<Box sx={{ pt: 1, flexGrow: '1', flexBasis: '0%', overflow: 'hidden'}} >
<Box sx={{ pt: 1, flexGrow: '1', flexBasis: '0%', overflow: 'hidden'}}>
<Box sx={{ height: '100%', flexDirection: 'column', flexGrow: 1, display: 'flex'}}>
<Box sx={{ flexShrink: 0, display: 'flex', flexGrow: 0, flexBasis: 'auto' }}>
<HitCount searchResponse={props.searchResponse} />
Expand Down
2 changes: 1 addition & 1 deletion quickwit/quickwit-ui/src/services/client.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,7 @@ export class Client {
max: request.endTimestamp,
};
} else {
extended_bounds = undefined;
extended_bounds = undefined;
}
aggregation = {
histo_agg: {
Expand Down
2 changes: 1 addition & 1 deletion quickwit/quickwit-ui/src/utils/urls.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ export function toUrlSearchRequestParams(request: SearchRequest): URLSearchParam
if (val == null) {
return undefined;
} else {
return val;
return val;
}
}))
}
Expand Down

0 comments on commit 15be541

Please sign in to comment.