Implement firmware upload function

Change-Id: Ie89793ec9add1fc9e5241b422cfff64784f7b078
Signed-off-by: Iftekharul Islam <iislam@us.ibm.com>
diff --git a/app/common/directives/file.js b/app/common/directives/file.js
new file mode 100644
index 0000000..11adf8a
--- /dev/null
+++ b/app/common/directives/file.js
@@ -0,0 +1,21 @@
+window.angular && (function (angular) {
+    'use strict';
+
+    angular
+        .module('app.common.directives')
+        .directive('file', function () {
+            return {
+                scope: {
+                    file: '='
+                },
+                link: function (scope, el, attrs) {
+                    el.bind('change', function (event) {
+                        var file = event.target.files[0];
+                        scope.file = file ? file : undefined;
+                        scope.$apply();
+                    });
+                }
+            };
+        });
+
+})(window.angular);
\ No newline at end of file
diff --git a/app/common/directives/firmware-list.html b/app/common/directives/firmware-list.html
new file mode 100644
index 0000000..91f08a6
--- /dev/null
+++ b/app/common/directives/firmware-list.html
@@ -0,0 +1,67 @@
+<div class="row column firmware__table">
+	<div class="table-header column small-12">
+		<p class="inline">{{title}}</p>
+		<p class="inline firmware__active-version">In-memory firmware version: {{version}}</p>
+	</div>
+	<div class="table row column">
+		<div class="table__head">
+			<div class="table__row">
+				<div class="table__cell">
+					Boot Priority
+				</div>
+				<div class="table__cell">
+					Image state
+				</div>
+				<div class="table__cell">
+					Image ID
+				</div>
+				<div class="table__cell">
+					Version
+				</div>
+				<div class="table__cell">
+					Action
+				</div>
+			</div>
+		</div>
+		<div class="table__body">
+			<div class="table__row" ng-repeat="firmware in firmwares|filter:filterBy">
+				<div class="table__cell firmware__primary">
+					<span class="table__cell-label">Boot Priority:</span>
+					<div class="icon icon__up-arrow icon-as-spacer" aria-hidden="true">
+						<span class="accessible-text">firmware down in priority</span></div>
+					<div class="icon icon__down-arrow" aria-hidden="true">
+						<span class="accessible-text">firmware down in priority</span></div>
+				</div>
+				<div class="table__cell firmware__active">
+					<span class="table__cell-label">Image state:</span><span ng-if="firmware.active">Active</span>
+				</div>
+				<div class="table__cell">
+					<span class="table__cell-label">Image ID:</span>{{firmware.imageId}}
+				</div>
+				<div class="table__cell firmware__version" ng-class="{'active':firmware.isExtended}">
+					<span class="table__cell-label">Version:</span>{{firmware.Version}}
+					<div class="icon icon__more" ng-click="firmware.extended.show = ! firmware.extended.show"
+							ng-class="{'active':firmware.isExtended}" ng-show="firmware.isExtended">
+						<svg version="1.1" x="0px" y="0px" viewBox="0 0 24.3 24.6">
+							<path d="M12.1,23C6.1,23,1.3,18.2,1.3,12.3S6.1,1.6,12.1,1.6s10.7,4.8,10.7,10.7S18,23,12.1,23z M12.1,2.6c-5.4,0-9.7,4.4-9.7,9.7 S6.7,22,12.1,22s9.7-4.4,9.7-9.7S17.4,2.6,12.1,2.6z"/>
+							<g>
+								<circle cx="6.7" cy="12.5" r="1.5"/>
+								<circle cx="12.1" cy="12.5" r="1.5"/>
+								<circle cx="17.4" cy="12.5" r="1.5"/>
+							</g>
+						</svg>
+					</div>
+					<div class="icon__more-dropdown" ng-show="firmware.extended.show">
+						<h5 class="bold">Extended version information</h5>
+						<p class="no-margin" ng-repeat="version in firmware.extended.versions">{{version.title}}: {{version.version}}</p>
+					</div>
+				</div>
+				<div class="table__cell">
+				    <span class="table__cell-label">Action:</span>
+				    <button class="firmware__action-link" ng-show="!firmware.active" ng-click="activate(firmware.imageId)">Activate</button>
+				    <button class="firmware__action-link" ng-show="!firmware.active" ng-click="delete(firmware.imageId)">Delete</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/app/common/directives/firmware-list.js b/app/common/directives/firmware-list.js
new file mode 100644
index 0000000..f4cc94f
--- /dev/null
+++ b/app/common/directives/firmware-list.js
@@ -0,0 +1,28 @@
+window.angular && (function (angular) {
+    'use strict';
+
+    angular
+        .module('app.common.directives')
+        .directive('firmwareList', ['APIUtils', function (APIUtils) {
+            return {
+                'restrict': 'E',
+                'templateUrl': 'common/directives/firmware-list.html',
+                'scope': {
+                   'title': '@',
+                   'firmwares': '=',
+                   'filterBy': '=',
+                   'version': '='
+                },
+                'controller': ['$rootScope', '$scope','dataService', '$location', '$timeout', function($rootScope, $scope, dataService, $location, $timeout){
+                    $scope.dataService = dataService;
+                    $scope.activate = function(imageId){
+                        $scope.$parent.activateImage(imageId);
+                    }
+
+                    $scope.delete = function(imageId){
+                        $scope.$parent.deleteImage(imageId);
+                    }
+                }]
+            };
+        }]);
+})(window.angular);
\ No newline at end of file
diff --git a/app/common/directives/log-event.html b/app/common/directives/log-event.html
index 2f02315..70d7dee 100644
--- a/app/common/directives/log-event.html
+++ b/app/common/directives/log-event.html
@@ -11,23 +11,22 @@
                  <button class="btn-primary" ng-click="event.confirm=false;">No</button>
              </div>
          </div>
-         <div class="column small-1 large-1 event-log__col-check">
+         <div class="column small-1 large-2 event-log__col-check">
              <label class="control-check">
                  <input type="checkbox" name="events__check" ng-click="event.selected= ! event.selected"
                         ng-checked="event.selected"/>
                  <div class="control__indicator"></div>
              </label>
          </div>
-         <div class="column small-9 large-10 event-log__event-info"
+         <div class="column small-9 large-9 event-log__event-info"
               ng-click="event.meta = ! event.meta">
-             <p class="inline event__id">#{{event.Id}}</p>
              <p class="inline event__priority event-resolved" ng-hide="event.Resolved == 0">Resolved</p>
              <p class="inline event__priority med-priority" ng-class="{'low-priority': event.priority == 'Low', 'medium-priority': event.priority == 'Medium', 'high-priority': event.priority == 'High'}" ng-hide="event.Resolved == 1">{{event.priority}}</p>
              <p class="inline event__severity">{{event.severity_code}}</p>
-             <p class="inline event__timestamp">{{event.Timestamp| date:'MM/dd/yyyy  HH:mm:ss '+tmz: tmz}}</p>
+             <p class="inline event__description">{{event.Severity}}</p>
              <div>
-                 <p class="inline event__description">{{event.Severity}}</p>
-             </div>
+                 <p class="inline event__id">#{{event.Id}}</p>
+                 <p class="inline event__timestamp">{{event.Timestamp| date:'MM/dd/yyyy  HH:mm:ss '+tmz: tmz}}</p></div>
          </div>
          <div class="column small-1 large-1">
              <button class="accord-trigger" ng-class="{'active': event.meta}"