Service Dependency Overview

[matKlju]

AS A service designer
I WANT to search, sort, pin and inspect services and their dependencies
SO THAT I can quickly find services, understand their relationships and open the correct service canvas.

Description

Implement the redesigned Service-Module overview page according to the Figma designs.

Acceptance criteria

Search and service information

• Search filters services by partial or closest match while typing.
• An active query displays a clear (X) action that restores the complete listing.
• The service tooltip shows the service name, description, example questions and keywords.

Services table and navigation

• Service names open the corresponding service canvas.
• The Name column supports ascending and descending sorting.
• The Dependencies column shows correct incoming and outgoing dependency counts.
• The Dependencies tooltip explains the icons, directions and interactions.
• Chevrons independently expand and collapse dependency views, allowing multiple views to remain open.
• Dependency indicators focus the selected service:
  • Its dependency view opens and all other views close.
  • If already open, it remains open while the other views close.
  • Clicking it again when it is the only focused view closes it.
• The focused service row is visually highlighted.

Pinned services

• Services can be pinned and unpinned without duplication.
• Pinned services appear in a separate, lightly tinted section above the regular listing.
• Newly created services appear at the bottom of the regular listing.

Expanded dependency view

• Dependencies are presented from left to right:
  1. Services using this service
  2. Current service
  3. Services used by this service
• Each service node shows its clickable name, current status (CTA - status change) and dependency counts.
• Node names open the corresponding service canvas.
• Node dependency indicators locate, focus and expand the selected service while closing other views.
• The expanded area adjusts to its content. (max 5 service nodes stacked - after, expanded view scroll appears)
• Empty dependencies, cycles and self-references display without clipping or overlapping.
• Dependency paths use uniform grey directional flow lines.

Missing or deleted services

• A referenced service that no longer exists remains visible in the dependency view as a deleted-service node.
• Deleted nodes display the original service name with a DELETED status, red border, muted content and strikethrough styling.
• Incoming and outgoing paths to deleted nodes remain visible and retain the correct direction.
• Deleted references are included in the dependency counts.
• Deleted nodes cannot open a service canvas, change status or become the focused service.
• Interacting with a deleted node does not cause navigation or application errors.
• Missing services are not added as rows to the regular or pinned service listings.

Table layout, scrolling and pagination

• The search bar, table header and pagination footer remain fixed and visible.
• Only the service rows, pinned services and expanded dependency views scroll within the table content area.
• At the target viewport size, approximately ten service rows and one expanded view containing up to three stacked nodes fit without clipping.
• When the table content exceeds the available height, a vertical scrollbar appears in the table content area.
• Changing the Rows per page value changes the number of displayed rows and the table content’s scroll range without moving the header or footer.
• Expanding or collapsing dependency views updates the table content height without resizing or displacing the fixed header and footer.
• An expanded dependency view displays up to five stacked service nodes without an internal scrollbar.
• When any dependency column contains more than five stacked nodes, the expanded view keeps its maximum height and displays an independent vertical scrollbar.
• The table-content scrollbar and expanded-view scrollbar operate independently.

Indexing

• Reindexing option is only available for active services.
  • if status is "non active" the Reindex CTA button is greyed out/ unpressable
• The services table includes an Index / Indeks column between Status and the row actions.
• The Index column displays service indexing status as:
  ✓ Success — green
  ⓧ Failed — red
  ⊙ Processing — yellow
• The Index / Indeks column supports ascending and descending sorting, using the same sorting control pattern as other sortable columns.
• Each service row includes a ↺ Reindex / ↺ Indekseeri action.
• Indexing status and Reindex action are shown consistently in both regular and pinned service rows.
• Indexing UI follows the referenced Figma design. - New prototypes added

Existing functionality

• Existing status, Edit, Delete, pagination, Import, Export and Create service functionality continues to work.

[matKlju]

Waiting on figma designs

[matKlju]

@1AhmedYasser

NB! Update: Indexing UI has been added to this task as a new feature.
This AC-s only covers the visual/UI implementation in the Service Dependency Overview.

### Indexing
- [ ] Reindexing option is only available for **active** services.
    - if status is "non active" the Reindex CTA button is greyed out/ unpressable
- [ ] The services table includes an Index / Indeks column between Status and the row actions.
- [ ] The Index column displays service indexing status as:
    ✓ Success — green
    ⓧ Failed — red
    ⊙ Processing — yellow
- [ ] The Index / Indeks column supports ascending and descending sorting, using the same sorting control pattern as other sortable columns.
- [ ] Each service row includes a ↺ Reindex / ↺ Indekseeri action.
- [ ] Indexing status and Reindex action are shown consistently in both regular and pinned service rows.
- [ ] Indexing UI follows the referenced Figma design.

Updated Figma Prototypes

The functional indexing logic is defined in a separate implementation task: #1164