Create firmware-card component
Create reusable firmware card component that will be
used in the updated firmware page:
https://ibm.invisionapp.com/share/4XNZ0JAMJ7B#/screens/319212821_4-8-D-1_Home
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I86e526c59ac5c2e2c011aed0ce4bc3d82db63b5e
diff --git a/app/configuration/components/card.js b/app/configuration/components/card.js
new file mode 100644
index 0000000..863c079
--- /dev/null
+++ b/app/configuration/components/card.js
@@ -0,0 +1,51 @@
+window.angular && (function(angular) {
+ 'use strict';
+
+ /**
+ *
+ * firmwareCard Component
+ *
+ */
+
+ /**
+ * Component template
+ */
+ const template = `
+ <div class="card-component">
+ <div class="card__header"
+ ng-class="{
+ 'card__header--success' : $ctrl.status === 'success',
+ 'card__header--error' : $ctrl.status === 'error' }">
+ <p class="card__header__label inline">{{$ctrl.headerLabel}}</p>
+ <p class="card__header__value inline">{{$ctrl.headerValue}}</p>
+ </div>
+ <div class="card__body"
+ ng-if="$ctrl.body">
+ <div class="row">
+ <div class="column small-6">
+ <label>BMC Status</label>
+ {{$ctrl.bmcStatus || 'n/a'}}
+ </div>
+ <div class="column small-6">
+ <label>Host status</label>
+ {{$ctrl.hostStatus || 'n/a'}}
+ </div>
+ </div>
+ </div>
+ </div>`
+
+ /**
+ * Register firmwareCard component
+ */
+ angular.module('app.configuration').component('firmwareCard', {
+ template,
+ bindings: {
+ headerLabel: '@',
+ headerValue: '<',
+ status: '<', // optional, 'success' or 'error'
+ body: '<', // boolean true to render body content
+ hostStatus: '<',
+ bmcStatus: '<'
+ }
+ })
+})(window.angular);
\ No newline at end of file
diff --git a/app/configuration/styles/card.scss b/app/configuration/styles/card.scss
new file mode 100644
index 0000000..cec00a1
--- /dev/null
+++ b/app/configuration/styles/card.scss
@@ -0,0 +1,27 @@
+.card-component {
+ max-width: 600px;
+ min-width: 300px;
+ display: block;
+}
+
+.card__header {
+ background-color: $background-02;
+ padding: 1rem 1.5rem;
+ * {
+ margin: 0;
+ }
+}
+
+.card__header--success {
+ background-color: $notification-success--light;
+}
+
+.card__header--error {
+ background-color: $accent-04--02;
+}
+
+.card__body {
+ padding: 1rem 1.5rem;
+ border: 1px solid $border-color-01;
+ border-width: 0 1px 1px;
+}
\ No newline at end of file
diff --git a/app/configuration/styles/index.scss b/app/configuration/styles/index.scss
index e532583..3d5feff 100644
--- a/app/configuration/styles/index.scss
+++ b/app/configuration/styles/index.scss
@@ -2,3 +2,5 @@
@import "./snmp.scss";
@import "./date-time.scss";
@import "./firmware.scss";
+@import "./card.scss";
+
diff --git a/app/index.js b/app/index.js
index 62fff23..8eec6c5 100644
--- a/app/index.js
+++ b/app/index.js
@@ -104,6 +104,7 @@
import network_controller from './configuration/controllers/network-controller.js';
import snmp_controller from './configuration/controllers/snmp-controller.js';
import firmware_controller from './configuration/controllers/firmware-controller.js';
+import card from './configuration/components/card.js';
import access_control from './access-control/index.js';
import user_controller from './access-control/controllers/user-controller.js';