From 06ddeff5cf38f7d03d937c72fc1b7c3fd073a80c Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 2 May 2022 23:05:49 +0530
Subject: [PATCH] feat: code snippet

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../spreadsheet/components/codeSnippet.vue    | 118 ++-
 .../components/spreadsheetNavDrawer.vue       |  11 +-
 .../project/spreadsheet/rowsXcDataTable.vue   | 766 +++++++++---------
 .../src/lib/noco/meta/api/apiTokenApis.ts     |   4 +
 .../src/lib/noco/meta/api/columnApis.ts       |   5 +
 .../src/lib/noco/meta/api/filterApis.ts       |   8 +
 .../src/lib/noco/meta/api/formViewApis.ts     |   5 +
 .../lib/noco/meta/api/formViewColumnApis.ts   |   2 +
 .../src/lib/noco/meta/api/galleryViewApis.ts  |   4 +
 .../src/lib/noco/meta/api/gridViewApis.ts     |   2 +
 .../lib/noco/meta/api/gridViewColumnApis.ts   |   3 +
 .../nocodb/src/lib/noco/meta/api/hookApis.ts  |   7 +
 .../src/lib/noco/meta/api/hookFilterApis.ts   |  12 +-
 .../src/lib/noco/meta/api/metaDiffApis.ts     |   3 +
 .../lib/noco/meta/api/modelVisibilityApis.ts  |   3 +
 .../src/lib/noco/meta/api/pluginApis.ts       |  11 +-
 .../src/lib/noco/meta/api/projectApis.ts      |   6 +
 .../src/lib/noco/meta/api/projectUserApis.ts  |   6 +
 .../nocodb/src/lib/noco/meta/api/sortApis.ts  |  11 +-
 .../nocodb/src/lib/noco/meta/api/tableApis.ts |   7 +
 .../nocodb/src/lib/noco/meta/api/viewApis.ts  |   9 +
 .../src/lib/noco/meta/api/viewColumnApis.ts   |   4 +
 .../src/lib/noco/meta/helpers/apiMetrics.ts   |  12 +-
 23 files changed, 615 insertions(+), 404 deletions(-)

diff --git a/packages/nc-gui/components/project/spreadsheet/components/codeSnippet.vue b/packages/nc-gui/components/project/spreadsheet/components/codeSnippet.vue
index 04c879c5f7..a153c7a83b 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/codeSnippet.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/codeSnippet.vue
@@ -1,7 +1,7 @@
 <template>
-  <v-dialog :value="true">
+  <v-dialog v-model="modal">
     <v-card style="overflow: hidden">
-      <v-tabs v-model="tab" height="30">
+      <v-tabs v-model="tab" height="30" @change="client=null">
         <v-tab
           v-for="{lang} in langs"
           :key="lang"
@@ -11,17 +11,31 @@
         </v-tab>
       </v-tabs>
       <div class="nc-snippet-wrapper">
-        <div class="nc-snippet-actions">
-          <v-icon>mdi-clipboard</v-icon>sdds
-          <v-select
+        <div class="nc-snippet-actions d-flex">
+          <v-btn color="primary" class="rounded caption " @click="copyToClipboard">
+            <v-icon small>
+              mdi-clipboard-outline
+            </v-icon> Copy To Clipboard
+          </v-btn>
+          <div
             v-if="langs[tab].clients"
-            v-model="client"
-            class="nc-snippet-client"
-            outlined
-            dense
-            hide-details
-            style="max-width: 100px"
-          />
+            class=" ml-2 d-flex align-center"
+          >
+            <v-menu bottom offset-y>
+              <template #activator="{on}">
+                <v-btn class="caption" color="primary" v-on="on">
+                  {{ client || langs[tab].clients[0] }} <v-icon small>
+                    mdi-chevron-down
+                  </v-icon>
+                </v-btn>
+              </template>
+              <v-list dense>
+                <v-list-item v-for="c in langs[tab].clients" :key="c" dense @click="client = c">
+                  <v-list-item-title>{{ c }}</v-list-item-title>
+                </v-list-item>
+              </v-list>
+            </v-menu>
+          </div>
         </div>
         <custom-monaco-editor style="min-height:500px;max-width: 100%" :value="code" read-only />
       </div>
@@ -32,6 +46,7 @@
 <script>
 import HTTPSnippet from 'httpsnippet'
 import CustomMonacoEditor from '~/components/monaco/CustomMonacoEditor'
+import { copyTextToClipboard } from '~/helpers/xutils'
 export default {
   name: 'CodeSnippet',
   components: { CustomMonacoEditor },
@@ -40,48 +55,110 @@ export default {
     view: Object,
     filters: [Object, Array],
     sorts: [Object, Array],
-    fileds: [Object, Array]
+    fileds: [Object, Array],
+    queryParams: Object,
+    value: Boolean
   },
   data: () => ({
     tab: 0,
     client: null,
     langs: [
+      {
+        lang: 'shell',
+        clients: ['curl', 'wget']
+      },
       {
         lang: 'javascript',
-        clients: ['XMLHttpRequest', 'jQuery.ajax']
+        clients: ['axios', 'fetch', 'jquery', 'xhr']
       },
       {
-        lang: 'node'
+        lang: 'node',
+        clients: ['axios', 'fetch', 'request', 'native', 'unirest']
       },
       {
-        lang: 'shell'
+        lang: 'nocodb-sdk',
+        clients: ['javascript', 'node']
       },
       {
         lang: 'php'
       },
       {
-        lang: 'python'
+        lang: 'python',
+        clients: ['python3',
+          'requests']
       },
       {
         lang: 'ruby'
       },
+      {
+        lang: 'java'
+      },
       {
         lang: 'c'
       }
     ]
   }),
   computed: {
+    modal: {
+      get() {
+        return this.value
+      },
+      set(v) {
+        this.$emit('input', v)
+      }
+    },
+    apiUrl() {
+      return new URL(`/api/v1/db/data/noco/${this.projectId}/${this.meta.title}/views/${this.view.title}`, this.$store.state.project.projectInfo.ncSiteUrl).href
+    },
     snippet() {
       return new HTTPSnippet({
         method: 'GET',
         headers: [
           { name: 'xc-auth', value: this.$store.state.users.token, comment: 'JWT Auth token' }
         ],
-        url: new URL(`/api/v1/db/data/noco/${this.projectId}/${this.meta.title}/views/${this.view.title}`, this.$store.state.project.projectInfo.ncSiteUrl).href
+        url: this.apiUrl,
+        queryString: Object.entries(this.queryParams || {}).map(([name, value]) => {
+          return {
+            name, value: String(value)
+          }
+        })
       })
     },
     code() {
-      return this.snippet.convert(this.langs[this.tab].lang, this.client)
+      if (this.langs[this.tab].lang === 'nocodb-sdk') {
+        return `${
+          this.client === 'node'
+            ? 'const { Api } require("nocodb-sdk");'
+          : 'import { Api } from "nocodb-sdk";'
+        }
+
+const api = new Api({
+  baseURL: ${JSON.stringify(this.apiUrl)},
+  headers: {
+    "xc-auth": ${JSON.stringify(this.$store.state.users.token)}
+  }
+})
+
+api.dbViewRow.list(
+  "noco",
+  ${JSON.stringify(this.projectName)},
+  ${JSON.stringify(this.meta.title)},
+  ${JSON.stringify(this.view.title)},
+  ${JSON.stringify(this.queryParams, null, 2)}
+).then(function (data) {
+  console.log(data);
+}).catch(function (error) {
+  console.error(error);
+});`
+      }
+
+      return this.snippet.convert(this.langs[this.tab].lang, this.client || (this.langs[this.tab].clients && this.langs[this.tab].clients[0]), {})
+    }
+  },
+  methods: {
+    copyToClipboard() {
+      copyTextToClipboard(this.code)
+      this.$toast.success('Code copied to clipboard successfully.').goAway(3000)
     }
   }
 }
