design
This commit is contained in:
sunny
parent
fbefe3466f
commit
fa47b00e82
|
|
@ -2,34 +2,39 @@
|
||||||
<p-dialog header="Discovery" [width]="800" [(visible)]="display">
|
<p-dialog header="Discovery" [width]="800" [(visible)]="display">
|
||||||
<of-discovery-setting (close)="onDiscoverycloseDialog()"></of-discovery-setting>
|
<of-discovery-setting (close)="onDiscoverycloseDialog()"></of-discovery-setting>
|
||||||
</p-dialog>
|
</p-dialog>
|
||||||
<div *ngIf="probe">
|
<div class="ui-g ui-bottom-space-10">
|
||||||
|
<p-panel [showHeader]="false" class="nopad">
|
||||||
|
<div *ngIf="probe">
|
||||||
|
|
||||||
<div class="ui-g form-group">
|
<div class="ui-g form-group">
|
||||||
<div class="ui-g-12 ui-md-6 ui-lg-4">
|
<div class="ui-g-12 ui-md-6 ui-lg-4 ui-key-value ui-bottom-border-1">
|
||||||
<of-key-value [key]="'Alias'" [value]="probe.displayName"></of-key-value>
|
<of-key-value [key]="'Alias'" [value]="probe.displayName"></of-key-value>
|
||||||
|
</div>
|
||||||
|
<div class="ui-g-12 ui-md-6 ui-lg-4 ui-key-value ui-bottom-border-1">
|
||||||
|
<of-key-value [key]="'CIDR'" [value]="probe.cidr"></of-key-value>
|
||||||
|
</div>
|
||||||
|
<div class="ui-g-12 ui-md-6 ui-lg-4 ui-key-value ui-bottom-border-1">
|
||||||
|
<of-key-value [key]="'Description'" [value]="probe.description"></of-key-value>
|
||||||
|
</div>
|
||||||
|
<div class="ui-g-12 ui-md-6 ui-lg-4 ui-key-value ui-bottom-border-1">
|
||||||
|
<of-key-value [key]="'Key'" [value]="probe.probeKey"></of-key-value>
|
||||||
|
</div>
|
||||||
|
<div class="ui-g-12 ui-md-6 ui-lg-4 ui-key-value ui-bottom-border-1">
|
||||||
|
<of-key-value [key]="'Authrozied at'" [value]="probe.authorizeDate | date: 'dd/MM/yyyy'"></of-key-value>
|
||||||
|
</div>
|
||||||
|
<div class="ui-g-12 ui-md-6 ui-lg-4 ui-key-value ui-bottom-border-1">
|
||||||
|
<of-key-value [key]="'Authrozied by'" [value]="probe.authorizeMember.name"></of-key-value>
|
||||||
|
</div>
|
||||||
|
<div class="ui-g-12 ui-md-6 ui-lg-4 ui-key-value ui-bottom-border-1">
|
||||||
|
<of-key-value [key]="'IP Range'" [value]="IPRange"></of-key-value>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ui-g-12 ui-md-6 ui-lg-4">
|
</p-panel>
|
||||||
<of-key-value [key]="'CIDR'" [value]="probe.cidr"></of-key-value>
|
</div>
|
||||||
</div>
|
<div class="ui-g" dir="rtl">
|
||||||
<div class="ui-g-12 ui-md-6 ui-lg-4">
|
<button class="ui-button-danger ui-button-width-fit" type="button" label="Remove this Probe" icon="ui-icon-close" pButton
|
||||||
<of-key-value [key]="'Description'" [value]="probe.description"></of-key-value>
|
(click)="onRemoveClick()"></button>
|
||||||
</div>
|
<button class="ui-button-width-fit" type="button" label="Discovery" icon="ui-icon-search" pButton (click)="onDiscoveryClick()"></button>
|
||||||
<div class="ui-g-12 ui-md-6 ui-lg-4">
|
</div>
|
||||||
<of-key-value [key]="'Key'" [value]="probe.probeKey"></of-key-value>
|
<p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>
|
||||||
</div>
|
|
||||||
<div class="ui-g-12 ui-md-6 ui-lg-4">
|
|
||||||
<of-key-value [key]="'Authrozied at'" [value]="probe.authorizeDate | date: 'dd/MM/yyyy'"></of-key-value>
|
|
||||||
</div>
|
|
||||||
<div class="ui-g-12 ui-md-6 ui-lg-4">
|
|
||||||
<of-key-value [key]="'Authrozied by'" [value]="probe.authorizeMember.name"></of-key-value>
|
|
||||||
</div>
|
|
||||||
<div class="ui-g-12 ui-md-6 ui-lg-4">
|
|
||||||
<of-key-value [key]="'IP Range'" [value]="IPRange"></of-key-value>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ui-bottom-space-10" dir="rtl">
|
|
||||||
<button class="ui-button-danger ui-button-width-fit" type="button" label="Remove this Probe" icon="ui-icon-close" pButton
|
|
||||||
(click)="onRemoveClick()"></button>
|
|
||||||
<button class="ui-button-width-fit" type="button" label="Discovery" icon="ui-icon-search" pButton (click)="onDiscoveryClick()"></button>
|
|
||||||
</div>
|
|
||||||
<p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>
|
|
||||||
|
|
@ -1,5 +1,7 @@
|
||||||
<div>SensorItem List</div>
|
|
||||||
<p-table [value]="sensorItems" selectionMode="single" (onRowSelect)="onRowSelect($event)" [resizableColumns]="true">
|
<p-table [value]="sensorItems" selectionMode="single" (onRowSelect)="onRowSelect($event)" [resizableColumns]="true">
|
||||||
|
<ng-template pTemplate="caption">
|
||||||
|
Monitored Items
|
||||||
|
</ng-template>
|
||||||
<ng-template pTemplate="body" let-sensor let-rowIndex="rowIndex">
|
<ng-template pTemplate="body" let-sensor let-rowIndex="rowIndex">
|
||||||
<tr [pSelectableRow]="sensor">
|
<tr [pSelectableRow]="sensor">
|
||||||
<td>{{rowIndex + 1}}</td>
|
<td>{{rowIndex + 1}}</td>
|
||||||
|
|
|
||||||
|
|
@ -1,48 +1,52 @@
|
||||||
<div *ngIf="sensor">
|
<div *ngIf="sensor">
|
||||||
<h1>{{sensor.crawler.name}}</h1>
|
<h1>{{sensor.crawler.name}}</h1>
|
||||||
|
|
||||||
<div *ngIf="sensor.status.name === 'RUNNING' ; else STOPPED">
|
|
||||||
<div class="ui-messages ui-widget ui-corner-all ui-messages-success" style="margin: 0 0 1em 0; display: block">
|
|
||||||
<span class="ui-messages-icon fa fa-fw fa-2x fa-check"></span>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<span class="ui-messages-summary" style="font-size:16px">RUNNING</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<ng-template #STOPPED>
|
|
||||||
<div class="ui-messages ui-widget ui-corner-all ui-messages-error" style="margin: 0 0 1em 0; display: block">
|
|
||||||
<span class="ui-messages-icon fa fa-fw fa-2x fa-warning"></span>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<span class="ui-messages-summary" style="font-size:16px">STOPPED</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</ng-template>
|
|
||||||
|
|
||||||
<div class="ui-bottom-space-10" dir="rtl">
|
|
||||||
<button class="ui-button-danger ui-button-width-fit" type="button" label="Remove" icon="ui-icon-close" pButton (click)="onRemove()"></button>
|
|
||||||
<button class="ui-button-width-fit" type="button" label="Edit" pButton (click)="onEdit()"></button>
|
|
||||||
<button class="ui-button-width-fit" type="button" label="Start/Stop" pButton (click)="onStartOrStop()"></button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="ui-g">
|
<div class="ui-g">
|
||||||
<div class="ui-g-12 ui-md-3">
|
<div class="ui-g-12 ui-md-3">
|
||||||
<div class="ui-g form-group">
|
<div *ngIf="sensor.status.name === 'RUNNING' ; else STOPPED">
|
||||||
<of-key-value [key]="'ID'" [value]="sensor.id"></of-key-value>
|
<div class="ui-messages ui-widget ui-corner-all ui-messages-success" style="display: block">
|
||||||
<of-key-value [key]="'Location'" [value]="sensor.target.displayName" [clickable]="true" (click)="onTargetClick($event)" ></of-key-value>
|
<span class="ui-messages-icon fa fa-fw fa-2x fa-check"></span>
|
||||||
<of-key-value [key]="'Description'" [value]="sensor.description"></of-key-value>
|
<ul>
|
||||||
<of-key-value [key]="'Crawler Type'" [value]="sensor.crawler.name"></of-key-value>
|
<li>
|
||||||
<of-key-value [key]="'Sensor Items'" [value]="sensor.itemCount"></of-key-value>
|
<span class="ui-messages-summary" style="font-size:16px">RUNNING</span>
|
||||||
<of-key-value [key]="'Created at'" [value]="sensor.createDate | date: 'dd/MM/yyyy'"></of-key-value>
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<ng-template #STOPPED>
|
||||||
|
<div class="ui-messages ui-widget ui-corner-all ui-messages-error" style="display: block">
|
||||||
|
<span class="ui-messages-icon fa fa-fw fa-2x fa-warning"></span>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<span class="ui-messages-summary" style="font-size:16px">STOPPED</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</ng-template>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ui-g-12 ui-md-9" dir="rtl" style="margin-top: 20px">
|
||||||
|
<button class="ui-button-danger ui-button-width-fit" type="button" label="Remove" icon="ui-icon-close" pButton (click)="onRemove()"></button>
|
||||||
|
<button class="ui-button-width-fit" type="button" label="Edit" pButton (click)="onEdit()"></button>
|
||||||
|
<button class="ui-button-width-fit" type="button" label="Start/Stop" pButton (click)="onStartOrStop()"></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ui-g ui-top-space--0-5em">
|
||||||
|
<div class="ui-g-12 ui-md-3">
|
||||||
|
<p-panel [showHeader]="false">
|
||||||
|
<div class="ui-g form-group ui-key-value">
|
||||||
|
<of-key-value [key]="'ID'" [value]="sensor.id"></of-key-value>
|
||||||
|
<of-key-value [key]="'Location'" [value]="sensor.target.displayName" [clickable]="true" (click)="onTargetClick($event)" ></of-key-value>
|
||||||
|
<of-key-value [key]="'Description'" [value]="sensor.description"></of-key-value>
|
||||||
|
<of-key-value [key]="'Crawler Type'" [value]="sensor.crawler.name"></of-key-value>
|
||||||
|
<of-key-value [key]="'Sensor Items'" [value]="sensor.itemCount"></of-key-value>
|
||||||
|
<of-key-value [key]="'Created at'" [value]="sensor.createDate | date: 'dd/MM/yyyy'"></of-key-value>
|
||||||
|
</div>
|
||||||
|
</p-panel>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ui-g-12 ui-md-9">
|
<div class="ui-g-12 ui-md-9">
|
||||||
<h1>Monitored Items</h1>
|
|
||||||
<of-sensor-item-list></of-sensor-item-list>
|
<of-sensor-item-list></of-sensor-item-list>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -65,7 +65,7 @@
|
||||||
List of Cars
|
List of Cars
|
||||||
</p-header> -->
|
</p-header> -->
|
||||||
<ng-template let-item pTemplate="item">
|
<ng-template let-item pTemplate="item">
|
||||||
<div style="border-bottom: 1px solid #bdbdbd" class="clearfix ui-sensors">
|
<div class="clearfix ui-sensors ui-bottom-border-1">
|
||||||
<div class="ui-g-12 ui-md-3 ui-lg-3 ui-sensor">
|
<div class="ui-g-12 ui-md-3 ui-lg-3 ui-sensor">
|
||||||
<i class="fa ui-icon-devices ui-icon-lg"></i><br>
|
<i class="fa ui-icon-devices ui-icon-lg"></i><br>
|
||||||
{{item.target.id}} - {{item.target.displayName}}
|
{{item.target.id}} - {{item.target.displayName}}
|
||||||
|
|
|
||||||
|
|
@ -148,3 +148,35 @@ img.ui-img-profile-responsive {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ui-key-value {
|
||||||
|
of-key-value{
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0.25em 0.15em;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
font-weight: bold;
|
||||||
|
width: 30% ;
|
||||||
|
//display: inline-block;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
span::after {
|
||||||
|
content: " : ";
|
||||||
|
}
|
||||||
|
span.ng-star-inserted {
|
||||||
|
font-weight: normal;
|
||||||
|
text-align: left;
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
span.ng-star-inserted::after, a.ng-star-inserted>span::after {
|
||||||
|
content: " ";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-bottom-border-1 {
|
||||||
|
border-bottom: #bdbdbd 1px solid;
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user