JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/multinode: node selection component added

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

Change-Id: I87fd1bf6c6a59d895b14524ab7c0fa5d80955cd5
This commit is contained in:
NickolaiYurchenko 2021-06-02 19:46:39 +03:00
parent 4469d229f8
commit 49662e98c2
12 changed files with 180 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/multinode/src/app/components/common/NodeOptions.vue
View File

@ -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;

42
web/multinode/src/app/components/common/NodeSelectionDropdown.vue Normal file
View File

@ -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>

3
web/multinode/src/app/components/common/SatelliteSelectionDropdown.vue
View File

@ -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 {
/**

4
web/multinode/src/app/components/common/VDropdown.vue
View File

@ -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 {

11
web/multinode/src/app/components/common/VModal.vue
View File

@ -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>

6
web/multinode/src/app/components/modals/DeleteNode.vue
View File

@ -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> {

7
web/multinode/src/app/components/modals/UpdateName.vue
View File

@ -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;

2
web/multinode/src/app/components/navigation/NavigationArea.vue
View File

@ -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),
];

3
web/multinode/src/app/router/index.ts
View File

@ -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,

23
web/multinode/src/app/store/nodes.ts
View File

@ -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);
}
}

72
web/multinode/src/app/views/bandwidth/BandwidthPage.vue Normal file
View File

@ -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>

16
web/multinode/tests/unit/store/nodes.spec.ts
View File

@ -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);
});
});