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

fix: Fix Feast UI failure with SQL registry Signed-off-by: Danny Chiao <danny@tecton.ai>
feast-dev · Aug 10, 2022 · d584ecd · d584ecd
1 parent 02d1f16
commit d584ecd
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 62 deletions.
diff --git a/ui/CONTRIBUTING.md b/ui/CONTRIBUTING.md
@@ -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` 
 

diff --git a/ui/src/custom-tabs/data-tab/DataQuery.tsx b/ui/src/custom-tabs/data-tab/DataQuery.tsx
@@ -1,9 +1,5 @@
 import { useQuery } from "react-query";
 
-interface DataQueryInterface {
-  featureView: string | undefined;
-}
-
 const DataQuery = (featureView: string) => {
   const queryKey = `data-tab-namespace:${featureView}`;
 
@@ -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

diff --git a/ui/src/custom-tabs/data-tab/DataTab.tsx b/ui/src/custom-tabs/data-tab/DataTab.tsx
@@ -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({
@@ -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),
@@ -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>
   );

diff --git a/ui/src/pages/feature-services/FeatureServiceListingTable.tsx b/ui/src/pages/feature-services/FeatureServiceListingTable.tsx
@@ -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";
       },
     },
   ];

diff --git a/ui/src/pages/feature-services/FeatureServiceOverviewTab.tsx b/ui/src/pages/feature-services/FeatureServiceOverviewTab.tsx
@@ -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}>

diff --git a/ui/src/parsers/feastFeatureServices.ts b/ui/src/parsers/feastFeatureServices.ts
@@ -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(),
   }),
 });
 

diff --git a/ui/src/parsers/feastODFVS.ts b/ui/src/parsers/feastODFVS.ts
@@ -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({