pages: Update diagrams and switch to mermaid

source/diagrams/pages/README.md

@@ -0,0 +1,27 @@
+cg-diagrams Pages
+=================
+
+Information about the cloud.gov Pages diagrams and how to create them. These diagrams are related to the system's different data and workflows using [mermaid diagrams](https://mermaid.js.org/).
+
+## How to
+
+The diagrams are written in mermaid and the diagram images are generated using the [mermaid cli](https://github.com/mermaid-js/mermaid-cli)
+
+### Generating diagram images
+
+#### Install the CLI
+
+`npm install -g @mermaid-js/mermaid-cli`
+
+#### Generate an image from a diagram
+
+`mmdc -i source/diagrams/pages/diagram-a.mmd -o out/diagrams/pages/diagram-a.png --width 2500`
+
+Options:
+- `-i`: Input mermaid diagram
+- `-o`: Output PNG image
+- `--width`: Width of the out put *Note: Diagram width in output is 25000*
+
+#### Storing the diagram images
+
+All generated images should be stored in [out/diagrams/pages](../../../out/diagrams/pages/) and should be named the same as the corresponding mermaid diagram.

source/diagrams/pages/builds.mmd

@@ -0,0 +1,70 @@
+flowchart TB
+  %% Styles
+  classDef userStyle stroke:#167CC5,stroke-width:4px
+  classDef processStyle stroke:#bc0061,stroke-width:4px
+  classDef processSuccessStyle stroke:#bc0061,stroke-width:4px
+  classDef decisionStyle stroke:#ea8d02,stroke-width:4px
+  classDef saasStyle stroke:#f2ff07,stroke-width:4px
+  classDef dbStyle stroke:#010daf,stroke-width:4px
+
+  %% Component Defintions
+
+  %% Users
+  user["👤  <br/> UnPrivileged User <br/> *A Pages customer"]:::userStyle
+
+  %% Processors
+  aws_load_balancer[Load Balancer / Router]:::processStyle
+  pages_app[Pages Web Application <br/> *Node.js]:::processStyle
+  pages_builder[Pages Builder <br/> Starts a site build <br/> *Node.js]:::processStyle
+  pages_build_container[Pages Build Container <br/> Builds and publishes site <br/> *Docker]:::processStyle
+  control_plane[Control Plane <br/> *CloudFoundry Task]:::processStyle
+
+  %% SaaS
+  gh_source[Customer Site Source Control <br/> *GitHub]:::saasStyle
+
+  %% Store
+  database[(Database <br/> *AWS RDS Postgres)]:::dbStyle
+  key_value_store[(Key/Value Store <br/> *AWS Elasticache Redis)]:::dbStyle
+  s3[(Object Store <br/> *AWS S3)]:::dbStyle
+
+  %% Flow
+  user -- Commits update to source code <br/> HTTPS/443 --> gh_source
+  gh_source -- Webhook request to start build <br/> HTTPS/443 --> aws_load_balancer
+  aws_load_balancer -- Proxy request <br/> HTTPS/443 --> pages_app
+  pages_app -- Creates site build record <br/> HTTPS/443 --> database
+  pages_app -- Starts site build event <br/> HTTPS/443 --> key_value_store
+  pages_builder -- Listens for new site build event <br/> HTTPS/443 --> key_value_store
+  pages_builder -- Sends site build task request <br/> HTTPS/443 --> control_plane
+  control_plane -- Starts site build task <br/> HTTPS/443 --> pages_build_container
+  pages_build_container -- Publishes site files <br/> HTTPS/443 --> s3
+  pages_build_container -- Sends build status <br/> HTTPS/443 --> pages_app
+  pages_build_container -- Sends build logs <br/> HTTPS/443 --> database
+
+  %% Layout
+  subgraph GSA Authorized SaaS Connection
+    gh_source
+  end
+
+  subgraph AWS Gov Cloud
+    aws_load_balancer
+    subgraph cloud.gov platform
+      subgraph Pages cloud.gov production space
+        pages_app
+        pages_build_container
+        pages_builder
+        control_plane
+        subgraph cloud.gov space services
+          database
+          key_value_store
+          s3
+        end
+      end
+    end
+  end
+
+  subgraph Legend
+    direction BT
+    legend_user["👤 User"]:::userStyle
+    legend_process[Process]:::processStyle
+    legend_db[(Database)]:::dbStyle
+  end

source/diagrams/pages/cicd.mmd

@@ -0,0 +1,77 @@
+flowchart TB
+  %% Styles
+  classDef userStyle stroke:#167CC5,stroke-width:4px
+  classDef processStyle stroke:#bc0061,stroke-width:4px
+  classDef processSuccessStyle stroke:#bc0061,stroke-width:4px
+  classDef decisionStyle stroke:#ea8d02,stroke-width:4px
+  classDef saasStyle stroke:#f2ff07,stroke-width:4px
+  classDef dbStyle stroke:#010daf,stroke-width:4px
+
+  %% Component Defintions
+
+  %% Users
+  user["👤  <br/> Privileged User <br/> *A Pages Operator"]:::userStyle
+
+  %% Processors
+  ci_test[Test Source Code <br/> *CI Task]:::processStyle
+  ci_deploy[Deploy Pages App <br/> *CI Tasks]:::processStyle
+  ci_notify_success["✅ <br/> Notify Success Status <br/> *CI Tasks"]:::processSuccessStyle
+  ci_notify_failure["❌ <br/> Notify Failure Status <br/> *CI Tasks"]:::processStyle
+  pages_app[Pages Web Application <br/> *Node.js]:::processStyle
+
+  %% Decisions
+  did_tests_pass{Are tests passing?}:::decisionStyle
+  did_deploy{Did Pages app deploy?}:::decisionStyle
+
+  %% SaaS
+  gh_source[Source Control <br/> *GitHub]:::saasStyle
+
+  %% Store
+  container_registry[(Container Registry Store <br/> *AWS ECR)]:::processStyle
+
+  %% Flow
+  user -- Merges Pull Request <br/> HTTPS/443 --> gh_source
+  ci_test <-- Polls Source Code For Update <br /> SSH/22 --> gh_source
+  ci_test <-- Pulls Test Container Image --> container_registry
+  ci_test -- Runs Tests --> did_tests_pass
+  did_tests_pass -- No --> ci_notify_failure
+  did_tests_pass -- Yes --> ci_deploy
+  ci_deploy <-- Pulls Deploy Container Image --> container_registry
+  ci_deploy --> did_deploy
+  did_deploy -- No --> ci_notify_failure
+  did_deploy -- Yes --> pages_app
+  did_deploy -- Yes --> ci_notify_success
+  ci_notify_success --> gh_source
+  ci_notify_failure --> gh_source
+
+  %% Layout
+  subgraph GSA Authorized SaaS Connection
+    gh_source
+  end
+
+  subgraph AWS Gov Cloud
+    subgraph cloud.gov tooling
+      subgraph CI: Concourse CI
+        ci_test
+        did_tests_pass
+        ci_deploy
+        ci_notify_success
+        ci_notify_failure
+        did_deploy
+      end
+      container_registry
+    end
+    subgraph cloud.gov platform
+      subgraph Pages cloud.gov production space
+        pages_app
+      end
+    end
+  end
+
+  subgraph Legend
+    direction BT
+    legend_user["👤 User"]:::userStyle
+    legend_process[Process]:::processStyle
+    legend_db[(Database)]:::dbStyle
+    legend_decision{Decision}:::decisionStyle
+  end