truncate long fields in search results table, fixes #211

cars10 · Nov 21, 2024 · 43470d4 · 43470d4
1 parent f7e97d4
commit 43470d4
Show file tree

Hide file tree

Showing 12 changed files with 140 additions and 137 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.1.1
+
+* truncate long fields in search results table, fixes [#211](https://github.com/cars10/elasticvue/issues/211)
+
 ## 1.1.0
 
 * update to tauri `2.0`, fixes [#228](https://github.com/cars10/elasticvue/issues/228)

diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
     "dev": "vite",
     "build": "vite build",
     "tsc": "tsc --noEmit && vue-tsc",
-    "lint": "eslint src",
+    "lint": "eslint src tests",
     "test:unit": "vitest run tests/unit",
     "test:unit:watch": "vitest watch tests/unit",
     "test:e2e": "playwright test --project=chromium",

diff --git a/src-tauri/gen/schemas/macOS-schema.json b/src-tauri/gen/schemas/macOS-schema.json
@@ -37,7 +37,7 @@
   ],
   "definitions": {
     "Capability": {
-      "description": "A grouping and boundary mechanism developers can use to isolate access to the IPC layer.\n\nIt controls application windows fine grained access to the Tauri core, application, or plugin commands. If a window is not matching any capability then it has no access to the IPC layer at all.\n\nThis can be done to create groups of windows, based on their required system access, which can reduce impact of frontend vulnerabilities in less privileged windows. Windows can be added to a capability by exact name (e.g. `main-window`) or glob patterns like `*` or `admin-*`. A Window can have none, one, or multiple associated capabilities.\n\n## Example\n\n```json { \"identifier\": \"main-user-files-write\", \"description\": \"This capability allows the `main` window on macOS and Windows access to `filesystem` write related commands and `dialog` commands to enable programatic access to files selected by the user.\", \"windows\": [ \"main\" ], \"permissions\": [ \"core:default\", \"dialog:open\", { \"identifier\": \"fs:allow-write-text-file\", \"allow\": [{ \"path\": \"$HOME/test.txt\" }] }, \"platforms\": [\"macOS\",\"windows\"] } ```",
+      "description": "A grouping and boundary mechanism developers can use to isolate access to the IPC layer.\n\nIt controls application windows fine grained access to the Tauri core, application, or plugin commands. If a window is not matching any capability then it has no access to the IPC layer at all.\n\nThis can be done to create groups of windows, based on their required system access, which can reduce impact of frontend vulnerabilities in less privileged windows. Windows can be added to a capability by exact name (e.g. `main-window`) or glob patterns like `*` or `admin-*`. A Window can have none, one, or multiple associated capabilities.\n\n## Example\n\n```json { \"identifier\": \"main-user-files-write\", \"description\": \"This capability allows the `main` window on macOS and Windows access to `filesystem` write related commands and `dialog` commands to enable programatic access to files selected by the user.\", \"windows\": [ \"main\" ], \"permissions\": [ \"core:default\", \"dialog:open\", { \"identifier\": \"fs:allow-write-text-file\", \"allow\": [{ \"path\": \"$HOME/test.txt\" }] }, ], \"platforms\": [\"macOS\",\"windows\"] } ```",
       "type": "object",
       "required": [
         "identifier",
@@ -84,7 +84,7 @@
           }
         },
         "permissions": {
-          "description": "List of permissions attached to this capability.\n\nMust include the plugin name as prefix in the form of `${plugin-name}:${permission-name}`. For commands directly implemented in the application itself only `${permission-name}` is required.\n\n## Example\n\n```json [ \"core:default\", \"shell:allow-open\", \"dialog:open\", { \"identifier\": \"fs:allow-write-text-file\", \"allow\": [{ \"path\": \"$HOME/test.txt\" }] } ```",
+          "description": "List of permissions attached to this capability.\n\nMust include the plugin name as prefix in the form of `${plugin-name}:${permission-name}`. For commands directly implemented in the application itself only `${permission-name}` is required.\n\n## Example\n\n```json [ \"core:default\", \"shell:allow-open\", \"dialog:open\", { \"identifier\": \"fs:allow-write-text-file\", \"allow\": [{ \"path\": \"$HOME/test.txt\" }] } ] ```",
           "type": "array",
           "items": {
             "$ref": "#/definitions/PermissionEntry"

diff --git a/src/components/settings/GlobalSettings.vue b/src/components/settings/GlobalSettings.vue
@@ -44,6 +44,24 @@
             </div>
           </div>
 
+          <div class="row q-mb-lg">
+            <div class="col-md-6 col-sm-12">
+              <q-input v-model="searchStore.documentFieldMaxLength"
+                       outlined
+                       type="number"
+                       :rules="[ val => /^\d+$/.test(val) && val >= 1 && val <= 1000 || 'Only full numbers between 1 and 1000']"
+                       :label="t('settings.document_field_max_length.label')"
+                       :hint="t('settings.document_field_max_length.message')">
+                <template #append>
+                  <q-btn icon="settings_backup_restore"
+                         flat round
+                         :title="t('settings.document_field_max_length.reset', {value: DEFAULT_DOCUMENT_FIELD_MAX_LENGTH})"
+                         @click="resetDocumentFieldMaxLength" />
+                </template>
+              </q-input>
+            </div>
+          </div>
+
           <div class="row q-mb-lg">
             <div class="col-md-6 col-sm-12">
               <q-checkbox v-model="searchStore.localizeTimestamp" :label="t('settings.localize_timestamp.label')" />
@@ -82,7 +100,7 @@
 
 <script setup lang="ts">
   import { useIndicesStore } from '../../store/indices'
-  import { DEFAULT_HIDE_INDICES_REGEX, DEFAULT_HIDE_NODE_ATTRIBUTES_REGEX } from '../../consts'
+  import { DEFAULT_HIDE_INDICES_REGEX, DEFAULT_HIDE_NODE_ATTRIBUTES_REGEX, DEFAULT_DOCUMENT_FIELD_MAX_LENGTH } from '../../consts'
   import { askConfirm } from '../../helpers/dialogs'
   import { useTranslation } from '../../composables/i18n'
   import ImportExport from './ImportExport.vue'
@@ -98,6 +116,7 @@
 
   const resetHideIndicesRegex = () => (indicesStore.hideIndicesRegex = DEFAULT_HIDE_INDICES_REGEX)
   const resetHideNodesAttributesRegex = () => (nodesStore.hideAttributesRegex = DEFAULT_HIDE_NODE_ATTRIBUTES_REGEX)
+  const resetDocumentFieldMaxLength = () => (searchStore.documentFieldMaxLength = DEFAULT_DOCUMENT_FIELD_MAX_LENGTH)
 
   const reset = async () => {
     const confirmed = await askConfirm(t('settings.disconnect_and_reset.confirm'))

diff --git a/src/composables/components/search/SearchResult.ts b/src/composables/components/search/SearchResult.ts
@@ -3,6 +3,8 @@ import { useSearchStore } from '../../../store/search.ts'
 import { computed, ref } from 'vue'
 import { defineElasticsearchRequest } from '../../CallElasticsearch.ts'
 import { stringifyJson } from '../../../helpers/json/stringify.ts'
+import { truncateString } from '../../../helpers/truncate.ts'
+import { DEFAULT_DOCUMENT_FIELD_MAX_LENGTH } from '../../../consts.ts'
 
 export type SearchResultProps = { columns: any[], doc: Record<string, any> }
 
@@ -39,7 +41,9 @@ export const useSearchResult = (props: SearchResultProps, emit: any) => {
     }
 
     if (typeof value === 'object') {
-      return stringifyJson(value)
+      return truncateString(stringifyJson(value), searchStore.documentFieldMaxLength || DEFAULT_DOCUMENT_FIELD_MAX_LENGTH)
+    } else if (typeof value === 'string') {
+      return truncateString(value, searchStore.documentFieldMaxLength || DEFAULT_DOCUMENT_FIELD_MAX_LENGTH)
     } else {
       return value
     }

diff --git a/src/consts.ts b/src/consts.ts
@@ -14,6 +14,7 @@ export const SUPPORTED_COUNTRY_LOCALES: Record<string, ValidLocale> = {
 export type ValidLocale = 'en' | 'cn' | 'fr'
 export const DEFAULT_LOCALE: ValidLocale = 'en'
 
+export const DEFAULT_DOCUMENT_FIELD_MAX_LENGTH = 200
 export const DEFAULT_ROWS_PER_PAGE = [10, 20, 100, 0]
 export const DEFAULT_HIDE_INDICES_REGEX = '^\\..*'
 export const DEFAULT_HIDE_NODE_ATTRIBUTES_REGEX = '^(ml|xpack|transform)\\.'

diff --git a/src/helpers/truncate.ts b/src/helpers/truncate.ts
@@ -0,0 +1,5 @@
+export const truncateString = (input: string, maxLength: number, suffix = '...') => {
+    if (typeof input !== 'string' || input.length <= maxLength) return input
+
+    return input.slice(0, maxLength - suffix.length) + suffix
+}
diff --git a/src/locales/cn.json b/src/locales/cn.json
@@ -188,9 +188,7 @@
           "segments": "分段",
           "docs": "文档",
           "storage": "储存空间",
-          "created": "日期",
-          "parsed_docs_count": {
-          }
+          "created": "日期"
         }
       }
     },
@@ -266,8 +264,6 @@
   "query": {
     "heading": "Rest",
     "api_documentation": "api 文档",
-    "orientation": {
-    },
     "rest": {
       "history": "查询历史",
       "form": {
@@ -294,14 +290,8 @@
         "headers": {
           "query": "查询",
           "timestamp": "日期"
-        },
-        "row": {
-          "favorite": {
-          }
         }
       },
-      "clear": {
-      },
       "body_preview": {
         "use": "使用",
         "open_new_tab": "新标签页打开"
@@ -375,8 +365,6 @@
           "name": "名称",
           "type": "类型",
           "settings": "配置"
-        },
-        "row": {
         }
       },
       "delete_repository": {
@@ -402,23 +390,15 @@
       }
     },
     "search_result": {
-      "show": {
-      },
-      "edit": {
-      },
       "delete": {
         "text": "# | 删除文档 | 批量删除文档",
         "confirm": "# | 是否删除这个文档? | 是否批量删除 {count} 个文档?",
         "growl": "# | 删除文档成功. | 批量删除文档成功."
       }
     },
     "results_table": {
-      "filter": {
-      },
       "settings": {
-        "columns": "列",
-        "sticky_table_header": {
-        }
+        "columns": "列"
       },
       "download_as_json": "下载为 JSON 文件"
     },
@@ -429,8 +409,6 @@
       }
     }
   },
