Merge pull request #22 from SwapnilTechVariable/bug/v2-userpage-permission

Bug fixes : last 10 logs, Flushing data in case of new node fetch , Showing stringified data in case of array and object data types

Author: abhishekctv

src/components/editorPage/editor-page/test/editor-page.e2e.ts

@@ -15,12 +15,14 @@ export class EditorRes {
     const chips = { ...state.order };
     delete chips[item];
     state.order = chips;
+    state.refreshData();
   }
 
   removeSearchChip = (item) => {
     const chips = { ...state.filter };
     delete chips[item];
     state.filter = chips;
+    state.refreshData();
   }
 
   computeHeader() {
@@ -40,20 +42,27 @@ export class EditorRes {
   rowsHandler(e) {
     state.limit = e.target.value;
     state.page = 1;
+    state.offset = (state.limit*state.page)- state.limit;
+    state.refreshData();
   }
 
   nextPage() {
     ++state.page;
+    state.offset = (state.limit*state.page)- state.limit;
+    state.refreshData();
   }
 
   prevPage() {
     --state.page;
+    state.offset = (state.limit*state.page)- state.limit;
+    state.refreshData();
   }
 
   toggleSortMethod = (id: string) => {
     const chips = {};
     chips[id] = state.order[id] === "desc" ? 'asc' : 'desc';
     state.order = chips;
+    state.refreshData();
   };
 
   searchMethod(searchValue: string, colName: string, searchOption: string, textSearchOption: string, numberSearchOption: string) {
@@ -67,6 +76,7 @@ export class EditorRes {
     chips[colName] = searchOperation;
 
     state.filter = chips;
+    state.refreshData();
   }
 
 

src/components/editorPage/editor-page/test/editor-page.spec.tsx

@@ -10,6 +10,16 @@ const DROPDOWN_ITEMS = ['View'];
 })
 export class NodeItem {
   @Prop() nodeError:null | string;
+  nodeChangeHandler(nodeName){
+    state.selectedNodeName = nodeName
+    state.limit= 10,
+    state.offset= 0, //remove
+    state.page= 1,
+    state.order= {},
+    state.filter= {},
+    state.total= 0,
+    state.refreshData()
+  }
   render() {
     return (
       <div style={{ overflow: 'visible' }} class={'py-4 px-3 bg-gray-100 rounded-md'}>
@@ -19,7 +29,7 @@ export class NodeItem {
               <li>
                 <div class="flex justify-between p-2 text-base font-normal text-gray-900 rounded-lg bg-gray-200">
                   <div class="ml-3">{item}</div>
-                  <menu-drop-down listTitle={item} list={DROPDOWN_ITEMS} fetchData={nodeName => (state.selectedNodeName = nodeName)}></menu-drop-down>
+                  <menu-drop-down listTitle={item} list={DROPDOWN_ITEMS} fetchData={(nodeName) => this.nodeChangeHandler(nodeName)}></menu-drop-down>
                 </div>
               </li>
             );

src/components/editorPage/editor-res/editor-res.tsx

@@ -30,7 +30,6 @@ export class QueryResultTable {
   @Prop() toggleSortMethod: any;
   @Prop() searchMethod: any;
   @Prop() clearSearch: any;
-  // @Prop() isLoading: boolean;
   @Prop() isLoadingError: boolean;
 
   @State() data: any;
@@ -43,6 +42,21 @@ export class QueryResultTable {
     this.from = (this.currentPage - 1) * this.limit + 1;
     this.to = this.currentPage * this.limit;
   }
+  dataFormatter(rawData) {
+    let data: any  = rawData;
+    if(typeof(data) !== 'string' && typeof(data) !== 'number'){
+      data = JSON.stringify(data);
+    }
+    if (data.length > 25) {
+      return data.slice(0, 25) + '...';
+    } else {
+      if (/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/.test(data)) {
+        return data.slice(0, 16).split('T')[0] + ' at ' + data.slice(11, 19);
+      } else {
+        return data;
+      }
+    }
+  }
 
   render() {
     const trList = [];
@@ -95,17 +109,10 @@ export class QueryResultTable {
                   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 title={item[id.alias]} text-overflow:ellipsis class="px-6 py-3 whitespace-nowrap text-sm text-gray-900">
                           {!id.click.clickable ? (
                             item[id.alias] ? (
-                              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]
-                              )
+                              this.dataFormatter(item[id.alias])
                             ) : (
                               item[id.alias]
                             )

src/components/editorPage/node-item/node-item.tsx

@@ -34,18 +34,9 @@ const { state, onChange, reset } = createStore({
   timeTaken:null,
   refresh:null,
 
-});
-
-onChange('selectedNodeName', value => {
-  fetchData(value);
-});
-
-onChange('order', () => {
-  fetchData(state.selectedNodeName);
-});
-
-onChange('filter', () => {
-  fetchData(state.selectedNodeName);
+  refreshData: async () => {
+    await fetchData(state.selectedNodeName)
+  }
 });
 
 onChange('refresh', () => {
@@ -130,14 +121,5 @@ const fetchData = async (nodeName: string) => {
   }
 };
 
-onChange('page', (value) => {
-  state.offset = (state.limit*value)- state.limit;
-  fetchData(state.selectedNodeName);
-});
-
-onChange('limit', () => {
-  fetchData(state.selectedNodeName);
-});
-
 export default state;
-export { fetchData, reset }
+export { fetchData, reset }

src/components/editorPage/query-result-table/query-result-table.tsx

@@ -109,7 +109,7 @@ export class LastLogs {
     this.isLoading = true;
     this.isLoadingError = false;
     try {
-      const response =await axios.get(`http://localhost:3000/api/editor/query/logs?limit=49&offset=0&filter_ownerId=${this.user}&order=desc`)
+      const response =await axios.get(`${this.url}api/editor/query/logs?limit=49&offset=0&filter_ownerId=${this.user}&order=desc`)
       response.data.respond.map(item=>{item.isCustomQuery===true? item["isCustomQuery"]="Custom Query": item["isCustomQuery"]="Builder Query"});
       this.total = response.data.total;
       this.total = response.data.total;