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
Change metadata tab to accept custom JSON file input. 
Signed-off-by: Daniel Kim <danielk@twitter.com>
  • Loading branch information
Daniel Kim committed Jul 1, 2022
commit 9b34987b9ed643adfa572755041e19758dad8221
25 changes: 25 additions & 0 deletions ui/src/custom-tabs/metadata-tab/MetadataQuery.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<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 MetadataQuery;
14 changes: 7 additions & 7 deletions ui/src/custom-tabs/metadata-tab/MetadataTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
Expand Down Expand Up @@ -60,10 +61,10 @@ const FeatureViewMetadataTable = (data: any) => {
<EuiTable>
<EuiTableHeader>
<EuiTableHeaderCell>
Metadata Feature Name
Metadata Item Name
</EuiTableHeaderCell>
<EuiTableHeaderCell>
Metadata Feature Value
Metadata Item Value
</EuiTableHeaderCell>
</EuiTableHeader>
{items.map((item) => {
Expand All @@ -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 (
Expand All @@ -97,7 +97,7 @@ const DemoCustomTab = () => {
<h3>Properties</h3>
</EuiTitle>
<EuiHorizontalRule margin="xs" />
<FeatureViewMetadataTable data={data.object.spec} />
<FeatureViewMetadataTable data={data} />
</EuiPanel>
</EuiFlexItem>
</EuiFlexGroup>
Expand All @@ -107,4 +107,4 @@ const DemoCustomTab = () => {
);
};

export default DemoCustomTab;
export default MetadataTab;
44 changes: 0 additions & 44 deletions ui/src/custom-tabs/metadata-tab/useCustomQuery.tsx
View file
Open in desktop

This file was deleted.