Web UI fixes (#44)

.github/workflows/webui.yml

@@ -1,12 +1,11 @@
 name: webui
 on:
-- push
+  push:
     paths:
-      - "webui/*"
+      - 'webui/**'
     branches:
       - master
       - main
-
 env:
   IMAGE_NAME: gebug-webui
 

README.md

@@ -31,6 +31,7 @@ Available Commands:
   help        Help about any command
   init        Initialize a Gebug project
   start       Start Gebug services
+  ui          Start Gebug web UI
   version     Gebug's version
 
 Flags:
@@ -75,6 +76,15 @@ Let's examine the `config.yaml` fields so you will feel more comfortable editing
 | networks     	    | []                               	    | list of docker external networks to join. if no network is selected, a new one will be created                                                                                                                                            |
 | environment     	| []                               	    | list of environment variables to be set inside the container. Syntax: `FOO=BAR` or just `FOO` which will take the variable `FOO` from host and set it with its value                                                                      |
 
+# Web UI
+If you prefer a web interface over a terminal or YAML file, you can simply run the following command in your Gebug project directory
+```
+gebug ui
+``` 
+A simple web application will be opened and let you control the Gebug configuration of your project directly from your browser.  
+
+![](assets/demo-webui.gif)
+
 # License
 Gebug is released under the Apache 2.0 license. See LICENSE.
 

webui/frontend/package.json

@@ -11,6 +11,7 @@
     "@braid/vue-formulate": "^2.4.5",
     "@vue/composition-api": "^1.0.0-beta.16",
     "axios": "^0.20.0",
+    "bootstrap-vue": "^2.17.3",
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.6",
@@ -28,6 +29,7 @@
     "@vue/cli-service": "~4.5.0",
     "@vue/eslint-config-typescript": "^5.0.2",
     "babel-eslint": "^10.1.0",
+    "bootstrap": "^4.5.2",
     "eslint": "^6.8.0",
     "eslint-plugin-vue": "^6.2.2",
     "mutationobserver-shim": "^0.3.7",

webui/frontend/src/App.vue

@@ -2,25 +2,19 @@
   <div id="app">
     <img alt="Gebug" src="assets/logo.png" width="500" height="300" />
     <div style="text-align: center;">
-      <ConfigForm :location="settings.location" />
+      <ConfigForm/>
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
-import settings from "@/utils/settings";
 import ConfigForm from "./components/ConfigForm.vue";
 
 @Component({
   components: {
     ConfigForm,
   },
-  computed: {
-    settings() {
-      return settings;
-    }
-  }
 })
 export default class App extends Vue {}
 </script>