Update code to utilize new API changes from StackStorm/st2#5197.

This allows us to simplify the code and make it even more efficient by only always performing single "get one" execution API operation.
StackStorm · Mar 20, 2021 · 4eea648 · 4eea648
1 parent 8c8879d
commit 4eea648
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 56 deletions.
diff --git a/apps/st2-history/history-details.component.js b/apps/st2-history/history-details.component.js
@@ -47,6 +47,7 @@ import HistoryPopup from './history-popup.component';
   const { execution } = state;
   return { execution };
 })
+
 export default class HistoryDetails extends React.Component {
   static propTypes = {
     handleNavigate: PropTypes.func.isRequired,
@@ -74,36 +75,19 @@ export default class HistoryDetails extends React.Component {
 
   componentDidUpdate(prevProps) {
     const { id, execution } = this.props;
-    var reFetchExecution = false;
-
-    if (execution && execution.FETCH_RESULT &&!execution.FETCHING_RESULT && !execution.result) {
-      reFetchExecution = true;
-    }
-
-    if ((id && id !== prevProps.id) || reFetchExecution) {
-      if (execution) {
-        // Indicate we are fetching the result for this execution
-        execution.FETCHING_RESULT = true;
-      }
 
-      this.fetchExecution(id, reFetchExecution);
+    if ((id && id !== prevProps.id)) {
+      this.fetchExecution(id);
     }
   }
 
-  fetchExecution(id, includeResult) {
-    includeResult = includeResult || false;
-
-    var path;
+  fetchExecution(id) {
+    // We utilize ?max_result_size query parameter filter so we don't retrieve
+    // large results which we don't render due to that being very slow and
+    // freezing the browser window
+    const maxResultSizeForRender = ActionReporter.utils.getMaxExecutionResultSizeForRender();
+    const path = `/executions/${id}?max_result_size=${maxResultSizeForRender}`;
 
-    // NOTE: We don't retrieve result here by defualt because it may be very large. We only retrieve it later
-    // after we determine the result size. If the result size is too large, we won't display it in
-    // the output tab since that would freeze the browser, but we will display a link to the raw
-    // result output instead.
-    if (includeResult) {
-      path = `/executions/${id}`;
-    } else {
-      path = `/executions/${id}?exclude_attributes=result`;
-    }
 
     store.dispatch({
       type: 'FETCH_EXECUTION',

diff --git a/modules/st2-action-reporter/action-reporter.component.js b/modules/st2-action-reporter/action-reporter.component.js
@@ -21,23 +21,26 @@ import reporters from './reporters';
 import style from './style.css';
 
 // If action execution result is larger than this value (in bytes) we won't try to render it in
-// the code highlighter widget, but display a link to the raw result output instead directly to
-// st2api. This way we avoid large results freezing and blocking the browser window
-// Can be overriden in the config, but values over 500 KB are not recommended.
+// the code highlighter widget, but display a link to the raw result output instead.
+// This way we avoid large results freezing and blocking the browser window.
 // Keep in mind that rendering time also depends on the result type (aka deeply
-// nested JSON object vs more flat one).
+// nested JSON object vs a more flat one).
 // Based on testing, any larger and more nested JSON object over 100 KB will
 // take a while to render and consume a lot of memory (and in case of even
-// larger objects, free the whole browser window).
+// larger objects, freeze / block the whole browser window).
 // Technically we could still display and render results up to 300 KB, but the
-// whole code widget gets very lagy and slow.
+// whole code widget and browser window gets lagy and slow.
 // Testing was also performed on relatively high end PC so on older ones, even
 // lower limit may be more appropriate.
+// Can be overriden in the config, but values over 50-100 KB (depending on the client
+// resources and how nested the result objects are) are not recommended.
 const DEFAULT_MAX_RESULT_SIZE = 100 * 1024;  // 100 KB
 
 
+/**
+ * Return base URL to the API service based on the config value.
+ */
 function getBaseAPIUrl(api) {
-  // Return base URL to the api instance
   if (!api.server) {
     console.log("config.js is not correctlu configured - it's missing API server URL entry")
     return null;
@@ -61,13 +64,37 @@ function getBaseAPIUrl(api) {
   return baseUrl;
 }
 
+/**
+ * Return value for the ?max_result_size query parameter aka the maximum number
+ * for the result size (in bytes) we will still try to render and display.
+ *
+ * We specify a default value which can be overriden inside the config.
+ */
+function getMaxExecutionResultSizeForRender() {
+  var maxResultSizeForRender;
+
+  try {
+    maxResultSizeForRender = window.st2constants.st2Config.max_execution_result_size_for_render || DEFAULT_MAX_RESULT_SIZE;
+  }
+  catch (e) {
+    maxResultSizeForRender = DEFAULT_MAX_RESULT_SIZE;
+  }
+
+  return maxResultSizeForRender;
+}
+
 export default class ActionReporter extends React.Component {
   static propTypes = {
     className: PropTypes.string,
     runner: PropTypes.string.isRequired,
     execution: PropTypes.object.isRequired,
   }
 
+  static utils = {
+    getMaxExecutionResultSizeForRender: getMaxExecutionResultSizeForRender,
+    getBaseAPIUrl: getBaseAPIUrl,
+  }
+
   render() {
     const { className, runner, execution, api, ...props } = this.props;
     const reporter = reporters[runner] || reporters.debug;
@@ -81,15 +108,7 @@ export default class ActionReporter extends React.Component {
     // st2web with older version of other StackStorm components).
     const resultSize = execution.result_size || JSON.stringify(execution.result || {}).length;
     const resultSizeMB = ((resultSize / 1024 / 1024)).toFixed(2);
-
-    var maxResultSizeForRender
-
-    try {
-      maxResultSizeForRender = window.st2constants.st2Config.max_execution_result_size_for_render || DEFAULT_MAX_RESULT_SIZE;
-    }
-    catch (e) {
-      maxResultSizeForRender = DEFAULT_MAX_RESULT_SIZE;
-    }
+    const maxResultSizeForRender = getMaxExecutionResultSizeForRender();
 
     if (resultSize && resultSize > maxResultSizeForRender) {
       // TODO: Add methods to the client to retrieve full correct URL?
@@ -108,21 +127,6 @@ export default class ActionReporter extends React.Component {
         );
     }
 
-    if (!execution.result) {
-      if (!execution.FETCH_RESULT) {
-        // If execution is not too big, we update the attribute to indicate the component to re-fetch the
-        // execution with the result field
-        execution.FETCH_RESULT = true;
-      }
-
-      return (
-        <div {...props} className={cx(style.component, className)}>
-          <div key="output" className={style.source}>Output</div>
-          <p>Loading execution result...</p>
-        </div>
-      );
-    }
-
     return (
       <div {...props} className={cx(style.component, className)}>
         { reporter(execution) }