Merge branch 'main' into web-console/chart-tabs

README.md

@@ -3,7 +3,7 @@
 This repository is a monorepo hosting the implementation of QuestDB user
 interface and surrounding tooling.
 
-Currently there are these packages:
+Currently, there are these packages:
 
 * [`web-console`](./packages/web-console/README.md) - the GUI tool shipped with QuestDB
 * [`react-components`](./packages/react-components/README.md) - small component library for internal reuse between QuestDB products
@@ -13,4 +13,4 @@ Currently there are these packages:
 
 We always welcome contributions from the community!
 
-Please read our [local development setup](./docs/local-development-setup.md) document to learn how to get started.
+Please, read our [local development setup](./docs/local-development-setup.md) document to learn how to get started.

docs/local-development-setup.md

@@ -79,27 +79,30 @@ where:
 
 Knowing this it's easy to run any script of any package.
 
-If you want to work on `@questdb/web-console` package, you can start its development server with:
+For example, if you want to work on the `@questdb/web-console` package, you can start its
+development server with:
 
 ```
 yarn workspace @questdb/web-console start
 ```
 _You might need to run_ `yarn workspace @questdb/react-components build` _first._
 
-[localhost:9999](http://localhost:9999) should show web console.
+[localhost:9999](http://localhost:9999) should display the web console.
 
 ### 4. Hack!
 
 The setup is done! All packages are ready to be worked on.
 
-They all have a `readme.md` with more details, for instance, here's a link to [`@questdb/web-console/readme.md`](../packages/web-console/README.md).
+They all have a `README.md` with more details.\
+For instance, further details on working with the web console locally can be found
+in [`@questdb/web-console/readme.md`](../packages/web-console/README.md).
 
-Vim and VSCode should work out of the box. If they don't or you use some
-other IDE, you might need to setup and SDK as explained in [Yarn
+Vim and VSCode should work out of the box. If they don't, or you use some
+other IDE, you might need to setup an SDK as explained in [Yarn
 documentation](https://yarnpkg.com/getting-started/editor-sdks).
 
 If you need help, here are some useful links:
 
-* [Github issues](https://github.com/questdb/ui/issues), might already have an answer to your question
+* [GitHub issues](https://github.com/questdb/ui/issues), might already have an answer to your question
 * [QuestDB Documentation](https://questdb.io/docs/) includes a lot of useful information
 * [QuestDB Slack](https://slack.questdb.io/) join our helpful community!

packages/web-console/CHANGELOG.md

@@ -23,7 +23,7 @@ and this project adheres to
 - use a new information_schema.questdb_columns() instead of
   information_schema.columns() [#359](https://github.com/questdb/ui/pull/359)
 
-## O.6.4 - 2024.11.25
+## 0.6.4 - 2024.11.25
 
 ### Added
 

packages/web-console/README.md

@@ -7,46 +7,68 @@ Yarn@3 and Webpack.
 
 ## Local development setup
 
-In order to run this package locally, you need to do the following steps:
-
-1. Clone and bootstrap repository (by following instructions on [`local-development-setup.md`](../../docs/local-development-setup.md)) 
-2. Start development server
-3. Run QuestDB in the background
-4. Hack!
+In order to run this package locally, follow the steps below.
 
 ### 1. Clone and bootstrap repository
 
-Consult instructions on [`local-development-setup.md`](../../docs/local-development-setup.md) document.
+Follow the instructions described
+in [`local-development-setup.md`](../../docs/local-development-setup.md) document.\
+After the local development environment setup, you are ready to work on the packages of this project,
+including the web console.
+
+### 2. Build the production version of `@questdb/react-components`
 
-### 2. Build the production version of `@questdb/react-components`, which this repository uses:
+The web console uses the `@questdb/react-components` package, so build this dependency first.
 ```
 yarn workspace @questdb/react-components build
 ```
 
 ### 3. Start development server
 
+Now we can start the web console.
 ```
 yarn workspace @questdb/web-console start
 ```
 
-[localhost:9999](http://localhost:9999) should show web console
+By default, [localhost:9999](http://localhost:9999) should display the web console.
+
+If the server has a context path configured with the `http.context.path` option, we need to make sure that
+the dev server is aware of it, and it proxies requests accordingly.\
+We can set the context path with the following environment variable before starting dev server:
+```
+CONTEXT_PATH=/instance2
+export CONTEXT_PATH
+yarn workspace @questdb/web-console start
+```
+
+After the above the web console is available on [localhost:9999/instance2/](http://localhost:9999/instance2/)
+
+If the context path is removed from the server configuration, we also need to clear the environment variable,
+and restart the dev server:
+```
+unset CONTEXT_PATH
+yarn workspace @questdb/web-console start
+```
 
 ### 4. Run QuestDB in the background
 
-This package (`web-console`) is a only GUI for QuestDB, it does not include QuestDB itself.\
-GUI will work without it, but because it's a tool to interact with QuestDB, you will need QuestDB as well.
+This package (`web-console`) is a GUI for QuestDB, it does not include QuestDB itself.\
+The web console will load from the dev server without the database, but because it is a tool
+to interact with QuestDB, you need to run the database as well to be able to work with it
+properly.
 
-Check [readme.md](https://github.com/questdb/questdb#install-questdb) of QuestDB to learn how to install it.
+Check [README.md](https://github.com/questdb/questdb#install-questdb) of QuestDB to learn how to install it.
 
-If you have [`docker`](https://docs.docker.com/get-docker/), then it's simply:
+If you have [`docker`](https://docs.docker.com/get-docker/), then it is simply:
 
 ```
 docker run -p 9000:9000 -p 9009:9009 -p 8812:8812 questdb/questdb
 ```
 
 ### 5. Hack!
 
-Do your code changes and browser will automatically refresh [localhost:9999](http://localhost:9999).
+You can start changing the code, and the web console will automatically refresh
+on [localhost:9999](http://localhost:9999).
 
 Happy hacking!
 

packages/web-console/src/scenes/Editor/Monaco/tabs.tsx

@@ -52,9 +52,9 @@ const DropdownMenuContent = styled(DropdownMenu.Content)`
 
 const mapTabIconToType = (buffer: Buffer) => {
   if (buffer.metricsViewState) {
-    return "/assets/icon-chart.svg"
+    return "assets/icon-chart.svg"
   }
-  return "/assets/icon-file.svg"
+  return "assets/icon-file.svg"
 }
 
 export const Tabs = () => {
@@ -175,7 +175,7 @@ export const Tabs = () => {
             (buffer) =>
               ({
                 id: buffer.id?.toString(),
-                favicon: mapTabIconToType(buffer),
+                favicon: "assets/icon-file.svg",
                 title: buffer.label,
                 active: activeBuffer.id === buffer.id,
                 className: buffer.metricsViewState ? "metrics-tab" : "",

packages/web-console/src/store/db.ts

@@ -64,7 +64,7 @@ export class Storage extends Dexie {
     // add initial buffer on db creation
     // this is only called once, when DB is not available yet
     this.on("populate", () => {
-      // populate intial buffer with value from localStorage, then clear it.
+      // populate initial buffer with value from localStorage, then clear it.
       // this is to migrate from localStorage to indexedDB
       const valueFromDeprecatedStorage = getValue(StoreKey.QUERY_TEXT)
       if (typeof valueFromDeprecatedStorage !== "undefined") {

packages/web-console/webpack.config.js

@@ -41,6 +41,7 @@ const config = {
   port: 9999,
   backendUrl: "http://127.0.0.1:9000",
   isProduction: process.env.NODE_ENV === "production",
+  contextPath: process.env.CONTEXT_PATH || "",
 }
 
 module.exports = {
@@ -80,10 +81,22 @@ module.exports = {
     host: "localhost",
     hot: true,
     port: config.port,
-    proxy: {
-      context: ["/imp", "/exp", "/exec", "/chk", "/settings", "/warnings"],
-      target: config.backendUrl,
-    },
+    proxy: [
+      {
+        context: [
+          config.contextPath + "/imp", config.contextPath + "/exp", config.contextPath + "/exec",
+          config.contextPath + "/chk", config.contextPath + "/settings", config.contextPath + "/warnings"
+        ],
+        target: config.backendUrl,
+      },
+      {
+        context: [ config.contextPath ],
+        target: 'http://localhost:' + config.port,
+        pathRewrite: path => {
+          return path.startsWith(config.contextPath) ? path.substr(config.contextPath.length) : path;
+        },
+      },
+    ],
     client: {
       overlay: false,
     },