feat: support view as hex/binary for the key with type string

Author: tiny-craft

frontend/src/components/content_value/ContentValueString.vue

@@ -11,8 +11,9 @@ import Edit from '@/components/icons/Edit.vue'
 import { IsJson } from '@/utils/check_string_format.js'
 import { types as redisTypes } from '@/consts/support_redis_type.js'
 import { ClipboardSetText } from 'wailsjs/runtime/runtime.js'
-import { toLower } from 'lodash'
+import { map, toLower } from 'lodash'
 import useConnectionStore from 'stores/connections.js'
+import { fromBase64, fromBase64Json, toBinary, toHex, toJsonText } from '@/utils/string_convert.js'
 
 const i18n = useI18n()
 const themeVars = useThemeVars()
@@ -28,53 +29,16 @@ const props = defineProps({
     value: String,
 })
 
-const viewOption = [
-    {
-        value: types.PLAIN_TEXT,
-        label: types.PLAIN_TEXT,
-    },
-    {
-        value: types.JSON,
-        label: types.JSON,
-    },
-    {
-        value: types.BASE64_TO_TEXT,
-        label: types.BASE64_TO_TEXT,
-    },
-    {
-        value: types.BASE64_TO_JSON,
-        label: types.BASE64_TO_JSON,
-    },
-]
+const viewOption = computed(() =>
+    map(types, (t) => {
+        return {
+            value: t,
+            label: t,
+        }
+    }),
+)
 const viewAs = ref(types.PLAIN_TEXT)
 
-const getJsonValue = () => {
-    try {
-        const jsonObj = JSON.parse(props.value)
-        return JSON.stringify(jsonObj, null, 2)
-    } catch (e) {
-        return props.value
-    }
-}
-
-const getBase64Value = () => {
-    try {
-        return atob(props.value)
-    } catch (e) {
-        return props.value
-    }
-}
-
-const getBase64JsonValue = () => {
-    try {
-        const text = atob(props.value)
-        const jsonObj = JSON.parse(text)
-        return JSON.stringify(jsonObj, null, 2)
-    } catch (e) {
-        return props.value
-    }
-}
-
 const autoDetectFormat = () => {
     // auto check format when loaded
     if (IsJson(props.value)) {
@@ -104,21 +68,22 @@ const viewValue = computed(() => {
         case types.PLAIN_TEXT:
             return props.value
         case types.JSON:
-            return getJsonValue()
+            return toJsonText(props.value)
         case types.BASE64_TO_TEXT:
-            return getBase64Value()
+            return fromBase64(props.value)
         case types.BASE64_TO_JSON:
-            return getBase64JsonValue()
+            return fromBase64Json(props.value)
+        case types.HEX:
+            return toHex(props.value)
+        case types.BINARY:
+            return toBinary(props.value)
         default:
             return props.value
     }
 })
 
 const viewLanguage = computed(() => {
     switch (viewAs.value) {
-        case types.PLAIN_TEXT:
-        case types.BASE64_TO_TEXT:
-            return 'plaintext'
         case types.JSON:
         case types.BASE64_TO_JSON:
             return 'json'

frontend/src/consts/value_view_type.js

@@ -3,4 +3,6 @@ export const types = {
     JSON: 'JSON',
     BASE64_TO_TEXT: 'Base64 To Text',
     BASE64_TO_JSON: 'Base64 To JSON',
+    HEX: 'Hex',
+    BINARY: 'Binary',
 }

frontend/src/utils/string_convert.js

@@ -0,0 +1,70 @@
+import { map, padStart } from 'lodash'
+
+/**
+ * convert string to json
+ * @param str
+ * @return {string}
+ */
+export const toJsonText = (str) => {
+    try {
+        const jsonObj = JSON.parse(str)
+        return JSON.stringify(jsonObj, null, 2)
+    } catch (e) {
+        return str
+    }
+}
+
+/**
+ * convert string from base64
+ * @param str
+ * @return {string}
+ */
+export const fromBase64 = (str) => {
+    try {
+        return atob(str)
+    } catch (e) {
+        return str
+    }
+}
+
+/**
+ * convert string from base64 to json
+ * @param str
+ * @return {string}
+ */
+export const fromBase64Json = (str) => {
+    try {
+        const text = atob(str)
+        const jsonObj = JSON.parse(text)
+        return JSON.stringify(jsonObj, null, 2)
+    } catch (e) {
+        return str
+    }
+}
+
+/**
+ * convert string to hex string
+ * @param str
+ * @return {string}
+ */
+export const toHex = (str) => {
+    const hexArr = map(str, (char) => {
+        const charCode = char.charCodeAt(0)
+        return charCode.toString(16)
+    })
+    return hexArr.join(' ')
+}
+
+/**
+ * convert string to binary string
+ * @param str
+ * @return {string}
+ */
+export const toBinary = (str) => {
+    const codeUnits = map(str, (char) => {
+        let code = char.charCodeAt(0).toString(2)
+        code = padStart(code, 8, '0')
+        return code
+    })
+    return codeUnits.join(' ')
+}