Update the filtering in the form to get Inter-service-relations. (Issue

#5766, PR #5777) # Description closes #5766 The dropdown displayed the UUID previously when editing an instance. It does show the correct name now, and the filtering works whether the user types in a UUID or an instance name. https://github.com/inmanta/web-console/assets/44098050/05fe55d8-1bb3-4fd1-acd5-acc1d0e7d51f
inmanta · May 30, 2024 · 6c60de6 · 6c60de6
1 parent 2cdef08
commit 6c60de6
Show file tree

Hide file tree

Showing 16 changed files with 60 additions and 246 deletions.
diff --git a/changelogs/unreleased/5766-improve-filtering-get-instances-form.yml b/changelogs/unreleased/5766-improve-filtering-get-instances-form.yml
@@ -0,0 +1,6 @@
+description: Update the filtering in the form to get Inter-service-relations.
+issue-nr: 5766
+change-type: patch
+destination-branches: [master, iso7]
+sections:
+  bugfix: "{{description}}"
diff --git a/src/Core/Domain/ServiceInstanceParams.ts b/src/Core/Domain/ServiceInstanceParams.ts
@@ -19,9 +19,9 @@ export interface Filter {
   attributeSetEmpty?: AttributeSet[];
   attributeSetNotEmpty?: AttributeSet[];
   deleted?: DeletedRule;
-  id?: string[];
   identity?: { key: string; value: string };
   state?: string[];
+  id_or_service_identity?: string[];
 }
 
 export type DeletedRule = "Include" | "Only" | undefined;
@@ -31,7 +31,6 @@ export enum Kind {
   Id = "Id",
   AttributeSet = "AttributeSet",
   Deleted = "Deleted",
-  IdentityAttribute = "IdentityAttribute",
 }
 
 export const List: Kind[] = [

diff --git a/src/Data/Managers/ServiceInstances/getUrl.test.ts b/src/Data/Managers/ServiceInstances/getUrl.test.ts
@@ -83,7 +83,7 @@ test("getUrl returns correct url for empty filter", () => {
     name,
     filter: {
       state: [],
-      id: [],
+      id_or_service_identity: [],
       attributeSetEmpty: [],
       attributeSetNotEmpty: [],
     },

diff --git a/src/Data/Managers/ServiceInstances/getUrl.ts b/src/Data/Managers/ServiceInstances/getUrl.ts
@@ -34,22 +34,18 @@ type Filter = NonNullable<Query.SubQuery<"GetServiceInstances">["filter"]>;
 const filterToRaw = (filter: Filter) => {
   if (typeof filter === "undefined") return {};
   const {
-    id,
     state,
     deleted,
     attributeSetEmpty: attribute_set_empty,
     attributeSetNotEmpty: attribute_set_not_empty,
-    identity,
+    id_or_service_identity,
   } = filter;
 
-  const identityAttribute = identity ? { [identity.key]: identity.value } : {};
-
   return {
-    id,
     state,
     deleted: deleted === "Only" ? true : undefined,
     attribute_set_empty,
     attribute_set_not_empty,
-    ...identityAttribute,
+    id_or_service_identity,
   };
 };
diff --git a/src/Slices/CreateInstance/UI/CreateInstance.test.tsx b/src/Slices/CreateInstance/UI/CreateInstance.test.tsx
@@ -223,7 +223,7 @@ test("Given the CreateInstance View When creating an instance with Inter-service
   });
   expect(apiHelper.pendingRequests[0]).toEqual({
     method: "GET",
-    url: `/lsm/v1/service_inventory/${InterServiceRelations.editable.entity_type}?include_deployment_progress=False&limit=250&filter.order_id=a`,
+    url: `/lsm/v1/service_inventory/${InterServiceRelations.editable.entity_type}?include_deployment_progress=False&limit=250&filter.id_or_service_identity=a`,
     environment: "env",
   });
 
@@ -235,7 +235,7 @@ test("Given the CreateInstance View When creating an instance with Inter-service
   });
   expect(apiHelper.pendingRequests[0]).toEqual({
     method: "GET",
-    url: `/lsm/v1/service_inventory/${InterServiceRelations.editable.entity_type}?include_deployment_progress=False&limit=250&filter.order_id=ab`,
+    url: `/lsm/v1/service_inventory/${InterServiceRelations.editable.entity_type}?include_deployment_progress=False&limit=250&filter.id_or_service_identity=ab`,
     environment: "env",
   });
   await act(async () => {
@@ -247,7 +247,7 @@ test("Given the CreateInstance View When creating an instance with Inter-service
   });
   expect(apiHelper.pendingRequests[0]).toEqual({
     method: "GET",
-    url: `/lsm/v1/service_inventory/${InterServiceRelations.editable.entity_type}?include_deployment_progress=False&limit=250&filter.order_id=`,
+    url: `/lsm/v1/service_inventory/${InterServiceRelations.editable.entity_type}?include_deployment_progress=False&limit=250&filter.id_or_service_identity=`,
     environment: "env",
   });
 });
@@ -279,7 +279,7 @@ test("Given the CreateInstance View When creating an instance with Inter-service
   });
   expect(apiHelper.pendingRequests[0]).toEqual({
     method: "GET",
-    url: `/lsm/v1/service_inventory/${InterServiceRelations.editable.entity_type}?include_deployment_progress=False&limit=250&filter.order_id=a`,
+    url: `/lsm/v1/service_inventory/${InterServiceRelations.editable.entity_type}?include_deployment_progress=False&limit=250&filter.id_or_service_identity=a`,
     environment: "env",
   });
 
