detail
This commit is contained in:
parent
a4f7ac810d
commit
2788632602
|
@ -1,22 +1,50 @@
|
|||
<div class="ui-g-12">
|
||||
<div class="ui-g-6">
|
||||
<ul class="key-value">
|
||||
<li *ngIf="host.address">
|
||||
IP Address
|
||||
<span class="meta-value">{{host.address}}</span>
|
||||
</li>
|
||||
<li *ngIf="host.name">
|
||||
Name
|
||||
<span class="meta-value">{{host.name}}</span>
|
||||
</li>
|
||||
<li *ngIf="host.mac">
|
||||
Mac Address
|
||||
<span class="meta-value">{{host.mac}}</span>
|
||||
</li>
|
||||
<li *ngIf="host.portList">
|
||||
Opened Ports
|
||||
<span class="meta-value">{{host.portList.length}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<span>{{host.name}}</span>
|
||||
<span>{{host.address}}</span>
|
||||
|
||||
<p-tabView>
|
||||
<p-tabPanel header="General">
|
||||
|
||||
<ul class="key-value">
|
||||
|
||||
<li *ngIf="host.deviceType">
|
||||
Type
|
||||
<span class="meta-value">{{host.deviceType}}</span>
|
||||
</li>
|
||||
<li *ngIf="host.deviceVendor">
|
||||
Vendor
|
||||
<span class="meta-value">{{host.deviceVendor}}</span>
|
||||
</li>
|
||||
<li *ngIf="host.model">
|
||||
Model
|
||||
<span class="meta-value">{{host.model}}</span>
|
||||
</li>
|
||||
|
||||
<li *ngIf="host.osType">
|
||||
OS
|
||||
<span class="meta-value">{{host.osType}}</span>
|
||||
</li>
|
||||
|
||||
<li *ngIf="host.mac">
|
||||
Mac Address
|
||||
<span class="meta-value">{{host.mac}}</span>
|
||||
</li>
|
||||
|
||||
<li *ngIf="host.discoveredBy">
|
||||
Discovered by
|
||||
<span class="meta-value">{{host.discoveredBy.join(',')}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</p-tabPanel>
|
||||
|
||||
<p-tabPanel header="Metadata" *ngIf="host.meta && host.meta.length > 0">
|
||||
|
||||
</p-tabPanel>
|
||||
|
||||
<p-tabPanel header="Ports" *ngIf="host.portList">
|
||||
<p-listbox [options]="ports" [(ngModel)]="selectedPort" optionLabel="name"></p-listbox>
|
||||
</p-tabPanel>
|
||||
</p-tabView>
|
||||
</div>
|
|
@ -1,5 +1,5 @@
|
|||
import { Component, Input } from '@angular/core';
|
||||
import { Host } from '@overflow/model/discovery';
|
||||
import { Host, Port } from '@overflow/model/discovery';
|
||||
|
||||
|
||||
@Component({
|
||||
|
@ -10,6 +10,8 @@ import { Host } from '@overflow/model/discovery';
|
|||
export class HostDetailComponent {
|
||||
|
||||
@Input() host: Host;
|
||||
ports: Port[];
|
||||
selectedPort: Port;
|
||||
|
||||
constructor(
|
||||
) {
|
||||
|
|
|
@ -35,6 +35,7 @@ export class NicDropdownComponent implements OnInit {
|
|||
this.probeService.call<Interface>('MachineService.Interfaces').pipe(
|
||||
map((ifaces: Interface[]) => {
|
||||
ifaces.forEach(iface => {
|
||||
console.log(iface);
|
||||
iface.addresses.forEach(address => {
|
||||
if (address.metaIPType.key != toMetaIPType(MetaIPTypeEnum.V4).key) {
|
||||
return;
|
||||
|
|
|
@ -1,7 +1,8 @@
|
|||
<div class="ui-g">
|
||||
<div class="detail-img">
|
||||
<svg width="200" height="200" viewBox="20 40 140 100">
|
||||
<image x="-40" y="-20" width="260" height="260" preserveAspectRatio="xMidYMid slice" xlink:href="../../assets/image/logo/logo_tomcat.svg" />
|
||||
<image x="-40" y="-20" width="260" height="260" preserveAspectRatio="xMidYMid slice" xlink:href="../../assets/image/logo/logo_tomcat.svg"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="detail-content">
|
||||
|
@ -9,7 +10,7 @@
|
|||
<ng-container [ngSwitch]="node.group">
|
||||
|
||||
<ng-container *ngSwitchCase="'zone'">
|
||||
<app-zone-detail [zone]=""></app-zone-detail>
|
||||
<app-zone-detail [zone]="node.target"></app-zone-detail>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngSwitchCase="'host'">
|
||||
|
|
|
@ -1,26 +1,36 @@
|
|||
<div class="ui-g-12">
|
||||
<div class="ui-g-6">
|
||||
<ul class="key-value">
|
||||
<li *ngIf="service.key">
|
||||
Name
|
||||
<span class="meta-value">{{service.key}}</span>
|
||||
</li>
|
||||
<li *ngIf="service.port">
|
||||
Port
|
||||
<span class="meta-value">{{service.port.metaPortType.name}} {{service.port.portNumber}}</span>
|
||||
</li>
|
||||
<li *ngIf="service.description">
|
||||
Description
|
||||
<span class="meta-value">{{service.description}}</span>
|
||||
</li>
|
||||
<li *ngIf="service.metaCryptoType && service.metaCryptoType.key !== 'NONE'">
|
||||
Crypto Type
|
||||
<span class="meta-value">{{service.metaCryptoType.name}}</span>
|
||||
</li>
|
||||
<!-- <li *ngFor="let item of service.meta.entries()">
|
||||
{{item[0]}}
|
||||
<span class="meta-value">{{item[1]}}</span>
|
||||
</li> -->
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<span>
|
||||
{{service.name}} {{service.port.host.address}}
|
||||
</span>
|
||||
|
||||
<p-tabView>
|
||||
<p-tabPanel header="General">
|
||||
|
||||
<ul class="key-value">
|
||||
<li *ngIf="service.key">
|
||||
Name
|
||||
<span class="meta-value">{{service.key}}</span>
|
||||
</li>
|
||||
<li *ngIf="service.port">
|
||||
Port
|
||||
<span class="meta-value">{{service.port.metaPortType.name}} {{service.port.portNumber}}</span>
|
||||
</li>
|
||||
<li *ngIf="service.description">
|
||||
Description
|
||||
<span class="meta-value">{{service.description}}</span>
|
||||
</li>
|
||||
<li *ngIf="service.metaCryptoType && service.metaCryptoType.key !== 'NONE'">
|
||||
Crypto Type
|
||||
<span class="meta-value">{{service.metaCryptoType.name}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</p-tabPanel>
|
||||
|
||||
<p-tabPanel header="Metadata ">
|
||||
</p-tabPanel>
|
||||
|
||||
</p-tabView>
|
||||
|
||||
</div>
|
|
@ -1,3 +1,43 @@
|
|||
<div class="ui-g-12">
|
||||
zone component
|
||||
<span>
|
||||
{{zone.network}}
|
||||
</span>
|
||||
|
||||
<p-tabView>
|
||||
<p-tabPanel header="General">
|
||||
|
||||
<ul class="key-value">
|
||||
<li *ngIf="zone.iface">
|
||||
Interface
|
||||
<span class="meta-value">{{zone.iface}}</span>
|
||||
</li>
|
||||
|
||||
<li *ngIf="zone.mac">
|
||||
Mac Address
|
||||
<span class="meta-value">{{zone.mac}}</span>
|
||||
</li>
|
||||
|
||||
<li *ngIf="zone.metaIPType">
|
||||
IP Version
|
||||
<span class="meta-value">{{zone.metaIPType.key}}</span>
|
||||
</li>
|
||||
|
||||
<li *ngIf="zone.network">
|
||||
Network
|
||||
<span class="meta-value">{{zone.network}}</span>
|
||||
</li>
|
||||
|
||||
<li *ngIf="zone.network">
|
||||
IP Range
|
||||
<span class="meta-value">{{ipRange}}</span>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</p-tabPanel>
|
||||
<p-tabPanel header="Host">
|
||||
<p-listbox [options]="hosts" [(ngModel)]="selectedHost" optionLabel="name"></p-listbox>
|
||||
</p-tabPanel>
|
||||
</p-tabView>
|
||||
|
||||
</div>
|
|
@ -1,19 +1,31 @@
|
|||
import { Component, Input } from '@angular/core';
|
||||
import { Zone } from '@overflow/model/discovery';
|
||||
import { Component, Input, OnInit } from '@angular/core';
|
||||
import { Zone, Host } from '@overflow/model/discovery';
|
||||
|
||||
const IPCIDR = require('ip-cidr');
|
||||
|
||||
@Component({
|
||||
selector: 'app-zone-detail',
|
||||
templateUrl: './zone-detail.component.html',
|
||||
styleUrls: ['./zone-detail.component.scss'],
|
||||
})
|
||||
export class ZoneDetailComponent {
|
||||
export class ZoneDetailComponent implements OnInit {
|
||||
|
||||
@Input() zone: Zone;
|
||||
ipRange: string;
|
||||
hosts: Host[];
|
||||
selectedHost: Host;
|
||||
|
||||
constructor(
|
||||
) {
|
||||
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
if (!this.zone) {
|
||||
return;
|
||||
}
|
||||
|
||||
const cidr = new IPCIDR(this.zone.network);
|
||||
this.ipRange = cidr.start() + ' - ' + cidr.end();
|
||||
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user