design

src/packages/infra/component/map/map.component.html

@@ -5,12 +5,20 @@
   </p-dialog>
   <div class="ui-g-12 ui-g-nopad">
     <div class="ui-g">
-      <div class="ui-g-6 ui-g-nopad ui-bottom-space-10">
+      <div class="ui-g-12 ui-md-5 ui-g-nopad ui-bottom-space-10">
         <button pButton type="button" class="ui-button-large ui-button-width-fit" icon="ui-icon-play-arrow" label="Discovery" (click)="showDialog()"></button>
       </div>
-      <div class="ui-g-6 ui-g-nopad" dir="rtl">
+      <div class="ui-g-12 ui-md-7 ui-g-nopad">
-        <button pButton type="button" class="ui-button-secondary ui-button-width-fit" label="Expand all" style="margin-top: 16px;" (click)="expandAll()"></button>
+          <div style="float: right;">
-        <button pButton type="button" class="ui-button-secondary ui-button-width-fit" label="Collapse all" style="margin-top: 16px;" (click)="collapseAll()"></button>
+              <button pButton type="button" class="ui-button-secondary ui-button-width-fit" label="Expand all" style="margin-top: 16px;" (click)="expandAll()"></button>
+              <button pButton type="button" class="ui-button-secondary ui-button-width-fit" label="Collapse all" style="margin-top: 16px;" (click)="collapseAll()"></button>
+          </div>
+          <div style="float: right; margin: 30px 15px 0 0;">
+            <i class="fa ui-icon-stop ui-status-icon ui-status-success"></i>Up
+            <i class="fa ui-icon-stop ui-status-icon ui-status-fatal"></i>Dwon 
+            <i class="fa ui-icon-stop ui-status-icon ui-status-warn"></i>Warn 
+            <i class="fa ui-icon-stop ui-status-icon ui-status-error"></i>Error 
+          </div>
       </div>
     </div>
   </div>

src/packages/sensor/component/list/list.component.html

@@ -1,15 +1,14 @@
 <h1>Sensors</h1>
 
-<div class="ui-bottom-space-10">
-    <p-dialog [modal]="true" [width]="800" [(visible)]="sensorSettingDisplay" [showHeader]="false" [closeOnEscape]="false">
-        <of-sensor-setting [visible]="sensorSettingDisplay" [preTarget]="target" (close)="onSensorSettingClose()"></of-sensor-setting>
-    </p-dialog>
-
-    <button type="button" label="Add Sensor" icon="ui-icon-add" pButton class="ui-button-width-fit" (click)="onAddSensor()"></button>
-</div>
-
 <div class="ui-g">
     <div class="ui-g-12 ui-md-3">
+        <div class="ui-bottom-space-10">
+            <p-dialog [modal]="true" [width]="800" [(visible)]="sensorSettingDisplay" [showHeader]="false" [closeOnEscape]="false">
+                <of-sensor-setting [visible]="sensorSettingDisplay" [preTarget]="target" (close)="onSensorSettingClose()"></of-sensor-setting>
+            </p-dialog>
+        
+            <button type="button" label="Add Sensor" icon="ui-icon-add" pButton class="ui-button-large" (click)="onAddSensor()"></button>
+        </div>
         <p-panel [showHeader]="false">
             <div class="ui-g">
                 <h3>Search</h3>
@@ -44,13 +43,17 @@
             </p-header> -->
             <ng-template let-item pTemplate="item">
                 <div style="border-bottom: 1px solid #bdbdbd" class="clearfix car-item">
-                    <div width="48" style="display:inline-block;margin:24px;vertical-align:middle">{{item.target.id}} - {{item.target.displayName}}</div>
+                    <div class="ui-g">
-                    <div class="car-details" style="display:inline-block;vertical-align:middle">
+                        <div class="ui-g-12 ui-md-3 ui-lg-3" style="display:inline-block;margin: auto 0">{{item.target.id}} - {{item.target.displayName}}</div>
-                        <div *ngFor="let sensor of item.sensors">
+                        <div class="ui-g-10 ui-md-7 ui-lg-8 car-details" style="display:inline-block;margin: auto 0">
-                            <a href="javascript:void(0)" (click)="onSensorClick(sensor)">{{sensor.crawler.name}} | {{sensor.itemCount}} items | {{sensor.status.name}}</a>
+                            <div *ngFor="let sensor of item.sensors">
+                                <a href="javascript:void(0)" (click)="onSensorClick(sensor)">{{sensor.crawler.name}} | {{sensor.itemCount}} items | {{sensor.status.name}}</a>
+                            </div>
+                        </div>
+                        <div class="ui-g-2 ui-md-2 ui-lg-1">
+                            <button type="button" pButton icon="ui-icon-add" style="margin:auto" (click)="onAddSensorWithTarget(item.target)"></button>
                         </div>
                     </div>
-                    <button type="button" pButton icon="ui-icon-add" style="margin:24px 24px 0 0;float:right" (click)="onAddSensorWithTarget(item.target)"></button>
                 </div>
             </ng-template>
         </p-dataList>

src/packages/sensor/component/setting/crawler-auth/crawler-auth.component.html

@@ -11,6 +11,7 @@
   <ng-template #info>
     <div>개발자의 배려가 돋보이는 친절한 안내 메시지</div>
   </ng-template>
-
+  <div dir="rtl">
-  <button *ngIf="crawler" type="button" label="Test" icon="ui-icon-send" pButton (click)="testCredentials()"></button>
+    <button *ngIf="crawler" type="button" label="Test" icon="ui-icon-send" pButton class="ui-button-width-fit" (click)="testCredentials()"></button>
+  </div>
 </p-panel>

src/packages/sensor/component/setting/crawler-selector/crawler-selector.component.html

@@ -3,7 +3,7 @@
     (onSelectionChange)="onSelectionChange($event)">
     <ng-template let-crawler pTemplate="item">
       <div class="ui-helper-clearfix">
-        <div style="font-size:14px;float:right;margin:0">{{crawler.name}}</div>
+        <div style="font-size:14px;margin:0">{{crawler.name}}</div>
       </div>
     </ng-template>
   </p-orderList>

src/styles.scss

@@ -52,6 +52,14 @@
     margin-top: 10px;
 }
 
+.ui-top-space--0-5em{
+    margin-top: -0.5em;
+}
+
+.ui-left-space-10{
+    margin-left: 10px;
+}
+
 .ui-float-right{
     float:right;
 }
@@ -90,3 +98,28 @@
     font-size: 0.8em !important;
 
 }
+.ui-status-icon{
+    //margin-top: 3px;
+    //position: static;
+    //display: inline-block;
+    vertical-align: middle;
+    &.ui-status-info {
+        color: #2196F3;
+    }
+
+    &.ui-status-warn {
+        color: #ffc107;
+    }
+
+    &.ui-status-error {
+        color: #e62a10;
+    }
+
+    &.ui-status-fatal {
+        color: #212121;
+    }
+
+    &.ui-status-success {
+        color: #8BC34A;
+    }
+}