From f02c4d38bc839aebfdf20fb5e14941b14238352c Mon Sep 17 00:00:00 2001 From: Alexander Marshalov Date: Sun, 5 Oct 2025 23:50:32 +0200 Subject: [PATCH] make UI design more responsive, add spinner, add link to the github repo --- cmd/sql-to-logsql/web/ui/package-lock.json | 24 +++ cmd/sql-to-logsql/web/ui/package.json | 1 + .../web/ui/src/components/docs/Docs.tsx | 184 +++++++++--------- .../components/logs-endpoint/LogsEndpoint.tsx | 42 ++-- .../src/components/sql-editor/SQLEditor.tsx | 16 +- .../ui/src/components/sql-editor/examples.ts | 2 +- .../web/ui/src/components/ui/separator.tsx | 26 +++ .../web/ui/src/components/ui/spinner.tsx | 16 ++ .../web/ui/src/pages/main/Main.tsx | 2 +- 9 files changed, 195 insertions(+), 118 deletions(-) create mode 100644 cmd/sql-to-logsql/web/ui/src/components/ui/separator.tsx create mode 100644 cmd/sql-to-logsql/web/ui/src/components/ui/spinner.tsx diff --git a/cmd/sql-to-logsql/web/ui/package-lock.json b/cmd/sql-to-logsql/web/ui/package-lock.json index 8378ba7..8aca6d7 100644 --- a/cmd/sql-to-logsql/web/ui/package-lock.json +++ b/cmd/sql-to-logsql/web/ui/package-lock.json @@ -14,6 +14,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", @@ -1265,6 +1266,29 @@ } } }, + "node_modules/@radix-ui/react-separator": { + "version": "1.1.7", + "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.7.tgz", + "integrity": "sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-primitive": "2.1.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-slot": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz", diff --git a/cmd/sql-to-logsql/web/ui/package.json b/cmd/sql-to-logsql/web/ui/package.json index 03f8194..e98d700 100644 --- a/cmd/sql-to-logsql/web/ui/package.json +++ b/cmd/sql-to-logsql/web/ui/package.json @@ -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", diff --git a/cmd/sql-to-logsql/web/ui/src/components/docs/Docs.tsx b/cmd/sql-to-logsql/web/ui/src/components/docs/Docs.tsx index a33e331..e46e624 100644 --- a/cmd/sql-to-logsql/web/ui/src/components/docs/Docs.tsx +++ b/cmd/sql-to-logsql/web/ui/src/components/docs/Docs.tsx @@ -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 ( - + - SQL to LogsQL + Information about SQL to LogsQL Service that helps to query VictoriaLogs with SQL - - - - - - Supported statement types - - - -

-

    -
  • SHOW TABLES / VIEWS
    • -
  • DESCRIBE TABLE / VIEW ...
    • -
  • SELECT ... FROM ...
    • -
  • CREATE VIEW ...
    • -
  • DROP VIEW ...
    • -
-

- - - - - - - Supported query clauses - - - -

-

    -
  • SELECT, DISTINCT, AS, OVER, PARTITION BY
    • -
  • FROM, WITH
    • -
  • WHERE, AND, OR
    • -
  • LEFT JOIN / JOIN / INNER JOIN
    • -
  • LIKE, NOT LIKE, BETWEEN, IN, NOT IN, IS NULL, IS NOT NULL
    • -
  • GROUP BY, HAVING
    • -
  • ORDER BY, ASC, DESC, LIMIT, OFFSET
    • -
  • UNION ALL
    • -
-

- - - - - - - Supported functions and operators - - - -

-

    -
  • SUBSTR, CONCAT, LOWER, UPPER, TRIM, LTRIM, RTRIM, REPLACE
    • -
  • LIKE, NOT LIKE
    • -
  • BETWEEN
    • -
  • +,-, *, /, %, ^
    • -
  • ABS, GREATEST, LEAST, ROUND, FLOOR, CEIL, POW, LN, EXP
    • -
  • SUM, COUNT, MAX, MIN, AVG
    • -
  • CURRENT_TIMESTAMP, CURREN_DATE
    • -
-

- - - - - - - Supported data sources - - - -

-

    -
  • Only logs table is supported
    • -
  • You can create any views
    • -
-

- - - + + + + + + + + + + Supported statement types + + + +

+

    +
  • SHOW TABLES / VIEWS
    • +
  • DESCRIBE TABLE / VIEW ...
    • +
  • SELECT ... FROM ...
    • +
  • CREATE VIEW ...
    • +
  • DROP VIEW ...
    • +
+

+ + + + + + + Supported query clauses + + + +

+

    +
  • SELECT, DISTINCT, AS, OVER, PARTITION BY
    • +
  • FROM, WITH
    • +
  • WHERE, AND, OR
    • +
  • LEFT JOIN / JOIN / INNER JOIN
    • +
  • LIKE, NOT LIKE, BETWEEN, IN, NOT IN, IS NULL, IS NOT NULL
    • +
  • GROUP BY, HAVING
    • +
  • ORDER BY, ASC, DESC, LIMIT, OFFSET
    • +
  • UNION ALL
    • +
+

+ + + + + + + Supported functions and operators + + + +

+

    +
  • SUBSTR, CONCAT, LOWER, UPPER, TRIM, LTRIM, RTRIM, REPLACE
    • +
  • LIKE, NOT LIKE
    • +
  • BETWEEN
    • +
  • +,-, *, /, %, ^
    • +
  • ABS, GREATEST, LEAST, ROUND, FLOOR, CEIL, POW, LN, EXP
    • +
  • SUM, COUNT, MAX, MIN, AVG
    • +
  • CURRENT_TIMESTAMP, CURREN_DATE
    • +
+

+ + + + + + + Supported data sources + + + +

+

    +
  • Only logs table is supported
    • +
  • You can create any views
    • +
+

+ + + ) diff --git a/cmd/sql-to-logsql/web/ui/src/components/logs-endpoint/LogsEndpoint.tsx b/cmd/sql-to-logsql/web/ui/src/components/logs-endpoint/LogsEndpoint.tsx index d7a7306..c23bdeb 100644 --- a/cmd/sql-to-logsql/web/ui/src/components/logs-endpoint/LogsEndpoint.tsx +++ b/cmd/sql-to-logsql/web/ui/src/components/logs-endpoint/LogsEndpoint.tsx @@ -30,26 +30,32 @@ export function LogsEndpoint({ onEndpointEnabledChange, }: LogsEndpointProps) { return ( - + VictoriaLogs endpoint - {!endpointReadOnly && You can query data from VictoriaLogs instance or just translate SQl to LogsQL without querying} - {!endpointReadOnly && - } + {!endpointReadOnly && + + You can query data from VictoriaLogs instance or just translate SQL to LogsQL without querying + + } + {!endpointReadOnly && + + + } - -
+ +
onUrlChange && onUrlChange(e.target.value)} />
-
+
void; @@ -50,13 +49,9 @@ export function SQLEditor({ return ( - - SQL code - - Virtual tables are configured on the server (default: - logs) - - + + SQL +