[ui] add basic BLOB value formatting

ui/package.json

@@ -11,6 +11,7 @@
     "@shoelace-style/shoelace": "^2.0.0-beta.40",
     "core-js": "^3.12.1",
     "date-fns": "^2.21.3",
+    "filesize": "^8.0.3",
     "normalize.css": "^8.0.1",
     "sass": "^1.34.0",
     "sass-loader": "^10.2.0",

ui/src/components/widgets/Table.vue

@@ -21,9 +21,15 @@
             />
           </td>
           <td>
-            <Marquee>{{ entry.attribute }}</Marquee>
+            <Marquee
+              :class="{
+                formatted: Boolean(formatAttribute(entry.attribute)),
+              }"
+            >
+              {{ formatAttribute(entry.attribute) || entry.attribute }}
+            </Marquee>
           </td>
-          <td>
+          <td class="value">
             <text-input
               :editable="editable"
               :value="entry.value.c"
@@ -41,8 +47,17 @@
                   }
                 "
               />
-              <Marquee v-else>
+              <Marquee
-                {{ entry.value.c }}
+                v-else
+                :class="{
+                  formatted: Boolean(
+                    formatValue(entry.value.c, entry.attribute)
+                  ),
+                }"
+              >
+                {{
+                  formatValue(entry.value.c, entry.attribute) || entry.value.c
+                }}
               </Marquee>
             </text-input>
           </td>
@@ -103,6 +118,8 @@ import {
   ref,
   watchEffect,
 } from "vue";
+import filesize from "filesize";
+import { format, fromUnixTime } from "date-fns";
 
 export default defineComponent({
   name: "Table",
@@ -163,6 +180,17 @@ export default defineComponent({
       return props.attributes.slice(0, currentDisplay.value);
     });
 
+    function formatAttribute(attribute: string) {
+      return ATTRIBUTE_LABELS[attribute];
+    }
+
+    function formatValue(value: string, attribute: string): string | undefined {
+      const handler = VALUE_FORMATTERS[attribute];
+      if (handler) {
+        return handler(value);
+      }
+    }
+
     return {
       editable,
       addressEls,
@@ -170,6 +198,8 @@ export default defineComponent({
       limitedAttributes,
       currentDisplay,
       MAX_DISPLAY,
+      formatAttribute,
+      formatValue,
     };
   },
   methods: {
@@ -208,6 +238,17 @@ export default defineComponent({
     },
   },
 });
+
+const ATTRIBUTE_LABELS: { [key: string]: string } = {
+  FILE_MIME: "MIME type",
+  FILE_MTIME: "Last modified",
+  FILE_SIZE: "File size",
+};
+
+const VALUE_FORMATTERS: { [key: string]: (val: string) => string } = {
+  FILE_MTIME: (val) => format(fromUnixTime(parseInt(val, 10)), "PPpp"),
+  FILE_SIZE: (val) => filesize(parseInt(val, 10), { base: 2 }),
+};
 </script>
 
 <style lang="scss" scoped>
@@ -228,6 +269,10 @@ table {
     &.attr-action {
       max-width: 1em;
     }
+
+    .formatted {
+      font-family: var(--default-font);
+    }
   }
 
   .attr-action-col {

ui/yarn.lock

@@ -5500,6 +5500,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"filesize@npm:^8.0.3":
+  version: 8.0.3
+  resolution: "filesize@npm:8.0.3"
+  checksum: be0f7402249f0df2adf57268bde15c1f54d4b35e9c5ab75921710140846a2b3670e0c3a69bda406f0a53832ff878b2d7cccc4661bb1b79d322c6395613aa51a6
+  languageName: node
+  linkType: hard
+
 "fill-range@npm:^4.0.0":
   version: 4.0.0
   resolution: "fill-range@npm:4.0.0"
@@ -11776,6 +11783,7 @@ typescript@^4.2.4:
     date-fns: ^2.21.3
     eslint: ^6.8.0
     eslint-plugin-vue: ^7.9.0
+    filesize: ^8.0.3
     normalize.css: ^8.0.1
     sass: ^1.34.0
     sass-loader: ^10.2.0