feat: Add tag description in Field in the Feast UI

Signed-off-by: Benjamin Tan <[email protected]>
feast-dev · Sep 28, 2022 · c6726c3 · c6726c3
1 parent e713dda
commit c6726c3
Showing 1 changed file with 19 additions and 2 deletions.
diff --git a/ui/src/pages/features/FeatureOverviewTab.tsx b/ui/src/pages/features/FeatureOverviewTab.tsx
@@ -3,13 +3,16 @@ import {
   EuiHorizontalRule,
   EuiLoadingSpinner,
   EuiTitle,
+  EuiSpacer,
   EuiPanel,
   EuiFlexItem,
+  EuiText,
   EuiDescriptionList,
   EuiDescriptionListTitle,
   EuiDescriptionListDescription,
 } from "@elastic/eui";
 import EuiCustomLink from "../../components/EuiCustomLink";
+import TagsDisplay from "../../components/TagsDisplay";
 import React from "react";
 import { useParams } from "react-router-dom";
 import useLoadFeature from "./useLoadFeature";
@@ -53,14 +56,28 @@ const FeatureOverviewTab = () => {
 
                   <EuiDescriptionListTitle>FeatureView</EuiDescriptionListTitle>
                   <EuiDescriptionListDescription>
-                    <EuiCustomLink 
+                    <EuiCustomLink
                       href={`/p/${projectName}/feature-view/${FeatureViewName}`}
                       to={`/p/${projectName}/feature-view/${FeatureViewName}`}>
-                      {FeatureViewName} 
+                      {FeatureViewName}
                     </EuiCustomLink>
                   </EuiDescriptionListDescription>
                 </EuiDescriptionList>
               </EuiPanel>
+              <EuiSpacer size="m" />
+              <EuiPanel hasBorder={true} grow={false}>
+                <EuiTitle size="xs">
+                  <h3>Tags</h3>
+                </EuiTitle>
+                <EuiHorizontalRule margin="xs" />
+                {featureData?.tags ? (
+                  <TagsDisplay
+                    tags={featureData.tags}
+                  />
+                ) : (
+                  <EuiText>No Tags specified on this field.</EuiText>
+                )}
+              </EuiPanel>
             </EuiFlexItem>
           </EuiFlexGroup>
         </React.Fragment>