Skip to content

Commit 2474194

Browse files
authored
Update web console docs (#210)
1 parent d51a3d5 commit 2474194

40 files changed

+701
-230
lines changed

documentation/guides/import-csv.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ There are three methods for CSV Import:
1111

1212
1. [Import CSV via COPY SQL](#import-csv-via-copy-sql)
1313
2. [Import CSV via REST](#import-csv-via-rest)
14-
3. [Import CSV via Web Console](/docs/web-console/#import) (in Web Console docs)
14+
3. [Import CSV via Web Console](/docs/web-console/import-csv)
1515

1616
## Import CSV via COPY SQL
1717

documentation/ingestion-overview.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ Checkout our quick start guides for the following:
7070

7171
For GUI-driven CSV upload which leverages the
7272
[built-in REST HTTP API](/docs/reference/api/rest/), use the
73-
[Import tab](/docs/web-console/#import) in the [Web Console](/docs/web-console/):
73+
[Import CSV tab](/docs/web-console/import-csv) in the [Web Console](/docs/web-console/):
7474

7575
<Screenshot
7676
alt="Screenshot of the UI for import"

documentation/reference/sql/overview.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ and simplest way, apply queries via the [Web Console](/docs/web-console/).
7070

7171
<Screenshot
7272
alt="A shot of the Web Console, showing auto complete and a colourful returned table."
73-
src="images/pages/getQuestdb/console.webp"
73+
src="images/docs/console/overview.webp"
7474
title="Click to zoom"
7575
/>
7676

@@ -434,4 +434,4 @@ And to learn about some of our favourite, most powerful syntax:
434434
Looking for visuals?
435435

436436
- Explore [Grafana](/docs/third-party-tools/grafana/)
437-
- Jump quickly into the [Web Console](/docs/web-console/#web-console)
437+
- Jump quickly into the [Web Console](/docs/web-console/)

documentation/sidebars.js

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -513,7 +513,21 @@ module.exports = {
513513
label: "Order book analytics",
514514
type: "doc"
515515
},
516-
"web-console",
516+
{
517+
type: "category",
518+
label: "Web Console",
519+
collapsed: true,
520+
items: [
521+
"web-console",
522+
"web-console/code-editor",
523+
"web-console/metrics-view",
524+
"web-console/schema-explorer",
525+
"web-console/result-grid",
526+
"web-console/query-log",
527+
"web-console/import-csv",
528+
"web-console/create-table",
529+
],
530+
},
517531
{
518532
label: "Blog tutorials 🔗",
519533
type: "link",

documentation/web-console.md

Lines changed: 43 additions & 220 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
---
2-
title: Web Console
2+
title: Web Console Overview
3+
sidebar_label: Overview
34
description: Learn how to use the QuestDB Web Console. Launch queries, create
45
visualizations and more. Includes pictures and examples.
56
---
67

78
import Screenshot from "@theme/Screenshot"
89

9-
## Web Console
10-
11-
The [Web Console](/docs/web-console/) is a client that allows you to interact with QuestDB. It
12-
provides UI tools to query data and visualize the results in a table or plot.
10+
Web Console is a client that allows you to interact with QuestDB. It
11+
provides UI tools to query and explore the data, visualize the results in a table or plot.
1312

1413
<Screenshot
1514
alt="Screenshot of the Web Console"
@@ -18,265 +17,89 @@ provides UI tools to query data and visualize the results in a table or plot.
1817

1918
### Accessing the Web Console
2019

21-
The [Web Console](/docs/web-console/) will be available at `http://[server-address]:9000`. When
20+
Web Console will be available at `http://[server-address]:9000`. When
2221
running locally, this will be [http://localhost:9000](http://localhost:9000).
2322

2423
### Layout
2524

2625
<Screenshot
2726
alt="Preview of the different sections in the Web Console"
2827
height={375}
29-
small
3028
src="images/docs/console/layout.webp"
3129
width={800}
3230
/>
3331

34-
#### System tables in Schema explorer
35-
36-
It is possible to hide QuestDB system tables (`telemetry` and
37-
`telemetry_config`) in Schema explorer by setting up the following configuration
38-
option in a [server.conf](/docs/concept/root-directory-structure/#conf-directory)
39-
file:
40-
41-
```bash title="/var/lib/questdb/conf/server.conf"
42-
telemetry.hide.tables=true
43-
```
44-
45-
### Code editor
46-
47-
The default panel shown in the web console is the code editor which allows you
48-
to write and run SQL queries.
49-
50-
#### Shortcuts
51-
52-
| Command | Action |
53-
| :------------ | :-------------------------------------------------------------------------- |
54-
| Run query | `f9` or `ctrl/cmd + enter` |
55-
| Locate cursor | `f2`, use this to focus the SQL editor on your cursor in order to locate it |
56-
57-
#### Behavior
58-
59-
As you can write multiple SQL commands separated by a semicolon, the Web Console
60-
uses the following logic to decide which queries to execute:
61-
62-
- Check if a query or part of a query is highlighted. If yes, it will be
63-
executed, otherwise:
64-
- Check if the cursor is within a SQL statement. If yes, the statement will be
65-
executed, otherwise:
66-
- Check if the cursor is on the same line as a SQL statement and after the
67-
semicolon. If yes, this statement will be executed, finally:
68-
- If the cursor is on a line that does not contain a SQL statement, the next
69-
encountered statement will be executed. If there is no statement after the
70-
cursor, the previous statement will be used.
71-
72-
#### Visualizing results
73-
74-
You can run a query and click on the `Chart` button. This will display the chart
75-
editor. You can then choose chart type, for example, `line` and then press
76-
`Draw`.
77-
78-
#### Toggle the grid table
79-
80-
The following options are available to toggle the grid layout:
81-
82-
<Screenshot
83-
alt="Preview of the different sections in the Web Console"
84-
height={375}
85-
small
86-
src="images/docs/console/column.webp"
87-
width={300}
88-
/>
89-
90-
- Freeze left column:
91-
92-
To freeze more columns, drag the vertical solid line to the desired column
93-
94-
<Screenshot
95-
alt="Screenshot of the freeze-column line"
96-
height={375}
97-
small
98-
src="images/docs/console/freeze-column.webp"
99-
width={300}
100-
/>
101-
102-
- Move the selected column to the front
103-
- Reset grid layout
104-
- Refresh
105-
106-
#### Downloading results
107-
108-
You can download the query result by clicking the `CSV` button. This file will
109-
be useful to test the import functionality below.
110-
111-
### Notification panel
112-
113-
The panel at the bottom of the web console shows the status of the most-recent
114-
query. This panel can be toggled by clicking the up-arrow icon on the right of
115-
the panel and shows the last 20 messages and notifications after query
116-
execution.
117-
118-
<Screenshot
119-
alt="Screenshot of the Web Console showing the location of the notification panel"
120-
height={535}
121-
small
122-
src="images/docs/console/query-log.webp"
123-
width={650}
124-
/>
125-
126-
### Import
32+
The Web Console is organized into the following main sections that work together to provide a complete workflow:
12733

128-
The Web Console offers an interface to import small batches of CSV files as new
129-
tables or to existing tables.
13034

131-
The import tab can be accessed by clicking this icon on the left-side navigation
132-
menu:
35+
### Code Editor
13336

134-
<Screenshot
135-
alt="Screenshot of the Web Console showing the location of the Import tab"
136-
height={535}
137-
small
138-
src="images/docs/console/importTab.webp"
139-
width={309}
140-
/>
37+
The **Code Editor** is where you write and execute SQL queries with features like syntax highlighting, auto-completion, and error tracing. It supports executing queries by selection, multiple query execution, and query planning.
14138

142-
The import UI:
39+
[Learn more about Code Editor →](/docs/web-console/code-editor)
14340

144-
<Screenshot
145-
alt="Screenshot of the UI for import"
146-
height={535}
147-
src="images/docs/console/import-ui.webp"
148-
width={800}
149-
/>
41+
### Metrics View
15042

151-
#### Import configurations
43+
The **Metrics View** provides real-time monitoring and telemetry capabilities for your QuestDB instance. It displays interactive charts and widgets to track database performance, WAL operations, and table-specific metrics.
15244

153-
Once a file is added to the Upload queue, the following configurations will be
154-
displayed:
45+
[Learn more about Metrics View →](/docs/web-console/metrics-view)
15546

156-
<Screenshot
157-
alt="Screenshot of the Web Console showing the file ready to be uploaded"
158-
height={535}
159-
src="images/docs/console/ready-to-upload.webp"
160-
width={800}
161-
/>
16247

163-
- `File`: The file name, size, and the import status
164-
- `Table name`: The name for the table to be imported. By default, this is the
165-
name of the imported file.
166-
- `Schema`: The Colum data name and data type. The schema is automatically
167-
detected but it is possible to set it manually. See
168-
[Table schema](#table-schema) for more information.
169-
- `Write mode`:
170-
- `Append`: Uploaded data will be appended to the end of the table.
171-
- `Overwrite`: Uploaded data will override existing data in the table
172-
- `Actions`:
173-
- `Settings`: Additional configuration for the import. See
174-
[Import settings](#import-settings) for more information.
175-
- `Upload`: Start the upload
176-
- `X`: Delete the file from the Upload queue
48+
### Schema Explorer
17749

178-
##### Table schema
50+
The **Schema Explorer** is the navigation hub for exploring tables and materialized views. It provides detailed information about each database object including columns with data types, storage configuration (partitioning and WAL status), and for materialized views, their base tables.
17951

180-
To update the schema of an existing table, select `Overwrite` write mode to
181-
replace the rows and the partition unit with the CSV file.
52+
[Learn more about Schema Explorer →](/docs/web-console/schema-explorer)
18253

183-
For an existing table, changing the table name allows importing it as a new
184-
separate table.
18554

186-
The following setting is available for configuration for both existing and new
187-
table import:
55+
### Result Grid
18856

189-
| Setting | Description |
190-
| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
191-
| Partition | Change the partition setting of the table. |
192-
| Designated timestamp | Electing a Designated timestamp. This is mandatory if the partition unit is not `NONE`. |
193-
| Data type | Define the data type. For timestamp, the timestamp format is mandatory and there is the option to elect the column as the designated timestamp. |
57+
The **Result Grid** displays your query results in an interactive table format with features for data navigation, export, and visualization.
19458

195-
To update the schema of a new table, in addition to the above, the following
196-
settings are also available for configuration:
59+
[Learn more about Result Grid →](/docs/web-console/result-grid)
19760

198-
| Setting | Description |
199-
| ------------- | ----------------------------------------------------------------------------------------- |
200-
| Delete column | Click `x` to delete the column from the table. |
201-
| Add column | At the end of the column list, select “Add column” to insert a new column into the table. |
20261

203-
The following table schema details are imported based on the csv file:
62+
### Query Log
20463

205-
- The column order
206-
- The column name
64+
The **Query Log** monitors query execution status and performance metrics, providing real-time feedback and maintaining a history of recent operations. It shows execution times, row counts, and detailed error information to help optimize your queries.
20765

208-
##### Import settings
66+
[Learn more about Query Log →](/docs/web-console/query-log)
20967

210-
The Settings panel displays the following configurations:
21168

212-
| Setting | Description | Default value |
213-
| --------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
214-
| Maximum number of uncommitted row | The size of the commit batch. A commit will be issued when this number is reached in the buffer. This setting is the same as `cairo.max.uncommitted.rows`. To avoid running out of memory during an import, set this value based on the RAM size of the machine. | 500000 |
215-
| Delimiter | The delimiter character to parse the CSV file. | Automatic |
216-
| Atomicity | Error behavior. Rejected rows or columns will be reported in the [Details](#import-details) panel after the import is completed. | Skip column |
217-
| Force header | Whether to interpret the first line as the header. The result will be reported in the [Details](#import-details) panel after the import is completed. | FALSE |
218-
| Skip line extra values | Whether the parser should ignore extra values by ignoring the entire line. An extra value is something in addition to what is defined by the header. | FALSE |
69+
### Import CSV
21970

220-
#### Import details
71+
The **Import CSV** interface allows you to upload and import CSV files into QuestDB with automatic schema detection, flexible configuration options, and detailed progress tracking. You can create new tables or append to existing ones with full control over the import process.
22172

222-
The import status is displayed in the file column. Once the action is completed,
223-
the number of rows inserted is displayed alongside the `Details` tab:
73+
[Learn more about Import CSV →](/docs/web-console/import-csv)
22474

225-
<Screenshot
226-
alt="Screenshot of the Web Console showing number of row imported and the Details tab"
227-
height={535}
228-
src="images/docs/console/import-complete.webp"
229-
width={400}
230-
/>
23175

232-
The `Details` panel lists rejected rows and errors in importing each column:
76+
### Right Sidebar
23377

234-
<Screenshot
235-
alt="Screenshot of the Web Console showing the import details"
236-
height={535}
237-
src="images/docs/console/import-details.webp"
238-
width={400}
239-
/>
78+
The **Right Sidebar** provides quick access to essential tools and information:
79+
- **Help**: Access quick links and contact options through a convenient help menu
80+
- **QuestDB News**: Stay up-to-date with the latest QuestDB announcements and updates
81+
- **Create Table**: Build new tables visually using an intuitive interface. Define table structure, configure partitioning, enable WAL, and add columns with their data types—all without writing SQL code. [Learn more about Create Table →](/docs/web-console/create-table)
24082

241-
The details such as header forced, table name, and rejected rows are related to
242-
the defined import settings. For example, setting Atomicity in Settings to Skip
243-
row will result in skipped rows being reported in Rejected rows after the
244-
import.
24583

246-
### Create table
84+
### Instance Naming
24785

248-
The "Create" tab on the top of the page allows table creation using interactive
249-
UI:
86+
Web Console allows you to set the instance name, type, and color. This functionality is particularly useful for production users who manage multiple deployments and frequently navigate between them. This feature makes it easier to keep track of instance information and label instances with meaningful names for their users.<br/>
87+
The instance name, instance type, and description are displayed when hovering over the icon in the instance information badge.
25088

251-
<Screenshot
252-
alt="Screenshot of the create table tab"
253-
small
254-
src="images/docs/console/create-table-tab.webp"
255-
width={300}
256-
/>
25789

258-
Use the create table panel to define table partition, WAL setting, and add
259-
column to a new table:
90+
Instance information can be modified through the dialog that opens when clicking the edit icon:
26091

26192
<Screenshot
262-
alt="Screenshot of the create table panel"
263-
height={375}
264-
small
265-
src="images/docs/console/create-table.webp"
266-
width={400}
93+
alt="Instance information edit popper in Web Console"
94+
height={470}
95+
src="images/docs/console/instance-naming.webp"
96+
width={672}
26797
/>
26898

269-
### Providing an asset path
270-
271-
It's possible to provide an asset path if QuestDB is being run from somewhere
272-
that is not the server root. In this case, create a `.env` file in the UI
273-
directory of QuestDB and provide the path to web console assets as follows:
274-
275-
```bash
276-
ASSET_PATH=/path/to/questdb/ui
277-
```
99+
:::info
100+
If `http.settings.readonly` configuration is set to true, instance information is not editable.
101+
:::
278102

279-
An
280-
[example dotenv](https://github.com/questdb/ui/blob/main/packages/web-console/.env.example)
281-
file is provided which can be renamed to `.env` and placed in QuestDB's UI
282-
directory.
103+
:::info
104+
When using QuestDB Enterprise with Role-Based Access Control (RBAC), only the users with `SETTINGS` or `DATABASE ADMIN` permission can edit the instance information. See [Database Permissions](/docs/operations/rbac/#database-permissions) for more details.
105+
:::

0 commit comments

Comments
 (0)