Updating the alert banner to only show when there's a widespread issue

SingularityUI/app/components/common/Application.jsx

@@ -7,7 +7,7 @@ import Title from './Title';
 import Utils from '../../utils';
 
 const DISMISS_TASK_LAG_NOFICATION_DURATION_IN_MS = 1000 * 60 * 60;
-const MAX_TASK_LAG_NOTIFICATION_THRESHOLD_IN_MS = 1000 * 60 * 3;
+const MAX_LATE_REQUESTS = 10;
 
 class Application extends Component {
   constructor(props) {
@@ -17,10 +17,14 @@ class Application extends Component {
     };
     _.bindAll(this,
       'dismissTaskLagNotification',
-      'notifyLag',
+      'notifyLateRequests',
     );
   }
 
+  componentDidUpdate() {
+    this.notifyLateRequests(this.props.listLateTasks);
+  }
+
   componentWillUnmount() {
     clearTimeout(this.reenableTaskLagNotificationTimeoutId);
   }
@@ -32,23 +36,22 @@ class Application extends Component {
     }, DISMISS_TASK_LAG_NOFICATION_DURATION_IN_MS);
   }
 
-  notifyLag(maxTaskLag) {
+  notifyLateRequests(listLateTasks) {
     const { canShowTaskLagNotification: canNotify } = this.state;
-    const shouldNotify = maxTaskLag >= MAX_TASK_LAG_NOTIFICATION_THRESHOLD_IN_MS;
+    const lateRequests = Utils.getListOfUniqueRequestsFromListOfTasks(listLateTasks)
+    const shouldNotify = lateRequests.length >= MAX_LATE_REQUESTS;
     if (canNotify && shouldNotify) {
       Messenger().error({
         onClickClose: this.dismissTaskLagNotification,
         message: `
           Singularity is experiencing some delays. The team has already been
-          notified. (Max task lag: ${Utils.duration(maxTaskLag)})
+          notified.
         `,
       });
     }
   }
 
   render() {
-    this.notifyLag(this.props.maxTaskLag);
-
     return (
       <div>
         <Title routes={this.props.routes} params={this.props.params} />
@@ -64,14 +67,14 @@ Application.propTypes = {
   children: PropTypes.object,
   history: PropTypes.object.isRequired,
   location: PropTypes.object.isRequired,
-  maxTaskLag: PropTypes.number,
+  listLateTasks: PropTypes.arrayOf(PropTypes.object),
   params: PropTypes.object.isRequired,
   routes: PropTypes.arrayOf(PropTypes.object).isRequired,
 };
 
 const mapStateToProps = (state) => {
   return {
-    maxTaskLag: state.api.status.data.maxTaskLag
+    listLateTasks: state.api.status.data.listLateTasks,
   };
 };
 

SingularityUI/app/components/status/StatusPage.jsx

@@ -12,8 +12,7 @@ import Utils from '../../utils';
 
 const StatusPage = (props) => {
   const renderPercentage = (number, total) => number > 0 && `(${Math.round(number / total * 100)}%)`;
-
-  const renderTaskLag = (status) => status.maxTaskLag > 0 && (<h4>Max Task Lag: {Utils.duration(status.maxTaskLag)}</h4>);
+  const renderLateRequests = (status) => Utils.getListOfUniqueRequestsFromListOfTasks(status.listLateTasks).length > 10 && (<h4>Number of delayed requests: {(Utils.getListOfUniqueRequestsFromListOfTasks(status.listLateTasks).length)}</h4>);
 
   const requestDetail = (status) => {
     const totalRequests = status.activeRequests + status.pausedRequests + status.cooldownRequests + status.pendingRequests + status.cleaningRequests;
@@ -183,7 +182,7 @@ const StatusPage = (props) => {
               </div>
               <div className="col-md-9 col-sm-9">
                 <StatusList data={getTasksData(status)} />
-                {renderTaskLag(status)}
+                {renderLateRequests(status)}
               </div>
           </div>
         </div>

SingularityUI/app/utils.es6

@@ -228,6 +228,11 @@ const Utils = {
     return splits.slice(0, splits.length - 5).join('-');
   },
 
+  getListOfUniqueRequestsFromListOfTasks(listOfTasks) {
+    const requestIds = listOfTasks.map(taskId => taskId.requestId)
+    return _.uniq(requestIds);
+  },
+
   getInstanceNoFromTaskId(taskId) {
     const splits = taskId.split('-')
     return splits[splits.length-3];