-  "editor": {
-  },
   "settings": {
     "heading": "设置",
     "hide_indices_regex": {
@@ -443,6 +421,11 @@
       "message": "匹配的节点属性将默认隐藏 (所有位置)",
       "reset": "重置为默认 {regex}"
     },
+    "document_field_max_length": {
+      "label": "文档字段最大长度",
+      "message": "搜索结果中文档字段值的最大长度，超出部分将被截断。",
+      "reset": "重置为默认值 {value}"
+    },
     "localize_timestamp": {
       "label": "在搜索结果中显示字段 '{'@'}timestamp' 的本地化值"
     },
@@ -559,8 +542,6 @@
         },
         "deselect_all": {
           "text": "反选全部"
-        },
-        "show_hidden": {
         }
       }
     },
@@ -576,17 +557,13 @@
     "authorization_header_hint": "你的集群使用了授权。确保你已经设置了\"http.cors.allow-headers\"，否则将无法连接。",
     "code_editor": {
       "actions": {
-        "copy_content": {
-        },
         "beautify": {
           "title": "格式化 (Ctrl+ALT+L)",
           "text": "格式化"
         },
         "wrap_lines": {
           "label": "换行",
           "title": "长行换行"
-        },
-        "keyboard_shortcuts": {
         }
       }
     },
@@ -595,10 +572,6 @@
       "network_error": "网络错误, 无法访问你的集群",
       "cluster_uri": "集群uri:"
     },
-    "modal_data_loader": {
-      "modal_title": {
-      }
-    },
     "reload_button": {
       "reload": "重新加载"
     },
@@ -617,8 +590,6 @@
     "new_snapshot": {
       "heading": "新建快照",
       "form": {
-        "repository": {
-        },
         "snapshot_name": {
           "label": "快照名称"
         }
@@ -668,12 +639,6 @@
           "total_shards": "总分片"
         }
       }
-    },
-    "snapshots_table_wrapper": {
-      "repository": {
-      },
-      "filter": {
-      }
     }
   },
   "welcome": {
@@ -686,4 +651,4 @@
       "add_clusters": "请添加第一个集群, 或者导入一个之前的elasticvue配置备份"
     }
   }
-}
+}