From c084f9cd4661f91ec57314fab2b7ffa1a2e5f41e Mon Sep 17 00:00:00 2001 From: Daniel Kim Date: Fri, 17 Jun 2022 16:16:20 -0700 Subject: [PATCH 1/4] Add metadata tab functionality Signed-off-by: Daniel Kim --- .../reguar-fv-demo-tab/DemoCustomTab.tsx | 157 ++++++++++-------- .../reguar-fv-demo-tab/useCustomQuery.tsx | 44 +++++ ui/src/parsers/feastFeatureViews.ts | 3 + ui/src/parsers/jsonType.ts | 11 ++ 4 files changed, 149 insertions(+), 66 deletions(-) create mode 100644 ui/src/custom-tabs/reguar-fv-demo-tab/useCustomQuery.tsx create mode 100644 ui/src/parsers/jsonType.ts diff --git a/ui/src/custom-tabs/reguar-fv-demo-tab/DemoCustomTab.tsx b/ui/src/custom-tabs/reguar-fv-demo-tab/DemoCustomTab.tsx index 2ce1b4e64b6..a584376e520 100644 --- a/ui/src/custom-tabs/reguar-fv-demo-tab/DemoCustomTab.tsx +++ b/ui/src/custom-tabs/reguar-fv-demo-tab/DemoCustomTab.tsx @@ -1,83 +1,108 @@ import React from "react"; - -import { - // Feature View Custom Tabs will get these props - RegularFeatureViewCustomTabProps, -} from "../types"; - +import { z } from "zod"; import { - EuiLoadingContent, - EuiEmptyPrompt, + EuiCode, EuiFlexGroup, + EuiHorizontalRule, + EuiLoadingSpinner, + EuiTable, + EuiTitle, + EuiTableHeader, + EuiTableHeaderCell, + EuiPanel, EuiFlexItem, - EuiCode, - EuiSpacer, + EuiTableRow, + EuiTableRowCell, } from "@elastic/eui"; +import useLoadRegularFeatureView from "../../pages/feature-views/useLoadFeatureView"; -// Separating out the query is not required, -// but encouraged for code readability -import useDemoQuery from "./useDemoQuery"; +const FeatureViewMetadataRow = z.object({ + name: z.string(), + value: z.string(), +}); -const DemoCustomTab = ({ - id, - feastObjectQuery, -}: RegularFeatureViewCustomTabProps) => { - // Use React Query to fetch data - // that is custom to this tab. - // See: https://react-query.tanstack.com/guides/queries - const { isLoading, isError, isSuccess, data } = useDemoQuery({ - featureView: id, - }); +type FeatureViewMetadataRowType = z.infer; - if (isLoading) { - // Handle Loading State - // https://elastic.github.io/eui/#/display/loading - return ; - } +const LineHeightProp: React.CSSProperties = { + lineHeight: 1, +} - if (isError) { - // Handle Data Fetching Error - // https://elastic.github.io/eui/#/display/empty-prompt - return ( - Unable to load your demo page} - body={ -

- There was an error loading the Dashboard application. Contact your - administrator for help. -

- } - /> - ); +const EuiFeatureViewMetadataRow = ({name, value}: FeatureViewMetadataRowType) => { + return ( + + + {name} + + + + 
+            {value}
+
+ + + + ); +} + +const FeatureViewMetadataTable = (data: any) => { + var items: FeatureViewMetadataRowType[] = []; + + for (let element in data.data){ + const row: FeatureViewMetadataRowType = { + name: element, + value: JSON.stringify(data.data[element], null, 2), + }; + items.push(row); + console.log(row); } - // Feast UI uses the Elastic UI component system. - // and are particularly - // useful for layouts. + return ( + + + + Metadata Feature Name + + + Metadata Feature Value + + + {items.map((item) => { + return + })} + + ) +} + +// TODO: change this part to load from a custom source, like the demos? +const DemoCustomTab = () => { + const fName = "credit_history" + const { isLoading, isError, isSuccess, data } = useLoadRegularFeatureView(fName); + const isEmpty = data === undefined; + return ( + {isLoading && ( + + Loading + + )} + {isEmpty &&

No feature view with name: {fName}

} + {isError &&

Error loading feature view: {fName}

} + {isSuccess && data && ( + - -

Hello World. The following is fetched data.

- - {isSuccess && data && ( - - 
{JSON.stringify(data, null, 2)}
- - )} - - -

... and this is data from Feast UI’s own query.

- - {feastObjectQuery.isSuccess && feastObjectQuery.data && ( - - 
{JSON.stringify(feastObjectQuery.data, null, 2)}
- - )} - - + + + +

Properties

+ + + + + + + + )} ); }; diff --git a/ui/src/custom-tabs/reguar-fv-demo-tab/useCustomQuery.tsx b/ui/src/custom-tabs/reguar-fv-demo-tab/useCustomQuery.tsx new file mode 100644 index 00000000000..b93602dbe3b --- /dev/null +++ b/ui/src/custom-tabs/reguar-fv-demo-tab/useCustomQuery.tsx @@ -0,0 +1,44 @@ +import { useQuery } from "react-query"; +import { z } from "zod"; + +// Use Zod to check the shape of the +// json object being loaded +const demoSchema = z.object({ + hello: z.string(), + name: z.string().optional(), +}); + +// Make the type of the object available +type DemoDataType = z.infer; + +interface DemoQueryInterface { + featureView: string | undefined; +} + +const useDemoQuery = ({ featureView }: DemoQueryInterface) => { + // React Query manages caching for you based on query keys + // See: https://react-query.tanstack.com/guides/query-keys + const queryKey = `demo-tab-namespace:${featureView}`; + + // Pass the type to useQuery + // so that components consuming the + // result gets nice type hints + // on the other side. + return useQuery( + queryKey, + () => { + // Customizing the URL based on your needs + const url = `/demo-custom-tabs/demo.json`; + + return fetch(url) + .then((res) => res.json()) + .then((data) => demoSchema.parse(data)); // Use zod to parse results + }, + { + enabled: !!featureView, // Only start the query when the variable is not undefined + } + ); +}; + +export default useDemoQuery; +export type { DemoDataType }; diff --git a/ui/src/parsers/feastFeatureViews.ts b/ui/src/parsers/feastFeatureViews.ts index cbf15d280e6..559565604b4 100644 --- a/ui/src/parsers/feastFeatureViews.ts +++ b/ui/src/parsers/feastFeatureViews.ts @@ -1,5 +1,7 @@ import { z } from "zod"; import { FEAST_FEATURE_VALUE_TYPES } from "./types"; +import { jsonSchema } from "./jsonType" + const FeastFeatureColumnSchema = z.object({ name: z.string(), @@ -54,6 +56,7 @@ const FeastFeatureViewSchema = z.object({ }) ) .optional(), + metadata: jsonSchema.optional(), }), }); diff --git a/ui/src/parsers/jsonType.ts b/ui/src/parsers/jsonType.ts new file mode 100644 index 00000000000..be484b5477f --- /dev/null +++ b/ui/src/parsers/jsonType.ts @@ -0,0 +1,11 @@ +import { z } from "zod"; + +// Taken from the zod documentation code - accepts any JSON object. +const literalSchema = z.union([z.string(), z.number(), z.boolean(), z.null()]); +type Literal = z.infer; +type Json = Literal | { [key: string]: Json } | Json[]; +const jsonSchema: z.ZodType = z.lazy(() => + z.union([literalSchema, z.array(jsonSchema), z.record(jsonSchema)]) +); + +export { jsonSchema }; From 622a68fda4062765c88b2effb424084dfffcf237 Mon Sep 17 00:00:00 2001 From: Daniel Kim Date: Wed, 22 Jun 2022 16:32:12 -0700 Subject: [PATCH 2/4] Undo unnecessary changes and bring back Regular FV Demo Tab Signed-off-by: Daniel Kim --- .../custom-tabs/metadata-tab/MetadataTab.tsx | 110 ++++++++++++ .../useCustomQuery.tsx | 0 .../reguar-fv-demo-tab/DemoCustomTab.tsx | 159 ++++++++---------- .../reguar-fv-demo-tab/useDemoQuery.tsx | 2 +- ui/src/index.tsx | 6 + ui/src/parsers/feastFeatureViews.ts | 3 - ui/src/parsers/jsonType.ts | 11 -- 7 files changed, 184 insertions(+), 107 deletions(-) create mode 100644 ui/src/custom-tabs/metadata-tab/MetadataTab.tsx rename ui/src/custom-tabs/{reguar-fv-demo-tab => metadata-tab}/useCustomQuery.tsx (100%) delete mode 100644 ui/src/parsers/jsonType.ts diff --git a/ui/src/custom-tabs/metadata-tab/MetadataTab.tsx b/ui/src/custom-tabs/metadata-tab/MetadataTab.tsx new file mode 100644 index 00000000000..a584376e520 --- /dev/null +++ b/ui/src/custom-tabs/metadata-tab/MetadataTab.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"; + +const FeatureViewMetadataRow = z.object({ + name: z.string(), + value: z.string(), +}); + +type FeatureViewMetadataRowType = z.infer; + +const LineHeightProp: React.CSSProperties = { + lineHeight: 1, +} + +const EuiFeatureViewMetadataRow = ({name, value}: FeatureViewMetadataRowType) => { + return ( + + + {name} + + + + 
+            {value}
+
+ + + + ); +} + +const FeatureViewMetadataTable = (data: any) => { + var items: FeatureViewMetadataRowType[] = []; + + for (let element in data.data){ + const row: FeatureViewMetadataRowType = { + name: element, + value: JSON.stringify(data.data[element], null, 2), + }; + items.push(row); + console.log(row); + } + + return ( + + + + Metadata Feature Name + + + Metadata Feature Value + + + {items.map((item) => { + return + })} + + ) +} + +// TODO: change this part to load from a custom source, like the demos? +const DemoCustomTab = () => { + const fName = "credit_history" + const { isLoading, isError, isSuccess, data } = useLoadRegularFeatureView(fName); + const isEmpty = data === undefined; + + return ( + + {isLoading && ( + + Loading + + )} + {isEmpty &&

