web/multinode: base router implemented

Change-Id: I831d087a87e05f6055646419b14d15e34d5de6b1

web/multinode/package-lock.json

@@ -13123,6 +13123,11 @@
       "resolved": "https://registry.npmjs.org/vue-property-decorator/-/vue-property-decorator-9.1.2.tgz",
       "integrity": "sha512-xYA8MkZynPBGd/w5QFJ2d/NM0z/YeegMqYTphy7NJQXbZcuU6FC6AOdUAcy4SXP+YnkerC6AfH+ldg7PDk9ESQ=="
     },
+    "vue-router": {
+      "version": "3.4.9",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.9.tgz",
+      "integrity": "sha512-CGAKWN44RqXW06oC+u4mPgHLQQi2t6vLD/JbGRDAXm0YpMv0bgpKuU5bBd7AvMgfTz9kXVRIWKHqRwGEb8xFkA=="
+    },
     "vue-style-loader": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",

web/multinode/package.json

@@ -11,7 +11,8 @@
   "dependencies": {
     "vue": "2.6.11",
     "vue-class-component": "7.2.6",
-    "vue-property-decorator": "9.1.2"
+    "vue-property-decorator": "9.1.2",
+    "vue-router": "3.4.9"
   },
   "devDependencies": {
     "@babel/core": "7.12.10",

web/multinode/src/app/App.vue

@@ -3,6 +3,7 @@
 
 <template>
   <div id="app">
+    <router-view/>
   </div>
 </template>
 

web/multinode/src/app/router/index.ts

@@ -0,0 +1,55 @@
+// Copyright (C) 2020 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+import Router, { RouterMode } from 'vue-router';
+import { Component } from 'vue-router/types/router';
+
+import Dashboard from '@/app/views/Dashboard.vue';
+
+/**
+ * Metadata holds arbitrary information to routes like transition names, who can access the route, etc.
+ */
+class Metadata {
+    public requiresAuth: boolean;
+}
+
+/**
+ * Route holds all needed information to fill up router config.
+ */
+export class Route {
+    public readonly path: string;
+    public readonly name: string;
+    public readonly component: Component;
+    public readonly children?: Route[];
+    public readonly meta?: Metadata;
+
+    /**
+     * default contructor.
+     * @param path - route path.
+     * @param name - name of the route, needed fot identifying route by name.
+     * @param component - component mapped to route.
+     * @param children - all nested components of current route.
+     * @param meta - arbitrary information to routes like transition names, who can access the route, etc.
+     */
+    public constructor(path: string, name: string, component: Component, children: Route[] | undefined = undefined, meta: Metadata | undefined = undefined) {
+        this.path = path;
+        this.name = name;
+        this.component = component;
+        this.children = children;
+        this.meta = meta;
+    }
+}
+
+/**
+ * Config contains configuration of all available routes for a Multinode Dashboard router.
+ */
+export class Config {
+    public static Root: Route = new Route('/', 'Root', Dashboard, undefined, {requiresAuth: true});
+
+    public mode: RouterMode = 'history';
+    public static routes: Route[] = [
+        Config.Root,
+    ];
+}
+
+export const router = new Router(Config);

web/multinode/src/app/views/Dashboard.vue

@@ -0,0 +1,15 @@
+// Copyright (C) 2020 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+  <div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+@Component
+export default class Dashboard extends Vue {}
+</script>
+

web/multinode/src/main.ts

@@ -2,13 +2,18 @@
 // See LICENSE for copying information.
 
 import Vue from 'vue';
+import Router from 'vue-router';
 
 import App from '@/app/App.vue';
+import { router } from '@/app/router';
 
 Vue.config.productionTip = false;
 
-new Vue({
-    // TODO: add router,
+Vue.use(Router);
+
+const app = new Vue({
+    router,
     render: (h) => h(App),
-    // TODO: add store,
-}).$mount('#app');
+});
+
+app.$mount('#app');