@@ -94,6 +171,7 @@ export default {
 .nc-snippet-actions{
   position: absolute;
   right: 10px;
-  top:40px;
+  bottom:10px;
+  z-index: 99999;
 }
 </style>
diff --git a/packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue b/packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue
index 3bb938b43f..b10ed4543d 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue
@@ -274,7 +274,12 @@
         </div>
 
         <div>
-          <code-snippet :meta="meta" :view="selectedView" />
+          <v-btn color="primary" class="caption d-100" @click="codeSnippetModal=true">
+            <v-icon small class="mr-2">
+              mdi-xml
+            </v-icon> Get API Snippet
+          </v-btn>
+          <code-snippet v-model="codeSnippetModal" :query-params="queryParams" :meta="meta" :view="selectedView" />
         </div>
 
         <div
@@ -549,9 +554,11 @@ export default {
     // coverImageField: String,
     groupingField: String,
     // showSystemFields: Boolean,
-    views: Array
+    views: Array,
+    queryParams: Object
   },
   data: () => ({
+    codeSnippetModal: false,
     drag: false,
     dragOptions: {
       animation: 200,
diff --git a/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue b/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
index 21dd595c79..5faae3cfa2 100644
--- a/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
+++ b/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
@@ -14,7 +14,9 @@
         <v-menu bottom offset-y>
           <template #activator="{ on }">
             <div style="min-width: 56px" v-on="on">
-              <v-icon class="ml-2" small color="grey"> mdi-magnify </v-icon>
+              <v-icon class="ml-2" small color="grey">
+                mdi-magnify
+              </v-icon>
 
               <v-icon color="grey" class="pl-0 pa-1" small>
                 mdi-menu-down
@@ -53,11 +55,12 @@
         />
       </div>
 
-      <span v-if="relationType && false" class="caption grey--text"
-        >{{ refTable }}({{ relationPrimaryValue }}) ->
+      <span
+        v-if="relationType && false"
+        class="caption grey--text"
+      >{{ refTable }}({{ relationPrimaryValue }}) ->
         {{ relationType === "hm" ? " Has Many " : " Belongs To " }} ->
-        {{ table }}</span
-      >
+        {{ table }}</span>
       <div class="d-inline-flex">
         <div>
           <fields
@@ -472,6 +475,7 @@
       <spreadsheet-nav-drawer
         v-if="meta"
         ref="drawer"
+        :query-params="listQueryParams"
         :is-view="isView"
         :current-api-url="currentApiUrl"
         :toggle-drawer="toggleDrawer"
@@ -535,7 +539,9 @@
           v-if="showAdvanceOptions"
           @click="showAdditionalFeatOverlay('validators')"
         >
-          <v-icon x-small class="mr-2"> mdi-sticker-check-outline </v-icon>
+          <v-icon x-small class="mr-2">
+            mdi-sticker-check-outline
+          </v-icon>
           <span class="caption"> API Validators</span>
         </v-list-item>
         <v-divider v-if="showAdvanceOptions" class="advance-menu-divider" />
@@ -544,21 +550,27 @@
           v-if="showAdvanceOptions"
           @click="showAdditionalFeatOverlay('columns')"
         >
-          <v-icon x-small class="mr-2"> mdi-view-column </v-icon>
+          <v-icon x-small class="mr-2">
+            mdi-view-column
+          </v-icon>
           <span class="caption font-weight-light">SQL Columns</span>
         </v-list-item>
         <v-list-item
           v-if="showAdvanceOptions"
           @click="showAdditionalFeatOverlay('indexes')"
         >
-          <v-icon x-small class="mr-2"> mdi-blur </v-icon>
+          <v-icon x-small class="mr-2">
+            mdi-blur
+          </v-icon>
           <span class="caption font-weight-light">SQL Indexes</span>
         </v-list-item>
         <v-list-item
           v-if="showAdvanceOptions"
           @click="showAdditionalFeatOverlay('triggers')"
         >
-          <v-icon x-small class="mr-2"> mdi-shield-edit-outline </v-icon>
+          <v-icon x-small class="mr-2">
+            mdi-shield-edit-outline
+          </v-icon>
           <span class="caption font-weight-light">SQL Triggers</span>
         </v-list-item>
       </spreadsheet-nav-drawer>
@@ -599,7 +611,6 @@
         </template>
 
         <template v-if="isEditable && !isLocked && rowContextMenu.col && !rowContextMenu.col.rqd && !rowContextMenu.col.virtual">
-
           <v-tooltip bottom>
             <template #activator="{ on }">
               <v-list-item
@@ -611,9 +622,9 @@
               </v-list-item>
             </template>
 
-            <span class="caption"
-              >Set column value to <strong>null</strong></span
-            >
+            <span
+              class="caption"
+            >Set column value to <strong>null</strong></span>
           </v-tooltip>
         </template>
       </v-list>
@@ -663,8 +674,8 @@
       <expanded-form
         v-if="
           !isKanban &&
-          selectedExpandRowIndex != null &&
-          data[selectedExpandRowIndex]
+            selectedExpandRowIndex != null &&
+            data[selectedExpandRowIndex]
         "
         :key="selectedExpandRowIndex"
         v-model="data[selectedExpandRowIndex].row"
@@ -713,31 +724,31 @@
 </template>
 
 <script>
-import { mapActions } from "vuex";
-import debounce from "debounce";
-import { SqlUiFactory, ViewTypes } from "nocodb-sdk";
-import FileSaver from "file-saver";
-import FormView from "./views/formView";
-import XcGridView from "./views/xcGridView";
-import spreadsheet from "./mixins/spreadsheet";
-import DebugMetas from "@/components/project/spreadsheet/components/debugMetas";
-
-import AdditionalFeatures from "@/components/project/spreadsheet/overlay/additinalFeatures";
-import GalleryView from "@/components/project/spreadsheet/views/galleryView";
-import CalendarView from "@/components/project/spreadsheet/views/calendarView";
-import KanbanView from "@/components/project/spreadsheet/views/kanbanView";
-import SortList from "@/components/project/spreadsheet/components/sortListMenu";
-import Fields from "@/components/project/spreadsheet/components/fieldsMenu";
-import SpreadsheetNavDrawer from "@/components/project/spreadsheet/components/spreadsheetNavDrawer";
-import LockMenu from "@/components/project/spreadsheet/components/lockMenu";
-import ExpandedForm from "@/components/project/spreadsheet/components/expandedForm";
-import Pagination from "@/components/project/spreadsheet/components/pagination";
-import ColumnFilter from "~/components/project/spreadsheet/components/columnFilterMenu";
-import MoreActions from "~/components/project/spreadsheet/components/moreActions";
-import ShareViewMenu from "~/components/project/spreadsheet/components/shareViewMenu";
+import { mapActions } from 'vuex'
+import debounce from 'debounce'
+import { SqlUiFactory, ViewTypes } from 'nocodb-sdk'
+import FileSaver from 'file-saver'
+import FormView from './views/formView'
+import XcGridView from './views/xcGridView'
+import spreadsheet from './mixins/spreadsheet'
+import DebugMetas from '@/components/project/spreadsheet/components/debugMetas'
+
+import AdditionalFeatures from '@/components/project/spreadsheet/overlay/additinalFeatures'
+import GalleryView from '@/components/project/spreadsheet/views/galleryView'
+import CalendarView from '@/components/project/spreadsheet/views/calendarView'
+import KanbanView from '@/components/project/spreadsheet/views/kanbanView'
+import SortList from '@/components/project/spreadsheet/components/sortListMenu'
+import Fields from '@/components/project/spreadsheet/components/fieldsMenu'
+import SpreadsheetNavDrawer from '@/components/project/spreadsheet/components/spreadsheetNavDrawer'
+import LockMenu from '@/components/project/spreadsheet/components/lockMenu'
+import ExpandedForm from '@/components/project/spreadsheet/components/expandedForm'
+import Pagination from '@/components/project/spreadsheet/components/pagination'
+import ColumnFilter from '~/components/project/spreadsheet/components/columnFilterMenu'
+import MoreActions from '~/components/project/spreadsheet/components/moreActions'
+import ShareViewMenu from '~/components/project/spreadsheet/components/shareViewMenu'
 
 export default {
-  name: "RowsXcDataTable",
+  name: 'RowsXcDataTable',
   components: {
     ShareViewMenu,
     MoreActions,
@@ -754,7 +765,7 @@ export default {
     CalendarView,
     GalleryView,
     ColumnFilter,
-    AdditionalFeatures,
+    AdditionalFeatures
   },
   mixins: [spreadsheet],
   props: {
@@ -769,24 +780,24 @@ export default {
     refTable: String,
     relationPrimaryValue: [String, Number],
     deleteTable: Function,
-    showTabs: [Boolean, Number],
+    showTabs: [Boolean, Number]
   },
   data: () => ({
-    syncDataDebounce: debounce(async function (self) {
-      await self.syncData();
+    syncDataDebounce: debounce(async function(self) {
+      await self.syncData()
     }, 500),
-    loadTableDataDeb: debounce(async function (self) {
-      await self.loadTableDataFn();
+    loadTableDataDeb: debounce(async function(self) {
+      await self.loadTableDataFn()
     }, 200),
     viewKey: 0,
     extraViewParams: {},
     debug: false,
     key: 1,
     dataLoaded: false,
-    searchQueryVal: "",
+    searchQueryVal: '',
     columnsWidth: null,
     viewStatus: {
-      type: null,
+      type: null
     },
     fieldsOrder: [],
     coverImageField: null,
@@ -797,7 +808,7 @@ export default {
     selectedView: {},
     overShieldIcon: false,
     progress: false,
-    createViewType: "",
+    createViewType: '',
     addNewColModal: false,
     showAddFeatOverlay: false,
     featureType: null,
@@ -807,53 +818,53 @@ export default {
     loadingMeta: true,
     loadingData: true,
     toggleDrawer: false,
-    selectedViewId: "",
+    selectedViewId: '',
     searchField: null,
-    searchQuery: "",
+    searchQuery: '',
     showExpandModal: false,
     selectedExpandRowIndex: null,
     selectedExpandRowMeta: null,
     navDrawer: true,
     selected: {
       row: null,
-      col: null,
+      col: null
     },
     editEnabled: {
       row: null,
-      col: null,
+      col: null
     },
     page: 1,
     count: 0,
     // size: 25,
-    xWhere: "",
-    sort: "",
+    xWhere: '',
+    sort: '',
 
-    cellHeight: "small",
+    cellHeight: 'small',
 
     spreadsheet: null,
     options: {
       allowToolbar: true,
-      columnSorting: false,
+      columnSorting: false
     },
     filteredData: [],
 
     cellHeights: [
       {
-        size: "small",
-        icon: "mdi-view-headline",
+        size: 'small',
+        icon: 'mdi-view-headline'
       },
       {
-        size: "medium",
-        icon: "mdi-view-sequential",
+        size: 'medium',
+        icon: 'mdi-view-sequential'
       },
       {
-        size: "large",
-        icon: "mdi-view-stream",
+        size: 'large',
+        icon: 'mdi-view-stream'
       },
       {
-        size: "xlarge",
-        icon: "mdi-ca rd",
-      },
+        size: 'xlarge',
+        icon: 'mdi-ca rd'
+      }
     ],
     rowContextMenu: null,
     presetValues: {},
@@ -867,28 +878,28 @@ export default {
       loadingData: true,
       selectedExpandRow: null,
       selectedExpandOldRow: null,
-      selectedExpandRowMeta: null,
+      selectedExpandRowMeta: null
     },
-    clickCount: 0,
+    clickCount: 0
   }),
   watch: {
     isActive(n, o) {
       if (!o && n) {
-        this.reload();
+        this.reload()
       }
     },
     page(p) {
-      this.$store.commit("tabs/MutSetTabState", {
+      this.$store.commit('tabs/MutSetTabState', {
         id: this.uniqueId,
-        key: "page",
-        val: p,
-      });
+        key: 'page',
+        val: p
+      })
     },
     selectedViewId(id) {
       if (this.tabsState[this.tabId] && this.tabsState[this.tabId].page) {
-        this.page = this.tabsState[this.tabId].page || 1;
+        this.page = this.tabsState[this.tabId].page || 1
       } else {
-        this.page = 1;
+        this.page = 1
       }
       // this.$store.commit('tabs/MutSetTabState', {
       //   id: this.tabId,
@@ -897,51 +908,51 @@ export default {
       // })
     },
     async groupingField(newVal) {
-      this.groupingField = newVal;
-      if (this.selectedView && this.selectedView.show_as === "kanban") {
-        await this.loadKanbanData();
+      this.groupingField = newVal
+      if (this.selectedView && this.selectedView.show_as === 'kanban') {
+        await this.loadKanbanData()
       }
-    },
+    }
   },
   async mounted() {
     try {
       if (this.tabsState && this.tabsState[this.uniqueId]) {
         if (this.tabsState[this.uniqueId].page) {
-          this.page = this.tabsState[this.uniqueId].page;
+          this.page = this.tabsState[this.uniqueId].page
         }
       }
-      await this.createTableIfNewTable();
-      this.loadingMeta = true;
-      await this.loadMeta(false);
-      this.loadingMeta = false;
+      await this.createTableIfNewTable()
+      this.loadingMeta = true
+      await this.loadMeta(false)
+      this.loadingMeta = false
     } catch (e) {
-      console.log(e);
+      console.log(e)
     }
-    this.searchField = this.primaryValueColumn;
+    this.searchField = this.primaryValueColumn
   },
   methods: {
     clickAddNewIcon() {
-      this.insertNewRow(true, true);
-      this.$e("c:row:add:grid-top");
+      this.insertNewRow(true, true)
+      this.$e('c:row:add:grid-top')
     },
     toggleClick() {
-      this.$e("c:grid:toggle-navdraw");
+      this.$e('c:grid:toggle-navdraw')
     },
     ...mapActions({
-      loadTablesFromChildTreeNode: "project/loadTablesFromChildTreeNode",
+      loadTablesFromChildTreeNode: 'project/loadTablesFromChildTreeNode'
     }),
     generateNewViewKey() {
-      this.viewKey = Math.random();
+      this.viewKey = Math.random()
     },
     loadNext() {
       this.selectedExpandRowIndex =
-        ++this.selectedExpandRowIndex % this.data.length;
+        ++this.selectedExpandRowIndex % this.data.length
     },
     loadPrev() {
       this.selectedExpandRowIndex =
         --this.selectedExpandRowIndex === -1
           ? this.data.length - 1
-          : this.selectedExpandRowIndex;
+          : this.selectedExpandRowIndex
     },
     async checkAndDeleteTable() {
       // if (
@@ -952,105 +963,105 @@ export default {
       // ) {
       //   return this.$toast.info('Please delete relations before deleting table.').goAway(3000)
       // }
-      this.deleteTable("showDialog", this.meta.id);
+      this.deleteTable('showDialog', this.meta.id)
 
       // if (confirm('Do you want to delete the table?')) {
       //   await this.$api.meta.tableDelete(this.meta.id)
       // }
-      this.$e("c:table:delete");
+      this.$e('c:table:delete')
     },
     async reloadClick() {
-      await this.reload();
-      this.$e("a:table:reload:navbar");
+      await this.reload()
+      this.$e('a:table:reload:navbar')
     },
     async reload() {
-      this.$store.dispatch("meta/ActLoadMeta", {
+      this.$store.dispatch('meta/ActLoadMeta', {
         env: this.nodes.env,
         dbAlias: this.nodes.dbAlias,
         tn: this.table,
-        force: true,
-      });
-      if (this.selectedView && this.selectedView.show_as === "kanban") {
-        await this.loadKanbanData();
+        force: true
+      })
+      if (this.selectedView && this.selectedView.show_as === 'kanban') {
+        await this.loadKanbanData()
       } else {
-        await this.loadTableData();
+        await this.loadTableData()
       }
-      this.key = Math.random();
+      this.key = Math.random()
     },
     reloadComments() {
       if (this.$refs.ncgridview) {
-        this.$refs.ncgridview.xcAuditModelCommentsCount();
+        this.$refs.ncgridview.xcAuditModelCommentsCount()
       }
     },
     async syncData() {},
     showAdditionalFeatOverlay(feat) {
-      this.showAddFeatOverlay = true;
-      this.featureType = feat;
+      this.showAddFeatOverlay = true
+      this.featureType = feat
     },
     async createTableIfNewTable() {
       if (this.nodes.newTable && !this.nodes.tableCreated) {
         const columns = this.sqlUi
           .getNewTableColumns()
-          .filter((col) =>
+          .filter(col =>
             this.nodes.newTable.columns.includes(col.column_name)
-          );
+          )
         await this.$api.dbTable.create(this.projectId, {
           table_name: this.nodes.table_name,
           title: this.nodes.title,
-          columns,
-        });
+          columns
+        })
 
         await this.loadTablesFromChildTreeNode({
           _nodes: {
-            ...this.nodes,
-          },
-        });
+            ...this.nodes
+          }
+        })
         // eslint-disable-next-line vue/no-mutating-props
-        this.nodes.tableCreated = true;
+        this.nodes.tableCreated = true
       }
 
-      this.loadViews = true;
+      this.loadViews = true
     },
 
     comingSoon() {
-      this.$toast.info("Coming soon!").goAway(3000);
+      this.$toast.info('Coming soon!').goAway(3000)
     },
     changed(col, row) {
       this.$set(
         this.data[row].rowMeta,
-        "changed",
+        'changed',
         this.data[row].rowMeta.changed || {}
-      );
+      )
       if (this.data[row].rowMeta) {
         this.$set(
           this.data[row].rowMeta.changed,
           this.availableColumns[col].column_name,
           true
-        );
+        )
       }
     },
     async save() {
       for (let row = 0; row < this.rowLength; row++) {
-        const { row: rowObj, rowMeta } = this.data[row];
+        const { row: rowObj, rowMeta } = this.data[row]
         if (rowMeta.new) {
           try {
-            this.$set(this.data[row], "saving", true);
+            this.$set(this.data[row], 'saving', true)
             const pks = this.meta.columns.filter((col) => {
-              return col.pk;
-            });
+              return col.pk
+            })
             if (
               this.meta.columns.every((col) => {
-                return !col.ai;
+                return !col.ai
               }) &&
               pks.length &&
               pks.every(
-                (col) =>
+                col =>
                   !rowObj[col.title] && !(col.columnDefault || col.default)
               )
             ) {
               return this.$toast
-                .info("Primary column is empty please provide some value")
-                .goAway(3000);
+                .info('Primary column is empty please provide some value')
+                .goAway(3000)
             }
             if (
               this.meta.columns.some((col) => {
@@ -1060,33 +1071,33 @@ export default {
                   (rowObj[col.title] === undefined ||
                     rowObj[col.title] === null) &&
                   !col.cdf
-                );
+                )
               })
             ) {
-              return;
+              return
             }
 
             const insertObj = this.meta.columns.reduce((o, col) => {
               if (!col.ai && (rowObj && rowObj[col.title]) !== null) {
-                o[col.title] = rowObj && rowObj[col.title];
+                o[col.title] = rowObj && rowObj[col.title]
               }
-              return o;
-            }, {});
+              return o
+            }, {})
 
             // const insertedData = await this.api.insert(insertObj)
             const insertedData = await this.$api.dbViewRow.create(
-              "noco",
+              'noco',
               this.projectName,
               this.meta.title,
               this.selectedView.title,
               insertObj
-            );
+            )
 
             this.data.splice(row, 1, {
               row: insertedData,
               rowMeta: {},
-              oldRow: { ...insertedData },
-            });
+              oldRow: { ...insertedData }
+            })
 
             /* this.$toast.success(`${insertedData[this.primaryValueColumn] ? `${insertedData[this.primaryValueColumn]}'s r` : 'R'}ow saved successfully.`, {
               position: 'bottom-center'
@@ -1095,18 +1106,18 @@ export default {
             // if (e.response && e.response.data && e.response.data.msg) {
             this.$toast
               .error(await this._extractSdkResponseErrorMsg(e))
-              .goAway(3000);
+              .goAway(3000)
             // } else {
             //   this.$toast.error(`Failed to
             //
             //   row : ${e.message}`).goAway(3000)
             // }
           } finally {
-            this.$set(this.data[row], "saving", false);
+            this.$set(this.data[row], 'saving', false)
           }
         }
       }
-      this.syncCount();
+      this.syncCount()
     },
     // // todo: move debounce to cell since this will skip few update api call
     // onCellValueChangeDebounce: debounce(async function(col, row, column, self) {
@@ -1117,11 +1128,11 @@ export default {
     // },
     async onCellValueChange(col, row, column, saved = true) {
       if (!this.data[row]) {
-        return;
+        return
       }
-      const { row: rowObj, rowMeta, oldRow, saving, lastSave } = this.data[row];
+      const { row: rowObj, rowMeta, oldRow, saving, lastSave } = this.data[row]
       if (!lastSave) {
-        this.$set(this.data[row], "lastSave", rowObj[column.title]);
+        this.$set(this.data[row], 'lastSave', rowObj[column.title])
       }
       if (rowMeta.new) {
         // return if there is no change
@@ -1129,9 +1140,9 @@ export default {
           (column && oldRow[column.title] === rowObj[column.title]) ||
           saving
         ) {
-          return;
+          return
         }
-        await this.save();
+        await this.save()
       } else {
         try {
           // if (!this.api) {
@@ -1144,39 +1155,39 @@ export default {
             (oldRow[column.title] === rowObj[column.title] &&
               (lastSave || rowObj[column.title]) === rowObj[column.title])
           ) {
-            return;
+            return
           }
           if (saved) {
-            this.$set(this.data[row], "lastSave", oldRow[column.title]);
+            this.$set(this.data[row], 'lastSave', oldRow[column.title])
           }
           const id = this.meta.columns
-            .filter((c) => c.pk)
-            .map((c) => rowObj[c.title])
-            .join("___");
+            .filter(c => c.pk)
+            .map(c => rowObj[c.title])
+            .join('___')
 
           if (!id) {
             return this.$toast
               .info(
                 "Update not allowed for table which doesn't have primary Key"
               )
-              .goAway(3000);
+              .goAway(3000)
           }
-          this.$set(this.data[row], "saving", true);
+          this.$set(this.data[row], 'saving', true)
 
           // eslint-disable-next-line promise/param-names
           const newData = await this.$api.dbViewRow.update(
-            "noco",
+            'noco',
             this.projectName,
             this.meta.title,
             this.selectedView.title,
             id,
             {
-              [column.title]: rowObj[column.title],
+              [column.title]: rowObj[column.title]
             },
             {
-              query: { ignoreWebhook: !saved },
+              query: { ignoreWebhook: !saved }
             }
-          );
+          )
 
           // audit
           this.$api.utils
@@ -1185,13 +1196,13 @@ export default {
               column_name: column.title,
               row_id: id,
               value: rowObj[column.title],
-              prev_value: oldRow[column.title],
+              prev_value: oldRow[column.title]
             })
-            .then(() => {});
+            .then(() => {})
 
-          this.$set(this.data[row], "row", { ...rowObj, ...newData });
+          this.$set(this.data[row], 'row', { ...rowObj, ...newData })
 
-          this.$set(oldRow, column.title, rowObj[column.title]);
+          this.$set(oldRow, column.title, rowObj[column.title])
           /*    this.$toast.success(`${rowObj[this.primaryValueColumn] ? `${rowObj[this.primaryValueColumn]}'s c` : 'C'}olumn '${column.column_name}' updated successfully.`, {
             position: 'bottom-center'
           }).goAway(3000) */
@@ -1199,189 +1210,189 @@ export default {
           // if (e.response && e.response.data && e.response.data.msg) {
           this.$toast
             .error(await this._extractSdkResponseErrorMsg(e))
-            .goAway(3000);
+            .goAway(3000)
           // } else {
           //   this.$toast.error(`Failed to update row : ${e.message}`).goAway(3000)
           // }
         }
 
-        this.$set(this.data[row], "saving", false);
+        this.$set(this.data[row], 'saving', false)
       }
     },
     async deleteRow() {
       try {
-        const rowObj = this.rowContextMenu.row;
+        const rowObj = this.rowContextMenu.row
         if (!this.rowContextMenu.rowMeta.new) {
           const id =
             this.meta &&
             this.meta.columns &&
             this.meta.columns
-              .filter((c) => c.pk)
-              .map((c) => rowObj[c.title])
-              .join("___");
+              .filter(c => c.pk)
+              .map(c => rowObj[c.title])
+              .join('___')
 
           if (!id) {
             return this.$toast
               .info(
                 "Delete not allowed for table which doesn't have primary Key"
               )
-              .goAway(3000);
+              .goAway(3000)
           }
           await this.$api.dbViewRow.delete(
-            "noco",
+            'noco',
             this.projectName,
             this.meta.title,
             this.selectedView.title,
             id
-          );
+          )
         }
-        this.data.splice(this.rowContextMenu.index, 1);
-        this.syncCount();
+        this.data.splice(this.rowContextMenu.index, 1)
+        this.syncCount()
         // this.$toast.success('Deleted row successfully').goAway(3000)
       } catch (e) {
-        this.$toast.error(`Failed to delete row : ${e.message}`).goAway(3000);
+        this.$toast.error(`Failed to delete row : ${e.message}`).goAway(3000)
       }
     },
     async deleteSelectedRows() {
-      let row = this.rowLength;
+      let row = this.rowLength
       // let success = 0
       while (row--) {
         try {
-          const { row: rowObj, rowMeta } = this.data[row];
+          const { row: rowObj, rowMeta } = this.data[row]
           if (!rowMeta.selected) {
-            continue;
+            continue
           }
           if (!rowMeta.new) {
             const id = this.meta.columns
-              .filter((c) => c.pk)
-              .map((c) => rowObj[c.title])
-              .join("___");
+              .filter(c => c.pk)
+              .map(c => rowObj[c.title])
+              .join('___')
 
             if (!id) {
               return this.$toast
                 .info(
                   "Delete not allowed for table which doesn't have primary Key"
                 )
-                .goAway(3000);
+                .goAway(3000)
             }
             await this.$api.dbViewRow.delete(
-              "noco",
+              'noco',
               this.projectName,
               this.meta.title,
               this.selectedView.title,
               id
-            );
+            )
           }
-          this.data.splice(row, 1);
+          this.data.splice(row, 1)
         } catch (e) {
           return this.$toast
             .error(`Failed to delete row : ${e.message}`)
-            .goAway(3000);
+            .goAway(3000)
         }
       }
-      this.syncCount();
+      this.syncCount()
     },
 
     async clearCellValue() {
-      const { col, colIndex, row, index } = this.rowContextMenu;
+      const { col, colIndex, row, index } = this.rowContextMenu
       if (row[col.title] === null) {
-        return;
+        return
       }
-      this.$set(this.data[index].row, col.title, null);
-      await this.onCellValueChange(colIndex, index, col, true);
+      this.$set(this.data[index].row, col.title, null)
+      await this.onCellValueChange(colIndex, index, col, true)
     },
     async insertNewRow(atEnd = false, expand = false, presetValues = {}) {
       const isKanban =
-        this.selectedView && this.selectedView.show_as === "kanban";
-      const data = isKanban ? this.kanban.data : this.data;
+        this.selectedView && this.selectedView.show_as === 'kanban'
+      const data = isKanban ? this.kanban.data : this.data
       const focusRow = isKanban
         ? data.length
         : atEnd
-        ? this.rowLength
-        : this.rowContextMenu.index + 1;
-      const focusCol = this.availableColumns.findIndex((c) => !c.ai);
+          ? this.rowLength
+          : this.rowContextMenu.index + 1
+      const focusCol = this.availableColumns.findIndex(c => !c.ai)
       data.splice(focusRow, 0, {
         row:
-          this.relationType === "hm"
+          this.relationType === 'hm'
             ? {
                 ...this.fieldList.reduce(
                   (o, f) => ({
                     ...o,
-                    [f]: presetValues[f] ?? null,
+                    [f]: presetValues[f] ?? null
                   }),
                   {}
                 ),
-                [this.relation.column_name]: this.relationIdValue,
+                [this.relation.column_name]: this.relationIdValue
               }
             : this.fieldList.reduce(
-                (o, f) => ({
-                  ...o,
-                  [f]: presetValues[f] ?? null,
-                }),
-                {}
-              ),
+              (o, f) => ({
+                ...o,
+                [f]: presetValues[f] ?? null
+              }),
+              {}
+            ),
         rowMeta: {
-          new: true,
+          new: true
         },
-        oldRow: {},
-      });
-      if (data[focusRow].row[this.groupingField] === "Uncategorized") {
-        data[focusRow].row[this.groupingField] = null;
+        oldRow: {}
+      })
+      if (data[focusRow].row[this.groupingField] === 'Uncategorized') {
+        data[focusRow].row[this.groupingField] = null
       }
       this.selected = {
         row: focusRow,
-        col: focusCol,
-      };
+        col: focusCol
+      }
       this.editEnabled = {
         row: focusRow,
-        col: focusCol,
-      };
-      this.presetValues = presetValues;
+        col: focusCol
+      }
+      this.presetValues = presetValues
 
       if (expand) {
         if (isKanban) {
-          this.expandKanbanForm(-1, data[focusRow]);
+          this.expandKanbanForm(-1, data[focusRow])
         } else {
-          const { rowMeta } = data[data.length - 1];
-          this.expandRow(data.length - 1, rowMeta);
+          const { rowMeta } = data[data.length - 1]
+          this.expandRow(data.length - 1, rowMeta)
         }
       }
     },
 
     async handleKeyDown({ metaKey, key, altKey, shiftKey, ctrlKey }) {
-      switch ([this._isMac ? metaKey : ctrlKey, key].join("_")) {
-        case "true_s":
-          this.edited && (await this.save());
-          break;
-        case "true_l":
-          await this.loadTableData();
-          break;
-        case "true_n":
-          this.insertNewRow(true);
-          break;
+      switch ([this._isMac ? metaKey : ctrlKey, key].join('_')) {
+        case 'true_s':
+          this.edited && (await this.save())
+          break
+        case 'true_l':
+          await this.loadTableData()
+          break
+        case 'true_n':
+          this.insertNewRow(true)
+          break
       }
     },
     async loadMeta() {
       // load latest table meta
-      await this.$store.dispatch("meta/ActLoadMeta", {
+      await this.$store.dispatch('meta/ActLoadMeta', {
         env: this.nodes.env,
         dbAlias: this.nodes.dbAlias,
         table_name: this.table,
-        force: true,
-      });
+        force: true
+      })
     },
     clickPagination() {
-      this.loadTableData();
-      this.$e("a:grid:pagination");
+      this.loadTableData()
+      this.$e('a:grid:pagination')
     },
     loadTableData() {
-      this.loadTableDataDeb(this);
+      this.loadTableDataDeb(this)
     },
     async loadTableDataFn() {
       if (this.isForm || !this.selectedView || !this.selectedView.title) {
-        return;
+        return
       }
-      this.loadingData = true;
+      this.loadingData = true
       try {
         // if (this.api) {
         // const { list, count } = await this.api.paginatedList(this.queryParams)
@@ -1399,41 +1410,31 @@ export default {
         //   })).data.data
 
         const { list, pageInfo } = await this.$api.dbViewRow.list(
-          "noco",
+          'noco',
           this.projectName,
           this.meta.title,
           this.selectedView.title,
-          {
-            ...this.queryParams,
-            ...(this._isUIAllowed("sortSync")
-              ? {}
-              : { sortArrJson: JSON.stringify(this.sortList) }),
-            ...(this._isUIAllowed("filterSync")
-              ? {}
-              : { filterArrJson: JSON.stringify(this.filters) }),
-            // sort: ['-FirstName'],
-            // where: '(FirstName,like,%ro)~or((FirstName,like,%a)~and(FirstName,like,%e%))'
-          }
-        );
+          this.listQueryParams
+        )
 
-        this.count = pageInfo.totalRows; // count
-        this.data = list.map((row) => ({
+        this.count = pageInfo.totalRows // count
+        this.data = list.map(row => ({
           row,
           oldRow: { ...row },
-          rowMeta: {},
-        }));
+          rowMeta: {}
+        }))
         // }
       } catch (e) {
-        console.log(e);
+        console.log(e)
       }
-      this.loadingData = false;
+      this.loadingData = false
     },
     showRowContextMenu(e, row, rowMeta, index, colIndex, col) {
       if (!this.isEditable) {
-        return;
+        return
       }
-      e.preventDefault();
-      this.rowContextMenu = false;
+      e.preventDefault()
+      this.rowContextMenu = false
       this.$nextTick(() => {
         this.rowContextMenu = {
           x: e.clientX,
@@ -1442,48 +1443,48 @@ export default {
           index,
           rowMeta,
           colIndex,
-          col,
-        };
-      });
+          col
+        }
+      })
     },
     expandRow(row, rowMeta) {
-      this.showExpandModal = true;
-      this.selectedExpandRowIndex = row;
-      this.selectedExpandRowMeta = rowMeta;
+      this.showExpandModal = true
+      this.selectedExpandRowIndex = row
+      this.selectedExpandRowMeta = rowMeta
     },
     async onNewColCreation(col, oldCol) {
       // if (this.$refs.drawer) {
       //   await this.$refs.drawer.loadViews()
       //   this.$refs.drawer.onViewIdChange(this.selectedViewId)
       // }
-      await this.loadMeta(true, col, oldCol);
-      this.$nextTick(async () => {
-        await this.loadTableData();
-      });
-      this.$refs.fields && this.$refs.fields.loadFields();
+      await this.loadMeta(true, col, oldCol)
+      this.$nextTick(async() => {
+        await this.loadTableData()
+      })
+      this.$refs.fields && this.$refs.fields.loadFields()
     },
     onColDelete() {
-      this.$refs.fields && this.$refs.fields.loadFields();
+      this.$refs.fields && this.$refs.fields.loadFields()
     },
     onFileDrop(ev) {
-      let file;
+      let file
       if (ev.dataTransfer.items) {
         // Use DataTransferItemList interface to access the file(s)
         if (
           ev.dataTransfer.items.length &&
-          ev.dataTransfer.items[0].kind === "file"
+          ev.dataTransfer.items[0].kind === 'file'
         ) {
-          file = ev.dataTransfer.items[0].getAsFile();
+          file = ev.dataTransfer.items[0].getAsFile()
         }
       } else if (ev.dataTransfer.files.length) {
-        file = ev.dataTransfer.files[0];
+        file = ev.dataTransfer.files[0]
       }
 
-      if (file && !file.name.endsWith(".csv")) {
-        return;
+      if (file && !file.name.endsWith('.csv')) {
+        return
       }
 
-      this.$refs.csvExportImport.onCsvFileSelection(file);
+      this.$refs.csvExportImport.onCsvFileSelection(file)
     },
     // Kanban
     async loadKanbanData(initKanbanProps = true) {
@@ -1498,34 +1499,34 @@ export default {
           loadingData: true,
           selectedExpandRow: null,
           selectedExpandOldRow: null,
-          selectedExpandRowMeta: null,
-        };
+          selectedExpandRowMeta: null
+        }
         if (initKanbanProps) {
-          this.kanban = kanban;
+          this.kanban = kanban
         }
 
         if (this.api) {
           const groupingColumn = this.meta.columns.find(
-            (c) => c.title === this.groupingField
-          );
+            c => c.title === this.groupingField
+          )
 
           if (!groupingColumn) {
-            return;
+            return
           }
-          const initialLimit = 10;
-          const uncategorized = "Uncategorized";
+          const initialLimit = 10
+          const uncategorized = 'Uncategorized'
 
           kanban.groupingColumnItems = groupingColumn.dtxp
-            .split(",")
+            .split(',')
             .map((c) => {
-              const trimCol = c.replace(/'/g, "");
-              kanban.recordCnt[trimCol] = 0;
-              return trimCol;
+              const trimCol = c.replace(/'/g, '')
+              kanban.recordCnt[trimCol] = 0
+              return trimCol
             })
-            .sort();
+            .sort()
 
-          kanban.groupingColumnItems.unshift(uncategorized);
-          kanban.recordCnt[uncategorized] = 0;
+          kanban.groupingColumnItems.unshift(uncategorized)
+          kanban.recordCnt[uncategorized] = 0
           for (const groupingColumnItem of kanban.groupingColumnItems) {
             {
               // enrich Kanban data
@@ -1536,30 +1537,30 @@ export default {
                   where:
                     groupingColumnItem === uncategorized
                       ? `(${this.groupingField},is,null)`
-                      : `(${this.groupingField},eq,${groupingColumnItem})`,
+                      : `(${this.groupingField},eq,${groupingColumnItem})`
                 }
-              );
+              )
               data.forEach((d) => {
                 // handle composite primary key
                 d.c_pk = this.meta.columns
-                  .filter((c) => c.pk)
-                  .map((c) => d[c.title])
-                  .join("___");
+                  .filter(c => c.pk)
+                  .map(c => d[c.title])
+                  .join('___')
                 if (!d.id) {
                   // id is required for <kanban-board/>
-                  d.id = d.c_pk;
+                  d.id = d.c_pk
                 }
                 kanban.data.push({
                   row: d,
                   oldRow: d,
-                  rowMeta: {},
-                });
-                kanban.recordCnt[groupingColumnItem] += 1;
+                  rowMeta: {}
+                })
+                kanban.recordCnt[groupingColumnItem] += 1
                 kanban.blocks.push({
                   status: groupingColumnItem,
-                  ...d,
-                });
-              });
+                  ...d
+                })
+              })
             }
             {
               // enrich recordTotalCnt
@@ -1569,34 +1570,34 @@ export default {
                   where:
                     groupingColumnItem === uncategorized
                       ? `(${this.groupingField},is,null)`
-                      : `(${this.groupingField},eq,${groupingColumnItem})`,
+                      : `(${this.groupingField},eq,${groupingColumnItem})`
                 }
-              );
-              kanban.recordTotalCnt[groupingColumnItem] = data.count;
+              )
+              kanban.recordTotalCnt[groupingColumnItem] = data.count
             }
           }
         }
