Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
feast-ci-bot merged 4 commits into from
Jul 5, 2022
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c084f9c
Add metadata tab functionality
Jun 17, 2022
622a68f
Undo unnecessary changes and bring back Regular FV Demo Tab
Jun 22, 2022
9b34987
Change metadata tab to accept custom JSON file input.
Jun 22, 2022
6be62fb
Rename instances of metadata to data
Jun 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Undo unnecessary changes and bring back Regular FV Demo Tab 
Signed-off-by: Daniel Kim <danielk@twitter.com>
  • Loading branch information
Daniel Kim committed Jul 1, 2022
commit 622a68fda4062765c88b2effb424084dfffcf237
110 changes: 110 additions & 0 deletions ui/src/custom-tabs/metadata-tab/MetadataTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<typeof FeatureViewMetadataRow>;

const LineHeightProp: React.CSSProperties = {
lineHeight: 1,
}

const EuiFeatureViewMetadataRow = ({name, value}: FeatureViewMetadataRowType) => {
return (
<EuiTableRow>
<EuiTableRowCell>
{name}
</EuiTableRowCell>
<EuiTableRowCell textOnly={false}>
<EuiCode data-code-language="text">
<pre style={LineHeightProp}>
{value}
</pre>
</EuiCode>
</EuiTableRowCell>
</EuiTableRow>
);
}

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 (
<EuiTable>
<EuiTableHeader>
<EuiTableHeaderCell>
Metadata Feature Name
</EuiTableHeaderCell>
<EuiTableHeaderCell>
Metadata Feature Value
</EuiTableHeaderCell>
</EuiTableHeader>
{items.map((item) => {
return <EuiFeatureViewMetadataRow name={item.name} value={item.value} />
})}
</EuiTable>
)
}

// 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 (
<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" />
<FeatureViewMetadataTable data={data.object.spec} />
</EuiPanel>
</EuiFlexItem>
</EuiFlexGroup>
</React.Fragment>
)}
</React.Fragment>
);
};

export default DemoCustomTab;
0 ...abs/reguar-fv-demo-tab/useCustomQuery.tsx → ...stom-tabs/metadata-tab/useCustomQuery.tsx
View file
Open in desktop
File renamed without changes.
159 changes: 67 additions & 92 deletions ui/src/custom-tabs/reguar-fv-demo-tab/DemoCustomTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<typeof FeatureViewMetadataRow>;
// 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 (
<EuiTableRow>
<EuiTableRowCell>
{name}
</EuiTableRowCell>
<EuiTableRowCell textOnly={false}>
<EuiCode data-code-language="text">
<pre style={LineHeightProp}>
{value}
</pre>
</EuiCode>
</EuiTableRowCell>
</EuiTableRow>
);
}

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 <EuiLoadingContent lines={3} />;
}

return (
<EuiTable>
<EuiTableHeader>
<EuiTableHeaderCell>
Metadata Feature Name
</EuiTableHeaderCell>
<EuiTableHeaderCell>
Metadata Feature Value
</EuiTableHeaderCell>
</EuiTableHeader>
{items.map((item) => {
return <EuiFeatureViewMetadataRow name={item.name} value={item.value} />
})}
</EuiTable>
)
}

// 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 (
<EuiEmptyPrompt
iconType="alert"
color="danger"
title={<h2>Unable to load your demo page</h2>}
body={
<p>
There was an error loading the Dashboard application. Contact your
administrator for help.
</p>
}
/>
);
}

// Feast UI uses the Elastic UI component system.
// <EuiFlexGroup> and <EuiFlexItem> are particularly
// useful for layouts.
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" />
<FeatureViewMetadataTable data={data.object.spec} />
</EuiPanel>
</EuiFlexItem>
</EuiFlexGroup>
</React.Fragment>
)}
<EuiFlexItem grow={1}>
<p>Hello World. The following is fetched data.</p>
<EuiSpacer />
{isSuccess && data && (
<EuiCode>
<pre>{JSON.stringify(data, null, 2)}</pre>
</EuiCode>
)}
</EuiFlexItem>
<EuiFlexItem grow={2}>
<p>... and this is data from Feast UI&rsquo;s own query.</p>
<EuiSpacer />
{feastObjectQuery.isSuccess && feastObjectQuery.data && (
<EuiCode>
<pre>{JSON.stringify(feastObjectQuery.data, null, 2)}</pre>
</EuiCode>
)}
</EuiFlexItem>
</EuiFlexGroup>
</React.Fragment>
);
};

export default DemoCustomTab;
export default DemoCustomTab;
2 changes: 1 addition & 1 deletion ui/src/custom-tabs/reguar-fv-demo-tab/useDemoQuery.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,4 +41,4 @@ const useDemoQuery = ({ featureView }: DemoQueryInterface) => {
};

export default useDemoQuery;
export type { DemoDataType };
export type { DemoDataType };
6 changes: 6 additions & 0 deletions ui/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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: [
{
Expand Down
3 changes: 0 additions & 3 deletions ui/src/parsers/feastFeatureViews.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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(),
Expand Down Expand Up @@ -56,7 +54,6 @@ const FeastFeatureViewSchema = z.object({
})
)
.optional(),
metadata: jsonSchema.optional(),
}),
});

Expand Down
11 changes: 0 additions & 11 deletions ui/src/parsers/jsonType.ts
View file
Open in desktop

This file was deleted.