fix #112

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 1.0.1
+
+* You can add predefined clusters when starting elasticvue via docker, check the readme for details. Fixes [#112][i112]
+
+[i112]: https://github.com/cars10/elasticvue/issues/112
+
+
 ## 1.0.0
 
 This is the first stable release of elasticvue `1.0`. Elasticvue now uses vue 3, vite, quasar and typescript.
@@ -19,7 +26,7 @@ Older versions of elasticsearch should work, but you might encounter small bugs
 * Browser extension (no cluster configuration required)
     * [Google chrome](https://chrome.google.com/webstore/detail/elasticvue/hkedbapjpblbodpgbajblpnlpenaebaa)
     * [Firefox](https://addons.mozilla.org/en-US/firefox/addon/elasticvue/)
-    * [Microsoft edge](https://microsoftedge.microsoft.com/addons/detail/geifniocjfnfilcbeloeidajlfmhdlgo)
+    * [Microsoft Edge](https://microsoftedge.microsoft.com/addons/detail/geifniocjfnfilcbeloeidajlfmhdlgo)
 * [Docker](https://hub.docker.com/r/cars10/elasticvue) (cluster configuration **required**)
 * [Web version](https://app.elasticvue.com/) (cluster configuration **required**)
 * [Building manually](https://github.com/cars10/elasticvue/wiki/Building-Elasticvue) (cluster configuration

README.md

@@ -74,6 +74,47 @@ Use the [existing image](https://hub.docker.com/r/cars10/elasticvue):
 docker run -p 8080:8080 --name elasticvue -d cars10/elasticvue
 ```
 
+When using docker you can provide some default cluster configuration for your users. You can either set an environment
+variable or provide a config file as a volume. In either case the content should be a json array of your
+clusters, looking like this:
+
+```json
+[
+  {
+    "name": "dev cluster",
+    "uri": "http://localhost:9200"
+  },
+  {
+    "name": "prod cluster",
+    "uri": "http://localhost:9501",
+    "username": "elastic",
+    "password": "foobar"
+  }
+]
+```
+
+The keys `name` and `uri` are required, `username` and `password` are optional. If you want to connect with an api key
+simply use that as the password and omit the username.
+
+#### Docker with default clusters in environment variable
+
+Example using environment variable `ELASTICVUE_CLUSTERS`:
+
+```bash
+docker run -p 8080:8080 -e ELASTICVUE_CLUSTERS='[{"name": "prod cluster", "uri": "http://localhost:9200", "username": "elastic", "password": "elastic"}]' cars10/elasticvue
+```
+
+#### Docker with default clusters in config file via volume
+
+Example using config file volume to `/usr/share/nginx/html/api/default_clusters.json`:
+
+```bash
+echo '[{"name": "prod cluster", "uri": "http://localhost:9200", "username": "elastic", "password": "elastic"}]' > /config.json
+docker run -p 8080:8080 -v /config.json:/usr/share/nginx/html/api/default_clusters.json cars10/elasticvue
+```
+
+Your users will be prompted to optionally import these clusters.
+
 ### Web version
 
 *You have to configure your elasticsearch cluster if you use the web version of elasticvue*  

docker/Dockerfile

@@ -7,9 +7,10 @@ COPY yarn.lock .
 
 RUN yarn install
 COPY . .
-RUN VITE_APP_BUILD_MODE=web yarn build
+RUN VITE_APP_BUILD_MODE=docker yarn build
 
 FROM nginx:mainline-alpine
 COPY --from=builder /app/dist /usr/share/nginx/html
 RUN rm /etc/nginx/conf.d/default.conf
 COPY docker/nginx/elasticvue.conf /etc/nginx/conf.d/
+COPY docker/nginx/99_default_clusters.sh /docker-entrypoint.d

docker/Dockerfile_multiarch

@@ -7,9 +7,10 @@ COPY yarn.lock .
 
 RUN yarn install
 COPY . .
-RUN VITE_APP_BUILD_MODE=web yarn build
+RUN VITE_APP_BUILD_MODE=docker yarn build
 
 FROM nginx:mainline-alpine
 COPY --from=builder /app/dist /usr/share/nginx/html
 RUN rm /etc/nginx/conf.d/default.conf
 COPY docker/nginx/elasticvue.conf /etc/nginx/conf.d/
+COPY docker/nginx/99_default_clusters.sh /docker-entrypoint.d

docker/nginx/99_default_clusters.sh

@@ -0,0 +1,10 @@
+#!/bin/sh
+
+CONFIG_FILE_DIR=/usr/share/nginx/html/api
+CONFIG_FILE_PATH=$CONFIG_FILE_DIR/default_clusters.json
+
+if [ ! -f $CONFIG_FILE_PATH ] && [ -n "$ELASTICVUE_CLUSTERS" ]; then
+  echo "> found ELASTICVUE_CLUSTERS..."
+  mkdir $CONFIG_FILE_DIR
+  echo "$ELASTICVUE_CLUSTERS" > $CONFIG_FILE_PATH
+fi

src/assets/stylesheets/quasar/q-banner.css

@@ -1,7 +1,8 @@
 .q-banner {
-  border-radius: 2px;
-  font-size: 16px !important;
+    border-radius: 2px;
+    font-size: 16px !important;
 }
+
 .q-banner .text-body2 {
-  font-size: 16px !important;
+    font-size: 16px !important;
 }

src/assets/stylesheets/quasar/q-btn.css

@@ -1,7 +1,7 @@
 .q-btn {
-  font-weight: initial !important;
+    font-weight: initial !important;
 }
 
 .q-btn-group .q-btn:first-child {
-  border-right: 2px solid var(--theme-menu-separator-background);
+    border-right: 2px solid var(--theme-menu-separator-background);
 }

src/assets/stylesheets/quasar/q-card.css

@@ -1,9 +1,9 @@
 .q-card {
-  color: var(--theme-color);
-  background: var(--theme-background);
+    color: var(--theme-color);
+    background: var(--theme-background);
 }
 
 .q-table__card {
-  color: var(--theme-color);
-  background: inherit;
+    color: var(--theme-color);
+    background: inherit;
 }

src/assets/stylesheets/quasar/q-form.css

@@ -1,48 +1,57 @@
 .q-field__control {
-  color: var(--theme-primary);
+    color: var(--theme-primary);
+}
+
+.q-field--small .q-field__control, .q-field--small .q-field__marginal {
+    height: initial;
+}
+
+.q-field--small .q-field__native {
+    padding: 3px 0;
+    font-size: 14px;
 }
 
 .q-field__marginal {
-  color: var(--theme-muted-color);
+    color: var(--theme-muted-color);
 }
 
 .q-field__native {
-  color: var(--theme-color);
+    color: var(--theme-color);
 }
 
 .q-field__label {
-  color: var(--theme-muted-color);
+    color: var(--theme-muted-color);
 }
 
 .q-field__control:before {
-  border-color: var(--theme-muted-color) !important;
+    border-color: var(--theme-muted-color) !important;
 }
 
 .q-field.q-field--standard:hover .q-field__control:before {
-  border-color: var(--theme-dark-grey-color);
+    border-color: var(--theme-dark-grey-color);
 }
 
 .q-field.q-field--standard.q-field--highlighted .q-field__label {
-  color: var(--theme-primary) !important;
+    color: var(--theme-primary) !important;
 }
 
 .q-field__bottom {
-  color: var(--theme-muted-color) !important;
-  padding: 2px 0 0 0;
+    color: var(--theme-muted-color) !important;
+    padding: 2px 0 0 0;
 }
 
 .q-checkbox__inner--falsy .q-checkbox__bg {
-  border-color: var(--theme-muted-color);
+    border-color: var(--theme-muted-color);
 }
 
 .q-input {
-  font-size: 16px !important;
+    font-size: 16px !important;
 }
 
 .q-field__input {
-  color: var(--theme-color);
+    color: var(--theme-color);
 }
 
 .q-radio__inner {
-  color: var(--theme-muted-color);
+    color: var(--theme-muted-color);
 }

src/assets/stylesheets/quasar/q-list.css

@@ -1,4 +1,4 @@
 .q-item__label--header {
-  color: var(--theme-color);
-  font-weight: 500;
+    color: var(--theme-color);
+    font-weight: 500;
 }

src/assets/stylesheets/quasar/q-menu.css

@@ -1,16 +1,16 @@
 .q-menu {
-  background: var(--theme-menu-background);
-  border: 1px solid var(--theme-background);
+    background: var(--theme-menu-background);
+    border: 1px solid var(--theme-background);
 }
 
 .q-menu .q-separator {
-  background: var(--theme-menu-separator-background);
+    background: var(--theme-menu-separator-background);
 }
 
 .q-dialog .q-card {
-  background: var(--theme-card-background);
+    background: var(--theme-card-background);
 }
 
 .q-dialog .q-card .q-separator {
-  background: var(--theme-menu-separator-background);
+    background: var(--theme-menu-separator-background);
 }

src/assets/stylesheets/quasar/q-separator.css

@@ -1,3 +1,3 @@
 .q-separator {
-  background: var(--theme-separator-background);
+    background: var(--theme-separator-background);
 }

src/assets/stylesheets/quasar/q-tab.css

@@ -1,11 +1,11 @@
 .q-tab-panels {
-  background-color: initial;
+    background-color: initial;
 }
 
 .q-tab, .q-tab__content, .q-tab__label {
-  transition: none !important;
+    transition: none !important;
 }
 
 .q-tab__indicator {
-  transition: none !important;
+    transition: none !important;
 }

src/assets/stylesheets/quasar/q-table.css

@@ -1,61 +1,61 @@
 .q-table thead, .q-table tr, .q-table th, .q-table td, .q-table__bottom {
-  border-color: var(--theme-table-border-color);
+    border-color: var(--theme-table-border-color);
 }
 
 .q-table tbody tr:hover {
-  background-color: var(--theme-table-hover-background);
+    background-color: var(--theme-table-hover-background);
 }
 
 .theme--dark .q-table__control .q-btn:not(:disabled) {
-  color: #fff !important;
+    color: #fff !important;
 }
 
 table.q-table th {
-  font-size: 13px;
-  font-weight: 600;
+    font-size: 13px;
+    font-weight: 600;
 }
 
 table.q-table td {
-  font-size: 14px;
+    font-size: 14px;
 }
 
 .table-mono .q-table tbody td {
-  font-family: 'Hack', monospace;
+    font-family: 'Hack', monospace;
 }
 
 .q-table--dense .q-table th {
-  padding: 2px 8px;
-  height: 40px !important;
+    padding: 2px 8px;
+    height: 40px !important;
 }
 
 .q-table--dense .q-table td {
-  padding: 2px 8px;
+    padding: 2px 8px;
 }
 
 .q-table--dense .q-table thead tr, .q-table--dense .q-table tbody tr, .q-table--dense .q-table tbody td {
-  height: 40px;
+    height: 40px;
 }
 
 .q-table--dense tbody .q-btn:not(.q-btn--round) {
-  min-height: 2em;
-  padding: 2px 10px;
+    min-height: 2em;
+    padding: 2px 10px;
 }
 
 .q-table--dense tbody td {
-  max-width: 500px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+    max-width: 500px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .q-table--dense .q-table__bottom {
-  min-height: 50px;
+    min-height: 50px;
 }
 
 .q-table--dense .q-table__bottom .q-btn {
-  padding: 4px;
+    padding: 4px;
 }
 
 .q-table--dense .q-table__bottom .q-btn .q-icon {
-  font-size: 2.5em;
+    font-size: 2.5em;
 }

src/buildConfig.ts

@@ -1,15 +1,17 @@
 /*
  *
- *  | BUILD_MODE        | SSL Hint | CORS Hint | Router Mode    | Use Tauri |
- *  |-------------------|----------|-----------|----------------|-----------|
- *  | web               | ✓        | ✓         | webHistory     | X         |
- *  | browser_extension | ✓        | X         | webHashHistory | X         |
- *  | tauri             | X        | X         | webHistory     | ✓         |
+ *  | BUILD_MODE        | SSL Hint | CORS Hint | Router Mode    | Use Tauri | Check predefined clusters |
+ *  |-------------------|----------|-----------|----------------|-----------|---------------------------|
+ *  | web               | ✓        | ✓         | webHistory     | X         | X                         |
+ *  | docker            | ✓        | ✓         | webHistory     | X         | ✓                         |
+ *  | browser_extension | ✓        | X         | webHashHistory | X         | X                         |
+ *  | tauri             | X        | X         | webHistory     | ✓         | X                         |
  *
  */
 
 export enum BuildMode {
   web = 'web', // default, "normal" build
+  docker = 'docker',
   browser_extension = 'browser_extension',
   tauri = 'tauri'
 }
@@ -22,7 +24,8 @@ export const buildConfig = {
     mode: buildMode === BuildMode.browser_extension ? 'webHashHistory' : 'webHistory'
   },
   hints: {
-    ssl: buildMode === BuildMode.web || buildMode === BuildMode.browser_extension,
-    cors: buildMode === BuildMode.web,
-  }
+    ssl: [BuildMode.web, BuildMode.docker, BuildMode.browser_extension].includes(buildMode),
+    cors: [BuildMode.web, BuildMode.docker].includes(buildMode),
+  },
+  checkPredefinedClusters: buildMode === BuildMode.docker
 }