No feature view with name: {fName}

} + {isError &&

Error loading feature view: {fName}

} + {isSuccess && data && ( + + + + + +

Properties

+ + + + + + + + )} + + ); +}; + +export default DemoCustomTab; diff --git a/ui/src/custom-tabs/reguar-fv-demo-tab/useCustomQuery.tsx b/ui/src/custom-tabs/metadata-tab/useCustomQuery.tsx similarity index 100% rename from ui/src/custom-tabs/reguar-fv-demo-tab/useCustomQuery.tsx rename to ui/src/custom-tabs/metadata-tab/useCustomQuery.tsx diff --git a/ui/src/custom-tabs/reguar-fv-demo-tab/DemoCustomTab.tsx b/ui/src/custom-tabs/reguar-fv-demo-tab/DemoCustomTab.tsx index a584376e520..4f8d7dfcb2a 100644 --- a/ui/src/custom-tabs/reguar-fv-demo-tab/DemoCustomTab.tsx +++ b/ui/src/custom-tabs/reguar-fv-demo-tab/DemoCustomTab.tsx @@ -1,110 +1,85 @@ import React from "react"; -import { z } from "zod"; + import { - EuiCode, + // Feature View Custom Tabs will get these props + RegularFeatureViewCustomTabProps, +} from "../types"; + +import { + EuiLoadingContent, + EuiEmptyPrompt, EuiFlexGroup, - EuiHorizontalRule, - EuiLoadingSpinner, - EuiTable, - EuiTitle, - EuiTableHeader, - EuiTableHeaderCell, - EuiPanel, EuiFlexItem, - EuiTableRow, - EuiTableRowCell, + EuiCode, + EuiSpacer, } from "@elastic/eui"; -import useLoadRegularFeatureView from "../../pages/feature-views/useLoadFeatureView"; - -const FeatureViewMetadataRow = z.object({ - name: z.string(), - value: z.string(), -}); -type FeatureViewMetadataRowType = z.infer; +// Separating out the query is not required, +// but encouraged for code readability +import useDemoQuery from "./useDemoQuery"; -const LineHeightProp: React.CSSProperties = { - lineHeight: 1, -} +const DemoCustomTab = ({ + id, + feastObjectQuery, +}: RegularFeatureViewCustomTabProps) => { + // Use React Query to fetch data + // that is custom to this tab. + // See: https://react-query.tanstack.com/guides/queries + const { isLoading, isError, isSuccess, data } = useDemoQuery({ + featureView: id, + }); -const EuiFeatureViewMetadataRow = ({name, value}: FeatureViewMetadataRowType) => { - return ( - - - {name} - - - - 
-            {value}
-
- - - - ); -} - -const FeatureViewMetadataTable = (data: any) => { - var items: FeatureViewMetadataRowType[] = []; - - for (let element in data.data){ - const row: FeatureViewMetadataRowType = { - name: element, - value: JSON.stringify(data.data[element], null, 2), - }; - items.push(row); - console.log(row); + if (isLoading) { + // Handle Loading State + // https://elastic.github.io/eui/#/display/loading + return ; } - return ( - - - - Metadata Feature Name - - - Metadata Feature Value - - - {items.map((item) => { - return - })} - - ) -} - -// TODO: change this part to load from a custom source, like the demos? -const DemoCustomTab = () => { - const fName = "credit_history" - const { isLoading, isError, isSuccess, data } = useLoadRegularFeatureView(fName); - const isEmpty = data === undefined; + if (isError) { + // Handle Data Fetching Error + // https://elastic.github.io/eui/#/display/empty-prompt + return ( + Unable to load your demo page} + body={ +

+ There was an error loading the Dashboard application. Contact your + administrator for help. +

+ } + /> + ); + } + // Feast UI uses the Elastic UI component system. + // and are particularly + // useful for layouts. return ( - {isLoading && ( - - Loading - - )} - {isEmpty &&

