overflow_cloud/member_webapp
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' of https://git.loafle.net/overflow/member_webapp

Browse Source
This commit is contained in:
snoop 2018-04-26 21:33:41 +09:00
commit affef764f5
6 changed files with 81 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/packages/infra/component/map/map.component.html
View File

@ -61,20 +61,8 @@
<p-contextMenu #cmService [model]="contextMenuService"></p-contextMenu> <p-contextMenu #cmService [model]="contextMenuService"></p-contextMenu>
<p-contextMenu #cmSensor [model]="contextMenuSensor"></p-contextMenu> <p-contextMenu #cmSensor [model]="contextMenuSensor"></p-contextMenu>
<p-sidebar [(visible)]="visibleSidebar" position="bottom" [baseZIndex]="10000" *ngIf="selectedNode" styleClass="ui-sidebar-md">
<div *ngIf="selectedNode.type === 'probe'">
<of-probe-summary [probe]="targetNodeForView" [visible]="visibleSidebar"></of-probe-summary>
</div>
<div *ngIf="selectedNode.type === 'host'">
<of-host-summary [host]="targetNodeForView" [visible]="visibleSidebar"></of-host-summary>
</div>
<div *ngIf="selectedNode.type === 'service'">
<of-service-summary [service]="targetNodeForView" [visible]="visibleSidebar"></of-service-summary>
</div>
</p-sidebar>
<p-dialog [modal]="true" [width]="800" [(visible)]="sensorSettingDisplay" [showHeader]="true" [closeOnEscape]="false"> <p-dialog [modal]="true" [width]="800" [(visible)]="sensorSettingDisplay" [showHeader]="true" [closeOnEscape]="false">
<of-sensor-setting [visible]="sensorSettingDisplay" [preTarget]="targetNodeForView" (close)="onSensorSettingClose()"></of-sensor-setting> <of-sensor-setting [visible]="sensorSettingDisplay" [preTarget]="target" (close)="onSensorSettingClose()"></of-sensor-setting>
</p-dialog> </p-dialog>

41
src/packages/infra/component/map/map.component.ts
View File

