Correctly display protobufjs enums

jerive · adchia · commit 408bd9c5368b · 2022-10-05T19:01:41.000-04:00
Signed-off-by: Danny Chiao &lt;danny@tecton.ai&gt;
diff --git a/ui/src/components/FeaturesInServiceDisplay.tsx b/ui/src/components/FeaturesInServiceDisplay.tsx
@@ -8,8 +8,19 @@ interface FeatureViewsListInterace {
   featureViews: feast.core.IFeatureViewProjection[];
 }
 
+interface IFeatureColumnInService {
+  featureViewName: string;
+  name: string;
+  valueType: feast.types.ValueType.Enum;
+}
+
 const FeaturesInServiceList = ({ featureViews }: FeatureViewsListInterace) => {
   const { projectName } = useParams();
+  const items: IFeatureColumnInService[] = featureViews.flatMap(featureView => featureView.featureColumns!.map(featureColumn => ({
+    featureViewName: featureView.featureViewName!,
+    name: featureColumn.name!,
+    valueType: featureColumn.valueType!,
+  })));
 
   const columns = [
     {
@@ -28,22 +39,25 @@ const FeaturesInServiceList = ({ featureViews }: FeatureViewsListInterace) => {
     },
     {
       name: "Feature Column",
-      field: "featureColumn.name",
+      field: "name",
     },
     {
       name: "Value Type",
       field: "valueType",
+      render: (valueType: feast.types.ValueType.Enum) => {
+        return feast.types.ValueType.Enum[valueType];
+      },
     },
   ];
 
-  const getRowProps = (item: feast.core.IFeatureViewProjection) => {
+  const getRowProps = (item: IFeatureColumnInService) => {
     return {
       "data-test-subj": `row-${item.featureViewName}`,
     };
   };
 
   return (
-    <EuiBasicTable columns={columns} items={featureViews} rowProps={getRowProps} />
+    <EuiBasicTable columns={columns} items={items} rowProps={getRowProps} />
   );
 };
 
diff --git a/ui/src/components/FeaturesListDisplay.tsx b/ui/src/components/FeaturesListDisplay.tsx
@@ -31,6 +31,9 @@ const FeaturesList = ({
     {
       name: "Value Type",
       field: "valueType",
+      render: (valueType: feast.types.ValueType.Enum) => {
+        return feast.types.ValueType.Enum[valueType];
+      },
     },
   ];
 
diff --git a/ui/src/pages/data-sources/BatchSourcePropertiesView.tsx b/ui/src/pages/data-sources/BatchSourcePropertiesView.tsx
@@ -27,7 +27,7 @@ const BatchSourcePropertiesView = (props: BatchSourcePropertiesViewProps) => {
                   <EuiDescriptionListDescription>
                     {batchSource.dataSourceClassType.split(".").at(-1)}
                   </EuiDescriptionListDescription>
-                ) : batchSource.type ? (
+                ) : feast.core.DataSource.SourceType[batchSource.type!] ? (
                   <EuiDescriptionListDescription>
                     {batchSource.type}
                   </EuiDescriptionListDescription>
diff --git a/ui/src/pages/data-sources/DataSourceOverviewTab.tsx b/ui/src/pages/data-sources/DataSourceOverviewTab.tsx
@@ -19,6 +19,7 @@ import BatchSourcePropertiesView from "./BatchSourcePropertiesView";
 import FeatureViewEdgesList from "../entities/FeatureViewEdgesList";
 import RequestDataSourceSchemaTable from "./RequestDataSourceSchemaTable";
 import useLoadDataSource from "./useLoadDataSource";
+import { feast } from "../../protos";
 
 const DataSourceOverviewTab = () => {
   let { dataSourceName } = useParams();
@@ -57,7 +58,7 @@ const DataSourceOverviewTab = () => {
                             Source Type
                           </EuiDescriptionListTitle>
                           <EuiDescriptionListDescription>
-                            {data.type}
+                            {feast.core.DataSource.SourceType[data.type]}
                           </EuiDescriptionListDescription>
                         </EuiDescriptionList>
                       </React.Fragment>
diff --git a/ui/src/pages/data-sources/DataSourcesListingTable.tsx b/ui/src/pages/data-sources/DataSourcesListingTable.tsx
@@ -33,6 +33,9 @@ const DatasourcesListingTable = ({
       name: "Type",
       field: "type",
       sortable: true,
+      render: (valueType: feast.types.ValueType.Enum) => {
+        return feast.types.ValueType.Enum[valueType];
+      },
     },
   ];
 
diff --git a/ui/src/pages/data-sources/RequestDataSourceSchemaTable.tsx b/ui/src/pages/data-sources/RequestDataSourceSchemaTable.tsx
@@ -12,7 +12,6 @@ interface RequestDataSourceSchema {
 }
 
 const RequestDataSourceSchemaTable = ({ fields }: RequestDataSourceSchema) => {
-  console.log(fields);
   const columns = [
     {
       name: "Field",
@@ -21,6 +20,9 @@ const RequestDataSourceSchemaTable = ({ fields }: RequestDataSourceSchema) => {
     {
       name: "Value Type",
       field: "valueType",
+      render: (valueType: feast.types.ValueType.Enum) => {
+        return feast.types.ValueType.Enum[valueType];
+      },
     },
   ];
 
diff --git a/ui/src/pages/entities/EntitiesListingTable.tsx b/ui/src/pages/entities/EntitiesListingTable.tsx
@@ -33,8 +33,8 @@ const EntitiesListingTable = ({ entities }: EntitiesListingTableProps) => {
       name: "Type",
       field: "spec.valueType",
       sortable: true,
-      render: (valueType: string) => {
-        return valueType;
+      render: (valueType: feast.types.ValueType.Enum) => {
+        return feast.types.ValueType.Enum[valueType];
       },
     },
     {
diff --git a/ui/src/pages/entities/EntityOverviewTab.tsx b/ui/src/pages/entities/EntityOverviewTab.tsx
@@ -20,6 +20,7 @@ import FeatureViewEdgesList from "./FeatureViewEdgesList";
 import useFeatureViewEdgesByEntity from "./useFeatureViewEdgesByEntity";
 import useLoadEntity from "./useLoadEntity";
 import { toDate } from "../../utils/timestamp";
+import { feast } from "../../protos";
 
 const EntityOverviewTab = () => {
   let { entityName } = useParams();
@@ -63,7 +64,7 @@ const EntityOverviewTab = () => {
 
                   <EuiDescriptionListTitle>Value Type</EuiDescriptionListTitle>
                   <EuiDescriptionListDescription>
-                    {data?.spec?.valueType}
+                    {feast.types.ValueType.Enum[data?.spec?.valueType!]}
                   </EuiDescriptionListDescription>
                 </EuiDescriptionList>
               </EuiPanel>
diff --git a/ui/src/pages/feature-views/components/FeatureViewProjectionDisplayPanel.tsx b/ui/src/pages/feature-views/components/FeatureViewProjectionDisplayPanel.tsx
@@ -13,11 +13,14 @@ const FeatureViewProjectionDisplayPanel = (featureViewProjection: RequestDataDis
   const columns = [
     {
       name: "Column Name",
-      field: "name",
+      field: "name"
     },
     {
       name: "Type",
       field: "valueType",
+      render: (valueType: any) => {
+        return feast.types.ValueType.Enum[valueType];
+      },
     },
   ];
 
diff --git a/ui/src/pages/features/FeatureOverviewTab.tsx b/ui/src/pages/features/FeatureOverviewTab.tsx
@@ -16,6 +16,7 @@ import TagsDisplay from "../../components/TagsDisplay";
 import React from "react";
 import { useParams } from "react-router-dom";
 import useLoadFeature from "./useLoadFeature";
+import { feast } from "../../protos";
 
 const FeatureOverviewTab = () => {
   let { projectName, FeatureViewName, FeatureName } = useParams();
@@ -51,7 +52,7 @@ const FeatureOverviewTab = () => {
 
                   <EuiDescriptionListTitle>Value Type</EuiDescriptionListTitle>
                   <EuiDescriptionListDescription>
-                    {featureData?.valueType}
+                    {feast.types.ValueType.Enum[featureData?.valueType!]}
                   </EuiDescriptionListDescription>
 
                   <EuiDescriptionListTitle>FeatureView</EuiDescriptionListTitle>

Original file line number	Diff line number	Diff line change
`@@ -31,6 +31,9 @@ const FeaturesList = ({`
`31`	`31`	`{`
`32`	`32`	`name: "Value Type",`
`33`	`33`	`field: "valueType",`
	`34`	`+ render: (valueType: feast.types.ValueType.Enum) => {`
	`35`	`+ return feast.types.ValueType.Enum[valueType];`
	`36`	`+ },`
`34`	`37`	`},`
`35`	`38`	`];`
`36`	`39`
Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,6 @@ interface RequestDataSourceSchema {`
`12`	`12`	`}`
`13`	`13`
`14`	`14`	`const RequestDataSourceSchemaTable = ({ fields }: RequestDataSourceSchema) => {`
`15`		`- console.log(fields);`
`16`	`15`	`const columns = [`
`17`	`16`	`{`
`18`	`17`	`name: "Field",`
`@@ -21,6 +20,9 @@ const RequestDataSourceSchemaTable = ({ fields }: RequestDataSourceSchema) => {`
`21`	`20`	`{`
`22`	`21`	`name: "Value Type",`
`23`	`22`	`field: "valueType",`
	`23`	`+ render: (valueType: feast.types.ValueType.Enum) => {`
	`24`	`+ return feast.types.ValueType.Enum[valueType];`
	`25`	`+ },`
`24`	`26`	`},`
`25`	`27`	`];`
`26`	`28`