Clean up icons

Clean up duplicate svg icons from assets directory.
Created a statusIcon component to dynamically render
status icons instead of using background-image in
scss files.

- Moved/removed on, off, critical, warning svg icons from
  assets directory
- Updated background-image status icons to use <icon>
  or <status-icon> directive

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Ic0f06d78b0861d6f60d40b2dcc0b80fd6dad2a88

3 files changed, 11 insertions, 37 deletions

diff --git a/app/server-control/controllers/power-operations-controller.html b/app/server-control/controllers/power-operations-controller.html
index ab83437..e44ef1f 100644
--- a/app/server-control/controllers/power-operations-controller.html
+++ b/app/server-control/controllers/power-operations-controller.html
@@ -13,11 +13,20 @@
   <!-- Power Indicator Bar -->
   <div class="row column">
     <div id="power-indicator-bar" class="power__indicator-bar"
-      ng-class="{'power__state-on': dataService.server_state == 'Running', 'power__state-off': dataService.server_state == 'Off', 'power__state-indet': dataService.server_state == 'Standby', 'power__state-error': dataService.server_state == 'Quiesced'}">
+      ng-class="{'power__state-on': dataService.server_state == 'Running',
+                 'power__state-off': dataService.server_state == 'Off',
+                 'power__state-indet': dataService.server_state == 'Standby',
+                 'power__state-error': dataService.server_state == 'Quiesced'}">
       <p class="inline">
         {{ dataService.hostname }} - {{ dataService.server_id }}
       </p>
       <h3 class="power__state inline no-margin h3">
+        <status-icon status="{{ dataService.server_state == 'Running' ? 'on' :
+                                dataService.server_state == 'Off' ? 'off' :
+                                dataService.server_state == 'Unreachable' ? 'off' :
+                                dataService.server_state == 'Standby' ? 'warn' :
+                                dataService.server_state == 'Quiesced' ? 'error' : null }}">
+        </status-icon>
         <span>{{ dataService.server_state | quiescedToError }}</span>
       </h3>
     </div>
diff --git a/app/server-control/controllers/power-operations-modal.html b/app/server-control/controllers/power-operations-modal.html
index 3524b4c..1d5387f 100644
--- a/app/server-control/controllers/power-operations-modal.html
+++ b/app/server-control/controllers/power-operations-modal.html
@@ -10,7 +10,7 @@
   </button>
   <div class="modal-header" id="modal-operation">
     <h3>
-      <div class="icon__warning inline" aria-label="Warning"></div>
+      <icon file="icon-warning" aria-hidden="true"></icon>
       {{
         activeModal === 2 || activeModal === 3
           ? "Server shutdown will cause outage"
diff --git a/app/server-control/styles/power-operations.scss b/app/server-control/styles/power-operations.scss
index 6a29dfd..0b0a339 100644
--- a/app/server-control/styles/power-operations.scss
+++ b/app/server-control/styles/power-operations.scss
@@ -11,12 +11,6 @@
   .power__state {
     font-weight: 700;
     margin-top: -0.3em;
-    span:before {
-      content: "";
-      position: absolute;
-      @extend .icon__off;
-      margin-left: -25px;
-    }
   }
 
   // Power bar indicator
@@ -40,43 +34,18 @@
     }
     &.power__state-on {
       background-position: -100%;
-      .power__state {
-        span:before {
-          content: "";
-          @extend .icon__good;
-        }
-      }
     }
     &.power__state-off {
       background-position: 0;
       color: $primary-dark;
-      .power__state {
-        span:before {
-          content: "";
-          @extend .icon__off;
-        }
-      }
     }
     &.power__state-indet {
       color: $text-02;
       @include indeterminate-bar;
-      .power__state {
-        span:before {
-          color: $status-warn;
-          content: "";
-          @extend .icon__warning;
-        }
-      }
     }
     &.power__state-error {
       background-position: 0;
       color: $primary-dark;
-      .power__state {
-        span:before {
-          content: "";
-          @extend .icon__critical;
-        }
-      }
     }
   }
 
@@ -157,8 +126,4 @@
     width: 10px;
     height: 10px;
   }
-
-  .icon__warning {
-    width: 24px;
-  }
 } //end power-operations