No feature view with name: {fName}

} - {isError &&

Error loading feature view: {fName}

} - {isSuccess && data && ( - - - - -

Properties

- - - - - - - - )} + +

Hello World. The following is fetched data.

+ + {isSuccess && data && ( + + 
{JSON.stringify(data, null, 2)}
+ + )} + + +

... and this is data from Feast UI’s own query.

+ + {feastObjectQuery.isSuccess && feastObjectQuery.data && ( + + 
{JSON.stringify(feastObjectQuery.data, null, 2)}
+ + )} + + ); }; -export default DemoCustomTab; +export default DemoCustomTab; \ No newline at end of file diff --git a/ui/src/custom-tabs/reguar-fv-demo-tab/useDemoQuery.tsx b/ui/src/custom-tabs/reguar-fv-demo-tab/useDemoQuery.tsx index b93602dbe3b..965d5115395 100644 --- a/ui/src/custom-tabs/reguar-fv-demo-tab/useDemoQuery.tsx +++ b/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 }; \ No newline at end of file diff --git a/ui/src/index.tsx b/ui/src/index.tsx index 3a6269a8b78..b90ea9ea6df 100644 --- a/ui/src/index.tsx +++ b/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 MetadataTab from "./custom-tabs/metadata-tab/MetadataTab"; 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"; @@ -31,6 +32,11 @@ const tabsRegistry = { path: "demo-tab", // Subpath for the tab Component: RFVDemoCustomTab, }, + { + label: "Metadata Tab Demo", // Navigation Label for the tab + path: "metadata-tab", // Subpath for the tab + Component: MetadataTab, + }, ], OnDemandFeatureViewCustomTabs: [ { diff --git a/ui/src/parsers/feastFeatureViews.ts b/ui/src/parsers/feastFeatureViews.ts index 559565604b4..cbf15d280e6 100644 --- a/ui/src/parsers/feastFeatureViews.ts +++ b/ui/src/parsers/feastFeatureViews.ts @@ -1,7 +1,5 @@ import { z } from "zod"; import { FEAST_FEATURE_VALUE_TYPES } from "./types"; -import { jsonSchema } from "./jsonType" - const FeastFeatureColumnSchema = z.object({ name: z.string(), @@ -56,7 +54,6 @@ const FeastFeatureViewSchema = z.object({ }) ) .optional(), - metadata: jsonSchema.optional(), }), }); diff --git a/ui/src/parsers/jsonType.ts b/ui/src/parsers/jsonType.ts deleted file mode 100644 index be484b5477f..00000000000 --- a/ui/src/parsers/jsonType.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { z } from "zod"; - -// Taken from the zod documentation code - accepts any JSON object. -const literalSchema = z.union([z.string(), z.number(), z.boolean(), z.null()]); -type Literal = z.infer; -type Json = Literal | { [key: string]: Json } | Json[]; -const jsonSchema: z.ZodType = z.lazy(() => - z.union([literalSchema, z.array(jsonSchema), z.record(jsonSchema)]) -); - -export { jsonSchema }; From 9b34987b9ed643adfa572755041e19758dad8221 Mon Sep 17 00:00:00 2001 From: Daniel Kim Date: Wed, 22 Jun 2022 16:44:45 -0700 Subject: [PATCH 3/4] Change metadata tab to accept custom JSON file input. Signed-off-by: Daniel Kim --- .../metadata-tab/MetadataQuery.tsx | 25 +++++++++++ .../custom-tabs/metadata-tab/MetadataTab.tsx | 14 +++--- .../metadata-tab/useCustomQuery.tsx | 44 ------------------- 3 files changed, 32 insertions(+), 51 deletions(-) create mode 100644 ui/src/custom-tabs/metadata-tab/MetadataQuery.tsx delete mode 100644 ui/src/custom-tabs/metadata-tab/useCustomQuery.tsx diff --git a/ui/src/custom-tabs/metadata-tab/MetadataQuery.tsx b/ui/src/custom-tabs/metadata-tab/MetadataQuery.tsx new file mode 100644 index 00000000000..2fc3d414508 --- /dev/null +++ b/ui/src/custom-tabs/metadata-tab/MetadataQuery.tsx @@ -0,0 +1,25 @@ +import { useQuery } from "react-query"; + +interface MetadataQueryInterface { + featureView: string | undefined; +} + +const MetadataQuery = (featureView: string) => { + const queryKey = `metadata-tab-namespace:${featureView}`; + + return useQuery( + 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 MetadataQuery; diff --git a/ui/src/custom-tabs/metadata-tab/MetadataTab.tsx b/ui/src/custom-tabs/metadata-tab/MetadataTab.tsx index a584376e520..50d033febe1 100644 --- a/ui/src/custom-tabs/metadata-tab/MetadataTab.tsx +++ b/ui/src/custom-tabs/metadata-tab/MetadataTab.tsx @@ -15,6 +15,7 @@ import { EuiTableRowCell, } from "@elastic/eui"; import useLoadRegularFeatureView from "../../pages/feature-views/useLoadFeatureView"; +import MetadataQuery from "./MetadataQuery"; const FeatureViewMetadataRow = z.object({ name: z.string(), @@ -60,10 +61,10 @@ const FeatureViewMetadataTable = (data: any) => { - Metadata Feature Name + Metadata Item Name - Metadata Feature Value + Metadata Item Value {items.map((item) => { @@ -73,10 +74,9 @@ const FeatureViewMetadataTable = (data: any) => { ) } -// TODO: change this part to load from a custom source, like the demos? -const DemoCustomTab = () => { +const MetadataTab = () => { const fName = "credit_history" - const { isLoading, isError, isSuccess, data } = useLoadRegularFeatureView(fName); + const { isLoading, isError, isSuccess, data } = MetadataQuery(fName); const isEmpty = data === undefined; return ( @@ -97,7 +97,7 @@ const DemoCustomTab = () => {

