From 0245f18aa0283e789c31b56dc88ff6eb6ae2b04f Mon Sep 17 00:00:00 2001
From: Jong Eun Lee <jongeun@lablup.com>
Date: Wed, 4 Sep 2024 22:54:15 +0800
Subject: [PATCH] feat: add BAIPropertyFilter to Endpoint list

---
 react/src/pages/EndpointListPage.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/react/src/pages/EndpointListPage.tsx b/react/src/pages/EndpointListPage.tsx
index 3e370e89ef..c73cb9f6e1 100644
--- a/react/src/pages/EndpointListPage.tsx
+++ b/react/src/pages/EndpointListPage.tsx
@@ -1,3 +1,4 @@
+import BAIPropertyFilter from '../components/BAIPropertyFilter';
 import EndpointOwnerInfo from '../components/EndpointOwnerInfo';
 import EndpointStatusTag from '../components/EndpointStatusTag';
 import Flex from '../components/Flex';
@@ -410,7 +411,7 @@ const EndpointListPage: React.FC<PropsWithChildren> = ({ children }) => {
           paddingRight: token.paddingContentHorizontalSM,
         }}
       >
-        <Flex direction="column" align="start">
+        <Flex direction="row" gap={'sm'}>
           <Radio.Group
             value={selectedLifecycleStage}
             onChange={(e) => {
@@ -434,6 +435,15 @@ const EndpointListPage: React.FC<PropsWithChildren> = ({ children }) => {
               },
             ]}
           />
+          <BAIPropertyFilter
+            filterProperties={[
+              {
+                key: 'name',
+                type: 'string',
+                propertyLabel: t('modelService.EndpointName'),
+              },
+            ]}
+          />
         </Flex>
         <Flex direction="row" gap={'xs'} wrap="wrap" style={{ flexShrink: 1 }}>
           <Flex gap={'xs'}>