-        this.kanban = kanban;
+        this.kanban = kanban
       } catch (e) {
         if (e.response && e.response.data && e.response.data.msg) {
           this.$toast
             .error(e.response.data.msg, {
-              position: "bottom-center",
+              position: 'bottom-center'
             })
-            .goAway(3000);
+            .goAway(3000)
         } else {
           this.$toast
             .error(`Error occurred : ${e.message}`, {
-              position: "bottom-center",
+              position: 'bottom-center'
             })
-            .goAway(3000);
+            .goAway(3000)
         }
       } finally {
-        this.kanban.loadingData = false;
+        this.kanban.loadingData = false
       }
     },
     async loadMoreKanbanData(groupingFieldVal) {
-      const uncategorized = "uncategorized";
+      const uncategorized = 'uncategorized'
       const { data } = await this.api.get(
         `/nc/${this.$store.state.project.projectId}/api/v1/${this.$route.query.name}`,
         {
@@ -1605,164 +1606,177 @@ export default {
             groupingFieldVal === uncategorized
               ? `(${this.groupingField},is,null)`
               : `(${this.groupingField},eq,${groupingFieldVal})`,
-          offset: this.kanban.recordCnt[groupingFieldVal],
+          offset: this.kanban.recordCnt[groupingFieldVal]
         }
-      );
+      )
       data.map((d) => {
         // handle composite primary key
         d.c_pk = this.meta.columns
-          .filter((c) => c.pk)
-          .map((c) => d[c.title])
-          .join("___");
+          .filter(c => c.pk)
+          .map(c => d[c.title])
+          .join('___')
         if (!d.id) {
           // id is required for <kanban-board/>
-          d.id = d.c_pk;
+          d.id = d.c_pk
         }
         this.kanban.data.push({
           row: d,
           oldRow: d,
-          rowMeta: {},
-        });
+          rowMeta: {}
+        })
         this.kanban.blocks.push({
           status: groupingFieldVal,
-          ...d,
-        });
-      });
-      this.kanban.recordCnt[groupingFieldVal] += data.length;
+          ...d
+        })
+      })
+      this.kanban.recordCnt[groupingFieldVal] += data.length
     },
     expandKanbanForm(rowIdx, data) {
       if (rowIdx != -1) {
         // not a new record -> find the target record
-        data = this.kanban.data.filter((o) => o.row.c_pk == rowIdx)[0];
+        data = this.kanban.data.filter(o => o.row.c_pk == rowIdx)[0]
       }
-      this.showExpandModal = true;
-      this.kanban.selectedExpandRow = data.row;
-      this.kanban.selectedExpandOldRow = data.oldRow;
-      this.kanban.selectedExpandRowMeta = data.rowMeta;
+      this.showExpandModal = true
+      this.kanban.selectedExpandRow = data.row
+      this.kanban.selectedExpandOldRow = data.oldRow
+      this.kanban.selectedExpandRowMeta = data.rowMeta
     },
     async exportCache() {
       try {
-        const data = await this.$api.utils.cacheGet();
+        const data = await this.$api.utils.cacheGet()
         if (!data) {
-          this.$toast.info("Cache is empty").goAway(3000);
-          return;
+          this.$toast.info('Cache is empty').goAway(3000)
+          return
         }
         const blob = new Blob([JSON.stringify(data)], {
-          type: "text/plain;charset=utf-8",
-        });
-        FileSaver.saveAs(blob, "cache_exported.json");
-        this.$toast.info("Exported Cache Successfully").goAway(3000);
+          type: 'text/plain;charset=utf-8'
+        })
+        FileSaver.saveAs(blob, 'cache_exported.json')
+        this.$toast.info('Exported Cache Successfully').goAway(3000)
       } catch (e) {
-        console.log(e);
-        this.$toast.error(e.message).goAway(3000);
+        console.log(e)
+        this.$toast.error(e.message).goAway(3000)
       }
     },
     async deleteCache() {
       try {
-        await this.$api.utils.cacheDelete();
-        this.$toast.info("Deleted Cache Successfully").goAway(3000);
+        await this.$api.utils.cacheDelete()
+        this.$toast.info('Deleted Cache Successfully').goAway(3000)
       } catch (e) {
-        console.log(e);
-        this.$toast.error(e.message).goAway(3000);
+        console.log(e)
+        this.$toast.error(e.message).goAway(3000)
       }
     },
     async syncCount() {
       const { count } = await this.$api.dbViewRow.count(
-        "noco",
-        this.$store.getters["project/GtrProjectName"],
+        'noco',
+        this.$store.getters['project/GtrProjectName'],
         this.meta.title,
         this.selectedView.title
-      );
-      this.count = count;
-    },
+      )
+      this.count = count
+    }
   },
   computed: {
+    listQueryParams() {
+      return {
+        ...this.queryParams,
+        ...(this._isUIAllowed('sortSync')
+          ? {}
+          : { sortArrJson: JSON.stringify(this.sortList) }),
+        ...(this._isUIAllowed('filterSync')
+          ? {}
+          : { filterArrJson: JSON.stringify(this.filters) })
+        // sort: ['-FirstName'],
+        // where: '(FirstName,like,%ro)~or((FirstName,like,%a)~and(FirstName,like,%e%))'
+      }
+    },
     isLocked() {
-      return this.lockType === "locked";
+      return this.lockType === 'locked'
     },
     lockType: {
       get() {
-        return this.selectedView && this.selectedView.lock_type;
+        return this.selectedView && this.selectedView.lock_type
       },
       set(type) {
-        this.selectedView.lock_type = type;
+        this.selectedView.lock_type = type
         this.$api.dbView.update(this.selectedViewId, {
-          lock_type: type,
-        });
-      },
+          lock_type: type
+        })
+      }
     },
     showSystemFields: {
       get() {
-        return this.selectedView && this.selectedView.show_system_fields;
+        return this.selectedView && this.selectedView.show_system_fields
       },
       set(v) {
         if (this.selectedView) {
-          this.selectedView.show_system_fields = v;
+          this.selectedView.show_system_fields = v
           this.$api.dbView
             .update(this.selectedViewId, {
-              show_system_fields: v,
+              show_system_fields: v
             })
             .then(() => {
               if (v) {
-                this.loadTableData();
+                this.loadTableData()
               }
-            });
+            })
         }
