ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-02-21 10:01:44 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #940 from GNS3/Integrate-link-labels-to-links

Browse Source 
Integrate link labels to links
This commit is contained in:
piotrpekala7 2020-07-14 10:54:38 +02:00 committed by GitHub
commit 97d259c7f4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 196 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/cartography/models/link-status.ts
View File

@ -1,3 +1,3 @@
export class LinkStatus {
public constructor(public x: number, public y: number, public status: string) {}
public constructor(public x: number, public y: number, public status: string, public port?: string) {}
}

210
src/app/cartography/widgets/interface-status.ts
View File

@ -6,81 +6,205 @@ import { Widget } from './widget';
import { SVGSelection } from '../models/types';
import { LinkStatus } from '../models/link-status';
import { MapLink } from '../models/map/map-link';
import { MapSettingsService } from '../../services/mapsettings.service';
@Injectable()
export class InterfaceStatusWidget implements Widget {
constructor() {}
private mapSettingsService: MapSettingsService
constructor(
private _mapSettingsService: MapSettingsService
) {
this.mapSettingsService = _mapSettingsService;
}
public draw(view: SVGSelection) {
const self = this;
view.each(function(this: SVGGElement, l: MapLink) {
const link_group = select<SVGGElement, MapLink>(this);
const link_path = link_group.select<SVGPathElement>('path');
let statuses = [];
if (link_path.node()) {
const start_point: SVGPoint = link_path.node().getPointAtLength(45);
const end_point: SVGPoint = link_path.node().getPointAtLength(link_path.node().getTotalLength() - 45);
const start_point: SVGPoint = link_path.node().getPointAtLength(100);
const end_point: SVGPoint = link_path.node().getPointAtLength(link_path.node().getTotalLength() - 100);
if (link_path.node().getTotalLength() > 2 * 45 + 10) {
if (l.source && l.target) {
let sourcePort = l.nodes.find(node => node.nodeId === l.source.id).label.text;
let destinationPort = l.nodes.find(node => node.nodeId === l.target.id).label.text;
statuses = [
new LinkStatus(start_point.x, start_point.y, (l.capturing && l.suspend) ? 'suspended' : l.source.status),
new LinkStatus(end_point.x, end_point.y, (l.capturing && l.suspend) ? 'suspended' : l.target.status)
new LinkStatus(start_point.x, start_point.y, (l.capturing && l.suspend) ? 'suspended' : l.source.status, sourcePort),
new LinkStatus(end_point.x, end_point.y, (l.capturing && l.suspend) ? 'suspended' : l.target.status, destinationPort)
];
}
}
}
const status_started = link_group
.selectAll<SVGCircleElement, LinkStatus>('circle.status_started')
.data(statuses.filter((link_status: LinkStatus) => link_status.status === 'started'));
link_group
.selectAll<SVGCircleElement, LinkStatus>('circle.status_started').remove();
link_group
.selectAll<SVGCircleElement, LinkStatus>('circle.status_stopped').remove();
link_group
.selectAll<SVGCircleElement, LinkStatus>('circle.status_suspended').remove();
const status_started_enter = status_started.enter().append<SVGCircleElement>('circle');
link_group
.selectAll<SVGRectElement, LinkStatus>('rect.status_started').remove();
link_group
.selectAll<SVGTextElement, LinkStatus>('text.status_started_label').remove();
link_group
.selectAll<SVGRectElement, LinkStatus>('rect.status_stopped').remove();
link_group
.selectAll<SVGTextElement, LinkStatus>('text.status_stopped_label').remove();
link_group
.selectAll<SVGRectElement, LinkStatus>('rect.status_suspended').remove();
link_group
.selectAll<SVGTextElement, LinkStatus>('text.status_suspended_label').remove();
status_started
.merge(status_started_enter)
.attr('class', 'status_started')
.attr('cx', (ls: LinkStatus) => ls.x)
.attr('cy', (ls: LinkStatus) => ls.y)
.attr('r', 6)
.attr('fill', '#2ecc71');
if (self.mapSettingsService.integrateLinkLabelsToLinks) {
const status_started = link_group
.selectAll<SVGRectElement, LinkStatus>('rect.status_started')
.data(statuses.filter((link_status: LinkStatus) => link_status.status === 'started'));
const status_started_enter = status_started.enter().append<SVGRectElement>('rect');
status_started
.merge(status_started_enter)
.attr('class', 'status_started')
.attr('width', 40)
.attr('height', 20)
.attr('x', (ls: LinkStatus) => ls.x - 10)
.attr('y', (ls: LinkStatus) => ls.y - 10)
.attr('rx', 8)
.attr('ry', 8)
.style('fill', 'white')
.attr('stroke', '#2ecc71')
.attr('stroke-width', 3);
status_started.exit().remove();
const status_started_label = link_group
.selectAll<SVGTextElement, LinkStatus>('text.status_started_label')
.data(statuses.filter((link_status: LinkStatus) => link_status.status === 'started'));
const status_started_label_enter = status_started_label.enter().append<SVGTextElement>('text');
status_started_label
.merge(status_started_label_enter)
.attr('class', 'status_started_label')
.text((ls: LinkStatus) => ls.port)
.attr('x', (ls: LinkStatus) => ls.x - 5)
.attr('y', (ls: LinkStatus) => ls.y + 5)
.attr('fill', `black`);
status_started_label.exit().remove();
const status_stopped = link_group
.selectAll<SVGRectElement, LinkStatus>('rect.status_stopped')
.data(statuses.filter((link_status: LinkStatus) => link_status.status === 'stopped'));
const status_stopped_enter = status_stopped.enter().append<SVGRectElement>('rect');
status_stopped
.merge(status_stopped_enter)
.attr('class', 'status_stopped')
.attr('width', 40)
.attr('height', 20)
.attr('x', (ls: LinkStatus) => ls.x - 10)
.attr('y', (ls: LinkStatus) => ls.y - 10)
.attr('rx', 8)
.attr('ry', 8)
.style('fill', 'white')
.attr('stroke', 'red')
.attr('stroke-width', 3);
status_stopped.exit().remove();
const status_stopped_label = link_group
.selectAll<SVGTextElement, LinkStatus>('text.status_stopped_label')
.data(statuses.filter((link_status: LinkStatus) => link_status.status === 'stopped'));
const status_stopped_label_enter = status_stopped_label.enter().append<SVGTextElement>('text');
status_stopped_label
.merge(status_stopped_label_enter)
.attr('class', 'status_stopped_label')
.text((ls: LinkStatus) => ls.port)
.attr('x', (ls: LinkStatus) => ls.x - 5)
.attr('y', (ls: LinkStatus) => ls.y + 5)
.attr('fill', `black`);
status_stopped_label.exit().remove();
status_started.exit().remove();
const status_suspended = link_group
.selectAll<SVGRectElement, LinkStatus>('rect.status_suspended')
.data(statuses.filter((link_status: LinkStatus) => link_status.status === 'suspended'));
const status_suspended_enter = status_suspended.enter().append<SVGRectElement>('rect');
status_suspended
.merge(status_suspended_enter)
.attr('class', 'status_suspended')
.attr('width', 40)
.attr('height', 20)
.attr('x', (ls: LinkStatus) => ls.x - 10)
.attr('y', (ls: LinkStatus) => ls.y - 10)
.attr('rx', 8)
.attr('ry', 8)
.style('fill', 'white')
.attr('stroke', '#FFFF00')
.attr('stroke-width', 3);
status_suspended.exit().remove();
const status_suspended_label = link_group
.selectAll<SVGTextElement, LinkStatus>('text.status_suspended_label')
.data(statuses.filter((link_status: LinkStatus) => link_status.status === 'suspended'));
const status_suspended_label_enter = status_suspended_label.enter().append<SVGTextElement>('text');
status_suspended_label
.merge(status_suspended_label_enter)
.attr('class', 'status_suspended_label')
.text((ls: LinkStatus) => ls.port)
.attr('x', (ls: LinkStatus) => ls.x - 5)
.attr('y', (ls: LinkStatus) => ls.y + 5)
.attr('fill', `black`);
status_suspended_label.exit().remove();
} else {
const status_started = link_group
.selectAll<SVGCircleElement, LinkStatus>('circle.status_started')
.data(statuses.filter((link_status: LinkStatus) => link_status.status === 'started'));
const status_stopped = link_group
.selectAll<SVGRectElement, LinkStatus>('rect.status_stopped')
.data(statuses.filter((link_status: LinkStatus) => link_status.status === 'stopped'));
const status_started_enter = status_started.enter().append<SVGCircleElement>('circle');
const status_stopped_enter = status_stopped.enter().append<SVGRectElement>('rect');
status_started
.merge(status_started_enter)
.attr('class', 'status_started')
.attr('cx', (ls: LinkStatus) => ls.x)
.attr('cy', (ls: LinkStatus) => ls.y)
.attr('r', 6)
.attr('text', (ls: LinkStatus) => ls.port)
.attr('fill', '#2ecc71');
const STOPPED_STATUS_RECT_WIDTH = 10;
status_started.exit().remove();
status_stopped
.merge(status_stopped_enter)
.attr('class', 'status_stopped')
.attr('x', (ls: LinkStatus) => ls.x - STOPPED_STATUS_RECT_WIDTH / 2)
.attr('y', (ls: LinkStatus) => ls.y - STOPPED_STATUS_RECT_WIDTH / 2)
.attr('width', STOPPED_STATUS_RECT_WIDTH)
.attr('height', STOPPED_STATUS_RECT_WIDTH)
.attr('fill', 'red');
const status_stopped = link_group
.selectAll<SVGRectElement, LinkStatus>('rect.status_stopped')
.data(statuses.filter((link_status: LinkStatus) => link_status.status === 'stopped'));
status_stopped.exit().remove();
const status_stopped_enter = status_stopped.enter().append<SVGRectElement>('rect');
const status_suspended = link_group
.selectAll<SVGCircleElement, LinkStatus>('circle.status_suspended')
.data(statuses.filter((link_status: LinkStatus) => link_status.status === 'suspended'));
const STOPPED_STATUS_RECT_WIDTH = 10;
const status_suspended_enter = status_suspended.enter().append<SVGCircleElement>('circle');
status_stopped
.merge(status_stopped_enter)
.attr('class', 'status_stopped')
.attr('x', (ls: LinkStatus) => ls.x - STOPPED_STATUS_RECT_WIDTH / 2)
.attr('y', (ls: LinkStatus) => ls.y - STOPPED_STATUS_RECT_WIDTH / 2)
.attr('width', STOPPED_STATUS_RECT_WIDTH)
.attr('height', STOPPED_STATUS_RECT_WIDTH)
.attr('fill', 'red');
status_suspended
.merge(status_suspended_enter)
.attr('class', 'status_suspended')
.attr('cx', (ls: LinkStatus) => ls.x)
.attr('cy', (ls: LinkStatus) => ls.y)
.attr('r', 6)
.attr('fill', '#FFFF00');
status_stopped.exit().remove();
status_suspended.exit().remove();
const status_suspended = link_group
.selectAll<SVGCircleElement, LinkStatus>('circle.status_suspended')
.data(statuses.filter((link_status: LinkStatus) => link_status.status === 'suspended'));
const status_suspended_enter = status_suspended.enter().append<SVGCircleElement>('circle');
status_suspended
.merge(status_suspended_enter)
.attr('class', 'status_suspended')
.attr('cx', (ls: LinkStatus) => ls.x)
.attr('cy', (ls: LinkStatus) => ls.y)
.attr('r', 6)
.attr('fill', '#FFFF00');
status_suspended.exit().remove();
}
});
}
}

