docs: add monitoring with Elastic guide (#3171)

* start elastic article

* save

* open source license expla

* work on installation

* getting elastic to work in docker

* save

* wrote elastic introduction

* diagrams

* installation instructions

* fix elastic

* fix container

* fix elastic using root

* start separate container work

* found correct place to start with docker integration

* got elastic agent to work in separate container

* save

* save

* editing

* explain all the custom metric upload options

* save

* save

* got index creation to work

* got index creation to work

* save

* finished custom metric upload and dashboard creation

* got logs to work

* article done. must still proofread and move docs

* create mermaid diagrams

* fixing diagrams

* article done

* proofread

* Correct spelling

* image updates

* diagram updates

* text updates

* text updates

* text updates

* Elastic language edit

* fix double in

* fix vale

* fix vale

---------

Co-authored-by: RichardJECooke <[email protected]>
Co-authored-by: Tatenda <[email protected]>
Co-authored-by: worktheclock <[email protected]>

astro/src/components/docs/operate/secure-and-monitor/elasticDiagram1.astro

@@ -0,0 +1,27 @@
+---
+import Diagram from 'src/components/mermaid/FlowchartDiagram.astro';
+
+const { alt } = Astro.props;
+
+//language=Mermaid
+const code = `
+graph TB
+  subgraph I[Your server]
+    direction TB
+    subgraph G[Docker]
+      H[(PostgreSQL)]
+    end
+    subgraph C[Docker]
+      A(FusionAuth)
+    end
+  end
+  C --> G
+  style I fill:#999
+`;
+---
+<Diagram {code} alt={alt} />
+<style is:global>
+    foreignObject > div {
+        transform: translateY(-4px);
+    }
+</style>

astro/src/components/docs/operate/secure-and-monitor/elasticDiagram2.astro

@@ -0,0 +1,33 @@
+---
+import Diagram from 'src/components/mermaid/FlowchartDiagram.astro';
+
+const { alt } = Astro.props;
+
+//language=Mermaid
+const code = `
+graph TD
+  subgraph E[Elastic Server]
+    J(Kibana) --> B[(Elasticsearch)]
+    J --> F(Fleet)
+  end
+  subgraph I[Your server]
+    subgraph G[Docker]
+      H[(PostgreSQL)]
+    end
+    subgraph C[Docker]
+      A(FusionAuth)
+      D(Elastic Agent)
+    end
+  end
+  A --> G
+  D --> E
+  style I fill:#999
+  style E fill:#999
+`;
+---
+<Diagram {code} alt={alt} />
+<style is:global>
+    foreignObject > div {
+        transform: translateY(-4px);
+    }
+</style>

astro/src/components/docs/operate/secure-and-monitor/elasticDiagram3.astro

@@ -0,0 +1,29 @@
+---
+import Diagram from 'src/components/mermaid/FlowchartDiagram.astro';
+
+const { alt } = Astro.props;
+
+//language=Mermaid
+const code = `
+graph TD
+  subgraph E[Elastic Server]
+    J(Kibana) --> B[(Elasticsearch)]
+    J --> F(Fleet)
+  end
+  subgraph I[Your server]
+    H[(PostgreSQL)]
+    A(FusionAuth)
+    D(Elastic Agent)
+  end
+  A --> H
+  D --> E
+  style I fill:#999
+  style E fill:#999
+`;
+---
+<Diagram {code} alt={alt} />
+<style is:global>
+    foreignObject > div {
+        transform: translateY(-4px);
+    }
+</style>

astro/src/components/docs/operate/secure-and-monitor/elasticDiagram4.astro

@@ -0,0 +1,36 @@
+---
+import Diagram from 'src/components/mermaid/FlowchartDiagram.astro';
+
+const { alt } = Astro.props;
+
+//language=Mermaid
+const code = `
+graph TD
+  subgraph E[Elastic Server]
+    J(Kibana) --> B[(Elasticsearch)]
+    J --> F(Fleet)
+  end
+  subgraph I[Your server]
+    subgraph G[Docker]
+      H[(PostgreSQL)]
+    end
+    subgraph C[Docker]
+      A(FusionAuth)
+    end
+    subgraph K[Docker]
+      D(Elastic Agent)
+    end
+  end
+  K --> E
+  K --> C
+  C --> G
+  style I fill:#999
+  style E fill:#999
+`;
+---
+<Diagram {code} alt={alt} />
+<style is:global>
+    foreignObject > div {
+        transform: translateY(-4px);
+    }
+</style>

astro/src/components/docs/operate/secure-and-monitor/elasticDiagram5.astro

@@ -0,0 +1,35 @@
+---
+import Diagram from 'src/components/mermaid/FlowchartDiagram.astro';
+
+const { alt } = Astro.props;
+
+//language=Mermaid
+const code = `
+graph TD
+  subgraph Z[Elastic Server]
+    X(Kibana) --> W[(Elasticsearch)]
+    X --> Y(Fleet)
+  end
+  subgraph I[Your server]
+    subgraph G[Docker]
+      H[(PostgreSQL)]
+    end
+    subgraph C[Docker]
+      A(FusionAuth)
+    end
+    subgraph E[Docker]
+      B(Custom metric getter code)
+    end
+  end
+  C --> G
+  B --> |API call| C
+  B --> |API call| W
+  style I fill:#999
+`;
+---
+<Diagram {code} alt={alt} />
+<style is:global>
+    foreignObject > div {
+        transform: translateY(-4px);
+    }
+</style>

astro/src/components/docs/operate/secure-and-monitor/elasticDiagram6.astro

@@ -0,0 +1,39 @@
+---
+import Diagram from 'src/components/mermaid/FlowchartDiagram.astro';
+
+const { alt } = Astro.props;
+
+//language=Mermaid
+const code = `
+graph TD
+  subgraph Z[Elastic Server]
+    X(Kibana) --> W[(Elasticsearch)]
+    X --> Y(Fleet)
+  end
+  subgraph I[Your server]
+    subgraph G[Docker]
+      H[(PostgreSQL)]
+    end
+    subgraph C[Docker]
+      A(FusionAuth)
+    end
+    subgraph E[Docker]
+      B(Custom metric getter code)
+    end
+    subgraph M[Docker]
+      N(Elastic Agent)
+    end
+  end
+  C --> G
+  M --> Z
+  B --> |API call| C
+  B --> |API call| W
+  style I fill:#999
+`;
+---
+<Diagram {code} alt={alt} />
+<style is:global>
+    foreignObject > div {
+        transform: translateY(-4px);
+    }
+</style>