Implementasjon av søking, filtrering og sortering på ThreatActor page

[nikitar]

Beskrivelse

Tidligere støttet katalogen uthenting og paginering av Threat Actors, og filteralternativene var allerede koblet til databasen. Denne implementasjonen gjør det mulig å bruke disse alternativene til å søke og filtrere i hele datagrunnlaget.

Løsningen er utviklet med fokus på skalerbarhet, separasjon av ansvar og inputvalidering

Backend

Search, Filtrering og Sortering

Target oppførsel: Man kan søke, sortere og filtrere samtidig.

Målet er å gjøre getAllThreatActorsGrid() til en fleksibel funksjon som kan håndetere ulike kombinasjoner av parametre, dette tok jeg inspirasjon fra en annen gruppe i medstudenvurderingen. Utvidet getAllThreatActorsGrid() i ThreatActorRepository med conditions til å støtte:

• Utvidet allThreatActorsGrid med valgfrie argumenter for search, filters og sortBy, samt en egen ThreatActorFilterInput.
• Søk etter Threat Actor-navn og MITRE-ID, inkludert delvise treff.
• Filtrering på Country, Region, Motivation, Sector, Status og Danger Level.
• Sortering etter navn og MITRE-ID
• Pagination gjelder fremdeles også inkludert på filter/search/sortering
• totalCount beregnes med de samme søke- og filterconditions som resultatlisten. Som gir data-integritet.
• Search-condition kombineres med OR mellom navn og MITRE-ID
• Filter-options kombineres med AND.

Inputvalidering

Frontend-input skal ikke automatisk antas å være gyldig. Ved å validere argumentene før de når databasen, kan vi begrense unødvendig ressurskrevende queries. Flyten blir:

GraphQL → Resolver → Validation → Repository → Drizzle → MySQL

• Opprettet /validation/threatActorValidation.ts i backend. Som skal samle inn alle funksjon

Dokumentasjon

KI ble brukt til å gå over ThreatActor backend og dokumentere den litt for å få mer presise og forståelige docs til ulike funksjoner.

Frontend

Managment

Jeg har endret ThreatActorFilter.tsx slik at komponenten mottar filterverdiene gjennom props, mens ThreatActors.tsx har ansvaret for å håndtere søk, filtrering og paginering.

Og jeg har delt mellom 2 typer states:

• 1. searchInput/draftFilters - Det som ble skrevet inn/valgt før man trykker på apply/send
• 2. search/activeFilters - Det søkeordet og filter som blir faktisk sendt til backend.

Grunnen til dette er at brukeren skal kunne velge flere filtre uten at det sendes en ny forespørsel til databasen for hvert valg.

Filtrene tas først i bruk når man trykker Apply Filters, og søkeordet aktiveres når man trykker Search eller Enter.

Search

Jeg har oppdatert ThreatActorSearch.tsx slik at søkefeltet nå fungerer sammen med den nye søkelogikken. Bruker props til å kommunisere med ThreatActor og kunne bruke onChange og onSearch. Jeg har også brukt event.preventDefault() for å unngå at hele siden lastes på nytt ved søk

Filter

Problemet var at samspillet mellom sortering search og filtrering var ikke så intuitiv som jeg hadde håpet det skulle være.

Derfor opprettet jeg "Brikker" som viser hvilke søke/filter/sortering operasjoner som er i bruk akkurat nå

I tillegg har jeg opprettet en egen reset knapp som resetter både aktive filtre( clear) og filtre som bare står i filterboxen og som ikke har blitt applied enda (snurre knapp)

KI deklarasjon

KI har blitt brukt som faglig sparringspartner under utviklingen, blant annet til diskusjon av arkitektur, state management, inputvalidering, Drizzle-spørringer og forslag til implementasjon.

Arbeidet har vært gjennomført iterativt, der forslag har blitt diskutert, vurdert og tilpasset prosjektets eksisterende struktur. KI har også bistått med:

• Jeg har blant annet sendt inn eksisterende kode for å få tilbakemeldinger på mulige feil, unødvendig kompliserte løsninger og forbedringer i kodestrukturen.
• KI genererte css filer ettersom dette vil refaktores uansett senere og jeg ville ikke prioritere css i denne fasen
• KI hjalp med å skrive dokumentasjon

Formålet med KI-bruken har vært å støtte problemløsning og forståelse av tekniske valg, ikke bare å generere ferdig kode.

Closes #77

[daniekba]

Liker den detaljerte beskrivelsen i PR