--- a/src/app/components/jvm-list/jvm-list.controller.js	Wed Jul 12 10:00:35 2017 -0400
+++ b/src/app/components/jvm-list/jvm-list.controller.js	Wed Jul 12 09:30:38 2017 -0400
@@ -27,6 +27,7 @@
 
 import filters from 'shared/filters/filters.module.js';
 import service from './jvm-list.service.js';
+import dismissibleErrorMessage from "shared/directives/dismissible-error-message/dismissible-error-message.directive.js";
 
 class JvmListController {
   constructor (jvmListService, $scope, $location, $timeout, $anchorScroll) {
@@ -37,6 +38,9 @@
     this.timeout = $timeout;
     this.anchorScroll = $anchorScroll;
 
+    $scope.errTitle = 'Unable to retrieve data.';
+    $scope.errMessage = 'Error while retrieving Thermostat JVM Listing.';
+
     this.aliveOnly = true;
     let aliveOnlySwitch = angular.element('#aliveOnlyState');
     aliveOnlySwitch.bootstrapSwitch();
@@ -95,6 +99,7 @@
 
 export default angular
   .module('jvmList.controller', [
+    'directives.dismissible-error-message',
     'patternfly',
     filters,
     service

--- a/src/app/components/jvm-list/jvm-list.html	Wed Jul 12 10:00:35 2017 -0400
+++ b/src/app/components/jvm-list/jvm-list.html	Wed Jul 12 09:30:38 2017 -0400
@@ -4,10 +4,7 @@
     <li><a ui-sref="jvmList">JVM List</a></li>
   </ol>
 
-  <div ng-show="ctrl.showErr" class="alert alert-danger alert-dismissable">
-    <span class="pficon pficon-error-circle-o"></span>
-    <strong>Unable to retrieve data.</strong> Error while retrieving Thermostat JVM Listing.
-  </div>
+  <dismissible-error-message ng-show="ctrl.showErr" err-message="errMessage" err-title="errTitle"></dismissible-error-message>
 
   <div ng-show="!ctrl.showErr" >
     <div class="text-right">

--- a/src/app/components/system-info/system-info.controller.js	Wed Jul 12 10:00:35 2017 -0400
+++ b/src/app/components/system-info/system-info.controller.js	Wed Jul 12 09:30:38 2017 -0400
@@ -33,7 +33,11 @@
     'ngInject';
     this.systemId = systemId;
     this.showErr = false;
+
     $scope.systemId = systemId;
+    $scope.errTitle = 'Unable to retrieve data.';
+    $scope.errMessage = 'Error while retrieving system information.';
+
     systemInfoService.getSystemInfo(systemId).then(
       resp => {
         this.systemInfo = resp.data.response;

--- a/src/app/components/system-info/system-info.html	Wed Jul 12 10:00:35 2017 -0400
+++ b/src/app/components/system-info/system-info.html	Wed Jul 12 09:30:38 2017 -0400
@@ -4,10 +4,9 @@
     <li><a ui-sref="jvmList({ '#': ctrl.systemId })">JVM List</a></li>
     <li><a ui-sref="systemInfo({ systemId: ctrl.systemId })">{{ctrl.systemId}}</a></li>
   </ol>
-  <div ng-show="ctrl.showErr" class="alert alert-danger alert-dismissable">
-    <span class="pficon pficon-error-circle-o"></span>
-    <strong>Unable to retrieve data.</strong> Error while retrieving system information.
-  </div>
+
+  <dismissible-error-message ng-show="ctrl.showErr" err-message="errMessage" err-title="errTitle"></dismissible-error-message>
+
   <div ng-show="!ctrl.showErr">
     <div class="row">
       <div class="col-xs-12 col-lg-8">

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/app/shared/directives/dismissible-error-message/dismissible-error-message.directive.js	Wed Jul 12 09:30:38 2017 -0400
@@ -0,0 +1,44 @@
+/**
+ * Copyright 2012-2017 Red Hat, Inc.
+ *
+ * Thermostat is distributed under the GNU General Public License,
+ * version 2 or any later version (with a special exception described
+ * below, commonly known as the "Classpath Exception").
+ *
+ * A copy of GNU General Public License (GPL) is included in this
+ * distribution, in the file COPYING.
+ *
+ * Linking Thermostat code with other modules is making a combined work
+ * based on Thermostat.  Thus, the terms and conditions of the GPL
+ * cover the whole combination.
+ *
+ * As a special exception, the copyright holders of Thermostat give you
+ * permission to link this code with independent modules to produce an
+ * executable, regardless of the license terms of these independent
+ * modules, and to copy and distribute the resulting executable under
+ * terms of your choice, provided that you also meet, for each linked
+ * independent module, the terms and conditions of the license of that
+ * module.  An independent module is a module which is not derived from
+ * or based on Thermostat code.  If you modify Thermostat, you may
+ * extend this exception to your version of the software, but you are
+ * not obligated to do so.  If you do not wish to do so, delete this
+ * exception statement from your version.
+ */
+
+import dismissibleErrorMessageTemplate from './dismissible-error-message.html'
+
+export let dismissibleErrorMessageFunc = () => {
+    return {
+        restrict: 'E',
+        scope: {
+            errTitle: '<',
+            errMessage: '<'
+        },
+        template: dismissibleErrorMessageTemplate
+    }
+}
+
+export default angular.module('directives.dismissible-error-message',
+    [
+    ]
+).directive("dismissibleErrorMessage", dismissibleErrorMessageFunc);

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/app/shared/directives/dismissible-error-message/dismissible-error-message.directive.spec.js	Wed Jul 12 09:30:38 2017 -0400
@@ -0,0 +1,74 @@
+/**
+ * Copyright 2012-2017 Red Hat, Inc.
+ *
+ * Thermostat is distributed under the GNU General Public License,
+ * version 2 or any later version (with a special exception described
+ * below, commonly known as the "Classpath Exception").
+ *
+ * A copy of GNU General Public License (GPL) is included in this
+ * distribution, in the file COPYING.
+ *
+ * Linking Thermostat code with other modules is making a combined work
+ * based on Thermostat.  Thus, the terms and conditions of the GPL
+ * cover the whole combination.
+ *
+ * As a special exception, the copyright holders of Thermostat give you
+ * permission to link this code with independent modules to produce an
+ * executable, regardless of the license terms of these independent
+ * modules, and to copy and distribute the resulting executable under
+ * terms of your choice, provided that you also meet, for each linked
+ * independent module, the terms and conditions of the license of that
+ * module.  An independent module is a module which is not derived from
+ * or based on Thermostat code.  If you modify Thermostat, you may
+ * extend this exception to your version of the software, but you are
+ * not obligated to do so.  If you do not wish to do so, delete this
+ * exception statement from your version.
+ */
+
+import {dismissibleErrorMessageFunc} from './dismissible-error-message.directive.js';
+
+describe('dismissibleErrorMessage Directive', () => {
+  let compiledDirectiveElement;
+  beforeEach(angular.mock.module('directives.dismissible-error-message'));
+
+  let initDummyModule = () => {
+    let compile, rootScope;
+    inject(($compile, $rootScope) => {
+      compile = $compile;
+      rootScope = $rootScope;
+    });
+
+    rootScope.errTitle = 'foo';
+    rootScope.errMessage = 'bar';
+    let element = '<dismissible-error-message err-title=errTitle ' +
+      'err-message=errMessage> </dismissible-error-message>';
+
+    compiledDirectiveElement = compile(element)(rootScope);
+    rootScope.$digest();
+  };
+
+  describe('dismissibleErrorMessage Directive.function', () => {
+    it('should return a valid object', () => {
+      let fnResult = dismissibleErrorMessageFunc();
+      fnResult.should.have.ownProperty('template');
+      fnResult.should.have.ownProperty('restrict');
+      fnResult.should.have.ownProperty('scope');
+    });
+  });
+
+  describe('dismissibleErrorMessage Directive.content', () => {
+    beforeEach(initDummyModule);
+
+    it('should be a valid object', () => {
+      should.exist(compiledDirectiveElement);
+    });
+
+    it('should insert the correct error title', () => {
+      compiledDirectiveElement.html().should.containEql('foo');
+    });
+
+    it('should insert the correct error message', () => {
+      compiledDirectiveElement.html().should.containEql('bar');
+    });
+  });
+});
\ No newline at end of file

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/app/shared/directives/dismissible-error-message/dismissible-error-message.html	Wed Jul 12 09:30:38 2017 -0400
@@ -0,0 +1,9 @@
+<div ng-hide="showElement" class="toast-pf alert alert-warning alert-dismissable" >
+    <button type="button" class="close" data-dismiss="alert" aria-hidden="true" ng-click="showElement=true">
+        <span class="pficon pficon-close"></span>
+    </button>
+
+    <span class="pficon pficon-warning-triangle-o"></span>
+    <strong>{{errTitle}}</strong> 
+    {{errMessage}}
+</div>