fix: compatibility for lifecycle filter of Endpoint (#2691)

### TL;DR

Added support for endpoint lifecycle stage filtering based on server version compatibility.

### What changed?

- Introduced a new feature flag 'endpoint-lifecycle-stage-filter' in the backend client for version 24.03.10 and above.
- Modified the EndpointListPage to conditionally render the lifecycle stage filter Radio.Group based on server support.
- Adjusted the API request to include the lifecycle stage filter only when supported by the server.

### How to test?

1. Ensure you're using a backend server version 24.03.10 or higher.
2. Navigate to the Endpoint List Page.
3. Verify that the lifecycle stage filter (Active/Destroyed) is visible.
4. Test the filter by selecting different options and confirm that the endpoint list updates accordingly.
5. Check that the API requests include the lifecycle stage filter parameter.

### Why make this change?

This change enables more granular filtering of endpoints based on their lifecycle stage, improving user experience and efficiency when managing endpoints. By making this feature version-dependent, it ensures compatibility with older server versions while allowing newer versions to take advantage of the enhanced filtering capabilities.

react/src/pages/EndpointListPage.tsx

@@ -77,13 +77,18 @@ const EndpointListPage: React.FC<PropsWithChildren> = ({ children }) => {
   const isPendingPaginationAndFilter =
     selectedLifecycleStage !== deferredSelectedLifecycleStage ||
     paginationState !== deferredPaginationState;
+  const lifecycleStageFilter =
+    deferredSelectedLifecycleStage === 'created&destroying'
+      ? `lifecycle_stage == "created" | lifecycle_stage == "destroying"`
+      : `lifecycle_stage == "${deferredSelectedLifecycleStage}"`;
 
   const [isRefetchPending, startRefetchTransition] = useTransition();
   const [servicesFetchKey, updateServicesFetchKey] =
     useUpdatableState('initial-fetch');
   const [optimisticDeletingId, setOptimisticDeletingId] = useState<
     string | null
   >();
+
   const [currentUser] = useCurrentUserInfo();
 
   // const [selectedGeneration, setSelectedGeneration] = useState<
@@ -360,10 +365,9 @@ const EndpointListPage: React.FC<PropsWithChildren> = ({ children }) => {
           deferredPaginationState.pageSize,
         limit: deferredPaginationState.pageSize,
         projectID: curProject.id,
-        filter:
-          deferredSelectedLifecycleStage === 'created&destroying'
-            ? `lifecycle_stage == "created" | lifecycle_stage == "destroying"`
-            : `lifecycle_stage == "${deferredSelectedLifecycleStage}"`,
+        filter: baiClient.supports('endpoint-lifecycle-stage-filter')
+          ? lifecycleStageFilter
+          : undefined,
       },
       {
         fetchPolicy: 'network-only',
@@ -411,29 +415,31 @@ const EndpointListPage: React.FC<PropsWithChildren> = ({ children }) => {
         }}
       >
         <Flex direction="column" align="start">
-          <Radio.Group
-            value={selectedLifecycleStage}
-            onChange={(e) => {
-              setSelectedLifecycleStage(e.target?.value);
-              // reset pagination state when filter changes
-              setPaginationState({
-                current: 1,
-                pageSize: paginationState.pageSize,
-              });
-            }}
-            optionType="button"
-            buttonStyle="solid"
-            options={[
-              {
-                label: 'Active',
-                value: 'created&destroying',
-              },
-              {
-                label: 'Destroyed',
-                value: 'destroyed',
-              },
-            ]}
-          />
+          {baiClient.supports('endpoint-lifecycle-stage-filter') && (
+            <Radio.Group
+              value={selectedLifecycleStage}
+              onChange={(e) => {
+                setSelectedLifecycleStage(e.target?.value);
+                // reset pagination state when filter changes
+                setPaginationState({
+                  current: 1,
+                  pageSize: paginationState.pageSize,
+                });
+              }}
+              optionType="button"
+              buttonStyle="solid"
+              options={[
+                {
+                  label: 'Active',
+                  value: 'created&destroying',
+                },
+                {
+                  label: 'Destroyed',
+                  value: 'destroyed',
+                },
+              ]}
+            />
+          )}
         </Flex>
         <Flex direction="row" gap={'xs'} wrap="wrap" style={{ flexShrink: 1 }}>
           <Flex gap={'xs'}>

src/lib/backend.ai-client-esm.ts

@@ -710,6 +710,10 @@ class Client {
     if (this.isManagerVersionCompatibleWith('24.03.7')) {
       this._features['per-kernel-logs'] = true;
     }
+    // ignore next alpha version
+    if(this.isManagerVersionCompatibleWith(['24.03.10'])) {
+      this._features['endpoint-lifecycle-stage-filter'] = true;
+    }
     if (this.isManagerVersionCompatibleWith('24.09')) {
       this._features['extend-login-session'] = true;
     }