Merge pull request #301 from Arquisoft/docs/documentation-fixes

Docs/documentation fixes 5 to 8

docs/diagrams/c4/C4-Level1.puml

@@ -3,10 +3,9 @@
 !include <c4/C4_Context.puml>
 
 title Context Diagram for the Kiwiq System (C4 Level 1)
-AddElementTag("Person", $bgColor="#salmon", $fontColor="#white")
-AddElementTag("Internal system", $bgColor="#peachpuff", $fontColor="#963b17")
-AddElementTag("External system", $bgColor="#darksalmon", $fontColor="#white")
-
+AddElementTag("Person", $bgColor="#darkgreen", $fontColor="#white")
+AddElementTag("Internal system", $bgColor="#darkseagreen", $fontColor="#003300")
+AddElementTag("External system", $bgColor="#gray", $fontColor="#white")
 'Containers
 Person(player, Player,"An authenticated player that wants to play Kiwiq games", $tags="Person")
 

docs/diagrams/c4/C4-Level2.puml

@@ -3,10 +3,10 @@
 !include <c4/C4_Context.puml>
 
 title Container Diagram for the Kiwiq System (C4 Level 2)
-AddElementTag("Person", $bgColor="#salmon", $fontColor="#white")
-AddElementTag("Internal system", $bgColor="#peachpuff", $fontColor="#963b17")
+AddElementTag("Person", $bgColor="#darkgreen", $fontColor="#white")
+AddElementTag("Internal system", $bgColor="#darkseagreen", $fontColor="#003300")
 AddElementTag("External system", $bgColor="#gray", $fontColor="#white")
-AddElementTag("Database", $bgColor="#darksalmon", $fontColor="#white")
+AddElementTag("Database", $bgColor="#darkgreen", $fontColor="#white")
 'Containers
 Person(player, Player's Browser,"Preferred browser (Firefox, Chrome, Opera...)")
 

docs/diagrams/c4/C4-Level3.puml

@@ -0,0 +1,48 @@
+@startuml
+!includeurl https://raw.githubusercontent.com/RicardoNiepel/C4-PlantUML/master/C4_Container.puml
+!include <c4/C4_Container.puml>
+!include <c4/C4_Component.puml>
+title Container Diagram for the Kiwiq System (C4 Level 3)
+AddElementTag("Person", $bgColor="#darkgreen", $fontColor="#white")
+AddElementTag("Internal system", $bgColor="#darkseagreen", $fontColor="#003300")
+AddElementTag("External system", $bgColor="#gray", $fontColor="#white")
+AddElementTag("Database", $bgColor="#darkgreen", $fontColor="#white")
+AddElementTag("Component", $bgColor="#darkolivegreen", $fontColor="#white")
+'Containers
+Person(player, Player's Browser,"Preferred browser (Firefox, Chrome, Opera...)")
+
+System_Boundary(wiq,"Kiwiq Server"){
+    Container(proxy,"Proxy","Nginx","Nginx web server", $tags="Internal system")
+    Container(web_app, "Kiwiq Client", "React, Typescript", "nginx web server", $tags="Internal system")
+    System_Boundary(backend_api,"Kiwiq REST API"){
+        Component(auth,"Authentication module")
+        Component(games,"Game module")
+        Component(questions,"Question module")
+        Component(statistics,"Statistics module")
+    }
+
+    Container(question_generator,"Question generator","Java, JPA",".jar file",$tags="Internal system")
+    ContainerDb(database,"Kiwiq Database","PostgreSQL","PostgreSQL docker container", $tags="Database")
+}
+
+System_Ext(wikidata,"WikiData API","REST API", $tags="External system")
+
+'RELATIONS
+Rel(player,proxy,"Uses","HTTPS")
+Rel(proxy,web_app,"Serves","HTTPS")
+Rel(question_generator,wikidata,"Asks for data","SPARQL,HTTPS")
+Rel(question_generator, database,"Stores questions ","JPA")
+
+Rel(web_app,questions,"Asks for question information","JSON,HTTPS")
+Rel(web_app,games,"Plays a game","JSON,HTTPS")
+Rel(web_app,auth,"Ask for login and register","JSON,HTTPS")
+Rel(web_app,statistics,"Asks for statistics","JSON,HTTPS")
+
+
+Rel(games,database,"Stores game/user information","JPA")
+
+Rel(games,questions,"Gets questions")
+Rel(questions,database,"Stores game/user information","JPA")
+Rel(statistics,database,"Stores game/user information","JPA")
+Rel(auth,database,"Stores game/user information","JPA")
+@enduml

docs/diagrams/deployment/DeploymentDiagramLevel1.puml

@@ -0,0 +1,43 @@
+@startuml
+
+title WIQ Deployment View
+
+legend right
+    |Color| Type |
+    |<#darkseagreen>| Container |
+    |<#darkolivegreen>| WIQ Server |
+    |<#OliveDrab>| External Service |
+end legend
+
+node "Server Hosting WIQ" #darkolivegreen {
+  node "KIWIQ Proxy" #darkseagreen
+  node "KIWIQ WebApp Server" #darkseagreen {
+    component "KIWIQ React Application"
+  }
+  node "KIWIQ API" #darkseagreen{
+      component "KIWIQ_API.jar"
+  }
+  node "PostgreSQL Docker" #darkseagreen{
+    database "KIWIQ Database"
+  }
+  node "Question generator" #darkseagreen{
+    component "Question_Generator.jar"
+  }
+  node "Grafana" #darkseagreen
+  node "Prometheus" #darkseagreen
+}
+node "User Computer" #OliveDrab {
+  frame "Web Client"
+}
+node "WikiData Server" #OliveDrab {
+    frame "WikiData REST API"
+}
+"Web Client" ..> "KIWIQ Proxy" : "HTTPS"
+"KIWIQ Proxy" ..> "KIWIQ React Application"
+"KIWIQ React Application" ..> "KIWIQ_API.jar" : "HTTPS"
+"KIWIQ_API.jar" ..> "KIWIQ Database" : "JPA"
+"Question_Generator.jar" ..> "WikiData REST API" : "HTTPS, SPARQL"
+"Question_Generator.jar" ..> "KIWIQ Database" : "JPA"
+"Prometheus" ..> "KIWIQ_API.jar" : "Actuator"
+"Grafana" ..> "Prometheus"
+@enduml

