Skip to content

UI improvements #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 5, 2025
Merged

UI improvements #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions cmd/sql-to-logsql/web/ui/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions cmd/sql-to-logsql/web/ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"@radix-ui/react-label": "^2.1.7",
"@radix-ui/react-scroll-area": "^1.2.10",
"@radix-ui/react-select": "^2.2.6",
"@radix-ui/react-separator": "^1.1.7",
"@radix-ui/react-slot": "^1.2.3",
"@radix-ui/react-switch": "^1.2.6",
"@radix-ui/react-tabs": "^1.1.13",
Expand Down
184 changes: 96 additions & 88 deletions cmd/sql-to-logsql/web/ui/src/components/docs/Docs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,100 +1,108 @@
import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card.tsx";
import {Accordion, AccordionContent, AccordionItem, AccordionTrigger} from "@/components/ui/accordion.tsx";
import {InfoIcon} from "lucide-react";
import {InfoIcon, LinkIcon} from "lucide-react";
import {Button} from "@/components/ui/button.tsx";
import {Separator} from "@/components/ui/separator.tsx";

export function Docs() {
return (
<Card className={"w-full"}>
<Card className={"w-full min-w-[20rem] max-lg:hidden"}>
<CardHeader>
<CardTitle>SQL to LogsQL</CardTitle>
<CardTitle>Information about SQL to LogsQL</CardTitle>
<CardDescription>Service that helps to query VictoriaLogs with SQL</CardDescription>
</CardHeader>
<CardContent>
<Accordion
type="single"
collapsible
className="w-full"
defaultValue="item-1"
>
<AccordionItem value="statement-types">
<AccordionTrigger className={"cursor-pointer"}>
<span className={"flex flex-row gap-2 items-center"}>
<InfoIcon size={16} />
<span>Supported statement types</span>
</span>
</AccordionTrigger>
<AccordionContent className="flex flex-col gap-4 text-balance">
<p>
<ul className={"list-disc pl-4 pt-2"}>
<li><code>SHOW TABLES / VIEWS</code></li>
<li><code>DESCRIBE TABLE / VIEW ...</code></li>
<li><code>SELECT ... FROM ...</code></li>
<li><code>CREATE VIEW ...</code></li>
<li><code>DROP VIEW ...</code></li>
</ul>
</p>
</AccordionContent>
</AccordionItem>
<AccordionItem value="clauses">
<AccordionTrigger className={"cursor-pointer"}>
<span className={"flex flex-row gap-2 items-center"}>
<InfoIcon size={16} />
<span>Supported query clauses</span>
</span>
</AccordionTrigger>
<AccordionContent className="flex flex-col gap-4 text-balance">
<p>
<ul className={"list-disc pl-4 pt-2"}>
<li><code>SELECT, DISTINCT, AS, OVER, PARTITION BY</code></li>
<li><code>FROM, WITH</code></li>
<li><code>WHERE, AND, OR</code></li>
<li><code>LEFT JOIN / JOIN / INNER JOIN</code></li>
<li><code>LIKE, NOT LIKE, BETWEEN, IN, NOT IN, IS NULL, IS NOT NULL</code></li>
<li><code>GROUP BY, HAVING</code></li>
<li><code>ORDER BY, ASC, DESC, LIMIT, OFFSET</code></li>
<li><code>UNION ALL</code></li>
</ul>
</p>
</AccordionContent>
</AccordionItem>
<AccordionItem value="functions">
<AccordionTrigger className={"cursor-pointer"}>
<span className={"flex flex-row gap-2 items-center"}>
<InfoIcon size={16} />
<span>Supported functions and operators</span>
</span>
</AccordionTrigger>
<AccordionContent className="flex flex-col gap-4 text-balance">
<p>
<ul className={"list-disc pl-4 pt-2"}>
<li><code>SUBSTR, CONCAT, LOWER, UPPER, TRIM, LTRIM, RTRIM, REPLACE</code></li>
<li><code>LIKE, NOT LIKE</code></li>
<li><code>BETWEEN</code></li>
<li><code>+,-, *, /, %, ^</code></li>
<li><code>ABS, GREATEST, LEAST, ROUND, FLOOR, CEIL, POW, LN, EXP</code></li>
<li><code>SUM, COUNT, MAX, MIN, AVG</code></li>
<li><code>CURRENT_TIMESTAMP, CURREN_DATE</code></li>
</ul>
</p>
</AccordionContent>
</AccordionItem>
<AccordionItem value="virtual-tables">
<AccordionTrigger className={"cursor-pointer"}>
<span className={"flex flex-row gap-2 items-center"}>
<InfoIcon size={16} />
<span>Supported data sources</span>
</span>
</AccordionTrigger>
<AccordionContent className="flex flex-col gap-4 text-balance">
<p>
<ul className={"list-disc pl-4 pt-2"}>
<li>Only <b><code>logs</code></b> table is supported</li>
<li>You can create any views</li>
</ul>
</p>
</AccordionContent>
</AccordionItem>
</Accordion>
<a href={"https://github.com/VictoriaMetrics/sql-to-logsql"} target={"_blank"}>
<Button variant={"link"} className={"cursor-pointer"}>
<LinkIcon />
Source code and documentation
</Button>
</a>
<Separator className={"mt-2 ml-3"} />
<Accordion
type="single"
collapsible
className="w-full pl-3"
>
<AccordionItem value="statement-types">
<AccordionTrigger className={"cursor-pointer"}>
<span className={"flex flex-row gap-2 items-center"}>
<InfoIcon size={16} />
<span>Supported statement types</span>
</span>
</AccordionTrigger>
<AccordionContent className="flex flex-col gap-4 text-balance">
<p>
<ul className={"list-disc pl-4 pt-2"}>
<li><code>SHOW TABLES / VIEWS</code></li>
<li><code>DESCRIBE TABLE / VIEW ...</code></li>
<li><code>SELECT ... FROM ...</code></li>
<li><code>CREATE VIEW ...</code></li>
<li><code>DROP VIEW ...</code></li>
</ul>
</p>
</AccordionContent>
</AccordionItem>
<AccordionItem value="clauses">
<AccordionTrigger className={"cursor-pointer"}>
<span className={"flex flex-row gap-2 items-center"}>
<InfoIcon size={16} />
<span>Supported query clauses</span>
</span>
</AccordionTrigger>
<AccordionContent className="flex flex-col gap-4 text-balance">
<p>
<ul className={"list-disc pl-4 pt-2"}>
<li><code>SELECT, DISTINCT, AS, OVER, PARTITION BY</code></li>
<li><code>FROM, WITH</code></li>
<li><code>WHERE, AND, OR</code></li>
<li><code>LEFT JOIN / JOIN / INNER JOIN</code></li>
<li><code>LIKE, NOT LIKE, BETWEEN, IN, NOT IN, IS NULL, IS NOT NULL</code></li>
<li><code>GROUP BY, HAVING</code></li>
<li><code>ORDER BY, ASC, DESC, LIMIT, OFFSET</code></li>
<li><code>UNION ALL</code></li>
</ul>
</p>
</AccordionContent>
</AccordionItem>
<AccordionItem value="functions">
<AccordionTrigger className={"cursor-pointer"}>
<span className={"flex flex-row gap-2 items-center"}>
<InfoIcon size={16} />
<span>Supported functions and operators</span>
</span>
</AccordionTrigger>
<AccordionContent className="flex flex-col gap-4 text-balance">
<p>
<ul className={"list-disc pl-4 pt-2"}>
<li><code>SUBSTR, CONCAT, LOWER, UPPER, TRIM, LTRIM, RTRIM, REPLACE</code></li>
<li><code>LIKE, NOT LIKE</code></li>
<li><code>BETWEEN</code></li>
<li><code>+,-, *, /, %, ^</code></li>
<li><code>ABS, GREATEST, LEAST, ROUND, FLOOR, CEIL, POW, LN, EXP</code></li>
<li><code>SUM, COUNT, MAX, MIN, AVG</code></li>
<li><code>CURRENT_TIMESTAMP, CURREN_DATE</code></li>
</ul>
</p>
</AccordionContent>
</AccordionItem>
<AccordionItem value="virtual-tables">
<AccordionTrigger className={"cursor-pointer"}>
<span className={"flex flex-row gap-2 items-center"}>
<InfoIcon size={16} />
<span>Supported data sources</span>
</span>
</AccordionTrigger>
<AccordionContent className="flex flex-col gap-4 text-balance">
<p>
<ul className={"list-disc pl-4 pt-2"}>
<li>Only <b><code>logs</code></b> table is supported</li>
<li>You can create any views</li>
</ul>
</p>
</AccordionContent>
</AccordionItem>
</Accordion>
</CardContent>
</Card>
)
Expand Down
42 changes: 24 additions & 18 deletions cmd/sql-to-logsql/web/ui/src/components/logs-endpoint/LogsEndpoint.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,26 +30,32 @@ export function LogsEndpoint({
onEndpointEnabledChange,
}: LogsEndpointProps) {
return (
<Card>
<Card className={"w-full"}>
<CardHeader>
<CardTitle>VictoriaLogs endpoint</CardTitle>
{!endpointReadOnly && <CardDescription>You can query data from VictoriaLogs instance or just translate SQl to LogsQL without querying</CardDescription>}
{!endpointReadOnly && <CardAction className={"flex flex-row gap-2"}>
<Switch
checked={endpointEnabled}
id={"endpointEnabled"}
onCheckedChange={onEndpointEnabledChange}
disabled={isLoading || endpointReadOnly}
hidden={endpointReadOnly}
className={"cursor-pointer"}
/>
<Label htmlFor={"endpointEnabled"} className={"cursor-pointer"}>
Query data from VictoriaLogs
</Label>
</CardAction>}
{!endpointReadOnly &&
<CardDescription>
You can query data from VictoriaLogs instance or just translate SQL to LogsQL without querying
</CardDescription>
}
{!endpointReadOnly &&
<CardAction className={"flex flex-row gap-2"}>
<Switch
checked={endpointEnabled}
id={"endpointEnabled"}
onCheckedChange={onEndpointEnabledChange}
disabled={isLoading || endpointReadOnly}
hidden={endpointReadOnly}
className={"cursor-pointer"}
/>
<Label htmlFor={"endpointEnabled"} className={"cursor-pointer overflow-hidden text-ellipsis"}>
Query data
</Label>
</CardAction>
}
</CardHeader>
<CardContent className={"flex flex-row gap-2"}>
<div className={"flex flex-col gap-1 w-3/4"}>
<CardContent className={"flex max-sm:flex-col gap-2"}>
<div className={"flex flex-col gap-1 sm:w-3/4"}>
<Label htmlFor={endpointUrl}>URL:</Label>
<Input
disabled={isLoading || endpointReadOnly || !endpointEnabled}
Expand All @@ -60,7 +66,7 @@ export function LogsEndpoint({
onChange={(e) => onUrlChange && onUrlChange(e.target.value)}
/>
</div>
<div className={"flex flex-col gap-1 w-1/4"}>
<div className={"flex flex-col gap-1 sm:w-1/4"}>
<Label htmlFor={"bearerToken"}>Bearer token:</Label>
<Input
disabled={isLoading || endpointReadOnly || !endpointEnabled}
Expand Down
16 changes: 6 additions & 10 deletions cmd/sql-to-logsql/web/ui/src/components/sql-editor/SQLEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,18 @@ import {
Card,
CardAction,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card.tsx";
import { Badge } from "@/components/ui/badge.tsx";
import {useCallback, useEffect, useState} from "react";
import { Button } from "@/components/ui/button.tsx";
import {Select, SelectContent, SelectItem, SelectTrigger} from "@/components/ui/select.tsx";
import {SelectValue} from "@radix-ui/react-select";
import {DEFAULT_EXAMPLE_ID, EXAMPLES} from "@/components/sql-editor/examples.ts";
import {COMPLETIONS} from "@/components/sql-editor/complections.ts";
import {CircleXIcon, CircleCheckBigIcon} from "lucide-react"
import {CircleXIcon, CircleCheckBigIcon, PlayIcon} from "lucide-react"
import {Spinner} from "@/components/ui/spinner.tsx";

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

return (
<Card>
<CardHeader>
<CardTitle>SQL code</CardTitle>
<CardDescription>
Virtual tables are configured on the server (default:
<Badge variant={"outline"}>logs</Badge>)
</CardDescription>
<CardAction className={"flex flex-row gap-2"}>
<CardHeader className={"max-sm:flex max-sm:flex-col max-sm:gap-4 max-sm:px-4"}>
<CardTitle className={"sm:py-3"}>SQL</CardTitle>
<CardAction className={"flex max-sm:flex-col gap-2"}>
<Select onValueChange={setValue} value={value} disabled={isLoading}>
<SelectTrigger className={"cursor-pointer"}>
<SelectValue placeholder="Select example" />
Expand All @@ -74,6 +69,7 @@ export function SQLEditor({
className={"cursor-pointer"}
onClick={() => runQuery()}
>
{isLoading ? <Spinner /> : <PlayIcon />}
Execute
</Button>
</CardAction>
Expand Down
2 changes: 1 addition & 1 deletion cmd/sql-to-logsql/web/ui/src/components/sql-editor/examples.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ LIMIT 100`,
COUNT(*) AS messages_count
FROM logs
WHERE kubernetes.container_name IS NOT NULL
GROUP BY kubernetes.container_name
GROUP BY container
HAVING messages_count > 10
ORDER BY messages_count DESC`
},
Expand Down
26 changes: 26 additions & 0 deletions cmd/sql-to-logsql/web/ui/src/components/ui/separator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import * as React from "react"
import * as SeparatorPrimitive from "@radix-ui/react-separator"

import { cn } from "@/lib/utils"

function Separator({
className,
orientation = "horizontal",
decorative = true,
...props
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
return (
<SeparatorPrimitive.Root
data-slot="separator"
decorative={decorative}
orientation={orientation}
className={cn(
"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
className
)}
{...props}
/>
)
}

export { Separator }
Loading