7
src/app/components/project-map/project-map.component.html
View File

@ -109,8 +109,11 @@
<mat-menu #viewMenu="matMenu" [overlapTrigger]="false">
<div class="options-item">
<mat-checkbox [ngModel]="mapSettingsService.integrateLinkLabelsToLinks" (change)="toggleIntegrateLinkLabelsToLinks($event.checked)">
Integrate link labels to links
</mat-checkbox>
<mat-checkbox [ngModel]="isInterfaceLabelVisible" (change)="toggleShowInterfaceLabels($event.checked)">
Show interface labels
Show interface labels separately
</mat-checkbox><br/>
<mat-checkbox [ngModel]="isConsoleVisible" (change)="toggleShowConsole($event.checked)">
Show console
@ -129,7 +132,7 @@
</mat-checkbox><br/>
<mat-checkbox [ngModel]="project.snap_to_grid" (change)="toggleSnapToGrid($event.checked)">
Snap to grid
</mat-checkbox>
</mat-checkbox><br/>
</div>
</mat-menu>

26
src/app/components/project-map/project-map.component.ts
View File

@ -258,11 +258,12 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
this.projectService.open(this.server, this.project.project_id);
this.title.setTitle(this.project.name);
if (this.mapSettingsService.interfaceLabels.has(project.project_id)) {
this.isInterfaceLabelVisible = this.mapSettingsService.interfaceLabels.get(project.project_id);
} else {
this.isInterfaceLabelVisible = this.project.show_interface_labels;
}
// old settings
// if (this.mapSettingsService.interfaceLabels.has(project.project_id)) {
// this.isInterfaceLabelVisible = this.mapSettingsService.interfaceLabels.get(project.project_id);
// } else {
// this.isInterfaceLabelVisible = this.project.show_interface_labels;
// }
this.recentlyOpenedProjectService.setServerId(this.server.id.toString());
this.recentlyOpenedProjectService.setProjectId(this.project.project_id);
@ -672,9 +673,20 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
this.toolsService.drawLinkToolActivation(this.tools.draw_link);
}
public toggleShowInterfaceLabels(visible: boolean) {
this.isInterfaceLabelVisible = visible;
public toggleShowInterfaceLabels(enabled: boolean) {
this.isInterfaceLabelVisible = enabled;
this.mapSettingsService.toggleShowInterfaceLabels(this.project.project_id, this.isInterfaceLabelVisible);
this.mapSettingsService.integrateLinkLabelsToLinks = false;
this.mapSettingsService.mapRenderedEmitter.emit(true);
}
public toggleIntegrateLinkLabelsToLinks(enabled: boolean) {
this.isInterfaceLabelVisible = false;
this.mapSettingsService.toggleShowInterfaceLabels(this.project.project_id, this.isInterfaceLabelVisible);
this.mapSettingsService.integrateLinkLabelsToLinks = enabled;
this.mapSettingsService.mapRenderedEmitter.emit(true);
}
public toggleShowConsole(visible: boolean) {

4
src/app/services/link.service.ts
View File

@ -55,8 +55,8 @@ export class LinkService {
}
updateLink(server: Server, link: Link) {
link.x = Math.round(link.x);
link.y = Math.round(link.y);
// link.x = Math.round(link.x);
// link.y = Math.round(link.y);
return this.httpServer.put<Link>(server, `/projects/${link.project_id}/links/${link.link_id}`, link);
}

2
src/app/services/mapsettings.service.ts
View File

@ -11,6 +11,8 @@ export class MapSettingsService {
public logConsoleSubject = new Subject<boolean>();
public mapRenderedEmitter = new EventEmitter<boolean>();
public integrateLinkLabelsToLinks: boolean = true;
constructor() {
this.isLayerNumberVisible = localStorage.getItem('layersVisibility') === 'true' ? true : false;
}