diff --git a/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.html b/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.html index 0daae8ee4..f581f016e 100644 --- a/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.html +++ b/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.html @@ -62,6 +62,15 @@ {{ node.local_pk }} + diff --git a/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.scss b/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.scss index 10ac3969f..fd18e9798 100644 --- a/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.scss +++ b/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.scss @@ -37,15 +37,16 @@ .actions { text-align: right; - width: 110px; + width: 150px; button { width: 32px; height: 32px; line-height: 24px; - - &:last-child { - margin-left: 15px; + margin-left: 5px; + + .small-icon { + font-size: 15px; } } } diff --git a/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.ts b/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.ts index 8c2c18ab2..812c95bd6 100644 --- a/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.ts +++ b/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.ts @@ -16,6 +16,7 @@ import { SelectColumnComponent, SelectedColumn } from '../../layout/select-colum import GeneralUtils from 'src/app/utils/generalUtils'; import { SelectOptionComponent, SelectableOption } from '../../layout/select-option/select-option.component'; import { processServiceError } from 'src/app/utils/errors'; +import { ClipboardService } from 'src/app/services/clipboard.service'; /** * List of the columns that can be used to sort the data. @@ -71,6 +72,7 @@ export class NodeListComponent implements OnInit, OnDestroy { private ngZone: NgZone, private snackbarService: SnackbarService, private sidenavService: SidenavService, + private clipboardService: ClipboardService ) { // Data for populating the tab bar. this.tabsData = [ @@ -306,24 +308,42 @@ export class NodeListComponent implements OnInit, OnDestroy { showOptionsDialog(node: Node) { const options: SelectableOption[] = [ { - icon: 'short_text', - label: 'edit-label.title', + icon: 'filter_none', + label: 'nodes.copy-key', }, { - icon: 'close', - label: 'nodes.delete-node', + icon: 'short_text', + label: 'edit-label.title', } ]; + if (!node.online) { + options.push({ + icon: 'close', + label: 'nodes.delete-node', + }); + } + SelectOptionComponent.openDialog(this.dialog, options).afterClosed().subscribe((selectedOption: number) => { if (selectedOption === 1) { - this.showEditLabelDialog(node); + if (this.clipboardService.copy(node.local_pk)) { + this.onCopyToClipboardClicked(); + } } else if (selectedOption === 2) { + this.showEditLabelDialog(node); + } else if (selectedOption === 3) { this.deleteNode(node); } }); } + /** + * Called after copying the public key of a node. + */ + onCopyToClipboardClicked() { + this.snackbarService.showDone('copy.copied'); + } + /** * Opens the modal window for changing the label of a node. */ diff --git a/static/skywire-manager-src/src/assets/i18n/en.json b/static/skywire-manager-src/src/assets/i18n/en.json index 74f40df3b..7f2695550 100644 --- a/static/skywire-manager-src/src/assets/i18n/en.json +++ b/static/skywire-manager-src/src/assets/i18n/en.json @@ -92,6 +92,7 @@ "state-tooltip": "Current state", "label": "Label", "key": "Key", + "copy-key": "Copy key", "view-node": "View visor", "delete-node": "Remove visor", "error-load": "An error occurred while refreshing the list. Retrying...",