Skip to content

fix: Fixing Web UI, which fails for the SQL registry #3028

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 1 commit into from
Aug 9, 2022
Merged

fix: Fixing Web UI, which fails for the SQL registry #3028

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 5 additions & 1 deletion ui/CONTRIBUTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,11 @@ There are very few tests for this UI. There is a smoke test that ensures pages c

## Yarn commands

If you would like to simply try things out and see how the UI works, you can simply run the code in this repo. First:
If you would like to simply try things out and see how the UI works, you can simply run the code in this repo.

> **Note**: there is an `.npmrc` which is setup for automatic releases. You'll need to comment out the line in there and continue

First:

### `yarn install`

Expand Down
7 changes: 1 addition & 6 deletions ui/src/custom-tabs/data-tab/DataQuery.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
import { useQuery } from "react-query";

interface DataQueryInterface {
featureView: string | undefined;
}

const DataQuery = (featureView: string) => {
const queryKey = `data-tab-namespace:${featureView}`;

Expand All @@ -13,8 +9,7 @@ const DataQuery = (featureView: string) => {
// Customizing the URL based on your needs
const url = `/demo-custom-tabs/demo.json`;

return fetch(url)
.then((res) => res.json())
return fetch(url).then((res) => res.json());
},
{
enabled: !!featureView, // Only start the query when the variable is not undefined
Expand Down
75 changes: 33 additions & 42 deletions ui/src/custom-tabs/data-tab/DataTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import {
EuiTableRow,
EuiTableRowCell,
} from "@elastic/eui";
import useLoadRegularFeatureView from "../../pages/feature-views/useLoadFeatureView";
import DataQuery from "./DataQuery";

const FeatureViewDataRow = z.object({
Expand All @@ -26,29 +25,25 @@ type FeatureViewDataRowType = z.infer<typeof FeatureViewDataRow>;

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

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

const FeatureViewDataTable = (data: any) => {
var items: FeatureViewDataRowType[] = [];

for (let element in data.data){
for (let element in data.data) {
const row: FeatureViewDataRowType = {
name: element,
value: JSON.stringify(data.data[element], null, 2),
Expand All @@ -60,48 +55,44 @@ const FeatureViewDataTable = (data: any) => {
return (
<EuiTable>
<EuiTableHeader>
<EuiTableHeaderCell>
Data Item Name
</EuiTableHeaderCell>
<EuiTableHeaderCell>
Data Item Value
</EuiTableHeaderCell>
<EuiTableHeaderCell>Data Item Name</EuiTableHeaderCell>
<EuiTableHeaderCell>Data Item Value</EuiTableHeaderCell>
</EuiTableHeader>
{items.map((item) => {
return <EuiFeatureViewDataRow name={item.name} value={item.value} />
return <EuiFeatureViewDataRow name={item.name} value={item.value} />;
})}
</EuiTable>
)
}
);
};

const DataTab = () => {
const fName = "credit_history"
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>
{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>
);
Expand Down
6 changes: 3 additions & 3 deletions ui/src/pages/feature-services/FeatureServiceListingTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,10 +53,10 @@ const FeatureServiceListingTable = ({
},
},
{
name: "Created at",
field: "meta.createdTimestamp",
name: "Last updated",
field: "meta.lastUpdatedTimestamp",
render: (date: Date) => {
return date.toLocaleDateString("en-CA");
return date ? date.toLocaleDateString("en-CA") : "n/a";
},
},
];
Expand Down
22 changes: 14 additions & 8 deletions ui/src/pages/feature-services/FeatureServiceOverviewTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,14 +66,20 @@ const FeatureServiceOverviewTab = () => {
description="Feature Views"
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiStat
title={`${data.meta.createdTimestamp.toLocaleDateString(
"en-CA"
)}`}
description="Created"
/>
</EuiFlexItem>
{data.meta.lastUpdatedTimestamp ? (
<EuiFlexItem>
<EuiStat
title={`${data.meta.lastUpdatedTimestamp.toLocaleDateString(
"en-CA"
)}`}
description="Last updated"
/>
</EuiFlexItem>
) : (
<EuiText>
No last updated timestamp specified on this feature service.
</EuiText>
)}
</EuiFlexGroup>
<EuiFlexGroup>
<EuiFlexItem grow={2}>
Expand Down
3 changes: 2 additions & 1 deletion ui/src/parsers/feastFeatureServices.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@ const FeastFeatureServiceSchema = z.object({
description: z.string().optional(),
}),
meta: z.object({
createdTimestamp: z.string().transform((val) => new Date(val)),
createdTimestamp: z.string().transform((val) => new Date(val)).optional(),
lastUpdatedTimestamp: z.string().transform((val) => new Date(val)).optional(),
}),
});

Expand Down
1 change: 0 additions & 1 deletion ui/src/parsers/feastODFVS.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { z } from "zod";
import { FeastFeatureColumnSchema } from "./feastFeatureViews";
import { FEAST_FEATURE_VALUE_TYPES } from "./types";

const FeatureViewProjectionSchema = z.object({
featureViewProjection: z.object({
Expand Down