Refactored Alert Pulse (#8227)

* Moved the animation to the pseudo element which seemed to reduce the CPU usage in an observable way.

* Removed unnecessary style

public/sass/pages/_alerting.scss

@@ -50,9 +50,8 @@
 
 
 .panel-alert-state {
 .panel-alert-state {
   &--alerting {
   &--alerting {
-    animation: alerting-panel 1.6s cubic-bezier(1,.1,.73,1) 0s infinite alternate;
     box-shadow: 0 0 10px rgba($critical,0.5);
     box-shadow: 0 0 10px rgba($critical,0.5);
-    opacity: 1;
+    position: relative;
 
 
     .panel-alert-icon:before {
     .panel-alert-icon:before {
       color: $critical;
       color: $critical;
@@ -60,6 +59,19 @@
     }
     }
   }
   }
 
 
+  &--alerting::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+    box-shadow: 0 0 10px rgba($critical,1);
+    opacity: 0;
+    animation: alerting-panel 1.6s cubic-bezier(1,.1,.73,1) 0s infinite alternate;
+  }
+
+
   &--ok {
   &--ok {
     .panel-alert-icon:before {
     .panel-alert-icon:before {
       color: $online;
       color: $online;
@@ -70,6 +82,6 @@
 
 
 @keyframes alerting-panel {
 @keyframes alerting-panel {
   100% {
   100% {
-    box-shadow: 0 0 15px $critical;
+    opacity: 1;
   }
   }
 }
 }