Merge pull request #790 from Netflix/ui-performance-improvements

UI Performance Improvements

ui/package.json

@@ -35,9 +35,11 @@
     "history": "^1.17.0",
     "lodash": "^4.0.0",
     "lodash.merge": "^4.3.0",
-    "moment": "^2.17.1",
+    "moment": "^2.22.2",
+    "numeral": "^2.0.6",
     "prop-types": "^15.5.9",
     "react": "^0.14.7",
+    "react-addons-shallow-compare": "^15.6.2",
     "react-bootstrap": "^0.28.2",
     "react-bootstrap-table": "^1.5.3",
     "react-bootstrap-typeahead": "^0.9.2",
@@ -50,8 +52,10 @@
     "react-select": "^1.0.0-beta10",
     "react-toastr": "2.9.3",
     "redux": "^3.3.1",
+    "redux-saga": "^0.16.0",
     "redux-thunk": "^1.0.3",
-    "superagent": "^1.7.2",
+    "reselect": "^3.0.1",
+    "superagent": "^3.8.3",
     "underscore": "^1.8.3",
     "webpack": "^1.12.10"
   },

ui/src/actions/WorkflowActions.js

@@ -1,43 +1,5 @@
 import http from '../core/HttpClient';
 
-export function searchWorkflows(query, search, hours, fullstr, start) {
-
-  return function (dispatch) {
-    dispatch({
-      type: 'GET_WORKFLOWS',
-      search: search
-    });
-
-    if(fullstr && search != null && search.length > 0) {
-      search = '"' + search + '"';
-    }
-
-    return http.get('/api/wfe/' + status + '?q=' + query + '&h=' + hours + '&freeText=' + search + '&start=' + start).then((data) => {
-      if(data && data.result && data.result.totalHits > 0){
-        dispatch({
-          type: 'RECEIVED_WORKFLOWS',
-          data
-        });
-      } else if(search !== "") {
-        return searchWorkflowsByTaskId(dispatch, search, hours, start);
-      }
-    }).catch((e) => {
-      dispatch({
-        type: 'REQUEST_ERROR',
-        e
-      });
-    });
-  }
-}
-
-function searchWorkflowsByTaskId(dispatch, search, hours, start){
-  return http.get("/api/wfe/search-by-task/" + search + "?h=" + hours + "&start=" + start).then((data) => {
-    dispatch({
-      type: 'RECEIVED_WORKFLOWS',
-      data
-    });
-  });
-}
 
 export function getWorkflowDetails(workflowId){
   return function (dispatch) {
@@ -61,141 +23,6 @@ export function getWorkflowDetails(workflowId){
   }
 }
 
-export function bulkTerminateWorkflow(workflows){
-  return function (dispatch) {
-    dispatch({
-      type: 'REQUESTED_BULK_TERMINATE_WORKFLOW',
-      workflows
-    });
-
-
-    return http.delete('/api/wfe/bulk/terminate', workflows).then((data) => {
-      var {code, message, bulkErrorResults, bulkSuccessResults} = data;
-      dispatch({
-        type: 'RECEIVED_BULK_TERMINATE_WORKFLOW',
-        workflows,
-        data:{bulkServerError:code,
-        bulkServerErrorMessage:message,
-        bulkErrorResults,
-        bulkSuccessResults}
-      });
-    }).catch((e) => {
-      dispatch({
-        type: 'REQUEST_ERROR',
-        e
-      });
-    });
-  }
-}
-
-export function bulkRestartWorkflow(workflows){
-  return function (dispatch) {
-    dispatch({
-      type: 'REQUESTED_BULK_RESTART_WORKFLOW',
-      workflows
-    });
-
-
-    return http.post('/api/wfe/bulk/restart', workflows).then((data) => {
-      var {code, message, bulkErrorResults, bulkSuccessfulResults} = data;
-      dispatch({
-        type: 'RECEIVED_BULK_RESTART_WORKFLOW',
-        workflows,
-        data:{bulkServerError:code,
-        bulkServerErrorMessage:message,
-        bulkErrorResults,
-        bulkSuccessfulResults}
-      });
-    }).catch((e) => {
-      dispatch({
-        type: 'REQUEST_ERROR',
-        e
-      });
-    });
-  }
-}
-
-export function bulkRetryWorkflow(workflows){
-  return function (dispatch) {
-    dispatch({
-      type: 'REQUESTED_BULK_RETRY_WORKFLOW',
-      workflows
-    });
-
-
-    return http.post('/api/wfe/bulk/retry', workflows).then((data) => {
-      var {code, message, bulkErrorResults, bulkSuccessfulResults} = data;
-      dispatch({
-        type: 'RECEIVED_BULK_RETRY_WORKFLOW',
-        workflows,
-        data:{bulkServerError:code,
-        bulkServerErrorMessage:message,
-        bulkErrorResults,
-        bulkSuccessfulResults}
-      });
-    }).catch((e) => {
-      dispatch({
-        type: 'REQUEST_ERROR',
-        e
-      });
-    });
-  }
-}
-
-export function bulkPauseWorkflow(workflows) {
-  return function (dispatch) {
-    dispatch({
-      type: 'REQUESTED_BULK_PAUSE_WORKFLOW',
-      workflows
-    });
-
-
-    return http.put('/api/wfe/bulk/pause', workflows).then((data) => {
-      var {code, message, bulkErrorResults, bulkSuccessfulResults} = data;
-      dispatch({
-        type: 'RECEIVED_BULK_PAUSE_WORKFLOW',
-        workflows,
-        data:{bulkServerError:code,
-        bulkServerErrorMessage:message,
-        bulkErrorResults,
-        bulkSuccessfulResults}
-      });
-    }).catch((e) => {
-      dispatch({
-        type: 'REQUEST_ERROR',
-        e
-      });
-    });
-  }
-}
-
-export function bulkResumeWorkflow(workflows) {
-  return function (dispatch) {
-    dispatch({
-      type: 'REQUESTED_BULK_RESUME_WORKFLOW',
-      workflows
-    });
-
-
-    return http.put('/api/wfe/bulk/resume', workflows).then((data) => {
-      var {code, message, bulkErrorResults, bulkSuccessfulResults} = data;
-      dispatch({
-        type: 'RECEIVED_BULK_RESUME_WORKFLOW',
-        workflows,
-        data:{bulkServerError:code,
-        bulkServerErrorMessage:message,
-        bulkErrorResults,
-        bulkSuccessfulResults}
-      });
-    }).catch((e) => {
-      dispatch({
-        type: 'REQUEST_ERROR',
-        e
-      });
-    });
-  }
-}
-
 export function terminateWorkflow(workflowId){
   return function (dispatch) {
     dispatch({
@@ -308,13 +135,11 @@ export function resumeWorfklow(workflowId) {
 
 //metadata
 export function getWorkflowDefs() {
-
   return function (dispatch) {
     dispatch({
       type: 'LIST_WORKFLOWS'
     });
 
-
     return http.get('/api/wfe/metadata/workflow').then((data) => {
       dispatch({
         type: 'RECEIVED_LIST_WORKFLOWS',
@@ -398,26 +223,6 @@ export function getQueueData() {
   }
 }
 
-export function updateWorkflow(workflow){
-  return function (dispatch) {
-    dispatch({
-      type: 'REQUESTED_UPDATE_WORKFLOW_DEF',
-      workflow
-    });
-
-
-    return http.put('/api/wfe/metadata/', workflow).then((data) => {
-      dispatch({
-        type: 'RECEIVED_UPDATE_WORKFLOW_DEF'
-      });
-    }).catch((e) => {
-      dispatch({
-        type: 'REQUEST_ERROR',
-        e
-      });
-    });
-  }
-}
 
 export function getEventHandlers() {
 
@@ -440,47 +245,3 @@ export function getEventHandlers() {
     });
   }
 }
-
-export function getEvents(event, time, query) {
-
-  return function (dispatch) {
-    dispatch({
-      type: 'LIST_EVENT'
-    });
-
-
-    return http.get('/api/events/executions').then((data) => {
-      dispatch({
-        type: 'RECEIVED_LIST_EVENT',
-        events : data
-      });
-    }).catch((e) => {
-      dispatch({
-        type: 'REQUEST_ERROR',
-        e
-      });
-    });
-  }
-}
-
-export function getTaskLogs(taskId) {
-
-  return function (dispatch) {
-    dispatch({
-      type: 'GET_TASK_LOGS'
-    });
-
-
-    return http.get('/api/wfe/task/log' + taskId).then((data) => {
-      dispatch({
-        type: 'RECEIVED_GET_TASK_LOGS',
-        logs : data
-      });
-    }).catch((e) => {
-      dispatch({
-        type: 'REQUEST_ERROR',
-        e
-      });
-    });
-  }
-}

ui/src/actions/bulk.js

@@ -0,0 +1,15 @@
+export const PERFORM_BULK_OPERATION = "PERFORM_BULK_OPERATION";
+export const RECEIVE_BULK_OPERATION_RESPONSE = "RECEIVE_BULK_OPERATION_RESPONSE";
+export const FAIL_BULK_OPERATION = "FAIL_BULK_OPERATION";
+
+export function performBulkOperation(operation, workflows) {
+  return {type: PERFORM_BULK_OPERATION, operation, workflows};
+}
+
+export function receiveBulkOperationResponse(successfulResults, errorResults) {
+  return {type: RECEIVE_BULK_OPERATION_RESPONSE, successfulResults, errorResults};
+}
+
+export function failBulkOperation(error) {
+  return {type: FAIL_BULK_OPERATION, error};
+}

ui/src/actions/metadata.js

@@ -0,0 +1,32 @@
+import http from '../core/HttpClient';
+
+export const FETCH_WORKFLOW_METADATA = "FETCH_WORKFLOW_METADATA";
+export const RECEIVE_WORKFLOW_METADATA = "RECEIVE_WORKFLOW_METADATA";
+export const FAIL_WORKFLOW_METADATA = "FAIL_WORKFLOW_METADATA";
+
+export function fetchWorkflowMetadata() {
+  return {type: FETCH_WORKFLOW_METADATA};
+}
+
+export function receiveWorkflowMetadata(workflows) {
+  return {type: RECEIVE_WORKFLOW_METADATA, workflows};
+}
+
+export function failWorkflowMetadata(error) {
+  return function(dispatch) {
+    dispatch({type: FAIL_WORKFLOW_METADATA, error});
+    dispatch({type: 'REQUEST_ERROR', e});
+  };
+}
+
+export function getWorkflowDefs() {
+  return function (dispatch) {
+    dispatch(fetchWorkflowMetadata());
+
+    return http.get('/api/wfe/metadata/workflow').then(data => {
+      dispatch(receiveWorkflowMetadata(data.result));
+    }).catch((e) => {
+      dispatch(failWorkflowMetadata(e));
+    });
+  }
+}

ui/src/actions/search.js

@@ -0,0 +1,27 @@
+export const CHANGE_SEARCH = "UPDATE_SEARCH";
+export const FETCH_SEARCH_RESULTS = "FETCH_SEARCH_RESULTS";
+export const RECEIVE_SEARCH_RESULTS = "RECEIVE_SEARCH_RESULTS";
+export const FAIL_SEARCH_RESULTS = "FAIL_SEARCH_RESULTS";
+
+export function changeSearch({query, entirely, types, states, cutoff, start}) {
+  return {type: CHANGE_SEARCH, query, entirely, types, states, cutoff, start};
+}
+
+export function fetchSearchResults() {
+  return {type: FETCH_SEARCH_RESULTS};
+}
+
+export function receiveSearchResults(results, totalHits) {
+  return {type: RECEIVE_SEARCH_RESULTS, results, totalHits};
+}
+
+export function failSearchResults(error) {
+  return {type: FAIL_SEARCH_RESULTS, error};
+}
+
+export function updateSearchAndFetch(props) {
+  return dispatch => {
+    dispatch(changeSearch(props));
+    dispatch(fetchSearchResults());
+  }
+}