Properties

- + @@ -107,4 +107,4 @@ const DemoCustomTab = () => { ); }; -export default DemoCustomTab; +export default MetadataTab; diff --git a/ui/src/custom-tabs/metadata-tab/useCustomQuery.tsx b/ui/src/custom-tabs/metadata-tab/useCustomQuery.tsx deleted file mode 100644 index b93602dbe3b..00000000000 --- a/ui/src/custom-tabs/metadata-tab/useCustomQuery.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import { useQuery } from "react-query"; -import { z } from "zod"; - -// Use Zod to check the shape of the -// json object being loaded -const demoSchema = z.object({ - hello: z.string(), - name: z.string().optional(), -}); - -// Make the type of the object available -type DemoDataType = z.infer; - -interface DemoQueryInterface { - featureView: string | undefined; -} - -const useDemoQuery = ({ featureView }: DemoQueryInterface) => { - // React Query manages caching for you based on query keys - // See: https://react-query.tanstack.com/guides/query-keys - const queryKey = `demo-tab-namespace:${featureView}`; - - // Pass the type to useQuery - // so that components consuming the - // result gets nice type hints - // on the other side. - return useQuery( - queryKey, - () => { - // Customizing the URL based on your needs - const url = `/demo-custom-tabs/demo.json`; - - return fetch(url) - .then((res) => res.json()) - .then((data) => demoSchema.parse(data)); // Use zod to parse results - }, - { - enabled: !!featureView, // Only start the query when the variable is not undefined - } - ); -}; - -export default useDemoQuery; -export type { DemoDataType }; From 6be62fb1e96eaf6470c16eb5ccddb788494ec4d1 Mon Sep 17 00:00:00 2001 From: Daniel Kim Date: Thu, 23 Jun 2022 11:50:05 -0700 Subject: [PATCH 4/4] Rename instances of metadata to data Signed-off-by: Daniel Kim --- .../DataQuery.tsx} | 8 +++--- .../MetadataTab.tsx => data-tab/DataTab.tsx} | 28 +++++++++---------- ui/src/index.tsx | 8 +++--- .../useLoadFeatureViewSummaryStatistics.ts | 2 +- 4 files changed, 23 insertions(+), 23 deletions(-) rename ui/src/custom-tabs/{metadata-tab/MetadataQuery.tsx => data-tab/DataQuery.tsx} (69%) rename ui/src/custom-tabs/{metadata-tab/MetadataTab.tsx => data-tab/DataTab.tsx} (73%) diff --git a/ui/src/custom-tabs/metadata-tab/MetadataQuery.tsx b/ui/src/custom-tabs/data-tab/DataQuery.tsx similarity index 69% rename from ui/src/custom-tabs/metadata-tab/MetadataQuery.tsx rename to ui/src/custom-tabs/data-tab/DataQuery.tsx index 2fc3d414508..f101c122e43 100644 --- a/ui/src/custom-tabs/metadata-tab/MetadataQuery.tsx +++ b/ui/src/custom-tabs/data-tab/DataQuery.tsx @@ -1,11 +1,11 @@ import { useQuery } from "react-query"; -interface MetadataQueryInterface { +interface DataQueryInterface { featureView: string | undefined; } -const MetadataQuery = (featureView: string) => { - const queryKey = `metadata-tab-namespace:${featureView}`; +const DataQuery = (featureView: string) => { + const queryKey = `data-tab-namespace:${featureView}`; return useQuery( queryKey, @@ -22,4 +22,4 @@ const MetadataQuery = (featureView: string) => { ); }; -export default MetadataQuery; +export default DataQuery; diff --git a/ui/src/custom-tabs/metadata-tab/MetadataTab.tsx b/ui/src/custom-tabs/data-tab/DataTab.tsx similarity index 73% rename from ui/src/custom-tabs/metadata-tab/MetadataTab.tsx rename to ui/src/custom-tabs/data-tab/DataTab.tsx index 50d033febe1..144083420a2 100644 --- a/ui/src/custom-tabs/metadata-tab/MetadataTab.tsx +++ b/ui/src/custom-tabs/data-tab/DataTab.tsx @@ -15,20 +15,20 @@ import { EuiTableRowCell, } from "@elastic/eui"; import useLoadRegularFeatureView from "../../pages/feature-views/useLoadFeatureView"; -import MetadataQuery from "./MetadataQuery"; +import DataQuery from "./DataQuery"; -const FeatureViewMetadataRow = z.object({ +const FeatureViewDataRow = z.object({ name: z.string(), value: z.string(), }); -type FeatureViewMetadataRowType = z.infer; +type FeatureViewDataRowType = z.infer; const LineHeightProp: React.CSSProperties = { lineHeight: 1, } -const EuiFeatureViewMetadataRow = ({name, value}: FeatureViewMetadataRowType) => { +const EuiFeatureViewDataRow = ({name, value}: FeatureViewDataRowType) => { return ( @@ -45,11 +45,11 @@ const EuiFeatureViewMetadataRow = ({name, value}: FeatureViewMetadataRowType) => ); } -const FeatureViewMetadataTable = (data: any) => { - var items: FeatureViewMetadataRowType[] = []; +const FeatureViewDataTable = (data: any) => { + var items: FeatureViewDataRowType[] = []; for (let element in data.data){ - const row: FeatureViewMetadataRowType = { + const row: FeatureViewDataRowType = { name: element, value: JSON.stringify(data.data[element], null, 2), }; @@ -61,22 +61,22 @@ const FeatureViewMetadataTable = (data: any) => { - Metadata Item Name + Data Item Name - Metadata Item Value + Data Item Value {items.map((item) => { - return + return })} ) } -const MetadataTab = () => { +const DataTab = () => { const fName = "credit_history" - const { isLoading, isError, isSuccess, data } = MetadataQuery(fName); + const { isLoading, isError, isSuccess, data } = DataQuery(fName); const isEmpty = data === undefined; return ( @@ -97,7 +97,7 @@ const MetadataTab = () => {

Properties

- + @@ -107,4 +107,4 @@ const MetadataTab = () => { ); }; -export default MetadataTab; +export default DataTab; diff --git a/ui/src/index.tsx b/ui/src/index.tsx index b90ea9ea6df..937a91e9fab 100644 --- a/ui/src/index.tsx +++ b/ui/src/index.tsx @@ -15,7 +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 MetadataTab from "./custom-tabs/metadata-tab/MetadataTab"; +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"; @@ -33,9 +33,9 @@ const tabsRegistry = { Component: RFVDemoCustomTab, }, { - label: "Metadata Tab Demo", // Navigation Label for the tab - path: "metadata-tab", // Subpath for the tab - Component: MetadataTab, + label: "Data Tab Demo", // Navigation Label for the tab + path: "data-tab", // Subpath for the tab + Component: DataTab, }, ], OnDemandFeatureViewCustomTabs: [ diff --git a/ui/src/queries/useLoadFeatureViewSummaryStatistics.ts b/ui/src/queries/useLoadFeatureViewSummaryStatistics.ts index 06040298666..fea0bd9d816 100644 --- a/ui/src/queries/useLoadFeatureViewSummaryStatistics.ts +++ b/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,