pref: improve large entry loading and display

Author: tiny-craft

frontend/src/components/content_value/ContentValueHash.vue

@@ -99,6 +99,9 @@ const fieldColumn = computed(() => ({
     filterOptionValue: fieldFilterOption.value,
     className: inEdit.value ? 'clickable wordline' : 'wordline',
     filter: (value, row) => {
+        if (isEmpty(value)) {
+            return true
+        }
         return !!~row.k.indexOf(value.toString())
     },
     render: (row) => {
@@ -140,15 +143,17 @@ const valueColumn = computed(() => ({
     //     return !!~row.v.indexOf(value.toString())
     // },
     render: (row) => {
-        let val = row.dv || nativeRedisKey(row.v)
         if (isCode.value) {
+            let val = row.dv || nativeRedisKey(row.v)
             return h('pre', { class: 'pre-wrap' }, val)
+        } else {
+            let val = row.dv || nativeRedisKey(row.v, 500)
+            val = truncate(val, { length: 500 })
+            if (row.rm === true) {
+                return h('s', {}, val)
+            }
+            return val
         }
-        val = truncate(val, { length: 500 })
-        if (row.rm === true) {
-            return h('s', {}, val)
-        }
-        return val
     },
 }))
 

frontend/src/components/content_value/ContentValueList.vue

@@ -107,15 +107,20 @@ const valueColumn = computed(() => ({
     filterOptionValue: valueFilterOption.value,
     className: inEdit.value ? 'clickable' : '',
     filter: (filterValue, row) => {
+        if (isEmpty(filterValue)) {
+            return true
+        }
         const val = row.dv || nativeRedisKey(row.v)
         return !!~val.indexOf(filterValue.toString())
     },
     render: (row) => {
-        const val = row.dv || nativeRedisKey(row.v)
         if (isCode.value) {
+            const val = row.dv || nativeRedisKey(row.v)
             return h('pre', { class: 'pre-wrap' }, val)
+        } else {
+            const val = row.dv || nativeRedisKey(row.v, 500)
+            return truncate(val, { length: 500 })
         }
-        return truncate(val, { length: 500 })
     },
 }))
 

frontend/src/components/content_value/ContentValueSet.vue

@@ -106,15 +106,20 @@ const valueColumn = computed(() => ({
     filterOptionValue: valueFilterOption.value,
     className: inEdit.value ? 'clickable' : '',
     filter: (filterValue, row) => {
+        if (isEmpty(filterValue)) {
+            return true
+        }
         const val = row.dv || nativeRedisKey(row.v)
         return !!~val.indexOf(filterValue.toString())
     },
     render: (row) => {
-        const val = row.dv || nativeRedisKey(row.v)
         if (isCode.value) {
+            const val = row.dv || nativeRedisKey(row.v)
             return h('pre', { class: 'pre-wrap' }, val)
+        } else {
+            const val = row.dv || nativeRedisKey(row.v, 500)
+            return truncate(val, { length: 500 })
         }
-        return truncate(val, { length: 500 })
     },
 }))
 

frontend/src/components/content_value/ContentValueStream.vue

@@ -81,6 +81,9 @@ const valueColumn = computed(() => ({
     filterOptionValue: valueFilterOption.value,
     filter: (value, row) => {
         const v = value.toString()
+        if (isEmpty(v)) {
+            return true
+        }
         if (row.dv) {
             return includes(row.dv, v)
         }

frontend/src/components/content_value/ContentValueZSet.vue

@@ -160,11 +160,13 @@ const valueColumn = computed(() => ({
     },
     // sorter: (row1, row2) => row1.value - row2.value,
     render: (row) => {
-        const val = row.dv || nativeRedisKey(row.v)
         if (isCode.value) {
+            const val = row.dv || nativeRedisKey(row.v)
             return h('pre', { class: 'pre-wrap' }, val)
+        } else {
+            const val = row.dv || nativeRedisKey(row.v, 500)
+            return truncate(val, { length: 500 })
         }
-        return truncate(val, { length: 500 })
     },
 }))
 

frontend/src/utils/key_convert.js

@@ -1,4 +1,4 @@
-import { join, map } from 'lodash'
+import { join, map, take } from 'lodash'
 
 /**
  * converted binary data in strings to hex format
@@ -25,10 +25,15 @@ export function decodeRedisKey(key) {
 /**
  * convert char code array to string
  * @param {string|number[]} key
+ * @param {number|undefined} truncate
  * @return {string}
  */
-export function nativeRedisKey(key) {
+export function nativeRedisKey(key, truncate) {
     if (key instanceof Array) {
+        // truncate char code array
+        if (typeof truncate === 'number' && truncate > 0) {
+            key = take(key, truncate)
+        }
         return map(key, (c) => String.fromCharCode(c)).join('')
     }
     return key