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

22 files changed, 112 insertions, 175 deletions

diff --git a/app/access-control/controllers/certificate-controller.html b/app/access-control/controllers/certificate-controller.html
index 4226262..c1f64fa 100644
--- a/app/access-control/controllers/certificate-controller.html
+++ b/app/access-control/controllers/certificate-controller.html
@@ -12,7 +12,7 @@
   </div>
   <div ng-repeat="certificate in certificates|filter:{isExpired:true}" class="row column">
     <div class="small-12 alert alert-danger" role="alert">
-      <div class="icon__critical inline"></div> The uploaded {{certificate.name}} has expired! Consider replacing it with a new certificate.
+      <icon file="icon-critical.svg" aria-hidden="true"></icon> The uploaded {{certificate.name}} has expired! Consider replacing it with a new certificate.
     </div>
   </div>
   <div class="row column">
diff --git a/app/access-control/controllers/user-accounts-modal-user.html b/app/access-control/controllers/user-accounts-modal-user.html
index 4e646b1..d718dcd 100644
--- a/app/access-control/controllers/user-accounts-modal-user.html
+++ b/app/access-control/controllers/user-accounts-modal-user.html
@@ -16,6 +16,7 @@
                aria-live="polite"
                ng-class="{'notification-banner--warning': !form.lock.$dirty,
                           'notification-banner--information': form.lock.$dirty}">
+            <icon file="icon-warning.svg" aria-hidden="true" ng-if="!form.lock.$dirty"></icon>
             <p class="notification-banner__text" ng-if="!form.lock.$dirty">Account locked</p>
             <p class="notification-banner__text" ng-if="form.lock.$dirty">Click "Save" to unlock account</p>
           </div>