docs/diagrams/deployment/DeploymentDiagramLevel2.puml

@@ -0,0 +1,25 @@
+@startuml
+
+title KIWIQ API Deployment View
+
+legend right
+    |Color| Type |
+    |<#darkseagreen>| WIQ artifact |
+    |<#OliveDrab>| Package |
+end legend
+
+node "KIWIQ_API.jar" #darkseagreen {
+  component "auth" #OliveDrab
+  component "commons"#OliveDrab
+  component "game" #OliveDrab
+  component "questions" #OliveDrab
+  component "statistics" #OliveDrab
+
+}
+"auth" ..> "commons"
+"game" ..> "commons"
+"questions" ..> "commons"
+"statistics" ..> "commons"
+"game" ..> "questions"
+"game" ..> "statistics"
+@enduml

docs/diagrams/sequence/SequenceDiagramGame.puml

@@ -1,34 +1,34 @@
 @startuml Game's life cycle
 title Game Sequence Diagram
-actor Client #darksalmon
-participant API #darksalmon
-database DB #salmon
+actor Client #darkolivegreen
+participant API #darkolivegreen
+database DB #darkolivegreen
 
 skinparam Style strictuml
 skinparam SequenceMessageAlignment center
 
 Client -> API : start game
-activate API #darksalmon
+activate API #darkolivegreen
 API -> DB : store game info
-activate DB #salmon
+activate DB #darkolivegreen
 DB --> API : game info stored
 deactivate DB
 API --> Client : return game info
 deactivate API
-loop #PeachPuff Round
+loop #darkseagreen Round
   Client -> API : start round
-  activate API #darksalmon
+  activate API #darkolivegreen
   API -> DB : ask for question
-  activate DB  #salmon
+  activate DB  #darkolivegreen
   DB --> API : return question
   deactivate DB
   API --> Client : return question with all answers
   deactivate API
   Client -> API  : send chosen answer
-  activate API #darksalmon
+  activate API #darkolivegreen
   API -> API    : check answer is correct
   API -> DB     : update game info
