From 49662e98c28c7d38937edbc43971b3f97f509378 Mon Sep 17 00:00:00 2001
From: NickolaiYurchenko <nickolai.yurchenko@gmail.com>
Date: Wed, 2 Jun 2021 19:46:39 +0300
Subject: [PATCH] web/multinode: node selection component added

node selection dropdown component, fixed minor bugs, bandwidth route added

Change-Id: I87fd1bf6c6a59d895b14524ab7c0fa5d80955cd5
---
 .../src/app/components/common/NodeOptions.vue | 14 ++--
 .../common/NodeSelectionDropdown.vue          | 42 +++++++++++
 .../common/SatelliteSelectionDropdown.vue     |  3 +-
 .../src/app/components/common/VDropdown.vue   |  4 +-
 .../src/app/components/common/VModal.vue      | 11 ++-
 .../src/app/components/modals/DeleteNode.vue  |  6 +-
 .../src/app/components/modals/UpdateName.vue  |  7 +-
 .../components/navigation/NavigationArea.vue  |  2 +-
 web/multinode/src/app/router/index.ts         |  3 +
 web/multinode/src/app/store/nodes.ts          | 23 ++++++
 .../src/app/views/bandwidth/BandwidthPage.vue | 72 +++++++++++++++++++
 web/multinode/tests/unit/store/nodes.spec.ts  | 16 +++++
 12 files changed, 180 insertions(+), 23 deletions(-)
 create mode 100644 web/multinode/src/app/components/common/NodeSelectionDropdown.vue
 create mode 100644 web/multinode/src/app/views/bandwidth/BandwidthPage.vue

diff --git a/web/multinode/src/app/components/common/NodeOptions.vue b/web/multinode/src/app/components/common/NodeOptions.vue
index 3dfb8426c..38f44cfe3 100644
--- a/web/multinode/src/app/components/common/NodeOptions.vue
+++ b/web/multinode/src/app/components/common/NodeOptions.vue
@@ -2,12 +2,12 @@
 // See LICENSE for copying information.
 
 <template>
-    <div class="options-button" @click.stop="toggleOptions">
+    <div class="options-button" @click.stop="openOptions">
         <more-icon />
         <div class="options" v-if="areOptionsShown" v-click-outside="closeOptions">
             <div @click.stop="onCopy" class="options__item">Copy Node ID</div>
-            <delete-node :node-id="id" />
-            <update-name :node-id="id" />
+            <delete-node :node-id="id" @closeOptions="closeOptions" />
+            <update-name :node-id="id" @closeOptions="closeOptions" />
         </div>
     </div>
 </template>