diff --git a/app/assets/images/icon-off.svg b/app/assets/icons/icon-off.svg
index 9757f9d..9757f9d 100644
--- a/app/assets/images/icon-off.svg
+++ b/app/assets/icons/icon-off.svg
diff --git a/app/assets/images/icon-on.svg b/app/assets/icons/icon-on.svg
index ac750b0..ac750b0 100644
--- a/app/assets/images/icon-on.svg
+++ b/app/assets/icons/icon-on.svg
diff --git a/app/assets/images/icon-critical.svg b/app/assets/images/icon-critical.svg
deleted file mode 100644
index de7df36..0000000
--- a/app/assets/images/icon-critical.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><style>.st2{fill:none;stroke:#da1416;stroke-width:2;stroke-miterlimit:10}</style><path d="M10 2.3c4.3 0 7.7 3.5 7.7 7.7s-3.5 7.7-7.7 7.7-7.7-3.4-7.7-7.7S5.8 2.3 10 2.3m0-1.9C4.7.4.3 4.7.3 10.1s4.3 9.7 9.7 9.7 9.7-4.3 9.7-9.7S15.3.4 10 .4z" fill="#da1416"/><circle cx="10" cy="10" r="7.7" opacity=".4" fill="#da1416"/><path class="st2" d="M4.5 4.5l11 11.1M15.5 4.5l-11 11.1"/></svg>
\ No newline at end of file
diff --git a/app/assets/images/icon-warning.svg b/app/assets/images/icon-warning.svg
deleted file mode 100644
index f69427d..0000000
--- a/app/assets/images/icon-warning.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path opacity=".4" fill="#ffb000" d="M2.5 17L10 4l7.5 13z"/><path d="M10 1.4L.3 18.3h19.5L10 1.4zM10 4l7.5 13h-15L10 4z" fill="#ffb000"/><path d="M9.2 7.8v1.4l.4 3.5h.8l.4-3.5V7.8H9.2z"/><circle cx="10" cy="14.7" r=".8"/></svg>
\ No newline at end of file
diff --git a/app/common/components/status-icon.js b/app/common/components/status-icon.js
new file mode 100644
index 0000000..d756326
--- /dev/null
+++ b/app/common/components/status-icon.js
@@ -0,0 +1,42 @@
+window.angular && (function(angular) {
+  'use strict';
+
+  /**
+   * statusIcon Component
+   *
+   * To use:
+   * The <status-icon> component expects a 'status' attribute
+   * with a status value (on, off, warn, error)
+   *
+   */
+
+  /**
+   * statusIcon Component template
+   */
+  const template = `<icon ng-if="$ctrl.status === 'on'"
+                          file="icon-on.svg"
+                          aria-hidden="true"
+                          class="status-icon">
+                    </icon>
+                    <icon ng-if="$ctrl.status === 'off'"
+                          file="icon-off.svg"
+                          aria-hidden="true"
+                          class="status-icon">
+                    </icon>
+                    <icon ng-if="$ctrl.status === 'warn'"
+                          file="icon-warning.svg"
+                          aria-hidden="true"
+                          class="status-icon">
+                    </icon>
+                    <icon ng-if="$ctrl.status === 'error'"
+                          file="icon-critical.svg"
+                          aria-hidden="true"
+                          class="status-icon">
+                    </icon>`
+
+  /**
+   * Register statusIcon component
+   */
+  angular.module('app.common.components')
+      .component('statusIcon', {template, bindings: {status: '@'}})
+})(window.angular);
\ No newline at end of file
diff --git a/app/common/directives/app-header.html b/app/common/directives/app-header.html
index 651e56d..bf4fb8f 100644
--- a/app/common/directives/app-header.html
+++ b/app/common/directives/app-header.html
@@ -24,22 +24,29 @@
       >
         <icon aria-hidden="true" file="icon-chevron-right.svg"></icon>
       </button>
-      <a href="#/server-health/event-log" class="header__action"
-        >Server health
-        <icon aria-hidden="true" file="icon-chevron-right.svg"></icon
-        ><span
-          ng-class="{'status-light__error': dataService.server_health == 'Critical', 'status-light__warn': dataService.server_health == 'Warning', 'status-light__good': dataService.server_health == 'Good'}"
-          >{{ dataService.server_health }}</span
-        ></a
-      >
-      <a href="#/server-control/power-operations" class="header__action"
-        >Server power
-        <icon aria-hidden="true" file="icon-chevron-right.svg"></icon
-        ><span
-          ng-class="{'status-light__off': dataService.server_state == 'Off', 'status-light__disabled': dataService.server_state == 'Unreachable', 'status-light__good': dataService.server_state == 'Running', 'status-light__error': dataService.server_state == 'Quiesced'}"
-          >{{ dataService.server_state | quiescedToError }}</span
-        ></a
-      >
+      <a href="#/server-health/event-log" class="header__action">
+        Server health
+        <icon aria-hidden="true" file="icon-chevron-right.svg"></icon>
+        <span>
+            <status-icon status="{{ dataService.server_health == 'Critical' ? 'error' :
+                                    dataService.server_health == 'Warning' ? 'warn' :
+                                    dataService.server_health == 'Good' ? 'on' : null }}">
+            </status-icon>
+          {{ dataService.server_health }}
+        </span>
+      </a>
+      <a href="#/server-control/power-operations" class="header__action">
+        Server power
+        <icon aria-hidden="true" file="icon-chevron-right.svg"></icon>
+        <span>
+          <status-icon status="{{ dataService.server_state == 'Quiesced' ? 'error' :
+                                  dataService.server_state == 'Running' ? 'on' :
+                                  dataService.server_state == 'Off' ? 'off' :
+                                  dataService.server_state == 'Unreachable' ? 'off' : null }}">
+          </status-icon>
+          {{ dataService.server_state | quiescedToError }}
+        </span>
+      </a>
       <p class="header__refresh">
         Data last refreshed<span>{{
           dataService.last_updated | localeDate
diff --git a/app/common/styles/base/icons.scss b/app/common/styles/base/icons.scss
index 9a9646b..0d91f1d 100644
--- a/app/common/styles/base/icons.scss
+++ b/app/common/styles/base/icons.scss
@@ -50,39 +50,6 @@
     color: $text-02;
   }
 }
-//Status icons
-@mixin status-icon {
-  background-repeat: no-repeat;
-  vertical-align: middle;
-  width: 16px;
-  height: 16px;
-  margin-right: .4em;
-}
-
-.icon__warning {
-  @include status-icon;
-  background-image: url(../assets/images/icon-warning.svg);
-}
-
-.modal .icon__warning {
-  width: 30px;
-  height: 30px;
-}
-
-.icon__critical {
-  @include status-icon;
-  background-image: url(../assets/images/icon-critical.svg);
-}
-
-.icon__good {
-  @include status-icon;
-  background-image: url(../assets/images/icon-on.svg);
-}
-
-.icon__off {
-  @include status-icon;
-  background-image: url(../assets/images/icon-off.svg);
-}
 
 .icon__info{
   margin-top: -4px;
@@ -108,3 +75,13 @@
   @extend .icon__up-arrow;
   transform: rotate(180deg);
 }
