Latest core-ui

Dockerfile

@@ -1,4 +1,4 @@
-FROM golang:1.11.5-alpine3.8 as gobuild
+FROM golang:alpine as gobuild
 WORKDIR /
 ENV GOPATH="/go"
 RUN apk update && apk add build-base git zeromq-dev
@@ -12,7 +12,7 @@ COPY ./src ./src
 RUN addgroup -S databox && adduser -S -g databox databox
 RUN GGO_ENABLED=0 GOOS=linux go build -a -ldflags '-s -w' -o app /src/*.go
 
-FROM amd64/alpine:3.8
+FROM amd64/alpine
 COPY --from=gobuild /etc/passwd /etc/passwd
 RUN apk update && apk add libzmq
 USER databox

Dockerfile-arm64v8

@@ -1,4 +1,4 @@
-FROM arm64v8/golang:1.11.5-alpine3.8 as gobuild
+FROM arm64v8/golang:alpine as gobuild
 WORKDIR /
 ENV GOPATH="/go"
 RUN apk update && apk add build-base git zeromq-dev
@@ -11,7 +11,7 @@ COPY ./src ./src
 RUN addgroup -S databox && adduser -S -g databox databox
 RUN GGO_ENABLED=0 GOOS=linux go build -a -ldflags '-s -w' -o app /src/*.go
 
-FROM arm64v8/alpine:3.8
+FROM arm64v8/alpine
 COPY --from=gobuild /etc/passwd /etc/passwd
 RUN apk update && apk add libzmq
 USER databox

src/app.go

@@ -57,9 +57,9 @@ func main() {
 
 	//HTTPS API
 	router.HandleFunc("/status", statusEndpoint).Methods("GET")
+	router.HandleFunc("/ui/api/connect", connect).Methods("GET")
 	router.HandleFunc("/ui/api/appStore", getApps(&cfg)).Methods("GET")
 	router.HandleFunc("/ui/api/containerStatus", containerStatus(&cfg)).Methods("GET")
-	//router.HandleFunc("/ui/api/containerStatus2", containerStatus2(&cfg)).Methods("GET")
 	router.HandleFunc("/ui/api/dataSources", dataSources(&cfg)).Methods("GET")
 	router.HandleFunc("/ui/api/drivers/{name}", getDrivers(&cfg)).Methods("GET")
 	router.HandleFunc("/ui/api/manifest/{name}", getManifest(&cfg)).Methods("GET")
@@ -70,6 +70,7 @@ func main() {
 	router.HandleFunc("/ui/cert.pem", certPub(&cfg)).Methods("GET")
 	router.HandleFunc("/ui/cert.der", certPubDer(&cfg)).Methods("GET")
 	router.PathPrefix("/ui/{type:css|icons|js}/").Handler(http.StripPrefix("/ui", http.FileServer(http.Dir("./www")))).Methods("GET")
+	router.PathPrefix("/ui/{type:manifest.json|cordova.js|service-worker.js|precache-manifest.|robots.txt}").Handler(http.StripPrefix("/ui", http.FileServer(http.Dir("./www")))).Methods("GET")
 	router.PathPrefix("/ui/").Handler(http.HandlerFunc(serveIndex)).Methods("GET")
 
 	//router.Use(loggingMiddleware)

src/end_points.go

@@ -16,6 +16,10 @@ func statusEndpoint(w http.ResponseWriter, req *http.Request) {
 	w.Write([]byte("active\n"))
 }
 
+func connect(w http.ResponseWriter, r *http.Request) {
+	w.Write([]byte("success\n"))
+}
+
 func qrcode(config *config) func(w http.ResponseWriter, r *http.Request) {
 	cfg := config
 

ui/.env

@@ -0,0 +1,2 @@
+VUE_APP_BASE_URL=/core-ui/ui/
+NODE_ENV=production

ui/.env.mobile

@@ -0,0 +1,2 @@
+VUE_APP_BASE_URL=
+NODE_ENV=production

ui/package.json

@@ -4,24 +4,27 @@
 	"private": true,
 	"scripts": {
 		"build": "vue-cli-service build --modern",
-		"build.app": "vue-cli-service build --dest '../../databox-app/www' 'src/app.js'"
+		"watch": "vue-cli-service build --modern --watch",
+		"build.app": "vue-cli-service build --mode mobile --dest '../../databox-app/www' 'src/app.js'",
+		"watch.app": "vue-cli-service build --watch --mode mobile --dest '../../databox-app/www' 'src/app.js'",
+		"run.android": "vue-cli-service build --mode mobile --dest '../../databox-app/www' 'src/app.js' && cd ../../databox-app && cordova run android"
 	},
 	"dependencies": {
-		"material-components-web": "^0.41.1",
+		"material-components-web": "^0.44.1",
 		"node-sass": "^4.12.0",
 		"npm": "^6.11.3",
-		"register-service-worker": "^1.5.2",
-		"sass-loader": "^7.1.0",
-		"vue": "^2.5.17",
-		"vue-async-computed": "^3.5.0",
-		"vue-router": "^3.0.1"
+		"register-service-worker": "^1.6.2",
+		"sass-loader": "^8.0.0",
+		"vue": "^2.6.10",
+		"vue-async-computed": "^3.7.0",
+		"vue-router": "^3.1.3",
+		"vue-template-compiler": "^2.6.10"
 	},
 	"devDependencies": {
-		"@vue/cli-plugin-babel": "^3.1.1",
-		"@vue/cli-plugin-eslint": "^3.1.5",
-		"@vue/cli-plugin-pwa": "^3.1.2",
-		"@vue/cli-service": "^3.1.4",
-		"vue-template-compiler": "^2.5.17"
+		"@vue/cli-plugin-babel": "^3.3.0",
+		"@vue/cli-plugin-eslint": "^3.3.0",
+		"@vue/cli-plugin-pwa": "^3.3.0",
+		"@vue/cli-service": "^3.3.0"
 	},
 	"eslintConfig": {
 		"root": true,

ui/public/index.html

@@ -12,6 +12,7 @@
 	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" >
 	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
 	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:300,400,500">
+	<script src="cordova.js"></script>
 </head>
 <body>
 <noscript>

ui/src/App.vue

@@ -1,14 +1,14 @@
 <template>
 	<div id="app">
-		<header class="mdc-top-app-bar" v-if="authenticated">
+		<header class="mdc-top-app-bar" v-if="title !== null">
 			<div class="mdc-top-app-bar__row">
 				<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
 					<a v-if="backRoute" v-on:click="back" class="material-icons mdc-top-app-bar__navigation-icon">
 						arrow_back
 					</a>
 					<span class="mdc-top-app-bar__title">{{ title }}</span>
 				</section>
-				<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end">
+				<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" v-if="authenticated">
 					<router-view name="toolbar" style="display: flex"></router-view>
 					<div class="mdc-menu-surface--anchor">
 						<div class="material-icons mdc-top-app-bar__action-item" @click="openNotifications">
@@ -30,10 +30,10 @@
 
 		<div class="mdc-top-app-bar--fixed-adjust">
 			<div v-if="connecting" id="content">
-				<Spinner />
+				<Spinner/>
 			</div>
 			<div v-else id="content">
-				<router-view />
+				<router-view/>
 			</div>
 		</div>
 	</div>
@@ -42,6 +42,9 @@
 <script>
 	import {MDCMenuSurface} from '@material/menu-surface';
 	import Spinner from "./components/Spinner";
+	import testdata from './testData/status.json'
+
+	const DATABOX_URL = "databoxURL";
 
 	export default {
 		name: 'app',
@@ -50,23 +53,32 @@
 			return {
 				title: 'Databox Dashboard',
 				backRoute: null,
-				databoxUrl: "localhost",
+				databoxUrl: '',
 				connecting: true,
 				authenticated: false,
 				notifications: [],
 				notificationMenu: null,
 			}
 		},
 		created() {
-			if (localStorage.getItem("databoxUrl") !== null) {
-				this.databoxUrl = localStorage.getItem("databoxUrl");
+			const storedUrl = localStorage.getItem(DATABOX_URL);
+			if (storedUrl !== null) {
+				this.databoxUrl = storedUrl;
 			} else if (!this.isMobile) {
 				this.databoxUrl = window.location.hostname;
 			}
 			this.apiRequest('/core-ui/ui/api/containerStatus', {})
 				.then(() => {
 					this.connecting = false;
 					this.authenticated = true;
+					//this.$router.replace("/");
+				})
+				.catch((error) => {
+					console.log("Connect Failed");
+					console.log(error);
+					this.connecting = false;
+					this.authenticated = false;
+					this.$router.replace("/login");
 				})
 		},
 		updated() {
@@ -78,11 +90,15 @@
 		},
 		watch: {
 			title(val) {
-				document.title = val
+				if (val) {
+					document.title = val
+				} else {
+					document.title = "Databox Dashboard"
+				}
 			}
 		},
 		methods: {
-			apiRequest: function (url, cannedData, opts = {}) {
+			request(url, opts = {}) {
 				opts.credentials = 'include';
 				opts.mode = 'cors';
 				return fetch('https://' + this.databoxUrl + url, opts)
@@ -93,61 +109,83 @@
 							return response;
 						}
 					})
-					.then((response) => {
-						return response.json()
-					})
 					.catch((err) => {
 						this.connecting = false;
-						if (err.status === 401 || err.status === 404) {
+						if (err.status === 401) {
 							this.authenticated = false;
 							this.$router.replace("/login");
 							throw err;
-						} else if (this.isDev) {
-							return cannedData
 						} else {
 							throw err;
 						}
 					});
 			},
+			apiRequest(url, cannedData, opts = {}) {
+				opts.credentials = 'include';
+				opts.mode = 'cors';
+				return this.request(url, opts)
+					.then((response) => {
+						return response.json()
+					})
+					.catch((error) => {
+						if (this.isDev) {
+							return cannedData
+						} else {
+							throw error
+						}
+					});
+			},
+			async installAndWait(manifest) {
+				await this.apiRequest('/core-ui/ui/api/install', {}, {
+					method: 'POST',
+					headers: {
+						'Accept': 'application/json, text/plain, */*',
+						'Content-Type': 'application/json'
+					},
+					body: JSON.stringify({
+						manifest: manifest,
+					}),
+				});
+				await this.waitForInstall(manifest.name);
+			},
+			async waitForInstall(appName) {
+				while (true) {
+					let json = await this.apiRequest('/core-ui/ui/api/containerStatus', testdata);
+					for (const app of json) {
+						if (app.name === appName) {
+							return;
+						}
+					}
+					await new Promise((resolve) => {
+						setTimeout(() => resolve(), 2000)
+					});
+				}
+			},
 			logout() {
 				this.authenticated = false;
 				this.$router.replace("/login");
 			},
 			login(url, password) {
 				this.databoxUrl = url;
-				localStorage.setItem('databoxURL', url);
-				return fetch('https://' + url + '/core-ui/ui/api/connect', {
+				localStorage.setItem(DATABOX_URL, url);
+				return this.request('/core-ui/ui/api/connect', {
 					method: "GET",
 					credentials: "include",
 					mode: "cors",
 					headers: {
 						'Authorization': "Token " + password,
 					},
 				})
-					.then((response) => {
-						if (!response.ok) {
-							throw {message: response.statusText, status: response.status};
-						} else {
-							return response;
-						}
-					})
-					.then((response) => {
-						return response.text()
-					})
-					.then((body) => {
-						if (body === "connected") {
-							this.authenticated = true;
-							localStorage.setItem('databoxAuthenticated', 'true');
-							this.$router.replace("/")
-						} else {
-							return Promise.reject("Auth failed")
-						}
+					.then(() => {
+						this.authenticated = true;
+						this.$router.replace("/")
 					})
 					.catch((error) => {
 						if (this.isDev) {
 							this.authenticated = true;
 							this.$router.replace("/")
 						} else {
+							console.log(error);
 							this.authenticated = false;
 							throw error;
 						}
@@ -157,7 +195,7 @@
 				this.$router.push(this.backRoute);
 			},
 			openNotifications() {
-				if(this.notificationMenu != null && this.notifications.length > 0) {
+				if (this.notificationMenu != null && this.notifications.length > 0) {
 					this.notificationMenu.open = true;
 				}
 			}
@@ -177,6 +215,7 @@
 	@import "~@material/menu-surface/mdc-menu-surface";
 	@import "~@material/select/mdc-select";
 	@import "~@material/textfield/mdc-text-field";
+	@import "~@material/typography/mdc-typography";
 	@import "~@material/theme/mdc-theme";
 	@import "~@material/top-app-bar/mdc-top-app-bar";