feat(UI): query duration calc

src/main/libs/clients/MySQLClient.js

@@ -1206,10 +1206,13 @@ export class MySQLClient extends AntaresCore {
 
       for (const query of queries) {
          if (!query) continue;
+         const timeStart = new Date();
+         let timeStop;
          let keysArr = [];
 
-         const { rows, report, fields, keys } = await new Promise((resolve, reject) => {
+         const { rows, report, fields, keys, duration } = await new Promise((resolve, reject) => {
             this._connection.query({ sql: query, nestTables }, async (err, response, fields) => {
+               timeStop = new Date();
                const queryResult = response;
 
                if (err)
@@ -1277,6 +1280,7 @@ export class MySQLClient extends AntaresCore {
                   }
 
                   resolve({
+                     duration: timeStop - timeStart,
                      rows: Array.isArray(queryResult) ? queryResult.some(el => Array.isArray(el)) ? [] : queryResult : false,
                      report: !Array.isArray(queryResult) ? queryResult : false,
                      fields: remappedFields,
@@ -1286,7 +1290,7 @@ export class MySQLClient extends AntaresCore {
             });
          });
 
-         resultsArr.push({ rows, report, fields, keys });
+         resultsArr.push({ rows, report, fields, keys, duration });
       }
 
       return resultsArr.length === 1 ? resultsArr[0] : resultsArr;

src/renderer/components/WorkspaceQueryTab.vue

@@ -26,6 +26,13 @@
                </button>
             </div>
             <div class="workspace-query-info">
+               <div
+                  v-if="results.length"
+                  class="d-flex"
+                  :title="$t('message.queryDuration')"
+               >
+                  <i class="mdi mdi-timer-sand mdi-rotate-180 pr-1" /> <b>{{ durationsCount / 1000 }}s</b>
+               </div>
                <div v-if="resultsCount">
                   {{ $t('word.results') }}: <b>{{ resultsCount.toLocaleString() }}</b>
                </div>
@@ -84,6 +91,7 @@ export default {
          isQuering: false,
          results: [],
          resultsCount: 0,
+         durationsCount: 0,
          affectedCount: 0,
          editorHeight: 200
       };
@@ -143,6 +151,7 @@ export default {
             if (status === 'success') {
                this.results = Array.isArray(response) ? response : [response];
                this.resultsCount += this.results.reduce((acc, curr) => acc + (curr.rows ? curr.rows.length : 0), 0);
+               this.durationsCount += this.results.reduce((acc, curr) => acc + curr.duration, 0);
                this.affectedCount += this.results.reduce((acc, curr) => acc + (curr.report ? curr.report.affectedRows : 0), 0);
             }
             else
@@ -161,6 +170,7 @@ export default {
       clearTabData () {
          this.results = [];
          this.resultsCount = 0;
+         this.durationsCount = 0;
          this.affectedCount = 0;
       },
       resize (e) {

src/renderer/components/WorkspaceTableTab.vue

@@ -64,6 +64,13 @@
                </div>
             </div>
             <div class="workspace-query-info">
+               <div
+                  v-if="results.length"
+                  class="d-flex"
+                  :title="$t('message.queryDuration')"
+               >
+                  <i class="mdi mdi-timer-sand mdi-rotate-180 pr-1" /> <b>{{ results[0].duration / 1000 }}s</b>
+               </div>
                <div v-if="results.length && results[0].rows">
                   {{ $t('word.results') }}: <b>{{ results[0].rows.length.toLocaleString() }}</b>
                </div>

src/renderer/i18n/en-US.js

@@ -190,7 +190,8 @@ module.exports = {
       tableFiller: 'Table Filler',
       fakeDataLanguage: 'Fake data language',
       searchForElements: 'Search for elements',
-      selectAll: 'Select all'
+      selectAll: 'Select all',
+      queryDuration: 'Query duration'
    },
    faker: {
       address: 'Address',