feat: Add custom JSON table tab w/ formatting (#2851)

* Add metadata tab functionality

Signed-off-by: Daniel Kim <[email protected]>

* Undo unnecessary changes and bring back Regular FV Demo Tab

Signed-off-by: Daniel Kim <[email protected]>

* Change metadata tab to accept custom JSON file input.

Signed-off-by: Daniel Kim <[email protected]>

* Rename instances of metadata to data

Signed-off-by: Daniel Kim <[email protected]>

Author: kindalime

ui/src/custom-tabs/data-tab/DataQuery.tsx

@@ -0,0 +1,25 @@
+import { useQuery } from "react-query";
+
+interface DataQueryInterface {
+  featureView: string | undefined;
+}
+
+const DataQuery = (featureView: string) => {
+  const queryKey = `data-tab-namespace:${featureView}`;
+
+  return useQuery<any>(
+    queryKey,
+    () => {
+      // Customizing the URL based on your needs
+      const url = `/demo-custom-tabs/demo.json`;
+
+      return fetch(url)
+        .then((res) => res.json())
+    },
+    {
+      enabled: !!featureView, // Only start the query when the variable is not undefined
+    }
+  );
+};
+
+export default DataQuery;

ui/src/custom-tabs/data-tab/DataTab.tsx

@@ -0,0 +1,110 @@
+import React from "react";
+import { z } from "zod";
+import {
+  EuiCode,
+  EuiFlexGroup,
+  EuiHorizontalRule,
+  EuiLoadingSpinner,
+  EuiTable,
+  EuiTitle,
+  EuiTableHeader,
+  EuiTableHeaderCell,
+  EuiPanel,
+  EuiFlexItem,
+  EuiTableRow,
+  EuiTableRowCell,
+} from "@elastic/eui";
+import useLoadRegularFeatureView from "../../pages/feature-views/useLoadFeatureView";
+import DataQuery from "./DataQuery";
+
+const FeatureViewDataRow = z.object({
+  name: z.string(),
+  value: z.string(),
+});
+
+type FeatureViewDataRowType = z.infer<typeof FeatureViewDataRow>;
+
+const LineHeightProp: React.CSSProperties = {
+  lineHeight: 1,
+}
+
+const EuiFeatureViewDataRow = ({name, value}: FeatureViewDataRowType) => {
+  return (
+    <EuiTableRow>
+      <EuiTableRowCell>
+        {name}
+      </EuiTableRowCell>
+      <EuiTableRowCell textOnly={false}>
+        <EuiCode data-code-language="text">
+          <pre style={LineHeightProp}>
+            {value}
+          </pre>
+        </EuiCode>
+      </EuiTableRowCell>
+    </EuiTableRow>
+  );
+}
+
+const FeatureViewDataTable = (data: any) => {
+  var items: FeatureViewDataRowType[] = [];
+
+  for (let element in data.data){
+    const row: FeatureViewDataRowType = {
+      name: element,
+      value: JSON.stringify(data.data[element], null, 2),
+    };
+    items.push(row);
+    console.log(row);
+  }
+
+  return (
+    <EuiTable>
+      <EuiTableHeader>
+        <EuiTableHeaderCell>
+          Data Item Name
+        </EuiTableHeaderCell>
+        <EuiTableHeaderCell>
+          Data Item Value
+        </EuiTableHeaderCell>
+      </EuiTableHeader>
+      {items.map((item) => {
+        return <EuiFeatureViewDataRow name={item.name} value={item.value} />
+      })}
+    </EuiTable>
+  )
+}
+
+const DataTab = () => {
+  const fName = "credit_history"
+  const { isLoading, isError, isSuccess, data } = DataQuery(fName);
+  const isEmpty = data === undefined;
+
+  return (
+    <React.Fragment>
+    {isLoading && (
+      <React.Fragment>
+        <EuiLoadingSpinner size="m" /> Loading
+      </React.Fragment>
+    )}
+    {isEmpty && <p>No feature view with name: {fName}</p>}
+    {isError && <p>Error loading feature view: {fName}</p>}
+    {isSuccess && data && (
+      <React.Fragment>
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          <EuiPanel hasBorder={true}>
+            <EuiTitle size="xs">
+              <h3>Properties</h3>
+            </EuiTitle>
+            <EuiHorizontalRule margin="xs" />
+            <FeatureViewDataTable data={data} />
+          </EuiPanel>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </React.Fragment>
+      )}
+    </React.Fragment>
+  );
+};
+
+export default DataTab;

ui/src/custom-tabs/reguar-fv-demo-tab/DemoCustomTab.tsx

@@ -82,4 +82,4 @@ const DemoCustomTab = ({
   );
 };
 
-export default DemoCustomTab;
+export default DemoCustomTab;

ui/src/custom-tabs/reguar-fv-demo-tab/useDemoQuery.tsx

@@ -41,4 +41,4 @@ const useDemoQuery = ({ featureView }: DemoQueryInterface) => {
 };
 
 export default useDemoQuery;
-export type { DemoDataType };
+export type { DemoDataType };

ui/src/index.tsx

@@ -15,6 +15,7 @@ import FeastUI from "./FeastUI";
 // 3. Register the tab in the appropriate array below. Each entry
 //    is a record with three keys: label, path, and Component.
 //    Import your component and pass it as Component
+import DataTab from "./custom-tabs/data-tab/DataTab";
 import RFVDemoCustomTab from "./custom-tabs/reguar-fv-demo-tab/DemoCustomTab";
 import ODFVDemoCustomTab from "./custom-tabs/ondemand-fv-demo-tab/DemoCustomTab";
 import FSDemoCustomTab from "./custom-tabs/feature-service-demo-tab/DemoCustomTab";
@@ -32,6 +33,11 @@ const tabsRegistry = {
       path: "demo-tab", // Subpath for the tab
       Component: RFVDemoCustomTab,
     },
+    {
+      label: "Data Tab Demo", // Navigation Label for the tab
+      path: "data-tab", // Subpath for the tab
+      Component: DataTab,
+    },
   ],
   OnDemandFeatureViewCustomTabs: [
     {

ui/src/queries/useLoadFeatureViewSummaryStatistics.ts

@@ -9,7 +9,7 @@ const useLoadFeatureViewSummaryStatistics = (featureViewName: string) => {
   const { projectName } = useParams();
 
   const queryKey = `featureViewSummaryStatistics:${featureViewName}`;
-  const url = `/metadata/${projectName}/featureView/${featureViewName}.json`;
+  const url = `/data/${projectName}/featureView/${featureViewName}.json`;
 
   return useQuery(
     queryKey,