+
+.icon__info-tooltip {
+  fill: $primary-accent;
+}
+
+.status-icon {
+  width: 1rem;
+  vertical-align: text-bottom;
+  margin-right: 0.25em;
+}
diff --git a/app/common/styles/elements/alerts.scss b/app/common/styles/elements/alerts.scss
index fe1082e..694d2a6 100644
--- a/app/common/styles/elements/alerts.scss
+++ b/app/common/styles/elements/alerts.scss
@@ -31,6 +31,7 @@
   margin-bottom: 24px;
   border-style: solid;
   border-width: 1px;
+  position: relative;
 }
 
 .notification-banner__text {
@@ -47,15 +48,16 @@
 .notification-banner--warning {
   background-color: $accent-03--03;
   border-color: $accent-03--02;
+  .icon {
+    position: absolute;
+    left: 10px;
+    top: 8px;
+    bottom: 8px;
+    width: 18px;
+    height: 30px;
+    margin: auto;
+  }
   .notification-banner__text {
-    &::before {
-      content: '';
-      display: inline-block;
-      width: 18px;
-      height: 18px;
-      vertical-align: bottom;
-      margin-right: 0.5em;
-      background-image: url(../assets/images/icon-warning.svg);
-    }
+    padding-left: 24px;
   }
 }
diff --git a/app/common/styles/elements/index.scss b/app/common/styles/elements/index.scss
index 66a2877..b1df113 100644
--- a/app/common/styles/elements/index.scss
+++ b/app/common/styles/elements/index.scss
@@ -1,6 +1,5 @@
 @import "toggle-switch";
 @import "toggle-filter";
-@import "status";
 @import "alerts";
 @import "inline-confirm";
 @import "input-file";
diff --git a/app/common/styles/elements/status.scss b/app/common/styles/elements/status.scss
deleted file mode 100644
index b6cdc9d..0000000
--- a/app/common/styles/elements/status.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-//status light states
-@mixin status-light-before {
-  content: '';
-  display: inline-block;
-  margin-right: -12%;
-  transform: translateY(-2px);
-  left: 0;
-  top: 0;
-  width: 16px;
-  height: 16px;
-  position: absolute;
-}
-
-@mixin status-light-header {
-  padding-left: 1.6em;
-  margin-top: .7em;
-  position: relative;
-}
-@mixin status-light__good {
-  @include status-light-before;
-}
-
-@mixin status-light__error {
-  @include status-light-before;
-}
-
-@mixin status-light__disabled {
-  @include status-light-before;
-}
-
-@mixin status-light__warn {
-  @include status-light-before;
-
-}
-
-.status-light__disabled,
-.status-light__off{
-  @include status-light-header;
-  &::before {
-    @include status-light__disabled;
-    @extend .icon__off;
-  }
-}
-
-.status-light__good {
-  @include status-light-header;
-  &::before {
-    @include status-light__good;
-    @extend .icon__good;
-  }
-}
-
-.status-light__error {
-  @include status-light-header;
-  &::before {
-    @include status-light__error;
-    @extend .icon__critical;
-  }
-
-}
-
-.status-light__warn {
-  @include status-light-header;
-  &::before {
-    @include status-light__warn;
-    @extend .icon__warning;
-  }
-}
\ No newline at end of file
diff --git a/app/common/styles/layout/header.scss b/app/common/styles/layout/header.scss
index 084fe71..5a7a9d1 100644
--- a/app/common/styles/layout/header.scss
+++ b/app/common/styles/layout/header.scss
@@ -149,6 +149,10 @@ $logoMaxWidth: 125px;
       width: 1rem;
     }
 
+    .status-icon {
+      vertical-align: text-top;
+    }
+
     &:hover {
       background: $background-01;
     }
diff --git a/app/configuration/controllers/firmware-controller.html b/app/configuration/controllers/firmware-controller.html
index 98f9c00..da2c397 100644
--- a/app/configuration/controllers/firmware-controller.html
+++ b/app/configuration/controllers/firmware-controller.html
@@ -57,7 +57,7 @@
   <div class="modal__tftp-unreachable" role="document">
     <div class="screen-reader-offscreen modal-description">Update image priority</div><!-- accessibility only; used for screen readers -->
     <div class="page-header ">
-      <span class="icon icon__warning inline"><span class="accessible-text" role="alert">Warning</span></span>
+      <icon file="icon-warning" aria-hidden="true"></icon><span class="accessible-text" role="alert">Warning</span>
       <h3 class="modal-title inline">Change image priority</h3>
     </div>
     <div class="modal__content">
