Service tabs

applications/launchpad/gui-vue/package.json

@@ -17,7 +17,8 @@
     "@oruga-ui/oruga-next": "^0.4.8",
     "@tauri-apps/api": "^1.0.0-beta.8",
     "core-js": "^3.6.5",
-    "vue": "^3.0.0"
+    "vue": "^3.0.0",
+    "vuex": "^4.0.2"
   },
   "devDependencies": {
     "@tauri-apps/cli": "^1.0.0-beta.10",

applications/launchpad/gui-vue/src/components/Containers.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="containers">
     <h1>Containers</h1>
-    <button @click="pullImages">Pull images</button>
+    <o-button @click="pullImages">Pull images</o-button>
     <ul>
       <li v-for="(image, i) of imageList" :key="i"><b>{{ image }}</b>:{{ ' ' }}{{ info[image].status }} /
         {{ info[image].progress }}%
@@ -15,7 +15,6 @@
 <script>
 import {invoke} from '@tauri-apps/api/tauri'
 import {listen} from '@tauri-apps/api/event'
-import { ref } from 'vue';
 
 async function pullImages() {
   console.log("Pulling images");
@@ -41,11 +40,12 @@ export default {
   name: 'containers',
   async setup() {
     console.log("Getting image list");
-    let imageList = ref(['foo', 'bar']);
+    let imageList = [];
     try {
       imageList.value = await invoke("image_list");
     } catch (err) {
       console.log(err);
+      console.log("Using default image list");
     }
     return {imageList}
   },
@@ -55,7 +55,7 @@ export default {
     const errors = "None";
     console.log("ImageList:", this.imageList);
     this.imageList.forEach(p => info[p] = {status: "Unknown", progress: 0});
-    return {info, errors }
+    return {info, errors}
   },
   methods: {pullImages}
 }
@@ -70,7 +70,7 @@ ul {
 }
 
 li {
-  text-align: left ;
+  text-align: left;
   margin: 0 10px;
 }
 

applications/launchpad/gui-vue/src/components/LaunchDocker.vue

@@ -23,12 +23,17 @@
 
 <template>
   <o-tabs v-model="activeTab">
-    <o-tab-item value="0" label="Setup">
+    <o-tab-item value="0" label="Images">
+      <suspense>
+        <Containers></Containers>
+      </suspense>
+    </o-tab-item>
+    <o-tab-item value="1" label="Setup">
       <div>
         <h1>Workspace</h1>
-        <input v-model="workspaceName" placeholder="MyWorkspace"/>
-        <button @click="createWorkspace">Create workspace</button>
-        <button @click="openWorkspace">Open workspace</button>
+        <o-input v-model="workspaceName" placeholder="MyWorkspace"></o-input>
+        <o-button @click="createWorkspace">Create workspace</o-button>
+        <o-button @click="openWorkspace">Open workspace</o-button>
         <p>
           <b>Workspace status:</b><span>{{ workspaceStatus }}</span>
         </p>
@@ -53,30 +58,34 @@
         </div>
 
         <div>
-          <input type="checkbox" id="base_node" v-model="options.has_base_node"/>
-          <label for="base_node">Spin up a Base Node</label>
-        </div>
-
-        <div>
-          <input type="checkbox" id="wallet" v-model="options.has_wallet"/>
-          <label for="wallet">Spin up a wallet</label>
-          <div v-if="options.has_wallet">
-            <input v-model="options.wallet_password" placeholder="password"/>
+          <div class="field">
+            <o-checkbox id="base_node" v-model="options.has_base_node">
+              Spin up a Base Node
+            </o-checkbox>
           </div>
-        </div>
-
-
-        <div>
-          <input type="checkbox" id="sha3_miner" v-model="options.has_sha3_miner"/>
-          <label for="sha3_miner">Spin up a SHA3 miner</label>
-          <div v-if="options.has_sha3_miner">
-            <input v-model.number="options.sha3_mining_threads" placeholder="# SHA3 mining threads"/>
+          <div class="field">
+            <o-checkbox v-model="options.has_wallet">
+              Spin up a wallet
+            </o-checkbox>
+          </div>
+          <div class="field">
+            <div v-if="options.has_wallet">
+              <input v-model="options.wallet_password" placeholder="password"/>
+            </div>
+          </div>
+          <div class="field">
+            <o-checkbox v-model="options.has_sha3_miner">
+              Spin up a SHA3 miner
+            </o-checkbox>
+            <div v-if="options.has_sha3_miner">
+              <input v-model.number="options.sha3_mining_threads" placeholder="# SHA3 mining threads"/>
+            </div>
+          </div>
+          <div class="field">
+            <o-checkbox v-model="options.has_mm_proxy">
+              Spin up a Monero Miner
+            </o-checkbox>
           </div>
-        </div>
-
-        <div>
-          <input type="checkbox" id="mm_proxy" v-model="options.has_mm_proxy"/>
-          <label for="mm_proxy">Spin up a Monero Miner</label>
           <div v-if="options.has_mm_proxy">
             <ul>
               <li><input v-model="options.monerod_url" placeholder="Monerod URL"/></li>
@@ -98,20 +107,26 @@
 
     </o-tab-item>
 
-    <o-tab-item value="3" label="Logs">
-      <div class="logs">
-        <hr/>
-        <h2>Logs</h2>
-        <table>
-          <tr v-for="(log, index) in logs" v-bind:key="index">
-            <td>{{ log }}</td>
-          </tr>
-        </table>
-        <hr/>
-      </div>
+    <o-tab-item value="2" label="Tor">
+      <service name="Tor"></service>
+    </o-tab-item>
+
+    <o-tab-item value="3" label="Base Node">
+      <service name="Base Node"></service>
+    </o-tab-item>
+
+    <o-tab-item value="4" label="Wallet">
+      <service name="Wallet"></service>
+    </o-tab-item>
+
+    <o-tab-item value="5" label="SHA3 Miner">
+      <service name="SHA3 miner"></service>
     </o-tab-item>
-  </o-tabs>
 
+    <o-tab-item value="6" label="Merged miner">
+      <service name="Merged Miner"></service>
+    </o-tab-item>
+  </o-tabs>
 
 
 </template>
@@ -120,6 +135,8 @@
 import {invoke} from '@tauri-apps/api/tauri'
 import {save, open} from '@tauri-apps/api/dialog'
 import {listen} from "@tauri-apps/api/event";
+import {defineAsyncComponent} from "vue";
+import service from "@/components/Service";
 
 const imageNames = [
   "tor",
@@ -187,6 +204,10 @@ async function launch() {
 
 export default {
   name: "LaunchDocker",
+  components: {
+    Containers: defineAsyncComponent(() => import("@/components/Containers")),
+    service
+  },
   data() {
     const options = {
       root_folder: "/tmp/tari",

applications/launchpad/gui-vue/src/components/Service.vue

@@ -0,0 +1,97 @@
+<template>
+  <h1>{{ name }}</h1>
+  <div>
+    <p><b>Network:</b> {{ $store.state.networkConfig.tari_network }}</p>
+    <p><b>Workspace:</b> {{ $store.state.networkConfig.root_folder }}</p>
+    <o-button @click="startContainer">Start</o-button>
+    <o-button @click="stopContainer">Stop</o-button>
+    <p><b>Status:</b> {{ status }}</p>
+
+  </div>
+
+  <div class="stats">
+    <h2>Stats <o-icon pack="fas" icon="tachometer-alt"> </o-icon></h2>
+    <p><b>CPU:</b> {{ stats.cpu }}%</p>
+    <p><b>Memory:</b> {{ stats.mem }} MB</p>
+  </div>
+
+  <div class="logs">
+    <hr/>
+    <h2>Logs</h2>
+    <o-table
+        :data="logs"
+        :columns="columns"
+        :striped="true"
+        :narrowed="true"
+        :hoverable="true"
+        :sticky-header="true"
+        :debounce-search="100"
+    >
+    </o-table>
+    <hr/>
+  </div>
+</template>
+
+<script>
+// import {invoke} from '@tauri-apps/api/tauri'
+// import {listen} from '@tauri-apps/api/event'
+
+function startContainer() {
+  console.log(`Starting ${this.name}...`)
+}
+
+function stopContainer() {
+  console.log(`Stopping ${this.name}...`)
+}
+
+export default {
+  name: 'service',
+  props: {
+    name: String,
+  },
+
+  data() {
+    const logs = [
+      {id: 0, timestamp: (new Date()).toISOString(), message: "Logs go here"}
+    ];
+    const columns = [
+      {
+        field: 'id',
+        label: 'ID',
+        width: '100',
+        numeric: true,
+        searchable: false
+      },
+      {
+        field: 'timestamp',
+        label: 'Time',
+        searchable: false
+      },
+      {
+        field: 'message',
+        label: 'Message',
+        searchable: true
+      }
+    ];
+    const stats = {
+      cpu: 0,
+      mem: 0,
+    };
+    return {
+      status: "None",
+      logs,
+      columns,
+      stats
+    }
+  },
+  methods: {
+    startContainer,
+    stopContainer,
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+</style>

applications/launchpad/gui-vue/src/main.js

@@ -35,10 +35,13 @@ library.add(
     faCaretUp
 );
 
+import store from "./store";
+
 createApp(App)
     .component('vue-fontawesome', FontAwesomeIcon)
     .use(Oruga, {
         iconComponent: 'vue-fontawesome',
         iconPack: 'fas'
     })
+    .use(store)
     .mount('#app')

applications/launchpad/gui-vue/src/store.js

@@ -0,0 +1,24 @@
+import { createStore } from 'vuex'
+
+export const store = createStore({
+    state () {
+        return {
+            networkConfig: {
+                tari_network: "weatherwax",
+                root_folder: "/tmp/tari",
+                docker_registry: null,
+                docker_tag: null,
+            }
+        }
+    },
+    mutations: {
+        setNetwork(state, network) {
+            state.networkConfig.tari_network = network;
+        },
+        setRootFolder(state, folder) {
+            state.networkConfig.root_folder = folder;
+        }
+    }
+})
+
+export default store