Erstatte mock-data med database-data på ThreatActor og ThreatActorDetailed page

[nikitar]

Beskrivelse

Integrerte pagene: ThreatActor.tsx og ThreatActorDetailed.tsx med CyberDB, altså ersattet mockdata med ekte data via GraphQL og Apollo Client

Oppgaven ble delt i 2 faser: Først ThreatActor integrasjon, deretter ThreatActorDetailed integrasjon. På begge pagene ble det implementert pagination.

ThreatActorGrid (#54)

Backend

• Implementerte getAllThreatActorsGrid() i threatActorRepository ved hjelp av Drizzle.
• La til støtte for pagination, ved bruk av LIMIT, OFFSET OG totalCount, for å støtte skalerbarhet
• For å hente én alias per ThreatActor så brukte jeg en korrelert subquery, for å unngå N+1 problemmet. Se docs. Men det er ment å støtte skalerbarhet ved å unngå unødvendige queries på backend
• Oppdaterte typeDefs og resolvers, slik at frontend kan se vår nye getAllThreatActorsGrid()

Frontend

• Definerte en typet getAllThreatActorsGrid querie under /queires/, som faktisk henter ut ekte data fra CyberDB via Apollo Clinet
• Opprettet en Apollo drever useQuery i ThreatActor som kjører getAllThreatActorsGrid()
• Sendte data fra query til ThreatActorGrid
• Erstattet feltene i ThreatActorCard med data fra querien
• Implementerte pagination på ThreatActorGrid
• Opprettet en /utils/translateCountryToCountryCode.ts for å hente ut flaggene
• Tilpasset fargene på status bassert på hvilken status der er
• Endret litt på styling og dimensjoner

ThreatActorDetailed (#55)

Backend

• Implementerte getThreatActorByMitreId() for å hente detaljer for hver ThreatActor bassert på mitre_id
• Under samme funksjon så henter vi ut en liste med sectors og en liste med aliaser.
• Implementerte separate queries for å hente ut Assosiated Techniques og Software, hvorfor separat? fordi planen var pagination. Dermed støtter getThreatActorTechniques() og getThreatActorSoftwares() pagination.
• Oppdaterte typeDefs og resolver

Frontend

• Definerte nye GraphQL-queries: GET_THREAT_ACTOR_BY_MITRE_ID, GET_THREAT_ACTOR_TECHNIQUES og GET_THREAT_ACTOR_SOFTWARES.
• Brukte useParams() til å hente ut mitre_id fra URLs slik at riktig ThreatActor vises når man trykker på en i ThreatActorGrid
• Opprettet 3 ulike queries i ThreatActorDetailed: 1. Hente ut details 2. Hente ut techniques 3. hente ut software.
• Erstattet mock data i komponentene med Details fra CyberDB, oppdaterte css for noen av attributtene. F.eks farge på danger-level. Og la til attributtet xMitreDeprecated under Overview
• Slått sammen ThreatActorAssosiatedTechniques og ThreatActorAssosiatedSoftware til én ThreatActorAssosiated.tsx, med litt ulik styling bassert på typen. Opprettet nødvendig struktur for pagination
• Implementerte pagination (med useState()), og tilpasset litt responsiv design på ThreatActorAssosiated

Closes #54
Closes #55

KI deklarasjon

KI ble brukt som fagligveileder og progammeringsassistent gjennom arbeidet med Issue #54 og #55. Hovedmålet var å forstå sammenhenge, forstå og lære syntaxen, samt diskutere skalerbarhet ved ulike implementasjoner. KI genererte forslag, og aspekter ved forslagen ble disktert. F.eks var KI sånn sett ikke flink til å lage skalerbare spørringer i repositories. Dette ble validert av meg og rettet, bassert på tidligere sql kunnskap.

• KI var veldig hjelpsom med å foreslå arkitektur struktur mellom frontend <->GraphQL <-> backend <-> CyberDB. Den hjalp aktivt å forstå hvordan kjede mellom frontend og databasen skulle se ut og hvilke roller ulike filer har i den kjedet.
• KI hjalp med å oversette min bakgrunnskunnskap om SQL til riktig Drizzle ORM syntaks. Som bidro til at mot slutten jeg klarte å skrive getThreatActorTechniques() og getThreatActorSoftwares() basically selv.
• KI hjalp med å forstå hvordan pagination implementeres på backend. Forklarte hvordan man implemterer LIMIT og OFFSET på frontend og på backend. Atlså knapper på frontend endrer offset -> ny query med ny offset
• KI hjalp med å endre frontend til å hondtere de nye funksjonene på backend. Altså hvordan man bruker useParams() og useQuery() samt hvilke useState() vi trenger for paginering på ThreatActor og ThreatActorDetailed.
• KI hjalp også å bygge opp ThreatActorAssosiatedTechniques og ThreatActorAssosiatedSoftware til én ThreatActorAssosiated.tsx,
• Styling og responsivt design: KI bidro med CSS-forslag og veiledning rundt layout, komponentdimensjoner, farger og responsiv oppførsel. Forslagene ble vurdert og justert gjennom manuell testing i nettleseren. Blant annet med devtools
• KI ble brukt til debugging, der hvor den fant buggen, forklarte hvorfor buggen ødelegger kjedet fra frontend til database, og deretter foreslo endringer.

Underveis ble KI-genererte kodeforslag gjennomgått og tilpasset prosjektets eksisterende struktur og behov. Implementasjonen foregikk iterativt, der funksjonaliteten ble kontrollert ved hjelp av Apollo Sandbox og manuell testing i frontend. KI ble brukt til å løse mange små oppgaver underveis, som lot meg å henge med og forstå hva som man oppnåde med kodendringer. Dermed fungerte KI som et støtteverktøy for læring, mens de endelige løsningene ble valgt, tilpasset og integrert i prosjektet gjennom eget arbeid.

[azclasen]

Bra jobbet!