@@ -74,7 +74,7 @@
   <div class="modal__tftp-unreachable" role="document">
     <div class="screen-reader-offscreen modal-description">Delete firmware image</div><!-- accessibility only; used for screen readers -->
     <div class="page-header ">
-      <span class="icon icon__warning inline"><span class="accessible-text" role="alert">Warning</span></span>
+      <icon file="icon-warning" aria-hidden="true"></icon><span class="accessible-text" role="alert">Warning</span>
       <h3 class="modal-title inline">Delete image</h3>
     </div>
     <div class="modal__content">
diff --git a/app/configuration/controllers/network-controller.html b/app/configuration/controllers/network-controller.html
index 102f1f2..0ec143c 100644
--- a/app/configuration/controllers/network-controller.html
+++ b/app/configuration/controllers/network-controller.html
@@ -121,7 +121,7 @@
     <div class="screen-reader-offscreen modal-description">Change network settings</div>
     <!-- accessibility only; used for screen readers -->
     <div class="page-header">
-      <span class="icon icon__warning inline"><span class="accessible-text" role="alert">Warning</span></span>
+      <icon file="icon-warning" aria-hidden="true"></icon><span class="accessible-text" role="alert">Warning</span>
       <h3 class="modal-title inline">Change network settings</h3>
     </div>
     <div class="modal__content">
diff --git a/app/index.js b/app/index.js
index fa1d017..6e24319 100644
--- a/app/index.js
+++ b/app/index.js
@@ -71,6 +71,7 @@ import table_component from './common/components/table/table.js';
 import table_actions_component from './common/components/table/table-actions.js';
 import table_toolbar_component from './common/components/table/table-toolbar.js';
 import table_checkbox from './common/components/table/table-checkbox.js';
+import status_icon from './common/components/status-icon.js';
 
 import login_index from './login/index.js';
 import login_controller from './login/controllers/login-controller.js';
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
diff --git a/app/server-health/controllers/inventory-overview-controller.html b/app/server-health/controllers/inventory-overview-controller.html
index c0f05d2..5dc6f03 100644
--- a/app/server-health/controllers/inventory-overview-controller.html
+++ b/app/server-health/controllers/inventory-overview-controller.html
@@ -45,7 +45,7 @@
             <div class="row column">
               <h5 class="small-12 content-label">Subcomponents</h5>
               <p ng-repeat="sub_component in inventory.sub_components" class="large-6 small-3 courier-bold" ng-if="sub_component.Present">
-                <span class="icon icon__warning" ng-if="!sub_component.Functional"></span>
+                <icon file="icon-warning" aria-hidden="true" ng-if="!sub_component.Functional"></icon>
                 {{sub_component.title}}
               </p>
             </div>
diff --git a/app/server-health/controllers/sensors-overview-controller.html b/app/server-health/controllers/sensors-overview-controller.html
index 6f2b2d2..c65a9dd 100644
--- a/app/server-health/controllers/sensors-overview-controller.html
+++ b/app/server-health/controllers/sensors-overview-controller.html
@@ -57,7 +57,10 @@
     <tbody class="sensors__tbody">
       <tr class="sensors__tbody-row" ng-repeat="sensor in data|filter:filterBySeverity|filter:filterBySearchTerms|orderBy:'+custom_order' as filteredSensorData">
         <th class="sensors__tbody-header">
-          <span class="icon" ng-class="{'icon__critical': sensor.status == 'critical', 'icon__warning': sensor.status == 'warning', 'icon__normal': sensor.status == 'normal'}" aria-label="Sensor status: {{sensor.status}}" ></span>
+          <status-icon status="{{ sensor.status == 'critical' ? 'error' :
+                                  sensor.status == 'warning' ? 'warn' : null }}"
+                       aria-label="Sensor status: {{sensor.status}}">
+          </status-icon>
           <span>{{sensor.title}}</span>
         </th>
         <td class="sensors__tbody-cell">
diff --git a/app/server-health/styles/sensors.scss b/app/server-health/styles/sensors.scss
index c9efd49..6912f04 100644
--- a/app/server-health/styles/sensors.scss
+++ b/app/server-health/styles/sensors.scss
@@ -72,9 +72,6 @@ $thresh-normal: $accent-02--02;
   background: $background-02;
   padding: 0.5rem 1rem;
   font-weight: 700;
-  .icon.icon__normal {
-    display: none;
-  }
 
   @include mediaQuery(medium) {
     flex: 1;