Skip to content

Commit 64603b6

Browse files
adchiaadchia
authored
fix: Fixing Web UI, which fails for the SQL registry (#3028)
fix: Fix Feast UI failure with SQL registry Signed-off-by: Danny Chiao <[email protected]>
1 parent af5123f commit 64603b6

File tree

7 files changed

+58
-62
lines changed

7 files changed

+58
-62
lines changed

‎ui/CONTRIBUTING.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,11 @@ There are very few tests for this UI. There is a smoke test that ensures pages c
5252

5353
## Yarn commands
5454

55-
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:
55+
If you would like to simply try things out and see how the UI works, you can simply run the code in this repo.
56+
57+
> **Note**: there is an `.npmrc` which is setup for automatic releases. You'll need to comment out the line in there and continue
58+
59+
First:
5660

5761
### `yarn install`
5862

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

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
import { useQuery } from "react-query";
22

3-
interface DataQueryInterface {
4-
featureView: string | undefined;
5-
}
6-
73
const DataQuery = (featureView: string) => {
84
const queryKey = `data-tab-namespace:${featureView}`;
95

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

16-
return fetch(url)
17-
.then((res) => res.json())
12+
return fetch(url).then((res) => res.json());
1813
},
1914
{
2015
enabled: !!featureView, // Only start the query when the variable is not undefined

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

Lines changed: 33 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import {
1414
EuiTableRow,
1515
EuiTableRowCell,
1616
} from "@elastic/eui";
17-
import useLoadRegularFeatureView from "../../pages/feature-views/useLoadFeatureView";
1817
import DataQuery from "./DataQuery";
1918

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

2726
const LineHeightProp: React.CSSProperties = {
2827
lineHeight: 1,
29-
}
28+
};
3029

31-
const EuiFeatureViewDataRow = ({name, value}: FeatureViewDataRowType) => {
30+
const EuiFeatureViewDataRow = ({ name, value }: FeatureViewDataRowType) => {
3231
return (
3332
<EuiTableRow>
34-
<EuiTableRowCell>
35-
{name}
36-
</EuiTableRowCell>
33+
<EuiTableRowCell>{name}</EuiTableRowCell>
3734
<EuiTableRowCell textOnly={false}>
3835
<EuiCode data-code-language="text">
39-
<pre style={LineHeightProp}>
40-
{value}
41-
</pre>
36+
<pre style={LineHeightProp}>{value}</pre>
4237
</EuiCode>
4338
</EuiTableRowCell>
4439
</EuiTableRow>
4540
);
46-
}
41+
};
4742

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

51-
for (let element in data.data){
46+
for (let element in data.data) {
5247
const row: FeatureViewDataRowType = {
5348
name: element,
5449
value: JSON.stringify(data.data[element], null, 2),
@@ -60,48 +55,44 @@ const FeatureViewDataTable = (data: any) => {
6055
return (
6156
<EuiTable>
6257
<EuiTableHeader>
63-
<EuiTableHeaderCell>
64-
Data Item Name
65-
</EuiTableHeaderCell>
66-
<EuiTableHeaderCell>
67-
Data Item Value
68-
</EuiTableHeaderCell>
58+
<EuiTableHeaderCell>Data Item Name</EuiTableHeaderCell>
59+
<EuiTableHeaderCell>Data Item Value</EuiTableHeaderCell>
6960
</EuiTableHeader>
7061
{items.map((item) => {
71-
return <EuiFeatureViewDataRow name={item.name} value={item.value} />
62+
return <EuiFeatureViewDataRow name={item.name} value={item.value} />;
7263
})}
7364
</EuiTable>
74-
)
75-
}
65+
);
66+
};
7667

7768
const DataTab = () => {
78-
const fName = "credit_history"
69+
const fName = "credit_history";
7970
const { isLoading, isError, isSuccess, data } = DataQuery(fName);
8071
const isEmpty = data === undefined;
8172

8273
return (
8374
<React.Fragment>
84-
{isLoading && (
85-
<React.Fragment>
86-
<EuiLoadingSpinner size="m" /> Loading
87-
</React.Fragment>
88-
)}
89-
{isEmpty && <p>No feature view with name: {fName}</p>}
90-
{isError && <p>Error loading feature view: {fName}</p>}
91-
{isSuccess && data && (
92-
<React.Fragment>
93-
<EuiFlexGroup>
94-
<EuiFlexItem>
95-
<EuiPanel hasBorder={true}>
96-
<EuiTitle size="xs">
97-
<h3>Properties</h3>
98-
</EuiTitle>
99-
<EuiHorizontalRule margin="xs" />
100-
<FeatureViewDataTable data={data} />
101-
</EuiPanel>
102-
</EuiFlexItem>
103-
</EuiFlexGroup>
104-
</React.Fragment>
75+
{isLoading && (
76+
<React.Fragment>
77+
<EuiLoadingSpinner size="m" /> Loading
78+
</React.Fragment>
79+
)}
80+
{isEmpty && <p>No feature view with name: {fName}</p>}
81+
{isError && <p>Error loading feature view: {fName}</p>}
82+
{isSuccess && data && (
83+
<React.Fragment>
84+
<EuiFlexGroup>
85+
<EuiFlexItem>
86+
<EuiPanel hasBorder={true}>
87+
<EuiTitle size="xs">
88+
<h3>Properties</h3>
89+
</EuiTitle>
90+
<EuiHorizontalRule margin="xs" />
91+
<FeatureViewDataTable data={data} />
92+
</EuiPanel>
93+
</EuiFlexItem>
94+
</EuiFlexGroup>
95+
</React.Fragment>
10596
)}
10697
</React.Fragment>
10798
);

‎ui/src/pages/feature-services/FeatureServiceListingTable.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,10 +53,10 @@ const FeatureServiceListingTable = ({
5353
},
5454
},
5555
{
56-
name: "Created at",
57-
field: "meta.createdTimestamp",
56+
name: "Last updated",
57+
field: "meta.lastUpdatedTimestamp",
5858
render: (date: Date) => {
59-
return date.toLocaleDateString("en-CA");
59+
return date ? date.toLocaleDateString("en-CA") : "n/a";
6060
},
6161
},
6262
];

‎ui/src/pages/feature-services/FeatureServiceOverviewTab.tsx‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -66,14 +66,20 @@ const FeatureServiceOverviewTab = () => {
6666
description="Feature Views"
6767
/>
6868
</EuiFlexItem>
69-
<EuiFlexItem>
70-
<EuiStat
71-
title={`${data.meta.createdTimestamp.toLocaleDateString(
72-
"en-CA"
73-
)}`}
74-
description="Created"
75-
/>
76-
</EuiFlexItem>
69+
{data.meta.lastUpdatedTimestamp ? (
70+
<EuiFlexItem>
71+
<EuiStat
72+
title={`${data.meta.lastUpdatedTimestamp.toLocaleDateString(
73+
"en-CA"
74+
)}`}
75+
description="Last updated"
76+
/>
77+
</EuiFlexItem>
78+
) : (
79+
<EuiText>
80+
No last updated timestamp specified on this feature service.
81+
</EuiText>
82+
)}
7783
</EuiFlexGroup>
7884
<EuiFlexGroup>
7985
<EuiFlexItem grow={2}>

‎ui/src/parsers/feastFeatureServices.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ const FeastFeatureServiceSchema = z.object({
1919
description: z.string().optional(),
2020
}),
2121
meta: z.object({
22-
createdTimestamp: z.string().transform((val) => new Date(val)),
22+
createdTimestamp: z.string().transform((val) => new Date(val)).optional(),
23+
lastUpdatedTimestamp: z.string().transform((val) => new Date(val)).optional(),
2324
}),
2425
});
2526

‎ui/src/parsers/feastODFVS.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { z } from "zod";
22
import { FeastFeatureColumnSchema } from "./feastFeatureViews";
3-
import { FEAST_FEATURE_VALUE_TYPES } from "./types";
43

54
const FeatureViewProjectionSchema = z.object({
65
featureViewProjection: z.object({

0 commit comments

Comments
 (0)