tech: react mobx progress

public/app/containers/AlertRuleList/AlertRuleList.tsx

@@ -62,7 +62,7 @@ function AlertRuleItem(rule) {
   let ruleUrl = `dashboard/${rule.dashboardUri}?panelId=${rule.panelId}&fullscreen&edit&tab=alert`;
 
   return (
-    <li className="card-item-wrapper">
+    <li className="card-item-wrapper" key={rule.id}>
       <div className="card-item card-item--alert">
         <div className="card-item-header">
           <div className="card-item-type">

public/app/stores/AlertingStore.ts

@@ -12,7 +12,7 @@ export const AlertRule = types.model('AlertRule', {
   stateIcon: types.string,
   stateClass: types.string,
   stateAge: types.string,
-  info: types.string,
+  info: types.optional(types.string, ''),
   dashboardUri: types.string,
 });
 

public/sass/pages/_alerting.scss

@@ -29,7 +29,6 @@
 }
 
 // Alert List
-
 .alert-list {
   display: flex;
   flex-direction: row;
@@ -94,7 +93,7 @@
 
 .panel-has-alert {
   .panel-alert-icon:before {
-    content: "\e611";
+    content: '\e611';
     position: relative;
     top: 1px;
     left: -3px;
@@ -108,12 +107,12 @@
 
     .panel-alert-icon:before {
       color: $critical;
-      content: "\e610";
+      content: '\e610';
     }
   }
 
   &--alerting::after {
-    content: "";
+    content: '';
     position: absolute;
     top: 0;
     z-index: -1;
@@ -121,14 +120,13 @@
     height: 100%;
     box-shadow: 0 0 10px rgba($critical, 1);
     opacity: 0;
-    animation: alerting-panel 1.6s cubic-bezier(1, 0.1, 0.73, 1) 0s infinite
-      alternate;
+    animation: alerting-panel 1.6s cubic-bezier(1, 0.1, 0.73, 1) 0s infinite alternate;
   }
 
   &--ok {
     .panel-alert-icon:before {
       color: $online;
-      content: "\e611";
+      content: '\e611';
     }
   }
 }