design

src/app/pages/home/home-page.component.html

@@ -97,7 +97,7 @@
 
 <p-dialog [showHeader]="false" [(visible)]="stopping" [modal]="true" [responsive]="false" [width]="300" [height]="100"
   [minY]="70" [closeOnEscape]="false" [closable]="false">
-  Discovery is being stopped...
+  <div class="ui-dialog-text-center">Discovery is being stopped...</div>
 </p-dialog>
 
 

src/app/pages/home/home-page.component.scss

@@ -152,4 +152,8 @@
   background-color: #666666;
   opacity: .20;
   filter: Alpha(Opacity=50);
+}
+.ui-dialog-text-center{
+  padding-top: 50px;
+  text-align: center;
 }

src/commons/component/host-detail.component.html

@@ -79,22 +79,28 @@
 
     <p-tabPanel header="Health">
 
-      <div class="ui-g-10 ui-g-offset-2">Count :
+      <div class="ui-g">
-        <input type="number" pInputText [(ngModel)]="count" min="1" max="50">
+        <div class="ui-ping-row">
+          <div class="title">Count </div>
+          <input type="number" pInputText [(ngModel)]="count" min="1" max="50">
+        </div>
+        <div class="ui-ping-row">
+          <div class="title">Interval </div>
+          <input type="number" pInputText [(ngModel)]="interval" min="1" max="10">
+        </div>
+        <div class="ui-ping-row">
+          <div class="title">Deadline </div>
+          <input type="number" pInputText [(ngModel)]="deadline" min="1" max="10">
+        </div>
       </div>
-      <div class="ui-g-10 ui-g-offset-2">Interval :
-        <input type="number" pInputText [(ngModel)]="interval" min="1" max="10">
-      </div>
-      <div class="ui-g-10 ui-g-offset-2">Deadline :
-        <input type="number" pInputText [(ngModel)]="deadline" min="1" max="10">
-      </div>
-
       <button type="button" pButton label="Ping" (click)="doPing()" class="ui-button-secondary ui-pingbn-position"></button>
-      <br />
-      <p-progressSpinner *ngIf="pingWaiting"></p-progressSpinner>
 
-      <textarea style="width: 100%; height: 250px; background-color: black; color:#fff;" *ngIf="!pingWaiting && pingResult"
+      <div class="ui-ping-result-textarea">
-        pInputTextarea autoResize="autoResize" [(ngModel)]="pingResultRaw"></textarea>
+        <p-progressSpinner *ngIf="pingWaiting"></p-progressSpinner>
+        <textarea *ngIf="!pingWaiting && pingResult" pInputTextarea autoResize="autoResize" [(ngModel)]="pingResultRaw"></textarea>
+      </div>
+
+
 
     </p-tabPanel>
   </p-tabView>

src/commons/component/host-detail.component.scss

@@ -18,11 +18,7 @@
 .detail-content {
   min-width: 500px !important;
 }
-.ui-pingbn-position{
+
-  float: right;
-  margin-top: -28px;
-  margin-right: 5px;
-}
 .detail-content-meta-title {
   padding-left: 10px;
   margin : 0;
@@ -53,3 +49,38 @@
     }
   }
 }
+.ui-ping-row{
+  padding: 5px;
+  width: 100%;
+  display: inline-block;
+  position: relative;
+  border-bottom: 1px solid #d8dae2;
+  .title{
+    width: 60px;
+    margin-left: 10px;
+    position: relative;
+    float: left;
+    font-weight: bold;
+  }
+}
+.ui-pingbn-position{
+  float: right;
+  margin-top: -28px;
+  margin-right: 5px;
+}
+.ui-ping-result-textarea{
+  width: 100%;
+  height: 250px;
+  vertical-align: middle;
+  text-align: center;
+  margin-top: 10px;
+  p-progressSpinner{
+    margin-top: 50px;
+  }
+  textarea{
+    width: 100%;
+    height: 250px;
+    background-color: black;
+    color:#fff;
+  }
+}

src/commons/component/service-detail.component.html

