Skip to content

Commit d86bf1d

Browse files
AmperAmper
authored
Merge pull request #2 from VictoriaMetrics/improve-style
UI improvements
2 parents bd50ba4 + f02c4d3 commit d86bf1d

File tree

9 files changed

+195
-118
lines changed

9 files changed

+195
-118
lines changed

‎cmd/sql-to-logsql/web/ui/package-lock.json‎

Lines changed: 24 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎cmd/sql-to-logsql/web/ui/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"@radix-ui/react-label": "^2.1.7",
1717
"@radix-ui/react-scroll-area": "^1.2.10",
1818
"@radix-ui/react-select": "^2.2.6",
19+
"@radix-ui/react-separator": "^1.1.7",
1920
"@radix-ui/react-slot": "^1.2.3",
2021
"@radix-ui/react-switch": "^1.2.6",
2122
"@radix-ui/react-tabs": "^1.1.13",

‎cmd/sql-to-logsql/web/ui/src/components/docs/Docs.tsx‎

Lines changed: 96 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,100 +1,108 @@
11
import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card.tsx";
22
import {Accordion, AccordionContent, AccordionItem, AccordionTrigger} from "@/components/ui/accordion.tsx";
3-
import {InfoIcon} from "lucide-react";
3+
import {InfoIcon, LinkIcon} from "lucide-react";
4+
import {Button} from "@/components/ui/button.tsx";
5+
import {Separator} from "@/components/ui/separator.tsx";
46