-      },
+      }
     },
     viewTypes() {
-      return ViewTypes;
+      return ViewTypes
     },
     tabsState() {
-      return this.$store.state.tabs.tabsState || {};
+      return this.$store.state.tabs.tabsState || {}
     },
     uniqueId() {
-      return `${this.tabId}_${this.selectedViewId}`;
+      return `${this.tabId}_${this.selectedViewId}`
     },
     size() {
       return (
         (this.$store.state.project.projectInfo &&
           this.$store.state.project.projectInfo.defaultLimit) ||
         25
-      );
+      )
     },
     isPkAvail() {
-      return this.meta && this.meta.columns.some((c) => c.pk);
+      return this.meta && this.meta.columns.some(c => c.pk)
     },
     isGallery() {
-      return this.selectedView && this.selectedView.type === ViewTypes.GALLERY;
+      return this.selectedView && this.selectedView.type === ViewTypes.GALLERY
     },
     isForm() {
-      return this.selectedView && this.selectedView.type === ViewTypes.FORM;
+      return this.selectedView && this.selectedView.type === ViewTypes.FORM
     },
     isKanban() {
-      return this.selectedView && this.selectedView.type === ViewTypes.KANBAN;
+      return this.selectedView && this.selectedView.type === ViewTypes.KANBAN
     },
     isGrid() {
-      return this.selectedView && this.selectedView.type === ViewTypes.GRID;
+      return this.selectedView && this.selectedView.type === ViewTypes.GRID
     },
     meta() {
-      return this.$store.state.meta.metas[this.table];
+      return this.$store.state.meta.metas[this.table]
     },
     currentApiUrl() {
       return (
         this.api &&
         `${this.api.apiUrl}?` +
           Object.entries(this.queryParams)
-            .filter((p) => p[1])
+            .filter(p => p[1])
             .map(
               ([key, val]) =>
                 `${encodeURIComponent(key)}=${encodeURIComponent(val)}`
             )
-            .join("&")
-      );
+            .join('&')
+      )
     },
     isEditable() {
-      return this._isUIAllowed("xcDatatableEditable");
+      return this._isUIAllowed('xcDatatableEditable')
     },
     sqlUi() {
       // return SqlUI.create(this.nodes.dbConnection)
-      return SqlUiFactory.create(this.nodes.dbConnection);
+      return SqlUiFactory.create(this.nodes.dbConnection)
     },
     api() {
       return (
@@ -1770,13 +1784,13 @@ export default {
         this.$ncApis.get({
           env: this.nodes.env,
           dbAlias: this.nodes.dbAlias,
-          table: this.meta.table_name,
+          table: this.meta.table_name
         })
-      );
+      )
       // return this.meta && this.meta.title ? ApiFactory.create(this.$store.getters['project/GtrProjectType'], this.meta && this.meta.title, this.meta && this.meta.columns, this, this.meta) : null
-    },
-  },
-};
+    }
+  }
+}
 </script>
 
 <style scoped>
