Merge pull request #27 from SwapnilTechVariable/bug/v2-logs-related-frontend

abhishekctv · web-flow · commit c8a0dd9df9ef · 2023-03-22T18:31:26.000+05:30
Bug/v2 logs related frontend
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -31,6 +31,7 @@ export namespace Components {
         "togglesort": any;
     }
     interface CodeEditor {
+        "formatter": Function;
         "onClickRun": Function;
     }
     interface DataTable {
@@ -606,6 +607,7 @@ declare namespace LocalJSX {
         "togglesort"?: any;
     }
     interface CodeEditor {
+        "formatter"?: Function;
         "onClickRun"?: Function;
     }
     interface DataTable {
diff --git a/src/components/editorPage/code-editor/code-editor.tsx b/src/components/editorPage/code-editor/code-editor.tsx
@@ -17,6 +17,7 @@ const TAB_LIST = [
 })
 export class CodeEditor {
   @Prop() onClickRun: Function;
+  @Prop() formatter: Function;
 
   @State() activeIndex: number = 0;
   @State() refreshLoading: boolean = false;
@@ -63,21 +64,21 @@ export class CodeEditor {
 
   onCtrlShiftEnter() {
     let runTemp = this.onClickRun;
-      return keymap.of([
-        {
-          key: 'Ctrl-Shift-Enter',
-          run() {
-            runTemp();
-            return true;
-          },
+    return keymap.of([
+      {
+        key: 'Ctrl-Shift-Enter',
+        run() {
+          runTemp();
+          return true;
         },
-      ]);
+      },
+    ]);
   }
 
   render() {
     return (
       <Host>
-        <div class="w-full flex content-between" style={{ justifyContent: 'space-between' }}>
+        <div class="px-3 w-full flex content-between" style={{ justifyContent: 'space-between' }}>
           <tabs-component activeIndex={this.activeIndex} tabslist={TAB_LIST} tabClickHandler={this.tabClickHandler}></tabs-component>
           <button
             class={this.btnClassType[`${this.refreshLoading}`]}
@@ -98,7 +99,7 @@ export class CodeEditor {
           </button>
         </div>
         {/* <tabs-component activeIndex={this.activeIndex} tabslist={TAB_LIST} tabClickHandler={this.tabClickHandler}></tabs-component> */}
-        <div class="border border-gray-300 shadow-gray-300   p-3">
+        <div class="border rounded-md border-gray-300 shadow-gray-300   p-3">
           <div style={{ maxHeight: '13rem', overflowY: 'auto' }} class="border-2">
             {TAB_LIST.map(item =>
               item.className === 'editor' ? (
@@ -110,17 +111,35 @@ export class CodeEditor {
           </div>
           {state.isError ? <p class="px-3 py-2 bg-red-200 text-red-800 border-l-4 border-red-600 w-full mt-4 mb-6">{state.errorMessage || 'Something went wrong!!!'}</p> : null}
           <div class="flex justify-between">
-            <button
-              title="Ctrl+Shift+Enter to run"
-              disabled={state.syncVal === ''}
-              onClick={() => this.onClickRun()}
-              class="flex text-sm gap-2 items-center justify-center text-gray-600 border border-gray-300 px-3 mt-2 py-2 hover:bg-gray-200 disabled:text-gray-300 disabled:cursor-default disabled:hover:text-gray-200"
-            >
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
-              </svg>
-              Run
-            </button>
+            <div class="flex gap-4">
+              <button
+                title="Ctrl+Shift+Enter to run"
+                disabled={state.syncVal === ''}
+                onClick={() => this.onClickRun()}
+                class="w-24 rounded-md flex text-sm gap-2 items-center justify-center text-gray-600 border border-gray-300 px-3 mt-2 py-2 hover:bg-gray-200 disabled:text-gray-300 disabled:cursor-default disabled:hover:text-gray-200"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
+                </svg>
+                Run
+              </button>
+
+              <button
+                disabled={state.syncVal === ''}
+                onClick={() => this.formatter()}
+                class="flex w-24 rounded-md text-sm gap-2 items-center justify-center text-gray-600 border border-gray-300 px-3 mt-2 py-2 hover:bg-gray-200 disabled:text-gray-300 disabled:cursor-default disabled:hover:text-gray-200"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M14.25 9.75L16.5 12l-2.25 2.25m-4.5 0L7.5 12l2.25-2.25M6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z"
+                  />
+                </svg>
+                Format
+              </button>
+            </div>
+
             <div>
               {state.isLoading && <loader-component></loader-component>}
               {state.timeTaken !== null && <p class="pt-4 font-semibold text-xs text-green-700">Executed in {state.timeTaken} ms</p>}
diff --git a/src/components/editorPage/code-editor/readme.md b/src/components/editorPage/code-editor/readme.md
@@ -9,6 +9,7 @@
 
 | Property     | Attribute | Description | Type       | Default     |
 | ------------ | --------- | ----------- | ---------- | ----------- |
+| `formatter`  | --        |             | `Function` | `undefined` |
 | `onClickRun` | --        |             | `Function` | `undefined` |
 
 
diff --git a/src/components/editorPage/editor-page/editor-page.tsx b/src/components/editorPage/editor-page/editor-page.tsx
@@ -3,6 +3,8 @@ import { Component, h, Prop, State } from '@stencil/core';
 
 import { isValidParameterJson } from '../../../utils/utils';
 import state from '../store';
+import { formatQuery } from 'gremlint';
+import { formatJSON } from '../../../utils/utils';
 
 @Component({
   tag: 'editor-page',
@@ -44,13 +46,29 @@ export class EditorPage {
       });
   };
 
-  // animatingClass = ``
-
   btnClassType = {
     true: `mr-4 animate-spin`,
     false: `mr-4`,
   };
 
+  formatter = () => {
+    let transactionQuery = state.viewQuery.state.update();
+    const query = transactionQuery.state.doc.toString().trim();
+
+    let transactionToFormatQuery = state.viewQuery.state.update({
+      changes: { from: 0, to: state.viewQuery.state.doc.toString().length, insert: `${formatQuery(query)}` },
+    }); 
+    state.viewQuery.dispatch(transactionToFormatQuery);
+
+    let transactionParameter = state.viewParameter.state.update();
+    const parameter = transactionParameter.state.doc.toString().trim();
+
+    let transactionToFormatParameter = state.viewParameter.state.update({
+      changes: { from: 0, to: state.viewParameter.state.doc.toString().length, insert: `${formatJSON(JSON.parse(parameter))}` },
+    });
+    state.viewParameter.dispatch(transactionToFormatParameter);
+  }
+
   onClickRun = async () => {
     if (state.syncVal !== '') {
       state.selectedNodeName = null;
@@ -82,6 +100,7 @@ export class EditorPage {
           state.nodes = res.data.result;
           state.timeTaken = res.data.timeTaken;
           state.isFetchedData = true;
+          this.formatter();
         } else {
           state.isError = true;
           state.errorMessage = error;
@@ -96,10 +115,9 @@ export class EditorPage {
   };
 
   render() {
-    console.debug({state})
     return (
       <div>
-        <div class="w-full md:flex  justify-center gap-4 mt-4">
+        <div class="w-full md:flex justify-center gap-4 mt-4">
           <div>
             <aside class="w-full md:w-80" aria-label="Sidebar">
               <div class="w-full flex justify-between mb-4">
@@ -121,7 +139,7 @@ export class EditorPage {
           </div>
           <div class="w-full md:w-3/4">
             <h2 class="pb-3 font-mono text-lg font-bold leading-7 text-gray-600">Write your Gremlin Query Here</h2>
-            <code-editor onClickRun={this.onClickRun}></code-editor>
+            <code-editor formatter={this.formatter} onClickRun={this.onClickRun}></code-editor>
             {state.isFetchedData && state.nodes.length === 0 && !state.isLoading && !state.isError && (
               <div class="flex items-center bg-gray-500 text-white text-sm font-bold px-4 py-3" role="alert">
                 <p>No Data Found in Database</p>
diff --git a/src/components/editorPage/store.ts b/src/components/editorPage/store.ts
@@ -75,7 +75,6 @@ onChange('nodes', value => {
 });
 
 onChange('query', value => {
-  console.log("l;kasjdkjashkdkjashdkk")
   if (state.viewQuery) {
     let transactionToAdd = state.viewQuery.state.update({
       changes: { from: 0, to: state.viewQuery.state.doc.toString().length, insert: `${value}` },
diff --git a/src/components/logsPage/logs-table/logs-table.tsx b/src/components/logsPage/logs-table/logs-table.tsx
@@ -42,6 +42,37 @@ export class LogsTable {
     this.from = (this.currentPage - 1) * this.limit + 1;
     this.to = this.currentPage * this.limit;
   }
+  dataFormatter(id, item) {
+    {
+      if (id.click.clickable === false) {
+        if (item[id.alias].length > 25 === true) {
+          return item[id.alias].slice(0, 25) + '...';
+        } else {
+          if (/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/.test(item[id.alias])) {
+            return new Date(item[id.alias]).toString().split('(')[0]
+          } else {
+            if (id.alias === 'timeTaken') {
+              return `${item[id.alias]} ms`;
+            } else {
+              return item[id.alias];
+            }
+          }
+        }
+      } else {
+        if (id.alias === 'queryResult') {
+        return (
+          <a target="_blank" href={id.click.url + item[id.alias]} class="flex items-center py-1 px-4 text-base font-normal text-gray-900 rounded-lg bg-gray-200">
+            <img class="h-4" src={id.click.icon} alt="icon" />
+            <span class="px-2 ">View</span>
+          </a>
+        )}else if(id.alias === 'email'){
+          return (<a href={id.click.url + item['ownerId']}>
+            <span class="px-2 ">{item[id.alias]}</span>
+          </a>)
+        }
+      }
+    }
+  }
 
   render() {
     const trList = [];
@@ -103,22 +134,8 @@ export class LogsTable {
                 this.tableBody.map((item: any) => (
                   <tr class="hover:bg-gray-100 transition">
                     {this.tableHeader.map((id: any) => (
-                      // <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{item[id.alias]}</td>
                       <td text-overflow:ellipsis title={item[id.alias]} max-width="50px" class="px-6 py-3 whitespace-nowrap text-sm text-gray-900">
-                        {!id.click.clickable ? (
-                          item[id.alias].length > 25 ? (
-                            item[id.alias].slice(0, 25) + '...'
-                          ) : /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/.test(item[id.alias]) ? (
-                            item[id.alias].slice(0, 16).split('T')[0] + ' at ' + item[id.alias].slice(11, 19)
-                          ) : (
-                            item[id.alias]
-                          )
-                        ) : (
-                          <a target="_blank" href={id.click.url + item[id.alias]} class="flex items-center py-1 px-4 text-base font-normal text-gray-900 rounded-lg bg-gray-200">
-                            <img class="h-4" src={id.click.icon} alt="icon" />
-                            <span class="px-2 ">View</span>
-                          </a>
-                        )}
+                        {this.dataFormatter(id, item)}
                       </td>
                     ))}
                   </tr>
@@ -139,47 +156,41 @@ export class LogsTable {
             )}
           </table>
         </div>
-        <div style={{maxWidth: '75rem'}} class="bg-gray-100 sticky bottom-0">
-                <div class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                  <div class="flex justify-between items-center">
-                    {/* pagination description */}
-                    <p>
-                      Showing <strong>{this.from}</strong> to <strong>{this.to <= Number(this.dataLength) ? this.to : this.dataLength}</strong> of{' '}
-                      <strong>{this.dataLength}</strong> results
-                    </p>
+        <div style={{ maxWidth: '75rem' }} class="bg-gray-100 sticky bottom-0">
+          <div class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+            <div class="flex justify-between items-center">
+              {/* pagination description */}
+              <p>
+                Showing <strong>{this.from}</strong> to <strong>{this.to <= Number(this.dataLength) ? this.to : this.dataLength}</strong> of <strong>{this.dataLength}</strong>{' '}
+                results
+              </p>
 
-                    {/* rows per page  */}
-                    <div class="space-x-3">
-                      <span>Rows per page</span>
-                      <select
-                        onChange={e => this.rowsHandler(e)}
-                        class="form-select px-3 py-1.5 border-none text-inherit font-inherit text-gray-700 bg-transparent bg-clip-padding bg-no-repeat rounded transition ease-in-out focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
-                      >
-                        {this.rows.map(row => (
-                          <option value={`${row}`}>{row}</option>
-                        ))}
-                      </select>
-                    </div>
+              {/* rows per page  */}
+              <div class="space-x-3">
+                <span>Rows per page</span>
+                <select
+                  onChange={e => this.rowsHandler(e)}
+                  class="form-select px-3 py-1.5 border-none text-inherit font-inherit text-gray-700 bg-transparent bg-clip-padding bg-no-repeat rounded transition ease-in-out focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
+                >
+                  {this.rows.map(row => (
+                    <option value={`${row}`}>{row}</option>
+                  ))}
+                </select>
+              </div>
 
-                    {/* pagination navigation menu */}
-                    <nav class="flex gap-4 items-center">
-                      <plain-button color="gray-500" type="text" clickHandler={() => this.prev()} disabledHandler={this.currentPage === 1} addClass="disabled:opacity-50">
-                        prev
-                      </plain-button>
-                      <plain-button
-                        color="gray-500"
-                        type="text"
-                        clickHandler={() => this.next()}
-                        disabledHandler={parseInt(this.dataLength) <= this.to}
-                        addClass="disabled:opacity-50"
-                      >
-                        next
-                      </plain-button>
-                    </nav>
-                  </div>
-                </div>
-                {this.isLoading && <td class="text-gray-500">&nbsp;</td>}
+              {/* pagination navigation menu */}
+              <nav class="flex gap-4 items-center">
+                <plain-button color="gray-500" type="text" clickHandler={() => this.prev()} disabledHandler={this.currentPage === 1} addClass="disabled:opacity-50">
+                  prev
+                </plain-button>
+                <plain-button color="gray-500" type="text" clickHandler={() => this.next()} disabledHandler={parseInt(this.dataLength) <= this.to} addClass="disabled:opacity-50">
+                  next
+                </plain-button>
+              </nav>
             </div>
+          </div>
+          {this.isLoading && <td class="text-gray-500">&nbsp;</td>}
+        </div>
       </div>
     );
   }
diff --git a/src/components/logsPage/query-logs/query-logs.tsx b/src/components/logsPage/query-logs/query-logs.tsx
@@ -8,17 +8,6 @@ import state from '../../editorPage/store';
 })
 export class QueryLogs {
   @State() headerList = [
-    {
-      title: 'id',
-      filter: {
-        searchable: false,
-        sortable: false,
-      },
-      alias: 'id',
-      click: {
-        clickable: false,
-      },
-    },
     {
       title: 'query_text',
       filter: {
@@ -52,17 +41,6 @@ export class QueryLogs {
         clickable: false,
       },
     },
-    {
-      title: 'query_status',
-      filter: {
-        searchable: true,
-        sortable: true,
-      },
-      alias: 'queryStatus',
-      click: {
-        clickable: false,
-      },
-    },
     {
       title: 'time_of_execution',
       filter: {
@@ -93,7 +71,8 @@ export class QueryLogs {
       },
       alias: 'email',
       click: {
-        clickable: false,
+        clickable: true,
+        url: '/users/',
       },
     },
     {
@@ -141,7 +120,6 @@ export class QueryLogs {
       }
     }
     const result = await axios.get(`${state.url}/api/editor/query/logs?${filterPar}`);
-
     return {
       total: result.data.total,
       data: result.data,
diff --git a/src/components/permissionPage/permission-editor/permission-editor.tsx b/src/components/permissionPage/permission-editor/permission-editor.tsx
diff --git a/src/index.html b/src/index.html

Original file line number	Diff line number	Diff line change
`@@ -31,6 +31,7 @@ export namespace Components {`
`31`	`31`	`"togglesort": any;`
`32`	`32`	`}`
`33`	`33`	`interface CodeEditor {`
	`34`	`+ "formatter": Function;`
`34`	`35`	`"onClickRun": Function;`
`35`	`36`	`}`
`36`	`37`	`interface DataTable {`
`@@ -606,6 +607,7 @@ declare namespace LocalJSX {`
`606`	`607`	`"togglesort"?: any;`
`607`	`608`	`}`
`608`	`609`	`interface CodeEditor {`
	`610`	`+ "formatter"?: Function;`
`609`	`611`	`"onClickRun"?: Function;`
`610`	`612`	`}`
`611`	`613`	`interface DataTable {`