Add code to track elapsed time

danesparza · Nov 14, 2019 · 02b21ad · 02b21ad
1 parent 2d99ebc
commit 02b21ad
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "classnames": "^2.2.6",
     "clsx": "^1.0.4",
     "flux": "^3.1.3",
+    "humanize-duration": "^3.21.0",
     "immutable": "^3.8.2",
     "react": "16.8.6",
     "react-dom": "16.8.6",

diff --git a/src/actions/QueryActions.js b/src/actions/QueryActions.js
@@ -14,10 +14,11 @@ class QueryActions {
 	}
 
 	//	Updates the query store with the given results
-	receiveQueryResults(results) {
+	receiveQueryResults(results, elapsedtime) {
 		AppDispatcher.dispatch({
 		  actionType: ActionTypes.RECEIVE_QUERY_RESULTS,
-		  queryresults: results
+		  queryresults: results,
+		  elapsedtime: elapsedtime
 		});
 	}
 

diff --git a/src/components/QuerySeries.js b/src/components/QuerySeries.js
@@ -71,7 +71,7 @@ class QuerySeries extends Component {
     return (
         <React.Fragment>
             <h2 className={classes.resultHeading}>{seriesName} </h2>            
-            <div className={classes.resultMeta}> {datarows.length} results</div>
+            <div className={classes.resultMeta}> {datarows.length} results in 2.3s</div>
 
             <MuiVirtualizedTable 
                 rowCount={datarows.length}

diff --git a/src/stores/QueryDataStore.js b/src/stores/QueryDataStore.js
@@ -16,6 +16,9 @@ class QueryDataStore extends Store {
 
     //  The query request
     this.request = "";
+
+    //  The elapsed time (formatted)
+    this.queryElapsedTime = "";
   }
 
   //  Get the query request
@@ -33,6 +36,11 @@ class QueryDataStore extends Store {
     return this.error;
   }
 
+  //  Get the elapsed time
+  getQueryElapsedTime() {
+    return this.queryElapsedTime;
+  }
+
   //  Return 'true' if there is an error:
   hasError() {
     let retval = false;
@@ -48,7 +56,7 @@ class QueryDataStore extends Store {
 
     switch (action.actionType) {
       case ActionTypes.RECEIVE_QUERY_RESULTS:
-        console.log("Query store event: Receive results");
+        console.log("Query store event: Received results in " + action.elapsedtime);
 
         //  Reset the internal state:
         this.error = null;
@@ -74,7 +82,11 @@ class QueryDataStore extends Store {
               //  Normal results will be set to results
               this.results = action.queryresults.results;
             }
-          }          
+          }
+
+          //  Set the formatted elapsed time:
+          this.queryElapsedTime = action.elapsedtime;
+
         } catch(e){/* No op */}
 
 

diff --git a/src/utils/InfluxAPI.js b/src/utils/InfluxAPI.js
@@ -1,18 +1,22 @@
+import humanizeDuration from 'humanize-duration';
+
 //  Actions
 import QueryActions from '../actions/QueryActions';
 import SettingsActions from '../actions/SettingsActions';
 
 class InfluxAPI {
 
         // Executes a query and gets the results
-        getQueryResults(serverurl,username, password, database, query){
+        getQueryResults(serverurl,username, password, database, query){            
 
             if(serverurl === "" || database === "")
             {
                 console.log("Can't execute query: server or database is blank"); 
                 return Promise.resolve();
             }
 
+            let startTime, endTime;
+
             //  Set the request
             QueryActions.receiveQueryRequest(query, serverurl, database);
 
@@ -26,6 +30,8 @@ class InfluxAPI {
             if (username !== undefined && username !== "" && password !== undefined && username !== "") {
                 headers.set('Authorization', 'Basic ' + btoa(username + ":" + password));
             }
+
+            startTime = new Date();
 
             return fetch(url,
             {
@@ -38,8 +44,11 @@ class InfluxAPI {
                     return response.json();
                 })
                 .then(function (data) {
+                    endTime = new Date();
+                    let  timeDiff = endTime - startTime; //in ms
+
                     //  Pass data to the action
-                    QueryActions.receiveQueryResults(data);
+                    QueryActions.receiveQueryResults(data, humanizeDuration(timeDiff));
                 });
         }
 

diff --git a/yarn.lock b/yarn.lock
@@ -3269,6 +3269,11 @@ https-browserify@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82"
 
+humanize-duration@^3.21.0:
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/humanize-duration/-/humanize-duration-3.21.0.tgz#ae5dc7e67640770cbf6a8d03a5d1138d47c7ce38"
+  integrity sha512-7BLsrQZ2nMGeakmGDUl1pDne6/7iAdvwf1RtDLCOPHNFIHjkOVW7lcu7xHkIM9HhZAlSSO5crhC1dHvtl4dIQw==
+
 hyphenate-style-name@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz#097bb7fa0b8f1a9cf0bd5c734cf95899981a9b48"