@@ -33,8 +33,8 @@ export default class NodeOptions extends Vue {
 
     public areOptionsShown: boolean = false;
 
-    public toggleOptions(): void {
-        this.areOptionsShown = !this.areOptionsShown;
+    public openOptions(): void {
+        this.areOptionsShown = true;
     }
 
     public closeOptions(): void {
@@ -75,8 +75,8 @@ export default class NodeOptions extends Vue {
 
     .options {
         position: absolute;
-        top: 16px;
-        right: 55px;
+        top: 0;
+        right: 45px;
         width: 140px;
         height: auto;
         background: white;
diff --git a/web/multinode/src/app/components/common/NodeSelectionDropdown.vue b/web/multinode/src/app/components/common/NodeSelectionDropdown.vue
new file mode 100644
index 000000000..ed473c487
--- /dev/null
+++ b/web/multinode/src/app/components/common/NodeSelectionDropdown.vue
@@ -0,0 +1,42 @@
+// Copyright (C) 2021 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <v-dropdown :options="nodes" />
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+import VDropdown, { Option } from '@/app/components/common/VDropdown.vue';
+
+import { Node } from '@/nodes';
+
+@Component({
+    components: { VDropdown },
+})
+export default class NodeSelectionDropdown extends Vue {
+    /**
+     * List of nodes from store.
+     */
+    public get nodes(): Option[] {
+        const nodes: Node[] = this.$store.state.nodes.nodes;
+
+        const options: Option[] = nodes.map(
+            (node: Node) => {
+                return new Option(node.displayedName, () => this.onNodeClick(node.id));
+            },
+        );
+
+        return [ new Option('All Nodes', () => this.onNodeClick()), ...options ];
+    }
+
+    /**
+     * Callback for node click.
+     * @param nodeId - node id to select
+     */
+    public async onNodeClick(nodeId: string = ''): Promise<void> {
+        await this.$store.dispatch('nodes/selectNode', nodeId);
+    }
+}
+</script>
diff --git a/web/multinode/src/app/components/common/SatelliteSelectionDropdown.vue b/web/multinode/src/app/components/common/SatelliteSelectionDropdown.vue
index 94714056a..b865b1eed 100644
--- a/web/multinode/src/app/components/common/SatelliteSelectionDropdown.vue
+++ b/web/multinode/src/app/components/common/SatelliteSelectionDropdown.vue
@@ -9,12 +9,11 @@
 import { Component, Vue } from 'vue-property-decorator';
 
 import VDropdown, { Option } from '@/app/components/common/VDropdown.vue';
-import NodesTable from '@/app/components/myNodes/tables/NodesTable.vue';
 
 import { NodeURL } from '@/nodes';
 
 @Component({
-    components: { VDropdown, NodesTable },
+    components: { VDropdown },
 })
 export default class SatelliteSelectionDropdown extends Vue {
     /**
diff --git a/web/multinode/src/app/components/common/VDropdown.vue b/web/multinode/src/app/components/common/VDropdown.vue
index 83f9e24dd..6805e84e4 100644
--- a/web/multinode/src/app/components/common/VDropdown.vue
+++ b/web/multinode/src/app/components/common/VDropdown.vue
@@ -108,7 +108,7 @@ export default class VDropdown extends Vue {
             position: absolute;
             top: 52px;
             left: 0;
-            width: 300px;
+            width: 100%;
             border: 1px solid var(--c-gray--light);
             border-radius: 6px;
             overflow: hidden;
@@ -130,6 +130,7 @@ export default class VDropdown extends Vue {
                 width: 100% !important;
                 cursor: pointer;
                 border-bottom: 1px solid var(--c-gray--light);
+                box-sizing: border-box;
 
                 &:hover {
                     background: var(--c-background);
@@ -142,6 +143,7 @@ export default class VDropdown extends Vue {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
+        margin-right: 5px;
     }
 
     ::-webkit-scrollbar {
diff --git a/web/multinode/src/app/components/common/VModal.vue b/web/multinode/src/app/components/common/VModal.vue
index 780034a21..1373edf80 100644
--- a/web/multinode/src/app/components/common/VModal.vue
+++ b/web/multinode/src/app/components/common/VModal.vue
@@ -2,10 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <div
-        class="modal-wrap"
-        @click.self="$emit('close')"
-    >
+    <div class="modal-wrap" @click.self.stop="close">
         <div class="modal">
             <div class="modal__header">
                 <slot name="header"></slot>
@@ -16,7 +13,7 @@
             <div class="modal__footer">
                 <slot name="footer"></slot>
             </div>
-            <div class="modal__cross" @click="$emit('close')">
+            <div class="modal__cross" @click.stop="close">
                 <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
                     <path d="M24 8L8 24" stroke="#676F84" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
                     <path d="M8 8L24 24" stroke="#676F84" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
@@ -31,7 +28,9 @@ import { Component, Vue } from 'vue-property-decorator';
 
 @Component
 export default class VModal extends Vue {
-
+    public close(): void {
+        this.$emit('onClose');
+    }
 }
 </script>
 
diff --git a/web/multinode/src/app/components/modals/DeleteNode.vue b/web/multinode/src/app/components/modals/DeleteNode.vue
index c72d40674..081e163a7 100644
--- a/web/multinode/src/app/components/modals/DeleteNode.vue
+++ b/web/multinode/src/app/components/modals/DeleteNode.vue
@@ -3,8 +3,8 @@
 
 <template>
     <div class="delete-node">
-        <div @click="openModal" class="delete-node__button">Delete Node</div>
-        <v-modal v-if="isModalShown" @close="closeModal">
+        <div @click.stop="openModal" class="delete-node__button">Delete Node</div>
+        <v-modal v-if="isModalShown" @onClose="closeModal">
             <h2 slot="header">Delete this node?</h2>
             <div class="delete-node__body" slot="body">
                 <div class="delete-node__body__node-id-container">
@@ -17,7 +17,6 @@
             </div>
         </v-modal>
     </div>
-
 </template>
 
 <script lang="ts">
@@ -47,6 +46,7 @@ export default class AddNewNode extends Vue {
     public closeModal(): void {
         this.isLoading = false;
         this.isModalShown = false;
+        this.$emit('closeOptions');
     }
 
     public async onDelete(): Promise<void> {
diff --git a/web/multinode/src/app/components/modals/UpdateName.vue b/web/multinode/src/app/components/modals/UpdateName.vue
index 17b42fd86..a39bcffa8 100644
--- a/web/multinode/src/app/components/modals/UpdateName.vue
+++ b/web/multinode/src/app/components/modals/UpdateName.vue
@@ -3,8 +3,8 @@
 
 <template>
     <div class="update-name">
-        <div @click="openModal" class="update-name__button">Update Name</div>
-        <v-modal v-if="isModalShown" @close="closeModal">
+        <div @click.stop="openModal" class="update-name__button">Update Name</div>
+        <v-modal v-if="isModalShown" @onClose="closeModal">
             <h2 slot="header">Set name for node</h2>
             <div class="update-name__body" slot="body">
                 <div class="update-name__body__node-id-container">
@@ -67,6 +67,7 @@ export default class AddNewNode extends Vue {
     public closeModal(): void {
         this.isLoading = false;
         this.isModalShown = false;
+        this.$emit('closeOptions');
     }
 
     public async onSetName(): Promise<void> {
@@ -122,7 +123,7 @@ export default class AddNewNode extends Vue {
                 box-sizing: border-box;
                 padding: 10px 12px;
                 font-family: 'font_regular', sans-serif;
-                font-size: 14px;
+                font-size: 13px;
                 color: var(--c-title);
                 background: var(--c-background);
                 border-radius: 32px;
diff --git a/web/multinode/src/app/components/navigation/NavigationArea.vue b/web/multinode/src/app/components/navigation/NavigationArea.vue
index eddab47c4..92617160e 100644
--- a/web/multinode/src/app/components/navigation/NavigationArea.vue
+++ b/web/multinode/src/app/components/navigation/NavigationArea.vue
@@ -56,7 +56,7 @@ export default class NavigationArea extends Vue {
     public readonly navigation: NavigationLink[] = [
         new NavigationLink('My Nodes', RouterConfig.MyNodes.path, MyNodesIcon),
         new NavigationLink('Payouts', RouterConfig.Payouts.with(RouterConfig.PayoutsSummary).path, PayoutsIcon),
-        new NavigationLink('Bandwidth & Disk', '/traffic', TrafficIcon),
+        new NavigationLink(RouterConfig.Bandwidth.name, RouterConfig.Bandwidth.path, TrafficIcon),
         new NavigationLink('Reputation', '/reputation', ReputationIcon),
         new NavigationLink('Notifications', '/notifications', NotificationIcon),
     ];
diff --git a/web/multinode/src/app/router/index.ts b/web/multinode/src/app/router/index.ts
index 7470d2d46..82c75172e 100644
--- a/web/multinode/src/app/router/index.ts
+++ b/web/multinode/src/app/router/index.ts
@@ -5,6 +5,7 @@ import Router, { RouterMode } from 'vue-router';
 import { Component } from 'vue-router/types/router';
 
 import AddFirstNode from '@/app/views/AddFirstNode.vue';
+import BandwidthPage from '@/app/views/bandwidth/BandwidthPage.vue';
 import Dashboard from '@/app/views/Dashboard.vue';
 import MyNodes from '@/app/views/MyNodes.vue';
 import PayoutsByNode from '@/app/views/PayoutsByNode.vue';
@@ -77,6 +78,7 @@ export class Config {
     public static Payouts: Route = new Route('/payouts', 'Payouts', PayoutsRoot);
     public static PayoutsSummary: Route = new Route('summary', 'PayoutsSummary', PayoutsPage);
     public static PayoutsByNode: Route = new Route('by-node/:id', 'PayoutsByNode', PayoutsByNode);
+    public static Bandwidth: Route = new Route('/bandwidth', 'Bandwidth & Disk', BandwidthPage);
 
     public static mode: RouterMode = 'history';
     public static routes: Route[] = [
@@ -86,6 +88,7 @@ export class Config {
                 Config.PayoutsByNode,
                 Config.PayoutsSummary,
             ]),
+            Config.Bandwidth,
         ]),
         Config.Welcome,
         Config.AddFirstNode,
diff --git a/web/multinode/src/app/store/nodes.ts b/web/multinode/src/app/store/nodes.ts
index f65e38eb4..9bbe806a5 100644
--- a/web/multinode/src/app/store/nodes.ts
+++ b/web/multinode/src/app/store/nodes.ts
@@ -13,6 +13,7 @@ import { Nodes } from '@/nodes/service';
 export class NodesState {
     public nodes: Node[] = [];
     public selectedSatellite: NodeURL | null = null;
+    public selectedNode: Node | null = null;
     public trustedSatellites: NodeURL[] = [];
 }
 
@@ -37,6 +38,7 @@ export class NodesModule implements Module<NodesState, RootState> {
             populate: this.populate,
             saveTrustedSatellites: this.saveTrustedSatellites,
             setSelectedSatellite: this.setSelectedSatellite,
+            setSelectedNode: this.setSelectedNode,
         };
         this.actions = {
             fetch: this.fetch.bind(this),
@@ -44,6 +46,7 @@ export class NodesModule implements Module<NodesState, RootState> {
             delete: this.delete.bind(this),
             trustedSatellites: this.trustedSatellites.bind(this),
             selectSatellite: this.selectSatellite.bind(this),
+            selectNode: this.selectNode.bind(this),
             updateName: this.updateName.bind(this),
         };
     }
@@ -75,6 +78,15 @@ export class NodesModule implements Module<NodesState, RootState> {
         state.selectedSatellite = state.trustedSatellites.find((satellite: NodeURL) => satellite.id === satelliteId) || null;
     }
 
+    /**
+     * setSelectedNode mutation will set selected node to store.
+     * @param state
+     * @param nodeId - node id to select.
+     */
+    public setSelectedNode(state: NodesState, nodeId: string | null) {
+        state.selectedNode = state.nodes.find((node: Node) => node.id === nodeId) || null;
+    }
+
     /**
      * fetch action loads all nodes information.
      * @param ctx - context of the Vuex action.
@@ -134,4 +146,15 @@ export class NodesModule implements Module<NodesState, RootState> {
 
         await this.fetch(ctx);
     }
+
+    /**
+     * Saves node as selected node.
+     * @param ctx - context of the Vuex action.
+     * @param nodeId
+     */
+    public async selectNode(ctx: ActionContext<NodesState, RootState>, nodeId: string | null): Promise<void> {
+        ctx.commit('setSelectedNode', nodeId);
+
+        await this.fetch(ctx);
+    }
 }
diff --git a/web/multinode/src/app/views/bandwidth/BandwidthPage.vue b/web/multinode/src/app/views/bandwidth/BandwidthPage.vue
new file mode 100644
index 000000000..2d171d623
--- /dev/null
+++ b/web/multinode/src/app/views/bandwidth/BandwidthPage.vue
@@ -0,0 +1,72 @@
+// Copyright (C) 2021 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class="bandwidth">
+        <h1 class="bandwidth__title">Bandwidth & Disk</h1>
+        <div class="bandwidth__dropdowns">
+            <node-selection-dropdown />
+            <satellite-selection-dropdown />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+import NodeSelectionDropdown from '@/app/components/common/NodeSelectionDropdown.vue';
+import SatelliteSelectionDropdown from '@/app/components/common/SatelliteSelectionDropdown.vue';
+
+import { UnauthorizedError } from '@/api';
+
+@Component({
+    components: {
+        NodeSelectionDropdown,
+        SatelliteSelectionDropdown,
+    },
+})
+export default class BandwidthPage extends Vue {
+    public async mounted(): Promise<void> {
+        try {
+            await this.$store.dispatch('nodes/fetch');
+        } catch (error) {
+            if (error instanceof UnauthorizedError) {
+                // TODO: redirect to login screen.
+            }
+
+            // TODO: notify error
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+    .bandwidth {
+        box-sizing: border-box;
+        padding: 60px;
+        height: 100%;
+        overflow-y: auto;
+
+        &__title {
+            font-family: 'font_bold', sans-serif;
+            font-size: 32px;
+            color: var(--c-title);
+            margin-bottom: 44px;
+        }
+
+        &__dropdowns {
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            width: 70%;
+
+            & > *:first-of-type {
+                margin-right: 20px;
+            }
+
+            .dropdown {
+                max-width: unset;
+            }
+        }
+    }
+</style>
diff --git a/web/multinode/tests/unit/store/nodes.spec.ts b/web/multinode/tests/unit/store/nodes.spec.ts
index 6d749105e..bdeb71526 100644
--- a/web/multinode/tests/unit/store/nodes.spec.ts
+++ b/web/multinode/tests/unit/store/nodes.spec.ts
@@ -38,6 +38,14 @@ describe('mutations', () => {
 
         expect(state.nodes.selectedSatellite.address).toBe(satellite.address);
     });
+
+    it('saves selected node', () => {
+        expect(state.nodes.selectedNode).toBe(null);
+
+        store.commit('nodes/setSelectedNode', node.id);
+
+        expect(state.nodes.selectedNode.id).toBe(node.id);
+    });
 });
 
 describe('actions', () => {
@@ -173,4 +181,12 @@ describe('actions', () => {
         expect(state.nodes.selectedSatellite.address).toBe(satellite.address);
         expect(state.nodes.nodes.length).toBe(1);
     });
+
+    it('success set selected node', async () => {
+        store.commit('nodes/populate', nodes);
+
+        await store.dispatch('nodes/selectNode', node.id);
+
+        expect(state.nodes.selectedNode.id).toBe(node.id);
+    });
 });