new styling and markup

public/app/containers/AlertRuleList/AlertRuleList.tsx

@@ -52,6 +52,18 @@ export class AlertRuleList extends React.Component<IContainerProps, any> {
         <PageHeader model={nav as any} />
         <div className="page-container page-body">
           <div className="page-action-bar">
+            <div className="gf-form">
+              <label className="gf-form--has-input-icon">
+                <input
+                  type="text"
+                  className="gf-form-input width-13"
+                  placeholder="Search alert"
+                  value={this.searchQuery}
+                  onChange={this.onQueryUpdated}
+                />
+                <i className="gf-form-input-icon fa fa-search" />
+              </label>
+            </div>
             <div className="gf-form">
               <label className="gf-form-label">Filter by state</label>
 
@@ -69,8 +81,10 @@ export class AlertRuleList extends React.Component<IContainerProps, any> {
             </a>
           </div>
 
-          <section className="card-section card-list-layout-list">
-            <ol className="card-list">{alertList.rules.map(rule => <AlertRuleItem rule={rule} key={rule.id} />)}</ol>
+          <section>
+            <ol className="alert-rule-list">
+              {alertList.rules.map(rule => <AlertRuleItem rule={rule} key={rule.id} />)}
+            </ol>
           </section>
         </div>
       </div>
@@ -108,36 +122,33 @@ export class AlertRuleItem extends React.Component<AlertRuleItemProps, any> {
     let ruleUrl = `dashboard/${rule.dashboardUri}?panelId=${rule.panelId}&fullscreen&edit&tab=alert`;
 
     return (
-      <li className="card-item-wrapper">
-        <div className="card-item card-item--alert">
-          <div className="card-item-header">
-            <div className="card-item-type">
-              <a
-                className="card-item-cog"
-                title="Pausing an alert rule prevents it from executing"
-                onClick={this.toggleState}
-              >
-                <i className={stateClass} />
-              </a>
-              <a className="card-item-cog" href={ruleUrl} title="Edit alert rule">
-                <i className="icon-gf icon-gf-settings" />
-              </a>
+      <li className="alert-rule-item">
+        <div className="alert-rule-item__body">
+          <span className={`alert-rule-item__icon ${rule.stateClass}`}>
+            <i className={rule.stateIcon} />
+          </span>
+          <div className="alert-rule-item__header">
+            <div className="alert-rule-item__name">
+              <a href={ruleUrl}>{rule.name}</a>
             </div>
-          </div>
-          <div className="card-item-body">
-            <div className="card-item-details">
-              <div className="card-item-name">
-                <a href={ruleUrl}>{rule.name}</a>
-              </div>
-              <div className="card-item-sub-name">
-                <span className={`alert-list-item-state ${rule.stateClass}`}>
-                  <i className={rule.stateIcon} /> {rule.stateText}
-                </span>
-                <span> for {rule.stateAge}</span>
-              </div>
-              {rule.info && <div className="small muted">{rule.info}</div>}
+            <div className="alert-rule-item__text">
+              <span className={`${rule.stateClass}`}>{rule.stateText}</span>
+              <span className="alert-rule-item__time"> for {rule.stateAge}</span>
             </div>
           </div>
+          {rule.info && <div className="small muted alert-rule-item__info">{rule.info}</div>}
+        </div>
+        <div className="alert-rule-item__footer">
+          <a
+            className="btn btn-small btn-inverse alert-list__btn width-2"
+            title="Pausing an alert rule prevents it from executing"
+            onClick={this.toggleState}
+          >
+            <i className={stateClass} />
+          </a>
+          <a className="btn btn-small btn-inverse alert-list__btn width-2" href={ruleUrl} title="Edit alert rule">
+            <i className="icon-gf icon-gf-settings" />
+          </a>
         </div>
       </li>
     );

public/app/plugins/panel/alertlist/module.html

@@ -3,24 +3,22 @@
 		{{ctrl.noAlertsMessage}}
 	</div>
 
-  <section class="card-section card-list-layout-list" ng-if="ctrl.panel.show === 'current'">
-    <ol class="card-list">
-			<li class="card-item-wrapper" ng-repeat="alert in ctrl.currentAlerts">
-        <div class="alert-list card-item card-item--alert">
-          <div class="alert-list-body">
-            <div class="alert-list-icon alert-list-item-state {{alert.stateModel.stateClass}}">
-              <i class="{{alert.stateModel.iconClass}}"></i>
-            </div>
-            <div class="alert-list-main">
-              <p class="alert-list-title">
-                <a href="dashboard/{{alert.dashboardUri}}?panelId={{alert.panelId}}&fullscreen&edit&tab=alert">
-                  {{alert.name}}
-                </a>
-              </p>
-              <p class="alert-list-text">
-                <span class="alert-list-state {{alert.stateModel.stateClass}}">{{alert.stateModel.text}}</span>
-                for {{alert.newStateDateAgo}}
-              </p>
+  <section ng-if="ctrl.panel.show === 'current'">
+    <ol class="alert-rule-list">
+      <li class="alert-rule-item" ng-repeat="alert in ctrl.currentAlerts">
+        <div class="alert-rule-item__body">
+          <div class="alert-rule-item__icon  {{alert.stateModel.stateClass}}">
+            <i class="{{alert.stateModel.iconClass}}"></i>
+          </div>
+          <div class="alert-rule-item__header">
+            <p class="alert-rule-item__name">
+              <a href="dashboard/{{alert.dashboardUri}}?panelId={{alert.panelId}}&fullscreen&edit&tab=alert">
+                {{alert.name}}
+              </a>
+            </p>
+            <div class="alert-rule-item__text">
+              <span class="{{alert.stateModel.stateClass}}">{{alert.stateModel.text}}</span>
+              <span class="alert-rule-item__time">for {{alert.newStateDateAgo}}</span>
             </div>
           </div>
         </div>
@@ -28,30 +26,28 @@
     </ol>
   </section>
 
-  <section class="card-section card-list-layout-list" ng-if="ctrl.panel.show === 'changes'">
-		<ol class="card-list">
-			<li class="card-item-wrapper" ng-repeat="al in ctrl.alertHistory">
-				<div class="alert-list card-item card-item--alert">
-					<div class="alert-list-body">
-						<div class="alert-list-icon alert-list-item-state {{al.stateModel.stateClass}}">
-							<i class="{{al.stateModel.iconClass}}"></i>
-						</div>
-						<div class="alert-list-main">
-							<p class="alert-list-title">{{al.alertName}}</p>
-							<div class="alert-list-text">
-								<span class="alert-list-state {{al.stateModel.stateClass}}">{{al.stateModel.text}}</span>
-								<span class="alert-list-info alert-list-info-left">{{al.info}}</span>
-							</div>
-						</div>
-					</div>
-					<div class="alert-list-footer">
-						<span class="alert-list-text">{{al.time}}</span>
-						<span class="alert-list-text">
-							<!--Img Link-->
-						</span>
-					</div>
-				</div>
-			</li>
-		</ol>
-	</section>
+  <section ng-if="ctrl.panel.show === 'changes'">
+    <ol class="alert-rule-list">
+      <li class="alert-rule-item" ng-repeat="al in ctrl.alertHistory">
+        <div class="alert-rule-item__body">
+          <div class="alert-rule-item__icon {{al.stateModel.stateClass}}">
+            <i class="{{al.stateModel.iconClass}}"></i>
+          </div>
+          <div class="alert-rule-item__header">
+            <p class="alert-rule-item__name">{{al.alertName}}</p>
+            <div class="alert-rule-item__text">
+              <span class="{{al.stateModel.stateClass}}">{{al.stateModel.text}}</span>
+            </div>
+          </div>
+          <span ng-show="al.info !== 'No Data'" class="alert-rule-item__info alert-rule-item__info--left">{{al.info}}</span>
+        </div>
+        <div class="alert-list__footer alert-list__footer--column alert-rule-item__time">
+          <span>{{al.time}}</span>
+          <span>
+            <!--Img Link-->
+          </span>
+        </div>
+      </li>
+    </ol>
+  </section>
 </div>

public/sass/pages/_alerting.scss

@@ -28,69 +28,6 @@
   border: 0;
 }
 
-// Alert List
-.alert-list {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-
-.alert-list-icon {
-  font-weight: bold;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  .icon-gf,
-  .fa {
-    font-size: 200%;
-    position: relative;
-    top: 2px;
-  }
-}
-
-.alert-list-body {
-  display: flex;
-}
-
-.alert-list-main {
-  padding: 0 2rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.alert-list-title {
-  font-size: $font-size-base;
-  margin: 0;
-  font-weight: 600;
-}
-
-.alert-list-state {
-  font-weight: bold;
-}
-
-.alert-list-text {
-  font-size: $font-size-sm;
-  margin: 0;
-  line-height: 1.5rem;
-  color: $text-color-weak;
-}
-
-.alert-list-info {
-  color: $text-color;
-}
-
-.alert-list-info-left {
-  padding-left: 2rem;
-}
-
-.alert-list-footer {
-  display: flex;
-  justify-content: space-between;
-  flex-direction: column;
-  align-items: flex-end;
-}
-
 .panel-has-alert {
   .panel-alert-icon:before {
     content: '\e611';
@@ -136,3 +73,100 @@
     opacity: 1;
   }
 }
+
+// Alert List
+// Alert List
+
+.alert-rule-list {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  list-style-type: none;
+}
+
+.alert-rule-item {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+  background: $card-background;
+  box-shadow: $card-shadow;
+  padding: 4px 8px;
+  border-radius: 4px;
+  margin-bottom: 4px;
+}
+
+.alert-rule-item__body {
+  display: flex;
+  width: 100%;
+  //flex-grow: 2;
+}
+
+.alert-rule-item__icon {
+  font-weight: bold;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  .icon-gf,
+  .fa {
+    font-size: 200%;
+    position: relative;
+    top: 2px;
+  }
+}
+
+.alert-rule-item__header {
+  padding: 0 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  //width: 100%;
+}
+
+.alert-rule-item__name {
+  font-size: $font-size-base;
+  margin: 0;
+  font-weight: 600;
+}
+
+.alert-list__btn {
+  margin: 0 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.alert-rule-item__text {
+  font-weight: bold;
+  font-size: $font-size-sm;
+  margin: 0;
+}
+
+.alert-rule-item__time {
+  color: $text-color-weak;
+  font-weight: normal;
+}
+
+.alert-rule-item__info {
+  //color: $text-color;
+  font-weight: normal;
+  flex-grow: 2;
+  display: flex;
+  align-items: flex-end;
+  padding-left: 20px;
+}
+
+.alert-rule-item__footer {
+  display: flex;
+  align-items: center;
+}
+
+.alert-list__footer--column {
+  flex-direction: column;
+}
+
+.alert-tesint {
+  display: flex;
+}