@@ -291,7 +291,7 @@ test("Given the CreateInstance View When creating an instance with Inter-service
   });
   expect(apiHelper.pendingRequests[0]).toEqual({
     method: "GET",
-    url: `/lsm/v1/service_inventory/${InterServiceRelations.editable.entity_type}?include_deployment_progress=False&limit=250&filter.order_id=ab`,
+    url: `/lsm/v1/service_inventory/${InterServiceRelations.editable.entity_type}?include_deployment_progress=False&limit=250&filter.id_or_service_identity=ab`,
     environment: "env",
   });
   await act(async () => {
@@ -303,7 +303,7 @@ test("Given the CreateInstance View When creating an instance with Inter-service
   });
   expect(apiHelper.pendingRequests[0]).toEqual({
     method: "GET",
-    url: `/lsm/v1/service_inventory/${InterServiceRelations.editable.entity_type}?include_deployment_progress=False&limit=250&filter.order_id=`,
+    url: `/lsm/v1/service_inventory/${InterServiceRelations.editable.entity_type}?include_deployment_progress=False&limit=250&filter.id_or_service_identity=`,
     environment: "env",
   });
 });

diff --git a/src/Slices/ServiceInventory/UI/Components/FilterWidget/FilterWidget.tsx b/src/Slices/ServiceInventory/UI/Components/FilterWidget/FilterWidget.tsx
@@ -7,7 +7,6 @@ import { words } from "@/UI/words";
 import { AttributeSets, AttributesFilter } from "./AttributesFilter";
 import { DeletedFilter } from "./DeletedFilter";
 import { IdFilter } from "./IdFilter";