@@ -62,37 +62,45 @@
 
     <p-tabPanel header="Health" *ngIf="service.port.metaPortType.key === 'TCP'">
 
-      <div class="ui-g-10 ui-g-offset-2">Count :
+      <div class="ui-g">
-        <input type="number" pInputText [(ngModel)]="count" min="1" max="50">
+        <div class="ui-ping-row">
+          <div class="title">Count </div>
+          <input type="number" pInputText [(ngModel)]="count" min="1" max="50">
+        </div>
+        <div class="ui-ping-row">
+          <div class="title">Interval </div>
+          <input type="number" pInputText [(ngModel)]="interval" min="1" max="10">
+        </div>
+        <div class="ui-ping-row">
+          <div class="title">Deadline </div>
+          <input type="number" pInputText [(ngModel)]="deadline" min="1" max="10">
+        </div>
       </div>
-      <div class="ui-g-10 ui-g-offset-2">Interval :
+      <button type="button" pButton label="Ping" (click)="doPing()" class="ui-button-secondary ui-pingbn-position"></button>
-        <input type="number" pInputText [(ngModel)]="interval" min="1" max="10">
+      <div class="ui-ping-result">
-      </div>
+        <p-progressSpinner *ngIf="pingWaiting"></p-progressSpinner>
-      <div class="ui-g-10 ui-g-offset-2">Deadline :
+        <p-table [value]="pingResult.responses | objectKeys" *ngIf="!pingWaiting && pingResult">
-        <input type="number" pInputText [(ngModel)]="deadline" min="1" max="10">
+          <ng-template pTemplate="header">
+            <tr>
+              <th style="width: 3.25em">No.</th>
+              <th>Response Time (ms)</th>
+            </tr>
+          </ng-template>
+          <ng-template pTemplate="body" let-key let-i="rowIndex">
+            <tr>
+              <td>
+                {{i + 1}}
+              </td>
+              <td>
+                {{pingResult.responses[key].time}}
+                {{pingResult.responses[key].error}}
+              </td>
+            </tr>
+          </ng-template>
+        </p-table>
       </div>
 
-      <button type="button" pButton label="Ping" (click)="doPing()" class="ui-button-secondary"></button>
+
-      <p-progressSpinner *ngIf="pingWaiting"></p-progressSpinner>
-      <p-table [value]="pingResult.responses | objectKeys" *ngIf="!pingWaiting && pingResult">
-        <ng-template pTemplate="header">
-          <tr>
-            <th style="width: 3.25em">No.</th>
-            <th>Response Time (ms)</th>
-          </tr>
-        </ng-template>
-        <ng-template pTemplate="body" let-key let-i="rowIndex">
-          <tr>
-            <td>
-              {{i + 1}}
-            </td>
-            <td>
-              {{pingResult.responses[key].time}}
-              {{pingResult.responses[key].error}}
-            </td>
-          </tr>
-        </ng-template>
-      </p-table>
 
     </p-tabPanel>
 

src/commons/component/service-detail.component.scss

@@ -13,11 +13,6 @@
 .detail-content {
   min-width: 500px !important;
 }
-.ui-pingbn-position{
-  float: right;
-  margin-top: -28px;
-  margin-right: 5px;
-}
 .detail-content-meta-title > ul{
   -webkit-margin-before: 0.5em;
   -webkit-margin-after: 1em;
@@ -52,3 +47,32 @@
     }
   }
 }
+.ui-ping-row{
+  padding: 5px;
+  width: 100%;
+  display: inline-block;
+  position: relative;
+  border-bottom: 1px solid #d8dae2;
+  .title{
+    width: 60px;
+    margin-left: 10px;
+    position: relative;
+    float: left;
+    font-weight: bold;
+  }
+}
+.ui-pingbn-position{
+  float: right;
+  margin-top: -28px;
+  margin-right: 5px;
+}
+.ui-ping-result{
+  width: 100%;
+  height: 250px;
+  vertical-align: middle;
+  text-align: center;
+  margin-top: 10px;
+  p-progressSpinner{
+    margin-top: 50px;
+  }
+}