[ui] load attribute labels from db

webui/src/components/widgets/Table.svelte

@@ -13,6 +13,7 @@
   import { query } from "../../lib/entity";
   import { Readable, readable } from "svelte/store";
   import { defaultEntitySort, entityValueSort } from "../../util/sort";
+  import { fetchAllAttributes } from "../../lib/api";
   const dispatch = createEventDispatcher();
 
   export let columns: string | undefined = undefined;
@@ -141,8 +142,7 @@
   });
 
   // Formatting & Display
-  // todo - grab from db
+  let ATTRIBUTE_LABELS: { [key: string]: string } = {
-  const ATTRIBUTE_LABELS: { [key: string]: string } = {
     FILE_MIME: "MIME type",
     FILE_MTIME: "Last modified",
     FILE_SIZE: "File size",
@@ -152,16 +152,21 @@
     IS: "Type",
   };
 
+  fetchAllAttributes().then((attributes) => {
+    attributes.forEach((attribute) => {
+      if (attribute.labels.length) {
+        ATTRIBUTE_LABELS[attribute.name] = attribute.labels[0];
+      }
+    });
+    ATTRIBUTE_LABELS = ATTRIBUTE_LABELS;
+  });
+
   const COLUMN_LABELS: { [key: string]: string } = {
     entity: "Entity",
     attribute: "Attribute",
     value: "Value",
   };
 
-  function formatAttribute(attribute: string) {
-    return ATTRIBUTE_LABELS[attribute];
-  }
-
   function formatValue(value: string | number, attribute: string): string {
     switch (attribute) {
       case "FILE_MTIME":
@@ -233,9 +238,13 @@
             />
           </td>
         {:else if column == ATTR_COL}
-          <td class:formatted={Boolean(formatAttribute(entry.attribute))}>
+          <td
+            class:formatted={Boolean(
+              Object.keys(ATTRIBUTE_LABELS).includes(entry.attribute)
+            )}
+          >
             <Ellipsis
-              value={formatAttribute(entry.attribute) || entry.attribute}
+              value={ATTRIBUTE_LABELS[entry.attribute] || entry.attribute}
               title={entry.attribute}
             />
           </td>