-  activate DB #salmon
+  activate DB #darkolivegreen
   DB --> API    : game info updated
  deactivate DB
   API --> Client : inform user if guessed right
@@ -37,7 +37,7 @@ loop #PeachPuff Round
 end loop One question
 
 API -> DB : [if last round] update ranking
-activate DB #salmon
+activate DB #darkolivegreen
 DB --> API : ranking updated
 deactivate DB
 API --> Client : inform user if guessed right

docs/diagrams/sequence/SequenceDiagramLogIn.puml

@@ -1,30 +1,30 @@
 @startuml login
 title Login Sequence Diagram
-actor Client #darksalmon
-participant API #darksalmon
-database DB #salmon
+actor Client #darkolivegreen
+participant API #darkolivegreen
+database DB #darkolivegreen
 skinparam Style strictuml
 skinparam SequenceMessageAlignment center
 
 Client -> API : enters credentials
-activate API #darksalmon
+activate API #darkolivegreen
 API -> DB    : check credentials correct
-alt #PeachPuff credentials correct
-    activate DB #salmon
+alt #darkseagreen credentials correct
+    activate DB #darkolivegreen
     DB --> API     : returns result
     deactivate DB
     API -> API : generate jwt and refresh tokens
     API -> DB    : save tokens
-    activate DB #salmon
+    activate DB #darkolivegreen
     DB --> API     : saves tokens
     deactivate DB
     API --> Client : return jwt dto
     deactivate API
 else credentials incorrect
-    activate DB #salmon
+    activate DB #darkolivegreen
     DB --> API     : returns error
     deactivate DB
-    activate API #darksalmon
+    activate API #darkolivegreen
     API --> Client : return 403 error
     deactivate API
 end

docs/diagrams/sequence/SequenceDiagramQuestionGeneration.puml

@@ -1,20 +1,20 @@
 @startuml question generator
 title Question Generator Sequence Diagram
-participant QuestionGenerator #darksalmon
-participant WikiDataQS #darksalmon
-database DB #salmon
+participant QuestionGenerator #darkolivegreen
+participant WikiDataQS #darkolivegreen
+database DB #darkolivegreen
 skinparam Style strictuml
 skinparam SequenceMessageAlignment center
 
-loop #PeachPuff Generate question templates
-activate QuestionGenerator #darksalmon
+loop #darkseagreen Generate question templates
+activate QuestionGenerator #darkolivegreen
 QuestionGenerator -> WikiDataQS  : request query template
-activate WikiDataQS #darksalmon
+activate WikiDataQS #darkolivegreen
 QuestionGenerator <-- WikiDataQS  : returns query answers
 deactivate WikiDataQS
 QuestionGenerator -> QuestionGenerator  : process query answer
 QuestionGenerator -> DB  : store answers
-activate DB #salmon
+activate DB #darkolivegreen
 QuestionGenerator -> DB  : store questions
 DB --> QuestionGenerator  :  info saved
 deactivate DB

docs/diagrams/sequence/SequenceDiagramSignUp.puml

@@ -1,31 +1,31 @@
 @startuml sign up
 title Sign Up Sequence Diagram
-actor Client #darksalmon
-participant API #darksalmon
-database DB #salmon
+actor Client #darkolivegreen
+participant API #darkolivegreen
+database DB #darkolivegreen
 skinparam Style strictuml
 skinparam SequenceMessageAlignment center
 
 Client -> API : account details
-activate API #darksalmon
+activate API #darkolivegreen
 API -> API : validate details
 API -> DB  : check email is unused
-alt #PeachPuff email is unused
-    activate DB #salmon
+alt #darkseagreen email is unused
+    activate DB #darkolivegreen
     DB --> API  : email is unused
     deactivate DB
 
     API -> DB  : register user
-    activate DB #salmon
+    activate DB #darkolivegreen
     DB --> API  : user registered
     deactivate DB
     API --> Client  : return confirmation
     deactivate API
 else email is used
-    activate DB #salmon
+    activate DB #darkolivegreen
     DB --> API  : email is used
     deactivate DB
-    activate API #darksalmon
+    activate API #darkolivegreen
     API --> Client  : 400 error
     deactivate API
 end