diff --git a/packages/nocodb/src/lib/noco/meta/api/apiTokenApis.ts b/packages/nocodb/src/lib/noco/meta/api/apiTokenApis.ts
index ede14d3686..3f623295de 100644
--- a/packages/nocodb/src/lib/noco/meta/api/apiTokenApis.ts
+++ b/packages/nocodb/src/lib/noco/meta/api/apiTokenApis.ts
@@ -2,6 +2,7 @@ import { Request, Response, Router } from 'express';
 import ncMetaAclMw from '../helpers/ncMetaAclMw';
 import ApiToken from '../../../noco-models/ApiToken';
 import { Tele } from 'nc-help';
+import { metaApiMetrics } from '../helpers/apiMetrics';
 
 export async function apiTokenList(_req: Request, res: Response) {
   res.json(await ApiToken.list());
@@ -19,14 +20,17 @@ const router = Router({ mergeParams: true });
 
 router.get(
   '/api/v1/db/meta/projects/:projectId/api-tokens',
+  metaApiMetrics,
   ncMetaAclMw(apiTokenList, 'apiTokenList')
 );
 router.post(
   '/api/v1/db/meta/projects/:projectId/api-tokens',
+  metaApiMetrics,
   ncMetaAclMw(apiTokenCreate, 'apiTokenCreate')
 );
 router.delete(
   '/api/v1/db/meta/projects/:projectId/api-tokens/:token',
+  metaApiMetrics,
   ncMetaAclMw(apiTokenDelete, 'apiTokenDelete')
 );
 
diff --git a/packages/nocodb/src/lib/noco/meta/api/columnApis.ts b/packages/nocodb/src/lib/noco/meta/api/columnApis.ts
index ebd9487c13..09f79cf240 100644
--- a/packages/nocodb/src/lib/noco/meta/api/columnApis.ts
+++ b/packages/nocodb/src/lib/noco/meta/api/columnApis.ts
@@ -31,6 +31,7 @@ import { NcError } from '../helpers/catchError';
 import getColumnPropsFromUIDT from '../helpers/getColumnPropsFromUIDT';
 import mapDefaultPrimaryValue from '../helpers/mapDefaultPrimaryValue';
 import NcConnectionMgrv2 from '../../common/NcConnectionMgrv2';
+import { metaApiMetrics } from '../helpers/apiMetrics';
 
 const randomID = customAlphabet('1234567890abcdefghijklmnopqrstuvwxyz_', 10);
 
@@ -922,18 +923,22 @@ const deleteHmOrBtRelation = async (
 const router = Router({ mergeParams: true });
 router.post(
   '/api/v1/db/meta/tables/:tableId/columns/',
+  metaApiMetrics,
   ncMetaAclMw(columnAdd, 'columnAdd')
 );
 router.patch(
   '/api/v1/db/meta/columns/:columnId',
+  metaApiMetrics,
   ncMetaAclMw(columnUpdate, 'columnUpdate')
 );
 router.delete(
   '/api/v1/db/meta/columns/:columnId',
+  metaApiMetrics,
   ncMetaAclMw(columnDelete, 'columnDelete')
 );
 router.post(
   '/api/v1/db/meta/columns/:columnId/primary',
+  metaApiMetrics,
   ncMetaAclMw(columnSetAsPrimary, 'columnSetAsPrimary')
 );
 export default router;
diff --git a/packages/nocodb/src/lib/noco/meta/api/filterApis.ts b/packages/nocodb/src/lib/noco/meta/api/filterApis.ts
index 7dc9964bd7..7aa16bde8a 100644
--- a/packages/nocodb/src/lib/noco/meta/api/filterApis.ts
+++ b/packages/nocodb/src/lib/noco/meta/api/filterApis.ts
@@ -12,6 +12,7 @@ import Project from '../../../noco-models/Project';
 import Filter from '../../../noco-models/Filter';
 import ncMetaAclMw from '../helpers/ncMetaAclMw';
 import { Tele } from 'nc-help';
+import { metaApiMetrics } from '../helpers/apiMetrics';
 
 // @ts-ignore
 export async function filterGet(req: Request, res: Response, next) {
@@ -129,10 +130,12 @@ export async function hookFilterCreate(req: Request<any, any, TableReq>, res) {
 const router = Router({ mergeParams: true });
 router.get(
   '/api/v1/db/meta/views/:viewId/filters',
+  metaApiMetrics,
   ncMetaAclMw(filterList, 'filterList')
 );
 router.post(
   '/api/v1/db/meta/views/:viewId/filters',
+  metaApiMetrics,
   ncMetaAclMw(filterCreate, 'filterCreate')
 );
 
@@ -142,23 +145,28 @@ router.get(
 );
 router.post(
   '/api/v1/db/meta/hooks/:hookId/filters',
+  metaApiMetrics,
   ncMetaAclMw(hookFilterCreate, 'filterCreate')
 );
 
 router.get(
   '/api/v1/db/meta/filters/:filterId',
+  metaApiMetrics,
   ncMetaAclMw(filterGet, 'filterGet')
 );
 router.patch(
   '/api/v1/db/meta/filters/:filterId',
+  metaApiMetrics,
   ncMetaAclMw(filterUpdate, 'filterUpdate')
 );
 router.delete(
   '/api/v1/db/meta/filters/:filterId',
+  metaApiMetrics,
   ncMetaAclMw(filterDelete, 'filterDelete')
 );
 router.get(
   '/api/v1/db/meta/filters/:filterParentId/children',
+  metaApiMetrics,
   ncMetaAclMw(filterChildrenRead, 'filterChildrenRead')
 );
 export default router;
diff --git a/packages/nocodb/src/lib/noco/meta/api/formViewApis.ts b/packages/nocodb/src/lib/noco/meta/api/formViewApis.ts
index ea99e1ee2b..b14ad82c50 100644
--- a/packages/nocodb/src/lib/noco/meta/api/formViewApis.ts
+++ b/packages/nocodb/src/lib/noco/meta/api/formViewApis.ts
@@ -12,6 +12,7 @@ import View from '../../../noco-models/View';
 import FormView from '../../../noco-models/FormView';
 import ncMetaAclMw from '../helpers/ncMetaAclMw';
 import { Tele } from 'nc-help';
+import { metaApiMetrics } from '../helpers/apiMetrics';
 
 // @ts-ignore
 export async function formViewGet(req: Request, res: Response<FormType>) {
@@ -41,18 +42,22 @@ export async function formViewDelete(req: Request, res: Response, next) {}
 const router = Router({ mergeParams: true });
 router.post(
   '/api/v1/db/meta/tables/:tableId/forms',
+  metaApiMetrics,
   ncMetaAclMw(formViewCreate, 'formViewCreate')
 );
 router.get(
   '/api/v1/db/meta/forms/:formViewId',
+  metaApiMetrics,
   ncMetaAclMw(formViewGet, 'formViewGet')
 );
 router.patch(
   '/api/v1/db/meta/forms/:formViewId',
+  metaApiMetrics,
   ncMetaAclMw(formViewUpdate, 'formViewUpdate')
 );
 router.delete(
   '/api/v1/db/meta/forms/:formViewId',
+  metaApiMetrics,
   ncMetaAclMw(formViewDelete, 'formViewDelete')
 );
 export default router;
diff --git a/packages/nocodb/src/lib/noco/meta/api/formViewColumnApis.ts b/packages/nocodb/src/lib/noco/meta/api/formViewColumnApis.ts
index 85fc44d8a3..adb8370c5f 100644
--- a/packages/nocodb/src/lib/noco/meta/api/formViewColumnApis.ts
+++ b/packages/nocodb/src/lib/noco/meta/api/formViewColumnApis.ts
@@ -2,6 +2,7 @@ import { Request, Response, Router } from 'express';
 import FormViewColumn from '../../../noco-models/FormViewColumn';
 import ncMetaAclMw from '../helpers/ncMetaAclMw';
 import { Tele } from 'nc-help';
+import { metaApiMetrics } from '../helpers/apiMetrics';
 
 export async function columnUpdate(req: Request, res: Response) {
   Tele.emit('evt', { evt_type: 'formViewColumn:updated' });
@@ -11,6 +12,7 @@ export async function columnUpdate(req: Request, res: Response) {
 const router = Router({ mergeParams: true });
 router.patch(
   '/api/v1/db/meta/form-columns/:formViewColumnId',
+  metaApiMetrics,
   ncMetaAclMw(columnUpdate, 'columnUpdate')
 );
 export default router;
diff --git a/packages/nocodb/src/lib/noco/meta/api/galleryViewApis.ts b/packages/nocodb/src/lib/noco/meta/api/galleryViewApis.ts
index de5912c315..92fe2cc413 100644
--- a/packages/nocodb/src/lib/noco/meta/api/galleryViewApis.ts
+++ b/packages/nocodb/src/lib/noco/meta/api/galleryViewApis.ts
@@ -4,6 +4,7 @@ import View from '../../../noco-models/View';
 import GalleryView from '../../../noco-models/GalleryView';
 import ncMetaAclMw from '../helpers/ncMetaAclMw';
 import { Tele } from 'nc-help';
+import { metaApiMetrics } from '../helpers/apiMetrics';
 export async function galleryViewGet(req: Request, res: Response<GalleryType>) {
   res.json(await GalleryView.get(req.params.galleryViewId));
 }
@@ -27,14 +28,17 @@ export async function galleryViewUpdate(req, res) {
 const router = Router({ mergeParams: true });
 router.post(
   '/api/v1/db/meta/tables/:tableId/galleries',
+  metaApiMetrics,
   ncMetaAclMw(galleryViewCreate, 'galleryViewCreate')
 );
 router.patch(
   '/api/v1/db/meta/galleries/:galleryViewId',
+  metaApiMetrics,
   ncMetaAclMw(galleryViewUpdate, 'galleryViewUpdate')
 );
 router.get(
   '/api/v1/db/meta/galleries/:galleryViewId',
+  metaApiMetrics,
   ncMetaAclMw(galleryViewGet, 'galleryViewGet')
 );
 export default router;
diff --git a/packages/nocodb/src/lib/noco/meta/api/gridViewApis.ts b/packages/nocodb/src/lib/noco/meta/api/gridViewApis.ts
index 23890a928f..d5dc62cf02 100644
--- a/packages/nocodb/src/lib/noco/meta/api/gridViewApis.ts
+++ b/packages/nocodb/src/lib/noco/meta/api/gridViewApis.ts
@@ -11,6 +11,7 @@ import Project from '../../../noco-models/Project';
 import View from '../../../noco-models/View';
 import ncMetaAclMw from '../helpers/ncMetaAclMw';
 import { Tele } from 'nc-help';
+import { metaApiMetrics } from '../helpers/apiMetrics';
 
 // @ts-ignore
 export async function gridViewCreate(req: Request<any, any>, res) {
@@ -27,6 +28,7 @@ export async function gridViewCreate(req: Request<any, any>, res) {
 const router = Router({ mergeParams: true });
 router.post(
   '/api/v1/db/meta/tables/:tableId/grids/',
+  metaApiMetrics,
   ncMetaAclMw(gridViewCreate, 'gridViewCreate')
 );
 export default router;
diff --git a/packages/nocodb/src/lib/noco/meta/api/gridViewColumnApis.ts b/packages/nocodb/src/lib/noco/meta/api/gridViewColumnApis.ts
index f845c09b57..3c02ac9b57 100644
--- a/packages/nocodb/src/lib/noco/meta/api/gridViewColumnApis.ts
+++ b/packages/nocodb/src/lib/noco/meta/api/gridViewColumnApis.ts
@@ -2,6 +2,7 @@ import { Request, Response, Router } from 'express';
 import GridViewColumn from '../../../noco-models/GridViewColumn';
 import ncMetaAclMw from '../helpers/ncMetaAclMw';
 import { Tele } from 'nc-help';
+import { metaApiMetrics } from '../helpers/apiMetrics';
 
 export async function columnList(req: Request, res: Response) {
   res.json(await GridViewColumn.list(req.params.gridViewId));
@@ -15,10 +16,12 @@ export async function gridColumnUpdate(req: Request, res: Response) {
 const router = Router({ mergeParams: true });
 router.get(
   '/api/v1/db/meta/grids/:gridViewId/grid-columns',
+  metaApiMetrics,
   ncMetaAclMw(columnList, 'columnList')
 );
 router.patch(
   '/api/v1/db/meta/grid-columns/:gridViewColumnId',
+  metaApiMetrics,
   ncMetaAclMw(gridColumnUpdate, 'gridColumnUpdate')
 );
 export default router;
diff --git a/packages/nocodb/src/lib/noco/meta/api/hookApis.ts b/packages/nocodb/src/lib/noco/meta/api/hookApis.ts
index e67dddcaef..32d62dcd98 100644
--- a/packages/nocodb/src/lib/noco/meta/api/hookApis.ts
+++ b/packages/nocodb/src/lib/noco/meta/api/hookApis.ts
@@ -8,6 +8,7 @@ import Model from '../../../noco-models/Model';
 import populateSamplePayload from '../helpers/populateSamplePayload';
 import ncMetaAclMw from '../helpers/ncMetaAclMw';
 import { Tele } from 'nc-help';
+import { metaApiMetrics } from '../helpers/apiMetrics';
 
 export async function hookList(
   req: Request<any, any, any>,
@@ -77,26 +78,32 @@ export async function tableSampleData(req: Request, res: Response) {
 const router = Router({ mergeParams: true });
 router.get(
   '/api/v1/db/meta/tables/:tableId/hooks',
+  metaApiMetrics,
   ncMetaAclMw(hookList, 'hookList')
 );
 router.post(
   '/api/v1/db/meta/tables/:tableId/hooks/test',
+  metaApiMetrics,
   ncMetaAclMw(hookTest, 'hookTest')
 );
 router.post(
   '/api/v1/db/meta/tables/:tableId/hooks',
+  metaApiMetrics,
   ncMetaAclMw(hookCreate, 'hookCreate')
 );
 router.delete(
   '/api/v1/db/meta/hooks/:hookId',
+  metaApiMetrics,
   ncMetaAclMw(hookDelete, 'hookDelete')
 );
 router.patch(
   '/api/v1/db/meta/hooks/:hookId',
+  metaApiMetrics,
   ncMetaAclMw(hookUpdate, 'hookUpdate')
 );
 router.get(
   '/api/v1/db/meta/tables/:tableId/hooks/samplePayload/:operation',
+  metaApiMetrics,
   catchError(tableSampleData)
 );
 export default router;
diff --git a/packages/nocodb/src/lib/noco/meta/api/hookFilterApis.ts b/packages/nocodb/src/lib/noco/meta/api/hookFilterApis.ts
index c3bab363f0..621a64dc65 100644
--- a/packages/nocodb/src/lib/noco/meta/api/hookFilterApis.ts
+++ b/packages/nocodb/src/lib/noco/meta/api/hookFilterApis.ts
@@ -12,6 +12,7 @@ import Project from '../../../noco-models/Project';
 import Filter from '../../../noco-models/Filter';
 import ncMetaAclMw from '../helpers/ncMetaAclMw';
 import { Tele } from 'nc-help';
+import { metaApiMetrics } from '../helpers/apiMetrics';
 
 // @ts-ignore
 export async function filterGet(req: Request, res: Response, next) {
@@ -108,25 +109,34 @@ export async function filterDelete(req: Request, res: Response, next) {
 }
 
 const router = Router({ mergeParams: true });
-router.get('/hooks/:hookId/filters/', ncMetaAclMw(filterList, 'filterList'));
+router.get(
+  '/hooks/:hookId/filters/',
+  metaApiMetrics,
+  ncMetaAclMw(filterList, 'filterList')
+);
 router.post(
   '/hooks/:hookId/filters/',
+  metaApiMetrics,
   ncMetaAclMw(filterCreate, 'filterCreate')
 );
 router.get(
   '/hooks/:hookId/filters/:filterId',
+  metaApiMetrics,
   ncMetaAclMw(filterGet, 'filterGet')
 );
 router.patch(
   '/hooks/:hookId/filters/:filterId',
+  metaApiMetrics,
   ncMetaAclMw(filterUpdate, 'filterUpdate')
 );
 router.delete(
   '/hooks/:hookId/filters/:filterId',
+  metaApiMetrics,
   ncMetaAclMw(filterDelete, 'filterDelete')
 );
 router.get(
   '/hooks/:hookId/filters/:filterParentId/children',
+  metaApiMetrics,
   ncMetaAclMw(filterChildrenRead, 'filterChildrenRead')
 );
 export default router;
diff --git a/packages/nocodb/src/lib/noco/meta/api/metaDiffApis.ts b/packages/nocodb/src/lib/noco/meta/api/metaDiffApis.ts
index d1b03a5f87..659fc00392 100644
--- a/packages/nocodb/src/lib/noco/meta/api/metaDiffApis.ts
+++ b/packages/nocodb/src/lib/noco/meta/api/metaDiffApis.ts
@@ -16,6 +16,7 @@ import getTableNameAlias, { getColumnNameAlias } from '../helpers/getTableName';
 import mapDefaultPrimaryValue from '../helpers/mapDefaultPrimaryValue';
 import { Tele } from 'nc-help';
 import getColumnUiType from '../helpers/getColumnUiType';
+import { metaApiMetrics } from '../helpers/apiMetrics';
 
 export enum MetaDiffType {
   TABLE_NEW = 'TABLE_NEW',
@@ -849,10 +850,12 @@ export async function extractAndGenerateManyToManyRelations(
 const router = Router();
 router.get(
   '/api/v1/db/meta/projects/:projectId/meta-diff',
+  metaApiMetrics,
   ncMetaAclMw(metaDiff, 'metaDiff')
 );
 router.post(
   '/api/v1/db/meta/projects/:projectId/meta-diff',
+  metaApiMetrics,
   ncMetaAclMw(metaDiffSync, 'metaDiffSync')
 );
 export default router;
diff --git a/packages/nocodb/src/lib/noco/meta/api/modelVisibilityApis.ts b/packages/nocodb/src/lib/noco/meta/api/modelVisibilityApis.ts
index cb7093b3e4..a5aab04377 100644
--- a/packages/nocodb/src/lib/noco/meta/api/modelVisibilityApis.ts
+++ b/packages/nocodb/src/lib/noco/meta/api/modelVisibilityApis.ts
@@ -4,6 +4,7 @@ import { Router } from 'express';
 import ncMetaAclMw from '../helpers/ncMetaAclMw';
 import { Tele } from 'nc-help';
 import Project from '../../../noco-models/Project';
+import { metaApiMetrics } from '../helpers/apiMetrics';
 async function xcVisibilityMetaSetAll(req, res) {
   Tele.emit('evt', { evt_type: 'uiAcl:updated' });
   for (const d of req.body) {
@@ -108,6 +109,7 @@ export async function xcVisibilityMetaGet(
 const router = Router({ mergeParams: true });
 router.get(
   '/api/v1/db/meta/projects/:projectId/visibility-rules',
+  metaApiMetrics,
   ncMetaAclMw(async (req, res) => {
     res.json(
       await xcVisibilityMetaGet(
@@ -120,6 +122,7 @@ router.get(
 );
 router.post(
   '/api/v1/db/meta/projects/:projectId/visibility-rules',
+  metaApiMetrics,
   ncMetaAclMw(xcVisibilityMetaSetAll, 'modelVisibilitySet')
 );
 export default router;
diff --git a/packages/nocodb/src/lib/noco/meta/api/pluginApis.ts b/packages/nocodb/src/lib/noco/meta/api/pluginApis.ts
index aff183d8b5..e37c0fb40b 100644
--- a/packages/nocodb/src/lib/noco/meta/api/pluginApis.ts
+++ b/packages/nocodb/src/lib/noco/meta/api/pluginApis.ts
@@ -5,6 +5,7 @@ import { PluginType } from 'nocodb-sdk';
 import NcPluginMgrv2 from '../helpers/NcPluginMgrv2';
 import ncMetaAclMw from '../helpers/ncMetaAclMw';
 import { Tele } from 'nc-help';
+import { metaApiMetrics } from '../helpers/apiMetrics';
 
 export async function pluginList(_req: Request, res: Response) {
   res.json(new PagedResponseImpl(await Plugin.list()));
@@ -34,21 +35,29 @@ export async function isPluginActive(req: Request, res: Response) {
 }
 
 const router = Router({ mergeParams: true });
-router.get('/api/v1/db/meta/plugins', ncMetaAclMw(pluginList, 'pluginList'));
+router.get(
+  '/api/v1/db/meta/plugins',
+  metaApiMetrics,
+  ncMetaAclMw(pluginList, 'pluginList')
+);
 router.post(
   '/api/v1/db/meta/plugins/test',
+  metaApiMetrics,
   ncMetaAclMw(pluginTest, 'pluginTest')
 );
 router.get(
   '/api/v1/db/meta/plugins/:pluginId',
+  metaApiMetrics,
   ncMetaAclMw(pluginRead, 'pluginRead')
 );
 router.patch(
   '/api/v1/db/meta/plugins/:pluginId',
+  metaApiMetrics,
   ncMetaAclMw(pluginUpdate, 'pluginUpdate')
 );
 router.get(
   '/api/v1/db/meta/plugins/:pluginTitle/status',
+  metaApiMetrics,
   ncMetaAclMw(isPluginActive, 'isPluginActive')
 );
 export default router;
diff --git a/packages/nocodb/src/lib/noco/meta/api/projectApis.ts b/packages/nocodb/src/lib/noco/meta/api/projectApis.ts
index 67bab8f3f6..33e48d693c 100644
--- a/packages/nocodb/src/lib/noco/meta/api/projectApis.ts
+++ b/packages/nocodb/src/lib/noco/meta/api/projectApis.ts
@@ -22,6 +22,7 @@ import { NcError } from '../helpers/catchError';
 import getColumnUiType from '../helpers/getColumnUiType';
 import mapDefaultPrimaryValue from '../helpers/mapDefaultPrimaryValue';
 import { extractAndGenerateManyToManyRelations } from './metaDiffApis';
+import { metaApiMetrics } from '../helpers/apiMetrics';
 
 const nanoid = customAlphabet('1234567890abcdefghijklmnopqrstuvwxyz_', 4);
 
@@ -392,22 +393,27 @@ export async function projectInfoGet(req, res) {
 export default router => {
   router.get(
     '/api/v1/db/meta/projects/:projectId/info',
+    metaApiMetrics,
     ncMetaAclMw(projectInfoGet, 'projectInfoGet')
   );
   router.get(
     '/api/v1/db/meta/projects/:projectId',
+    metaApiMetrics,
     ncMetaAclMw(projectGet, 'projectGet')
   );
   router.delete(
     '/api/v1/db/meta/projects/:projectId',
+    metaApiMetrics,
     ncMetaAclMw(projectDelete, 'projectDelete')
   );
   router.post(
     '/api/v1/db/meta/projects',
+    metaApiMetrics,
     ncMetaAclMw(projectCreate, 'projectCreate')
   );
   router.get(
     '/api/v1/db/meta/projects',
+    metaApiMetrics,
     ncMetaAclMw(projectList, 'projectList')
   );
 };
diff --git a/packages/nocodb/src/lib/noco/meta/api/projectUserApis.ts b/packages/nocodb/src/lib/noco/meta/api/projectUserApis.ts
index 6e4423f08d..3075e70f73 100644
--- a/packages/nocodb/src/lib/noco/meta/api/projectUserApis.ts
+++ b/packages/nocodb/src/lib/noco/meta/api/projectUserApis.ts
@@ -14,6 +14,7 @@ import * as ejs from 'ejs';
 import NcPluginMgrv2 from '../helpers/NcPluginMgrv2';
 import Noco from '../../Noco';
 import { PluginCategory } from 'nocodb-sdk';
+import { metaApiMetrics } from '../helpers/apiMetrics';
 
 async function userList(req, res) {
   res.json({
@@ -297,22 +298,27 @@ async function sendInviteEmail(
 const router = Router({ mergeParams: true });
 router.get(
   '/api/v1/db/meta/projects/:projectId/users',
+  metaApiMetrics,
   ncMetaAclMw(userList, 'userList')
 );
 router.post(
   '/api/v1/db/meta/projects/:projectId/users',
+  metaApiMetrics,
   ncMetaAclMw(userInvite, 'userInvite')
 );
 router.patch(
   '/api/v1/db/meta/projects/:projectId/users/:userId',
+  metaApiMetrics,
   ncMetaAclMw(projectUserUpdate, 'projectUserUpdate')
 );
 router.delete(
   '/api/v1/db/meta/projects/:projectId/users/:userId',
+  metaApiMetrics,
   ncMetaAclMw(projectUserDelete, 'projectUserDelete')
 );
 router.post(
   '/api/v1/db/meta/projects/:projectId/users/:userId/resend-invite',
+  metaApiMetrics,
   ncMetaAclMw(projectUserInviteResend, 'projectUserInviteResend')
 );
 export default router;
diff --git a/packages/nocodb/src/lib/noco/meta/api/sortApis.ts b/packages/nocodb/src/lib/noco/meta/api/sortApis.ts
index 26c2076c62..e0d6083044 100644
--- a/packages/nocodb/src/lib/noco/meta/api/sortApis.ts
+++ b/packages/nocodb/src/lib/noco/meta/api/sortApis.ts
@@ -11,6 +11,7 @@ import Project from '../../../noco-models/Project';
 import Sort from '../../../noco-models/Sort';
 import ncMetaAclMw from '../helpers/ncMetaAclMw';
 import { Tele } from 'nc-help';
+import { metaApiMetrics } from '../helpers/apiMetrics';
 
 // @ts-ignore
 export async function sortGet(req: Request, res: Response<TableType>) {}
@@ -51,19 +52,27 @@ export async function sortDelete(req: Request, res: Response) {
 const router = Router({ mergeParams: true });
 router.get(
   '/api/v1/db/meta/views/:viewId/sorts/',
+  metaApiMetrics,
   ncMetaAclMw(sortList, 'sortList')
 );
 router.post(
   '/api/v1/db/meta/views/:viewId/sorts/',
+  metaApiMetrics,
   ncMetaAclMw(sortCreate, 'sortCreate')
 );
-router.get('/api/v1/db/meta/sorts/:sortId', ncMetaAclMw(sortGet, 'sortGet'));
+router.get(
+  '/api/v1/db/meta/sorts/:sortId',
+  metaApiMetrics,
+  ncMetaAclMw(sortGet, 'sortGet')
+);
 router.patch(
   '/api/v1/db/meta/sorts/:sortId',
+  metaApiMetrics,
   ncMetaAclMw(sortUpdate, 'sortUpdate')
 );
 router.delete(
   '/api/v1/db/meta/sorts/:sortId',
+  metaApiMetrics,
   ncMetaAclMw(sortDelete, 'sortDelete')
 );
 export default router;
diff --git a/packages/nocodb/src/lib/noco/meta/api/tableApis.ts b/packages/nocodb/src/lib/noco/meta/api/tableApis.ts
index 9f8a6a5a04..b4e15aaa01 100644
--- a/packages/nocodb/src/lib/noco/meta/api/tableApis.ts
+++ b/packages/nocodb/src/lib/noco/meta/api/tableApis.ts
@@ -26,6 +26,7 @@ import Column from '../../../noco-models/Column';
 import NcConnectionMgrv2 from '../../common/NcConnectionMgrv2';
 import getColumnUiType from '../helpers/getColumnUiType';
 import LinkToAnotherRecordColumn from '../../../noco-models/LinkToAnotherRecordColumn';
+import { metaApiMetrics } from '../helpers/apiMetrics';
 export async function tableGet(req: Request, res: Response<TableType>) {
   const table = await Model.getWithInfo({
     id: req.params.tableId
@@ -264,26 +265,32 @@ export async function tableDelete(req: Request, res: Response) {
 const router = Router({ mergeParams: true });
 router.get(
   '/api/v1/db/meta/projects/:projectId/tables',
+  metaApiMetrics,
   ncMetaAclMw(tableList, 'tableList')
 );
 router.post(
   '/api/v1/db/meta/projects/:projectId/tables',
+  metaApiMetrics,
   ncMetaAclMw(tableCreate, 'tableCreate')
 );
 router.get(
   '/api/v1/db/meta/tables/:tableId',
+  metaApiMetrics,
   ncMetaAclMw(tableGet, 'tableGet')
 );
 router.patch(
   '/api/v1/db/meta/tables/:tableId',
+  metaApiMetrics,
   ncMetaAclMw(tableUpdate, 'tableUpdate')
 );
 router.delete(
   '/api/v1/db/meta/tables/:tableId',
+  metaApiMetrics,
   ncMetaAclMw(tableDelete, 'tableDelete')
 );
 router.post(
   '/api/v1/db/meta/tables/:tableId/reorder',
+  metaApiMetrics,
   ncMetaAclMw(tableReorder, 'tableReorder')
 );
 export default router;
diff --git a/packages/nocodb/src/lib/noco/meta/api/viewApis.ts b/packages/nocodb/src/lib/noco/meta/api/viewApis.ts
index 42107db222..7dd3b3f61a 100644
--- a/packages/nocodb/src/lib/noco/meta/api/viewApis.ts
+++ b/packages/nocodb/src/lib/noco/meta/api/viewApis.ts
@@ -13,6 +13,7 @@ import View from '../../../noco-models/View';
 import ncMetaAclMw from '../helpers/ncMetaAclMw';
 import { xcVisibilityMetaGet } from './modelVisibilityApis';
 import { Tele } from 'nc-help';
+import { metaApiMetrics } from '../helpers/apiMetrics';
 // @ts-ignore
 export async function viewGet(req: Request, res: Response<Table>) {}
 
@@ -103,27 +104,33 @@ async function shareViewList(req: Request<any, any>, res) {
 const router = Router({ mergeParams: true });
 router.get(
   '/api/v1/db/meta/tables/:tableId/views',
+  metaApiMetrics,
   ncMetaAclMw(viewList, 'viewList')
 );
 router.patch(
   '/api/v1/db/meta/views/:viewId',
+  metaApiMetrics,
   ncMetaAclMw(viewUpdate, 'viewUpdate')
 );
 router.delete(
   '/api/v1/db/meta/views/:viewId',
+  metaApiMetrics,
   ncMetaAclMw(viewDelete, 'viewDelete')
 );
 router.post(
   '/api/v1/db/meta/views/:viewId/show-all',
+  metaApiMetrics,
   ncMetaAclMw(showAllColumns, 'showAllColumns')
 );
 router.post(
   '/api/v1/db/meta/views/:viewId/hide-all',
+  metaApiMetrics,
   ncMetaAclMw(hideAllColumns, 'hideAllColumns')
 );
 
 router.get(
   '/api/v1/db/meta/tables/:tableId/share',
+  metaApiMetrics,
   ncMetaAclMw(shareViewList, 'shareViewList')
 );
 router.post(
@@ -132,10 +139,12 @@ router.post(
 );
 router.patch(
   '/api/v1/db/meta/views/:viewId/share',
+  metaApiMetrics,
   ncMetaAclMw(shareViewPasswordUpdate, 'shareViewPasswordUpdate')
 );
 router.delete(
   '/api/v1/db/meta/views/:viewId/share',
+  metaApiMetrics,
   ncMetaAclMw(shareViewDelete, 'shareViewDelete')
 );
 
diff --git a/packages/nocodb/src/lib/noco/meta/api/viewColumnApis.ts b/packages/nocodb/src/lib/noco/meta/api/viewColumnApis.ts
index 2a3588308c..2ac50cacfb 100644
--- a/packages/nocodb/src/lib/noco/meta/api/viewColumnApis.ts
+++ b/packages/nocodb/src/lib/noco/meta/api/viewColumnApis.ts
@@ -2,6 +2,7 @@ import { Request, Response, Router } from 'express';
 import View from '../../../noco-models/View';
 import ncMetaAclMw from '../helpers/ncMetaAclMw';
 import { Tele } from 'nc-help';
+import { metaApiMetrics } from '../helpers/apiMetrics';
 
 export async function columnList(req: Request, res: Response) {
   res.json(await View.getColumns(req.params.viewId));
@@ -33,14 +34,17 @@ export async function columnUpdate(req: Request, res: Response) {
 const router = Router({ mergeParams: true });
 router.get(
   '/api/v1/db/meta/views/:viewId/columns/',
+  metaApiMetrics,
   ncMetaAclMw(columnList, 'columnList')
 );
 router.post(
   '/api/v1/db/meta/views/:viewId/columns/',
+  metaApiMetrics,
   ncMetaAclMw(columnAdd, 'columnAdd')
 );
 router.patch(
   '/api/v1/db/meta/views/:viewId/columns/:columnId',
+  metaApiMetrics,
   ncMetaAclMw(columnUpdate, 'viewColumnUpdate')
 );
 export default router;
diff --git a/packages/nocodb/src/lib/noco/meta/helpers/apiMetrics.ts b/packages/nocodb/src/lib/noco/meta/helpers/apiMetrics.ts
index b56ec14eae..82bae677ab 100644
--- a/packages/nocodb/src/lib/noco/meta/helpers/apiMetrics.ts
+++ b/packages/nocodb/src/lib/noco/meta/helpers/apiMetrics.ts
@@ -3,17 +3,23 @@ import { Tele } from 'nc-help';
 
 const countMap = {};
 
-const metrics = async (req: Request) => {
+const metrics = async (req: Request, c = 50) => {
   if (!req?.route?.path) return;
   const event = `a:api:${req.route.path}:${req.method}`;
   countMap[event] = (countMap[event] || 0) + 1;
-  if (countMap[event] >= 50) {
+  if (countMap[event] >= c) {
     Tele.event({ event });
     countMap[event] = 0;
   }
 };
 
-export default async (req: Request, _res, next) => {
+const metaApiMetrics = (req: Request, _res, next) => {
+  metrics(req, 10).then(() => {});
+  next();
+};
+export default (req: Request, _res, next) => {
   metrics(req).then(() => {});
   next();
 };
+
+export { metaApiMetrics };