57
export function Docs() {
68
return (
7-
<Card className={"w-full"}>
9+
<Card className={"w-full min-w-[20rem] max-lg:hidden"}>
810
<CardHeader>
9-
<CardTitle>SQL to LogsQL</CardTitle>
11+
<CardTitle>Information about SQL to LogsQL</CardTitle>
1012
<CardDescription>Service that helps to query VictoriaLogs with SQL</CardDescription>
1113
</CardHeader>
1214
<CardContent>
13-
<Accordion
14-
type="single"
15-
collapsible
16-
className="w-full"
17-
defaultValue="item-1"
18-
>
19-
<AccordionItem value="statement-types">
20-
<AccordionTrigger className={"cursor-pointer"}>
21-
<span className={"flex flex-row gap-2 items-center"}>
22-
<InfoIcon size={16} />
23-
<span>Supported statement types</span>
24-
</span>
25-
</AccordionTrigger>
26-
<AccordionContent className="flex flex-col gap-4 text-balance">
27-
<p>
28-
<ul className={"list-disc pl-4 pt-2"}>
29-
<li><code>SHOW TABLES / VIEWS</code></li>
30-
<li><code>DESCRIBE TABLE / VIEW ...</code></li>
31-
<li><code>SELECT ... FROM ...</code></li>
32-
<li><code>CREATE VIEW ...</code></li>
33-
<li><code>DROP VIEW ...</code></li>
34-
</ul>
35-
</p>
36-
</AccordionContent>
37-
</AccordionItem>
38-
<AccordionItem value="clauses">
39-
<AccordionTrigger className={"cursor-pointer"}>
40-
<span className={"flex flex-row gap-2 items-center"}>
41-
<InfoIcon size={16} />
42-
<span>Supported query clauses</span>
43-
</span>
44-
</AccordionTrigger>
45-
<AccordionContent className="flex flex-col gap-4 text-balance">
46-
<p>
47-
<ul className={"list-disc pl-4 pt-2"}>
48-
<li><code>SELECT, DISTINCT, AS, OVER, PARTITION BY</code></li>
49-
<li><code>FROM, WITH</code></li>
50-
<li><code>WHERE, AND, OR</code></li>
51-
<li><code>LEFT JOIN / JOIN / INNER JOIN</code></li>
52-
<li><code>LIKE, NOT LIKE, BETWEEN, IN, NOT IN, IS NULL, IS NOT NULL</code></li>
53-
<li><code>GROUP BY, HAVING</code></li>
54-
<li><code>ORDER BY, ASC, DESC, LIMIT, OFFSET</code></li>
55-
<li><code>UNION ALL</code></li>
56-
</ul>
57-
</p>
58-
</AccordionContent>
59-
</AccordionItem>
60-
<AccordionItem value="functions">
61-
<AccordionTrigger className={"cursor-pointer"}>
62-
<span className={"flex flex-row gap-2 items-center"}>
63-
<InfoIcon size={16} />
64-
<span>Supported functions and operators</span>
65-
</span>
66-
</AccordionTrigger>
67-
<AccordionContent className="flex flex-col gap-4 text-balance">
68-
<p>
69-
<ul className={"list-disc pl-4 pt-2"}>
70-
<li><code>SUBSTR, CONCAT, LOWER, UPPER, TRIM, LTRIM, RTRIM, REPLACE</code></li>
71-
<li><code>LIKE, NOT LIKE</code></li>
72-
<li><code>BETWEEN</code></li>
73-
<li><code>+,-, *, /, %, ^</code></li>
74-
<li><code>ABS, GREATEST, LEAST, ROUND, FLOOR, CEIL, POW, LN, EXP</code></li>
75-
<li><code>SUM, COUNT, MAX, MIN, AVG</code></li>
76-
<li><code>CURRENT_TIMESTAMP, CURREN_DATE</code></li>
77-
</ul>
78-
</p>
79-
</AccordionContent>
80-
</AccordionItem>
81-
<AccordionItem value="virtual-tables">
82-
<AccordionTrigger className={"cursor-pointer"}>
83-
<span className={"flex flex-row gap-2 items-center"}>
84-
<InfoIcon size={16} />
85-
<span>Supported data sources</span>
86-
</span>
87-
</AccordionTrigger>
88-
<AccordionContent className="flex flex-col gap-4 text-balance">
89-
<p>
90-
<ul className={"list-disc pl-4 pt-2"}>
91-
<li>Only <b><code>logs</code></b> table is supported</li>
92-
<li>You can create any views</li>
93-
</ul>
94-
</p>
95-
</AccordionContent>
96-
</AccordionItem>
97-
</Accordion>
15+
<a href={"https://github.com/VictoriaMetrics/sql-to-logsql"} target={"_blank"}>
16+
<Button variant={"link"} className={"cursor-pointer"}>
17+
<LinkIcon />
18+
Source code and documentation
19+
</Button>
20+
</a>
21+
<Separator className={"mt-2 ml-3"} />
22+
<Accordion
23+
type="single"
24+
collapsible
25+
className="w-full pl-3"
26+
>
27+
<AccordionItem value="statement-types">
28+
<AccordionTrigger className={"cursor-pointer"}>
29+
<span className={"flex flex-row gap-2 items-center"}>
30+
<InfoIcon size={16} />
31+
<span>Supported statement types</span>
32+
</span>
33+
</AccordionTrigger>
34+
<AccordionContent className="flex flex-col gap-4 text-balance">
35+
<p>
36+
<ul className={"list-disc pl-4 pt-2"}>
37+
<li><code>SHOW TABLES / VIEWS</code></li>
38+
<li><code>DESCRIBE TABLE / VIEW ...</code></li>
39+
<li><code>SELECT ... FROM ...</code></li>
40+
<li><code>CREATE VIEW ...</code></li>
41+
<li><code>DROP VIEW ...</code></li>
42+
</ul>
43+
</p>
44+
</AccordionContent>
45+
</AccordionItem>
46+
<AccordionItem value="clauses">
47+
<AccordionTrigger className={"cursor-pointer"}>
48+
<span className={"flex flex-row gap-2 items-center"}>
49+
<InfoIcon size={16} />
50+
<span>Supported query clauses</span>
51+
</span>
52+
</AccordionTrigger>
53+
<AccordionContent className="flex flex-col gap-4 text-balance">
54+
<p>
55+
<ul className={"list-disc pl-4 pt-2"}>
56+
<li><code>SELECT, DISTINCT, AS, OVER, PARTITION BY</code></li>
57+
<li><code>FROM, WITH</code></li>
58+
<li><code>WHERE, AND, OR</code></li>
59+
<li><code>LEFT JOIN / JOIN / INNER JOIN</code></li>
60+
<li><code>LIKE, NOT LIKE, BETWEEN, IN, NOT IN, IS NULL, IS NOT NULL</code></li>
61+
<li><code>GROUP BY, HAVING</code></li>
62+
<li><code>ORDER BY, ASC, DESC, LIMIT, OFFSET</code></li>
63+
<li><code>UNION ALL</code></li>
64+
</ul>
65+
</p>
66+
</AccordionContent>
67+
</AccordionItem>
68+
<AccordionItem value="functions">
69+
<AccordionTrigger className={"cursor-pointer"}>
70+
<span className={"flex flex-row gap-2 items-center"}>
71+
<InfoIcon size={16} />
72+
<span>Supported functions and operators</span>
73+
</span>
74+
</AccordionTrigger>
75+
<AccordionContent className="flex flex-col gap-4 text-balance">
76+
<p>
77+
<ul className={"list-disc pl-4 pt-2"}>
78+
<li><code>SUBSTR, CONCAT, LOWER, UPPER, TRIM, LTRIM, RTRIM, REPLACE</code></li>
79+
<li><code>LIKE, NOT LIKE</code></li>
80+
<li><code>BETWEEN</code></li>
81+
<li><code>+,-, *, /, %, ^</code></li>
82+
<li><code>ABS, GREATEST, LEAST, ROUND, FLOOR, CEIL, POW, LN, EXP</code></li>
83+
<li><code>SUM, COUNT, MAX, MIN, AVG</code></li>
84+
<li><code>CURRENT_TIMESTAMP, CURREN_DATE</code></li>
85+
</ul>
86+
</p>
87+
</AccordionContent>
88+
</AccordionItem>
89+
<AccordionItem value="virtual-tables">
90+
<AccordionTrigger className={"cursor-pointer"}>
91+
<span className={"flex flex-row gap-2 items-center"}>
92+
<InfoIcon size={16} />
93+
<span>Supported data sources</span>
94+
</span>
95+
</AccordionTrigger>
96+
<AccordionContent className="flex flex-col gap-4 text-balance">
97+
<p>
98+
<ul className={"list-disc pl-4 pt-2"}>
99+
<li>Only <b><code>logs</code></b> table is supported</li>
100+
<li>You can create any views</li>
101+
</ul>
102+
</p>
103+
</AccordionContent>
104+
</AccordionItem>
105+
</Accordion>
98106
</CardContent>
99107
</Card>
100108
)

‎cmd/sql-to-logsql/web/ui/src/components/logs-endpoint/LogsEndpoint.tsx‎

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -30,26 +30,32 @@ export function LogsEndpoint({
3030
onEndpointEnabledChange,
3131
}: LogsEndpointProps) {
3232
return (
33-
<Card>
33+
<Card className={"w-full"}>
3434
<CardHeader>
3535
<CardTitle>VictoriaLogs endpoint</CardTitle>
36-
{!endpointReadOnly && <CardDescription>You can query data from VictoriaLogs instance or just translate SQl to LogsQL without querying</CardDescription>}
37-
{!endpointReadOnly && <CardAction className={"flex flex-row gap-2"}>
38-
<Switch
39-
checked={endpointEnabled}
40-
id={"endpointEnabled"}
41-
onCheckedChange={onEndpointEnabledChange}
42-
disabled={isLoading || endpointReadOnly}
43-
hidden={endpointReadOnly}
44-
className={"cursor-pointer"}
45-
/>
46-
<Label htmlFor={"endpointEnabled"} className={"cursor-pointer"}>
47-
Query data from VictoriaLogs
48-
</Label>
49-
</CardAction>}
36+
{!endpointReadOnly &&
37+
<CardDescription>
38+
You can query data from VictoriaLogs instance or just translate SQL to LogsQL without querying
39+
</CardDescription>
40+
}
41+
{!endpointReadOnly &&
42+
<CardAction className={"flex flex-row gap-2"}>
43+
<Switch
44+
checked={endpointEnabled}
45+
id={"endpointEnabled"}
46+
onCheckedChange={onEndpointEnabledChange}
47+
disabled={isLoading || endpointReadOnly}
48+
hidden={endpointReadOnly}
49+
className={"cursor-pointer"}
50+
/>
51+
<Label htmlFor={"endpointEnabled"} className={"cursor-pointer overflow-hidden text-ellipsis"}>
52+
Query data
53+
</Label>
54+
</CardAction>
55+
}
5056
</CardHeader>
51-
<CardContent className={"flex flex-row gap-2"}>
52-
<div className={"flex flex-col gap-1 w-3/4"}>
57+
<CardContent className={"flex max-sm:flex-col gap-2"}>
58+
<div className={"flex flex-col gap-1 sm:w-3/4"}>
5359
<Label htmlFor={endpointUrl}>URL:</Label>
5460
<Input
5561
disabled={isLoading || endpointReadOnly || !endpointEnabled}
@@ -60,7 +66,7 @@ export function LogsEndpoint({
6066
onChange={(e) => onUrlChange && onUrlChange(e.target.value)}
6167
/>
6268
</div>
63-
<div className={"flex flex-col gap-1 w-1/4"}>
69+
<div className={"flex flex-col gap-1 sm:w-1/4"}>
6470
<Label htmlFor={"bearerToken"}>Bearer token:</Label>
6571
<Input
6672
disabled={isLoading || endpointReadOnly || !endpointEnabled}

‎cmd/sql-to-logsql/web/ui/src/components/sql-editor/SQLEditor.tsx‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,18 @@ import {
33
Card,
44
CardAction,
55
CardContent,
6-
CardDescription,
76
CardFooter,
87
CardHeader,
98
CardTitle,
109
} from "@/components/ui/card.tsx";
11-
import { Badge } from "@/components/ui/badge.tsx";
1210
import {useCallback, useEffect, useState} from "react";
1311
import { Button } from "@/components/ui/button.tsx";
1412
import {Select, SelectContent, SelectItem, SelectTrigger} from "@/components/ui/select.tsx";
1513
import {SelectValue} from "@radix-ui/react-select";
1614
import {DEFAULT_EXAMPLE_ID, EXAMPLES} from "@/components/sql-editor/examples.ts";
1715
import {COMPLETIONS} from "@/components/sql-editor/complections.ts";
18-
import {CircleXIcon, CircleCheckBigIcon} from "lucide-react"
16+
import {CircleXIcon, CircleCheckBigIcon, PlayIcon} from "lucide-react"
17+
import {Spinner} from "@/components/ui/spinner.tsx";
1918

2019
export interface SqlEditorProps {
2120
readonly onRun?: (sql: string) => void;
@@ -50,13 +49,9 @@ export function SQLEditor({
5049

5150
return (
5251
<Card>
53-
<CardHeader>
54-
<CardTitle>SQL code</CardTitle>
55-
<CardDescription>
56-
Virtual tables are configured on the server (default:
57-
<Badge variant={"outline"}>logs</Badge>)
58-
</CardDescription>
59-
<CardAction className={"flex flex-row gap-2"}>
52+
<CardHeader className={"max-sm:flex max-sm:flex-col max-sm:gap-4 max-sm:px-4"}>
53+
<CardTitle className={"sm:py-3"}>SQL</CardTitle>
54+
<CardAction className={"flex max-sm:flex-col gap-2"}>
6055
<Select onValueChange={setValue} value={value} disabled={isLoading}>
6156
<SelectTrigger className={"cursor-pointer"}>
6257
<SelectValue placeholder="Select example" />
@@ -74,6 +69,7 @@ export function SQLEditor({
7469
className={"cursor-pointer"}
7570
onClick={() => runQuery()}
7671
>
72+
{isLoading ? <Spinner /> : <PlayIcon />}
7773
Execute
7874
</Button>
7975
</CardAction>

‎cmd/sql-to-logsql/web/ui/src/components/sql-editor/examples.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ LIMIT 100`,
3434
COUNT(*) AS messages_count
3535
FROM logs
3636
WHERE kubernetes.container_name IS NOT NULL
37-
GROUP BY kubernetes.container_name
37+
GROUP BY container
3838
HAVING messages_count > 10
3939
ORDER BY messages_count DESC`
4040
},

‎cmd/sql-to-logsql/web/ui/src/components/ui/separator.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import * as React from "react"
2+
import * as SeparatorPrimitive from "@radix-ui/react-separator"
3+
4+
import { cn } from "@/lib/utils"
5+
6+
function Separator({
7+
className,
8+
orientation = "horizontal",
9+
decorative = true,
10+
...props
11+
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
12+
return (
13+
<SeparatorPrimitive.Root
14+
data-slot="separator"
15+
decorative={decorative}
16+
orientation={orientation}
17+
className={cn(
18+
"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
19+
className
20+
)}
21+
{...props}
22+
/>
23+
)
24+
}
25+
26+
export { Separator }

0 commit comments

Comments
 (0)