@ -69,6 +69,7 @@ export class MapComponent implements OnInit, AfterContentInit {
targetNodeForView: Object = null; targetNodeForView: Object = null;
sensorSettingDisplay = false; sensorSettingDisplay = false;
target: Target = null;
constructor(private router: Router, constructor(private router: Router,
private listStore: Store<ListStore.State>, private listStore: Store<ListStore.State>,
@ -98,10 +99,8 @@ export class MapComponent implements OnInit, AfterContentInit {
ngOnInit() { ngOnInit() {
this.infras$.subscribe( this.infras$.subscribe(
(page: Page) => { (page: Page) => {
console.log(page);
if (page !== null) { if (page !== null) {
this.totalList = page.content; this.totalList = page.content;
console.log(this.totalList);
this.infraTree = this.generateInfraHostData(); this.infraTree = this.generateInfraHostData();
} }
}, },
@ -113,7 +112,6 @@ export class MapComponent implements OnInit, AfterContentInit {
(page: Page) => { (page: Page) => {
if (page !== null) { if (page !== null) {
const sensorList = page.content; const sensorList = page.content;
console.log(sensorList);
this.addTreeForSensor(sensorList); this.addTreeForSensor(sensorList);
} }
}, },
@ -263,9 +261,8 @@ export class MapComponent implements OnInit, AfterContentInit {
}; };
probeMap.forEach((ifhl: InfraHost[], key: number) => { probeMap.forEach((ifhl: InfraHost[], key: number) => {
const tp = { const tp = {
label: 'Probe - ' + key, label: ifhl[0].probe.displayName,
type: 'probe', type: 'probe',
expandedIcon: 'fa-folder-open', expandedIcon: 'fa-folder-open',
collapsedIcon: 'fa-folder', collapsedIcon: 'fa-folder',
@ -280,7 +277,7 @@ export class MapComponent implements OnInit, AfterContentInit {
ifhl.map((ih: InfraHost, idx: number) => { ifhl.map((ih: InfraHost, idx: number) => {
const th = { const th = {
label: 'Host - ' + ih.ip, label: 'Host - ' + ih.ipv4,
type: 'host', type: 'host',
expandedIcon: 'fa-folder-open', expandedIcon: 'fa-folder-open',
collapsedIcon: 'fa-folder', collapsedIcon: 'fa-folder',
@ -291,9 +288,9 @@ export class MapComponent implements OnInit, AfterContentInit {
this.targetTreeMap.set(ih.target.id, th); this.targetTreeMap.set(ih.target.id, th);
if (hostMap.has(ih.ip)) { if (hostMap.has(ih.ipv4)) {
const ifsl = hostMap.get(ih.ip); const ifsl = hostMap.get(ih.ipv4);
@ -333,7 +330,7 @@ export class MapComponent implements OnInit, AfterContentInit {
const infraType = infra.infraType.name; const infraType = infra.infraType.name;
if (infraType === 'HOST') { if (infraType === 'HOST') {
const infraHost: InfraHost = infra; const infraHost: InfraHost = infra;
if (filterStr && String(infraHost.ip).indexOf(filterStr) < 0) { if (filterStr && String(infraHost.ipv4).indexOf(filterStr) < 0) {
continue; continue;
} }
@ -351,11 +348,11 @@ export class MapComponent implements OnInit, AfterContentInit {
continue; continue;
} }
if (hostMap.has(infraService.host.ip) === false) { if (hostMap.has(infraService.host.ipv4) === false) {
hostMap.set(infraService.host.ip, []); hostMap.set(infraService.host.ipv4, []);
} }
const isl = hostMap.get(infraService.host.ip); const isl = hostMap.get(infraService.host.ipv4);
isl.push(infraService); isl.push(infraService);
} }
@ -391,7 +388,7 @@ export class MapComponent implements OnInit, AfterContentInit {
getExistHost(infraHost: InfraHost): HostData { getExistHost(infraHost: InfraHost): HostData {
let node = null; let node = null;
for (const data of this.hostDataList) { for (const data of this.hostDataList) {
if (data.host.ip === infraHost.ip) { if (data.host.ipv4 === infraHost.ipv4) {
node = data; node = data;
} }
} }
@ -432,18 +429,18 @@ export class MapComponent implements OnInit, AfterContentInit {
this.selectedNode = event.node; this.selectedNode = event.node;
if (nodeType === 'probe') { if (nodeType === 'probe') {
this.router.navigate(['probe', event.node.obj.id, 'info']); this.router.navigate(['probe', event.node.obj.id, 'info']);
} else if (nodeType === 'host') { } else if (nodeType === 'host' || nodeType === 'service') {
this.router.navigate(['sensors'], { queryParams: { target: event.node.obj.target.id } });
} else if (nodeType === 'sensor') {
this.router.navigate(['sensor', event.node.obj.id, 'info']);
} }
} }
viewInfo() { viewInfo() {
const nodeType = this.selectedNode.type; const temp = {
if (nodeType !== 'probe' && nodeType !== 'host' && nodeType !== 'service') { node : this.selectedNode,
return; };
} this.onNodeSelect(temp);
this.targetNodeForView = this.selectedNode['obj'];
this.visibleSidebar = true;
} }
nodeMenu(event: MouseEvent, node: any) { nodeMenu(event: MouseEvent, node: any) {
@ -489,10 +486,12 @@ export class MapComponent implements OnInit, AfterContentInit {
} }
addSensorWithTarget() { addSensorWithTarget() {
this.target = this.selectedNode['obj'].target;
this.sensorSettingDisplay = true; this.sensorSettingDisplay = true;
} }
onSensorSettingClose() { onSensorSettingClose() {
this.target = null;
this.sensorSettingDisplay = false; this.sensorSettingDisplay = false;
} }
} }

14
src/packages/infra/component/probe-summary/probe-summary.component.html
View File

@ -1,3 +1,13 @@
<div *ngIf="probe"> <div *ngIf="probe && probeHost">
<b>probe host detail</b> <!-- Probe 정보 -->
<of-key-value [key]="'Probe Key'" [value]="probeHost.probe.probeKey"></of-key-value>
<of-key-value [key]="'Display Name'" [value]="probeHost.probe.displayName"></of-key-value>
<of-key-value [key]="'Authorized at'" [value]="probeHost.probe.authorizeDate"></of-key-value>
<of-key-value [key]="'Authorized by'" [value]="probeHost.probe.authorizeMember.name"></of-key-value>
<!-- ProbeHost 정보 -->
<of-key-value [key]="'OS'" [value]="probeHost.host.os.vendor.name"></of-key-value>
<of-key-value [key]="'IPv4'" [value]="probeHost.host.ipv4"></of-key-value>
<of-key-value [key]="'IPv6'" [value]="probeHost.host.ipv6"></of-key-value>
<of-key-value [key]="'Mac Address'" [value]="probeHost.mac"></of-key-value>
</div> </div>

8
src/packages/infra/component/probe-summary/probe-summary.component.ts
View File

@ -13,7 +13,7 @@ import { Probe, ProbeHost } from 'packages/probe/model';
}) })
export class ProbeSummaryComponent implements OnInit, AfterContentInit, OnChanges { export class ProbeSummaryComponent implements OnInit, AfterContentInit, OnChanges {
@Input() probe: Probe; @Input() probe: Object;
@Input() visible: boolean; @Input() visible: boolean;
probeHost$ = this.detailStore.pipe(select(ProbeHostSelector.select('probeHost'))); probeHost$ = this.detailStore.pipe(select(ProbeHostSelector.select('probeHost')));
@ -27,7 +27,8 @@ export class ProbeSummaryComponent implements OnInit, AfterContentInit, OnChange
this.probeHost$.subscribe( this.probeHost$.subscribe(
(probeHost: ProbeHost) => { (probeHost: ProbeHost) => {
if (probeHost) { if (probeHost) {
this.probe = probeHost; console.log(probeHost);
this.probeHost = probeHost;
} }
}, },
(error: RPCClientError) => { (error: RPCClientError) => {
@ -37,6 +38,9 @@ export class ProbeSummaryComponent implements OnInit, AfterContentInit, OnChange
} }
ngAfterContentInit() { ngAfterContentInit() {
console.log('$$$$$$$$$$');
console.log(this.probe);
console.log('$$$$$$$$$$');
this.detailStore.dispatch( this.detailStore.dispatch(
new DetailStore.ReadByProbe(this.probe) new DetailStore.ReadByProbe(this.probe)
); );

27
src/packages/member/component/profile/profile.component.html
View File

@ -1,36 +1,35 @@
<form [formGroup]="modifyForm" (ngSubmit)="modifyProfile()"> <form [formGroup]="modifyForm" (ngSubmit)="modifyProfile()">
<div class="ui-g"> <div class="ui-g">
<div class="ui-g-12 ui-md-3"> <div class="ui-g-12 ui-md-4 ui-img-profile">
<div> <div class="ui-img-profile-box">
<p-card> <div class="ui-g">
<div class="ui-g"> <img class="profile-image " src="assets/layout/images/dark-user-bg.png" />
<img class="profile-image ui-img-profile-responsive" src="assets/layout/images/dark-user-bg.png" /> </div>
</div> <button type="button" class="ui-button-photo-add" pButton icon="ui-icon-account-box" (click)="onAddSensorWithTarget(item.target)"></button>
</p-card>
</div> </div>
</div> </div>
<div class="ui-g-12 ui-md-9"> <div class="ui-g-12 ui-md-8">
<div class="ui-g form-group"> <div class="ui-g form-group">
<div class="ui-g-12 ui-md-6"> <div class="ui-g-12">
<span class="md-inputfield"> <span class="md-inputfield">
<input type="text" pInputText readonly value="{{member.email}}"> <input type="text" pInputText readonly value="{{member.email}}">
<label>Email</label> <label>Email</label>
</span> </span>
</div> </div>
<div class="ui-g-12 ui-md-6"> <div class="ui-g-12">
<span class="md-inputfield"> <span class="md-inputfield">
<input type="text" pInputText value="{{member.name}}" > <input type="text" pInputText value="{{member.name}}" >
<label>Name</label> <label>Name</label>
</span> </span>
</div> </div>
<div class="ui-g-12 ui-md-6"> <div class="ui-g-12">
<span class="md-inputfield"> <span class="md-inputfield">
<input type="text" pInputText value="{{member.companyName}}" > <input type="text" pInputText value="{{member.companyName}}" >
<label>Company Name</label> <label>Company Name</label>
</span> </span>
</div> </div>
<div class="ui-g-12 ui-md-6"> <div class="ui-g-12">
<span class="md-inputfield"> <span class="md-inputfield">
<input type="text" pInputText value="{{member.phone}}" > <input type="text" pInputText value="{{member.phone}}" >
<label>Phone</label> <label>Phone</label>
@ -45,6 +44,4 @@
</button> </button>
</div> </div>
</div> </div>
</form> </form>

35
src/styles.scss
View File

@ -112,12 +112,30 @@
color: #8BC34A !important; color: #8BC34A !important;
} }
} }
.ui-img-profile{
img.ui-img-profile-responsive { min-width: 250px !important;
@media (max-width: 640px) {
text-align: center;
}
}
.ui-img-profile-box {
width: 244px !important;
padding: 12px;
box-sizing: border-box;
display: block;
background-color: #ffffff;
border: 1px solid #bdbdbd;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
margin: auto;
width : 100%; img {
height: auto; object-fit: cover;
width:220px;
height:220px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
} }
@ -130,6 +148,7 @@ img.ui-img-profile-responsive {
} }
} }
.ui-sensors-datalist { .ui-sensors-datalist {
.ui-sensors{ .ui-sensors{
.ui-sensor{ .ui-sensor{
@ -231,4 +250,10 @@ img.ui-img-profile-responsive {
} }
} }
} }
}
.ui-button-photo-add {
vertical-align: text-bottom;
float: right;
margin-top: -30px;
margin-right: -5px;
} }