web/multinode/app: initial state design

Change-Id: If182d1c173e99be1df18daf5cc7083a0d188b3cb

multinode/nodes/nodes.go

@@ -33,10 +33,10 @@ type DB interface {
 // ErrNoNode is a special error type that indicates about absence of node in NodesDB.
 var ErrNoNode = errs.Class("no such node")
 
-// Node is a representation of storeganode, that SNO could add to the Multinode Dashboard.
+// Node is a representation of storagenode, that SNO could add to the Multinode Dashboard.
 type Node struct {
 	ID storj.NodeID
-	// APISecret is a secret issued by storagenode, that will be main auth mechanism in MND <-> SNO api. is a secret issued by storagenode, that will be main auth mechanism in MND <-> SNO api.
+	// APISecret is a secret issued by storagenode, that will be main auth mechanism in MND <-> SNO api.
 	APISecret     []byte
 	PublicAddress string
 	Name          string

web/multinode/package-lock.json

@@ -13257,6 +13257,11 @@
         "vue-parser": "^1.1.6"
       }
     },
+    "vuex": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.0.tgz",
+      "integrity": "sha512-W74OO2vCJPs9/YjNjW8lLbj+jzT24waTo2KShI8jLvJW8OaIkgb3wuAMA7D+ZiUxDOx3ubwSZTaJBip9G8a3aQ=="
+    },
     "watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",

web/multinode/package.json

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

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

@@ -24,7 +24,7 @@ export class Route {
     public readonly meta?: Metadata;
 
     /**
-     * default contructor.
+     * default constructor.
      * @param path - route path.
      * @param name - name of the route, needed fot identifying route by name.
      * @param component - component mapped to route.

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

@@ -0,0 +1,36 @@
+// Copyright (C) 2020 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+import Vuex, { ModuleTree, Store, StoreOptions } from 'vuex';
+
+import { NodesModule, NodesState } from '@/app/store/nodes';
+
+/**
+ * RootState is a representation of global state.
+ */
+export class RootState {
+    nodes: NodesState;
+}
+
+/**
+ * MultinodeStoreOptions contains all needed data for store creation.
+ */
+class MultinodeStoreOptions implements StoreOptions<RootState> {
+    public readonly strict: boolean;
+    public readonly state: RootState;
+    public readonly modules: ModuleTree<RootState>;
+
+    public constructor(nodes: NodesModule) {
+        this.strict = true;
+        this.state = {
+            nodes: nodes.state,
+        };
+        this.modules = {
+            nodes,
+        };
+    }
+}
+
+export const store: Store<RootState> = new Vuex.Store<RootState>(
+    new MultinodeStoreOptions(new NodesModule()),
+);

web/multinode/src/app/store/nodes.ts

@@ -0,0 +1,54 @@
+// Copyright (C) 2020 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+import { ActionContext, ActionTree, GetterTree, Module, MutationTree } from 'vuex';
+
+import { RootState } from '@/app/store/index';
+import { Node } from '@/nodes';
+
+/**
+ * NodesState is a representation of nodes module state.
+ */
+export class NodesState {
+    public nodes: Node[];
+}
+
+/**
+ * NodesModule is a part of a global store that encapsulates all nodes related logic.
+ */
+export class NodesModule implements Module<NodesState, RootState> {
+    public readonly namespaced: boolean;
+    public readonly state: NodesState;
+    public readonly getters?: GetterTree<NodesState, RootState>;
+    public readonly actions: ActionTree<NodesState, RootState>;
+    public readonly mutations: MutationTree<NodesState>;
+
+    public constructor() { // here should services, apis, 3d party dependencies.
+        this.namespaced = true;
+
+        this.mutations = {
+            populate: this.populate,
+        };
+
+        this.actions = {
+            fetch: this.fetch,
+        };
+    }
+
+    /**
+     * populate mutation will set state nodes with new nodes array.
+     * @param state - state of the module.
+     * @param nodes - nodes to save in state. all users nodes.
+     */
+    public populate(state: NodesState, nodes: Node[]): void {
+        this.state.nodes = nodes; // or nodes.map()?
+    }
+
+    /**
+     * fetch action loads all nodes.
+     * @param ctx - context of the Vuex action.
+     */
+    public async fetch(ctx: ActionContext<NodesState, RootState>): Promise<void> {
+        await new Promise(() => null);
+    }
+}

web/multinode/src/main.ts

@@ -3,16 +3,20 @@
 
 import Vue from 'vue';
 import Router from 'vue-router';
+import Vuex from 'vuex';
 
 import App from '@/app/App.vue';
 import { router } from '@/app/router';
+import { store } from '@/app/store';
 
 Vue.config.productionTip = false;
 
 Vue.use(Router);
+Vue.use(Vuex);
 
 const app = new Vue({
     router,
+    store,
     render: (h) => h(App),
 });
 

web/multinode/src/nodes/index.ts

@@ -0,0 +1,15 @@
+// Copyright (C) 2020 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+/**
+ * Node is a representation of storagenode, that SNO could add to the Multinode Dashboard.
+ */
+export class Node {
+    public id: string; // TODO: create ts analog of storj.NodeID;
+    /**
+     * apiSecret is a secret issued by storagenode, that will be main auth mechanism in MND <-> SNO api.
+     */
+    public apiSecret: string; // TODO: change to Uint8Array[];
+    public publicAddress: string;
+    public name: string;
+}