-import { IdentityFilter } from "./IdentityFilter";
 
 interface Props {
   filter: ServiceInstanceParams.Filter;
@@ -20,7 +19,6 @@ export const FilterWidget: React.FC<Props> = ({
   filter,
   setFilter,
   states,
-  identityAttribute,
 }) => {
   const [filterKind, setFilterKind] = useState<ServiceInstanceParams.Kind>(
     ServiceInstanceParams.Kind.State,
@@ -31,8 +29,8 @@ export const FilterWidget: React.FC<Props> = ({
 
   const updateId = (id?: string) =>
     id
-      ? setFilter({ ...filter, id: [id] })
-      : setFilter({ ...filter, id: undefined });
+      ? setFilter({ ...filter, id_or_service_identity: [id] })
+      : setFilter({ ...filter, id_or_service_identity: undefined });
 
   const updateAttributes = ({ empty, notEmpty }: AttributeSets) =>
     setFilter({
@@ -44,26 +42,12 @@ export const FilterWidget: React.FC<Props> = ({
   const updateDeleted = (deleted: ServiceInstanceParams.DeletedRule) =>
     setFilter({ ...filter, deleted });
 
-  const updateIdentity = (value?: string) => {
-    setFilter({
-      ...filter,
-      identity:
-        value && identityAttribute
-          ? { value, key: identityAttribute.key }
-          : undefined,
-    });
-  };
-
   return (
     <ToolbarGroup variant="filter-group" aria-label="FilterBar" role="toolbar">
       <FilterPicker
         setFilterKind={setFilterKind}
         filterKind={filterKind}
-        items={
-          identityAttribute?.pretty
-            ? [...ServiceInstanceParams.List, identityAttribute.pretty]
-            : ServiceInstanceParams.List
-        }
+        items={ServiceInstanceParams.List}
       />
       <SelectOptionFilter
         isVisible={filterKind === ServiceInstanceParams.Kind.State}
@@ -75,7 +59,11 @@ export const FilterWidget: React.FC<Props> = ({
       />
       <IdFilter
         isVisible={filterKind === ServiceInstanceParams.Kind.Id}
-        id={filter.id ? filter.id[0] : undefined}
+        id={
+          filter.id_or_service_identity
+            ? filter.id_or_service_identity[0]
+            : undefined
+        }
         update={updateId}
       />
       <AttributesFilter
@@ -91,16 +79,6 @@ export const FilterWidget: React.FC<Props> = ({
         update={updateDeleted}
         deleted={filter.deleted}
       />
-      {identityAttribute ? (
-        <IdentityFilter
-          identity={{
-            pretty: identityAttribute.pretty,
-            value: filter.identity?.value,
-          }}
-          isVisible={filterKind === identityAttribute.pretty}
-          update={updateIdentity}
-        />
-      ) : null}
     </ToolbarGroup>
   );
 };
diff --git a/src/Slices/ServiceInventory/UI/Components/FilterWidget/IdFilter.tsx b/src/Slices/ServiceInventory/UI/Components/FilterWidget/IdFilter.tsx
@@ -45,7 +45,7 @@ export const IdFilter: React.FC<Props> = ({ id, isVisible, update }) => {
             aria-label="IdFilter"
             onChange={(_event, val) => setIdInput(val)}
             value={idInput}
-            placeholder="Filter by id..."
+            placeholder="Filter by id or identifier..."
             onKeyDown={onIdInput}
           />
         </InputGroupItem>

diff --git a/src/Slices/ServiceInventory/UI/Components/FilterWidget/IdentityFilter.tsx b/src/Slices/ServiceInventory/UI/Components/FilterWidget/IdentityFilter.tsx
diff --git a/src/Slices/ServiceInventory/UI/Components/TableControls/TableControls.tsx b/src/Slices/ServiceInventory/UI/Components/TableControls/TableControls.tsx
@@ -40,11 +40,6 @@ export const TableControls: React.FC<Props> = ({
   const composerEnabled =
     service.owner === null && featureManager.isComposerEnabled();
 
-  const { service_identity, service_identity_display_name } = service;
-  const identityAttribute =
-    service_identity && service_identity_display_name
-      ? { key: service_identity, pretty: service_identity_display_name }
-      : undefined;
   const states = service.lifecycle.states.map((state) => state.name).sort();
 
   const onToggleClick = () => {
@@ -84,12 +79,7 @@ export const TableControls: React.FC<Props> = ({
   return (
     <Toolbar clearAllFilters={() => setFilter({})}>
       <ToolbarContent>
-        <FilterWidget
-          filter={filter}
-          setFilter={setFilter}
-          states={states}
-          identityAttribute={identityAttribute}
-        />
+        <FilterWidget filter={filter} setFilter={setFilter} states={states} />
         <ToolbarGroup align={{ default: "alignRight" }}>
           {composerEnabled ? (
             <ToolbarItem>

diff --git a/src/Slices/ServiceInventory/UI/Spec/IdFilter.spec.ts b/src/Slices/ServiceInventory/UI/Spec/IdFilter.spec.ts
@@ -39,7 +39,7 @@ test("GIVEN The Service Inventory WHEN the user filters on id ('a') THEN only 1
   });
 
   expect(apiHelper.pendingRequests[0].url).toEqual(
-    `/lsm/v1/service_inventory/${Service.a.name}?include_deployment_progress=True&limit=20&filter.id=${ServiceInstance.a.id}&sort=created_at.desc`,
+    `/lsm/v1/service_inventory/${Service.a.name}?include_deployment_progress=True&limit=20&filter.id_or_service_identity=${ServiceInstance.a.id}&sort=created_at.desc`,
   );
 
   await act(async () => {

diff --git a/src/Slices/ServiceInventory/UI/Spec/IdentityFilter.spec.ts b/src/Slices/ServiceInventory/UI/Spec/IdentityFilter.spec.ts
diff --git a/src/Slices/ServiceInventory/UI/Tabs/AttributesTab.tsx b/src/Slices/ServiceInventory/UI/Tabs/AttributesTab.tsx
@@ -30,12 +30,13 @@ export const AttributesTab: React.FC<Props> = ({
   return (
     <TreeTableCellContext.Provider
       value={{
-        onClick: (value, serviceName) =>
+        onClick: (value, serviceName) => {
           navigate(
             "Inventory",
             { service: serviceName as string },
-            `?env=${service?.environment}&state.Inventory.filter.id[0]=${value}`,
-          ),
+            `?env=${service?.environment}&state.Inventory.filter.id_or_service_identity[0]=${value}`,
+          );
+        },
       }}
     >
       <TreeTable