@questdb/web-console 0.0.1 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +76 -13
- package/dist/index.html +37 -64
- package/dist/qdb.css +5 -71
- package/dist/qdb.js +1 -1
- package/package.json +10 -10
package/README.md
CHANGED
|
@@ -1,25 +1,88 @@
|
|
|
1
|
-
# QuestDB Console
|
|
1
|
+
# QuestDB Web Console
|
|
2
|
+
|
|
3
|
+
This package contains code of the GUI for interacting with QuestDB.
|
|
4
|
+
|
|
5
|
+
It is a web application built with TypeScript and React and managed with
|
|
6
|
+
Yarn@3 and Webpack.
|
|
7
|
+
|
|
8
|
+
## Local development setup
|
|
9
|
+
|
|
10
|
+
## TL;DR;
|
|
11
|
+
|
|
12
|
+
```
|
|
13
|
+
git clone git@github.com/questdb/ui.git
|
|
14
|
+
cd ui
|
|
15
|
+
docker run -p 9000:9000 -p 9009:9009 -p 8812:8812 questdb/questdb
|
|
16
|
+
yarn
|
|
17
|
+
yarn workspace @questdb/web-console start
|
|
18
|
+
```
|
|
2
19
|
|
|
3
20
|
## Prerequisites
|
|
4
21
|
|
|
5
|
-
|
|
6
|
-
[nvm](https://github.com/nvm-sh/nvm)
|
|
7
|
-
|
|
22
|
+
* use node v16.13.1<br>
|
|
23
|
+
version is specified in [`.nvmrc`](./.nvmrc) file. You can use [nvm](https://github.com/nvm-sh/nvm) or [fnm](https://fnm.vercel.app) to manage node versions on your machine.
|
|
24
|
+
* monorepo is managed with [yarn@3](https://yarnpkg.com/).<br>
|
|
25
|
+
Follow [official installation guide](https://yarnpkg.com/getting-started/install). It should be enough to run `corepack enable` to have `yarn` enabled.
|
|
26
|
+
* This package is a frontend client for QuestDB. Therefore, it requires
|
|
27
|
+
a locally running QuestDB instance. Check [readme.md](https://github.com/questdb/questdb#install-questdb) of QuestDB to learn how to install it.<br>
|
|
28
|
+
If you have docker, then it's simply:
|
|
29
|
+
```
|
|
30
|
+
docker run -p 9000:9000 -p 9009:9009 -p 8812:8812 questdb/questdb
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Start development environment
|
|
34
|
+
|
|
35
|
+
1. Setup dependencies with yarn:
|
|
36
|
+
|
|
37
|
+
```
|
|
38
|
+
yarn
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
2. Start development environment
|
|
8
42
|
|
|
9
|
-
|
|
43
|
+
```
|
|
44
|
+
yarn workspace @questdb/web-console start
|
|
45
|
+
```
|
|
10
46
|
|
|
11
|
-
|
|
47
|
+
3. Open [localhost:9999](http://localhost:9999)
|
|
12
48
|
|
|
13
|
-
|
|
14
|
-
|
|
49
|
+
> make sure you have a local QuestDB instance running, as mentioned in
|
|
50
|
+
> "Prerequisites" above.
|
|
15
51
|
|
|
16
|
-
|
|
17
|
-
[localhost:9999](http://localhost:9999)
|
|
52
|
+
4. Happy hacking!
|
|
18
53
|
|
|
19
|
-
##
|
|
54
|
+
## Run build
|
|
20
55
|
|
|
21
|
-
|
|
56
|
+
1. Make sure dependencies are set up:
|
|
22
57
|
|
|
23
58
|
```
|
|
24
|
-
|
|
59
|
+
yarn
|
|
25
60
|
```
|
|
61
|
+
|
|
62
|
+
2. Run `build` script:
|
|
63
|
+
|
|
64
|
+
```
|
|
65
|
+
yarn workspace @questdb/web-console run build
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
3. Build process emits static HTML, CSS and JS files in `packages/web-console/dist`
|
|
69
|
+
|
|
70
|
+
## Run tests
|
|
71
|
+
|
|
72
|
+
This monorepo contains `browser-tests` package which is used to test
|
|
73
|
+
`web-console` package. `browser-tests` does not yet run as part of
|
|
74
|
+
`web-console` build on CI, but they can be used to test changes locally.
|
|
75
|
+
|
|
76
|
+
Tests are written with [Cypress](https://www.cypress.io/) E2E framework.
|
|
77
|
+
|
|
78
|
+
1. start `web-console` local dev environment as explained above in this document.
|
|
79
|
+
2. run tests with
|
|
80
|
+
```
|
|
81
|
+
yarn workspace browser-tests test
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
or
|
|
85
|
+
|
|
86
|
+
```
|
|
87
|
+
yarn workspace browser-tests run cypress open
|
|
88
|
+
```
|
package/dist/index.html
CHANGED
|
@@ -39,50 +39,39 @@
|
|
|
39
39
|
<div id="import-top" class="ibox-content">
|
|
40
40
|
<div id="dragTarget" class="drag-target drag-idle">
|
|
41
41
|
<div>
|
|
42
|
-
<i class="fa fa-copy fa-3x" style="margin: 0 15px 20px 0
|
|
43
|
-
<i class="fa fa-folder-open fa-3x" style="margin: 0 15px 20px 0
|
|
44
|
-
<i class="fa fa-file-alt fa-3x" style="margin: 0 15px 20px 0
|
|
42
|
+
<i class="fa fa-copy fa-3x" style="margin: 0 15px 20px 0"></i>
|
|
43
|
+
<i class="fa fa-folder-open fa-3x" style="margin: 0 15px 20px 0"></i>
|
|
44
|
+
<i class="fa fa-file-alt fa-3x" style="margin: 0 15px 20px 0"></i>
|
|
45
45
|
</div>
|
|
46
|
-
<h2 style="font-weight: 500
|
|
47
|
-
|
|
48
|
-
import
|
|
46
|
+
<h2 style="font-weight: 500">
|
|
47
|
+
Import CSV file
|
|
49
48
|
</h2>
|
|
50
|
-
<div style="font-size: 14pt; font-weight: 100
|
|
51
|
-
|
|
52
|
-
<a id="js-browse-files" href="#">
|
|
53
|
-
browse your files
|
|
54
|
-
</a>
|
|
49
|
+
<div style="font-size: 14pt; font-weight: 100">
|
|
50
|
+
<a id="js-browse-files" href="#">click here to browse</a>
|
|
55
51
|
</div>
|
|
56
|
-
|
|
57
|
-
|
|
52
|
+
|
|
53
|
+
<form action="#" style="height: 0;">
|
|
54
|
+
<input id="js-browse-files-input" type="file" style="visibility: hidden; height: 0;" multiple="multiple">
|
|
58
55
|
</form>
|
|
59
56
|
</div>
|
|
57
|
+
|
|
58
|
+
<div class="import-note">
|
|
59
|
+
Suitable for small batches of CSV file upload.
|
|
60
|
+
For database migrations, we recommend the
|
|
61
|
+
<a target="_blank" rel="noopener noreferrer" href="https://questdb.io/docs/guides/importing-data">
|
|
62
|
+
COPY SQL command</a>.
|
|
63
|
+
</div>
|
|
64
|
+
|
|
60
65
|
<div id="import-file-list">
|
|
61
66
|
<div class="ud-header-row">
|
|
62
|
-
<div class="ud-header ud-h0">
|
|
63
|
-
|
|
64
|
-
</div>
|
|
65
|
-
<div class="ud-header ud-
|
|
66
|
-
|
|
67
|
-
</div>
|
|
68
|
-
<div class="ud-header ud-
|
|
69
|
-
|
|
70
|
-
</div>
|
|
71
|
-
<div class="ud-header ud-h3">
|
|
72
|
-
Size
|
|
73
|
-
</div>
|
|
74
|
-
<div class="ud-header ud-h4">
|
|
75
|
-
Total rows
|
|
76
|
-
</div>
|
|
77
|
-
<div class="ud-header ud-h5">
|
|
78
|
-
Failed rows
|
|
79
|
-
</div>
|
|
80
|
-
<div class="ud-header ud-h6">
|
|
81
|
-
Header
|
|
82
|
-
</div>
|
|
83
|
-
<div class="ud-header ud-h7">
|
|
84
|
-
Status
|
|
85
|
-
</div>
|
|
67
|
+
<div class="ud-header ud-h0">Actions</div>
|
|
68
|
+
<div class="ud-header ud-h1">File name</div>
|
|
69
|
+
<div class="ud-header ud-h2">Query</div>
|
|
70
|
+
<div class="ud-header ud-h3">Size</div>
|
|
71
|
+
<div class="ud-header ud-h4">Total rows</div>
|
|
72
|
+
<div class="ud-header ud-h5">Failed rows</div>
|
|
73
|
+
<div class="ud-header ud-h6">Header</div>
|
|
74
|
+
<div class="ud-header ud-h7">Status</div>
|
|
86
75
|
</div>
|
|
87
76
|
<div class="ud-canvas"></div>
|
|
88
77
|
</div>
|
|
@@ -115,17 +104,13 @@
|
|
|
115
104
|
<div class="import-imported-stats pull-right">
|
|
116
105
|
<i class="fa fa-thumbs-o-down"></i>
|
|
117
106
|
|
|
118
|
-
<span class="js-rejected-row-count">
|
|
119
|
-
1023003
|
|
120
|
-
</span>
|
|
107
|
+
<span class="js-rejected-row-count"> 1023003 </span>
|
|
121
108
|
rows
|
|
122
109
|
</div>
|
|
123
110
|
<div class="import-imported-stats">
|
|
124
111
|
<i class="fa fa-thumbs-o-up"></i>
|
|
125
112
|
|
|
126
|
-
<span class="js-imported-row-count">
|
|
127
|
-
15000000
|
|
128
|
-
</span>
|
|
113
|
+
<span class="js-imported-row-count"> 15000000 </span>
|
|
129
114
|
rows
|
|
130
115
|
</div>
|
|
131
116
|
</div>
|
|
@@ -147,24 +132,13 @@
|
|
|
147
132
|
<div class="ud-header gh-1">
|
|
148
133
|
<i class="fa fa-hashtag"></i>
|
|
149
134
|
</div>
|
|
150
|
-
<div class="ud-header gh-2">
|
|
151
|
-
|
|
152
|
-
</div>
|
|
153
|
-
<div class="ud-header gh-
|
|
154
|
-
|
|
155
|
-
</div>
|
|
156
|
-
<div class="ud-header gh-4">
|
|
157
|
-
Pattern
|
|
158
|
-
</div>
|
|
159
|
-
<div class="ud-header gh-5">
|
|
160
|
-
Locale
|
|
161
|
-
</div>
|
|
162
|
-
<div class="ud-header gh-6">
|
|
163
|
-
Errors
|
|
164
|
-
</div>
|
|
165
|
-
</div>
|
|
166
|
-
<div class="ud-canvas">
|
|
135
|
+
<div class="ud-header gh-2">Column name</div>
|
|
136
|
+
<div class="ud-header gh-3">Type</div>
|
|
137
|
+
<div class="ud-header gh-4">Pattern</div>
|
|
138
|
+
<div class="ud-header gh-5">Locale</div>
|
|
139
|
+
<div class="ud-header gh-6">Errors</div>
|
|
167
140
|
</div>
|
|
141
|
+
<div class="ud-canvas"></div>
|
|
168
142
|
</div>
|
|
169
143
|
</div>
|
|
170
144
|
</div>
|
|
@@ -172,9 +146,7 @@
|
|
|
172
146
|
</div>
|
|
173
147
|
</div>
|
|
174
148
|
<div id="js-import-error" class="panel panel-danger">
|
|
175
|
-
<div class="panel-heading">
|
|
176
|
-
Import failed
|
|
177
|
-
</div>
|
|
149
|
+
<div class="panel-heading">Import failed</div>
|
|
178
150
|
<div class="panel-body">
|
|
179
151
|
<div class="col-sm-7 js-message">
|
|
180
152
|
Server rejected file due to unsupported file format.
|
|
@@ -185,7 +157,8 @@
|
|
|
185
157
|
</div>
|
|
186
158
|
</div>
|
|
187
159
|
</div>
|
|
188
|
-
</div>
|
|
160
|
+
</div>
|
|
161
|
+
<div class="js-settings-panel" id="settings"></div>
|
|
189
162
|
</div>
|
|
190
163
|
|
|
191
164
|
<div id="sideMenu"></div>
|