CodeAlpha_Web-Server-using-Docker/docker.drawio at main · Pmayors/CodeAlpha_Web-Server-using-Docker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<mxfile host="Electron" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/28.0.6 Chrome/138.0.7204.100 Electron/37.2.3 Safari/537.36" version="28.0.6">
  <diagram name="Page-1" id="9w9RMSIOVVoRti71BPeu">
    <mxGraphModel dx="1367" dy="752" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <mxCell id="kMClAFWOrm4Ws88WZ0ih-1" value="" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
          <mxGeometry width="1140" height="920" as="geometry" />
        </mxCell>
        <mxCell id="kMClAFWOrm4Ws88WZ0ih-2" value="&lt;font style=&quot;font-size: 36px;&quot;&gt;&lt;b&gt;Docker Containerization Project - System Architecture&lt;/b&gt;&lt;/font&gt;" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#C6FFFF;" parent="1" vertex="1">
          <mxGeometry width="1140" height="60" as="geometry" />
        </mxCell>
        <mxCell id="kMClAFWOrm4Ws88WZ0ih-4" value="" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
          <mxGeometry y="60" width="1130" height="70" as="geometry" />
        </mxCell>
        <mxCell id="kMClAFWOrm4Ws88WZ0ih-5" value="" style="rounded=1;whiteSpace=wrap;html=1;strokeColor=#FFB570;fillColor=#FFE7D1;" parent="1" vertex="1">
          <mxGeometry x="20" y="180" width="1090" height="730" as="geometry" />
        </mxCell>
        <mxCell id="kMClAFWOrm4Ws88WZ0ih-6" value="&lt;font style=&quot;color: rgb(255, 255, 255); font-size: 18px;&quot;&gt;&lt;b style=&quot;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; AWS EC2&lt;/b&gt;&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#FF8000;" parent="1" vertex="1">
          <mxGeometry x="450" y="160" width="170" height="40" as="geometry" />
        </mxCell>
        <mxCell id="kMClAFWOrm4Ws88WZ0ih-7" value="" style="html=1;verticalLabelPosition=bottom;align=center;labelBackgroundColor=#ffffff;verticalAlign=top;strokeWidth=2;strokeColor=#0080F0;shadow=0;dashed=0;shape=mxgraph.ios7.icons.cloud;" parent="1" vertex="1">
          <mxGeometry x="470" y="170" width="30" height="20" as="geometry" />
        </mxCell>
        <mxCell id="kMClAFWOrm4Ws88WZ0ih-10" value="Ubuntu Server(Docker + Docker Compose)" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
          <mxGeometry x="400" y="200" width="270" height="30" as="geometry" />
        </mxCell>
        <mxCell id="kMClAFWOrm4Ws88WZ0ih-11" value="" style="rounded=1;whiteSpace=wrap;html=1;strokeColor=#25D3FF;fillColor=#88DCFF;" parent="1" vertex="1">
          <mxGeometry x="50" y="280" width="1030" height="610" as="geometry" />
        </mxCell>
        <mxCell id="kMClAFWOrm4Ws88WZ0ih-13" value="&lt;font style=&quot;color: rgb(255, 255, 255); font-size: 14px;&quot;&gt;&lt;b&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;font style=&quot;&quot;&gt;Doc&lt;/font&gt;ker Environment&lt;/b&gt;&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;strokeColor=#0D68FF;fillColor=#3296FF;" parent="1" vertex="1">
          <mxGeometry x="440" y="260" width="180" height="50" as="geometry" />
        </mxCell>
        <mxCell id="kMClAFWOrm4Ws88WZ0ih-14" value="" style="image;sketch=0;aspect=fixed;html=1;points=[];align=center;fontSize=12;image=img/lib/mscae/Docker.svg;" parent="1" vertex="1">
          <mxGeometry x="440" y="270" width="36.59" height="30" as="geometry" />
        </mxCell>
        <mxCell id="kMClAFWOrm4Ws88WZ0ih-15" value="&lt;span style=&quot;font-family: Arial, sans-serif; background-color: rgb(240, 255, 244);&quot;&gt;&lt;font style=&quot;font-size: 18px;&quot;&gt;&lt;b&gt;🌐 Nginx&lt;/b&gt;&lt;/font&gt;&lt;/span&gt;&lt;div&gt;&lt;b&gt;&lt;span style=&quot;color: rgb(102, 102, 102); font-family: Arial, sans-serif; font-size: 11px; background-color: rgb(240, 255, 244);&quot;&gt;Reverse Proxy&lt;/span&gt;&lt;span style=&quot;font-family: Arial, sans-serif; font-size: 14px; background-color: rgb(240, 255, 244);&quot;&gt;&lt;/span&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;span style=&quot;color: rgb(102, 102, 102); font-family: Arial, sans-serif; font-size: 11px; background-color: rgb(240, 255, 244);&quot;&gt;nginx:alpine&lt;/span&gt;&lt;span style=&quot;color: rgb(102, 102, 102); font-family: Arial, sans-serif; font-size: 11px; background-color: rgb(240, 255, 244);&quot;&gt;&lt;/span&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;span style=&quot;color: rgb(102, 102, 102); font-family: Arial, sans-serif; font-size: 11px; background-color: rgb(240, 255, 244);&quot;&gt;Routes traffic&lt;/span&gt;&lt;span style=&quot;color: rgb(102, 102, 102); font-family: Arial, sans-serif; font-size: 11px; background-color: rgb(240, 255, 244);&quot;&gt;&lt;/span&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;span style=&quot;color: rgb(102, 102, 102); font-family: Arial, sans-serif; font-size: 11px; background-color: rgb(240, 255, 244);&quot;&gt;&lt;b&gt;&lt;br&gt;&lt;/b&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;span style=&quot;color: rgb(142, 68, 173); font-family: Arial, sans-serif; font-size: 10px; background-color: rgb(248, 244, 255);&quot;&gt;ENV: NGINX_HOST&lt;/span&gt;&lt;br style=&quot;color: rgb(142, 68, 173); font-family: Arial, sans-serif; font-size: 10px;&quot;&gt;&lt;span style=&quot;color: rgb(142, 68, 173); font-family: Arial, sans-serif; font-size: 10px; background-color: rgb(248, 244, 255);&quot;&gt;ENV: SSL_CERT_PATH&lt;/span&gt;&lt;span style=&quot;color: rgb(102, 102, 102); font-family: Arial, sans-serif; font-size: 11px; background-color: rgb(240, 255, 244);&quot;&gt;&lt;/span&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;span style=&quot;color: rgb(142, 68, 173); font-family: Arial, sans-serif; font-size: 10px; background-color: rgb(248, 244, 255);&quot;&gt;&lt;b&gt;&lt;br&gt;&lt;/b&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style=&quot;color: rgb(255, 255, 255); font-family: Arial, sans-serif; background-color: rgb(231, 76, 60);&quot;&gt;&lt;font style=&quot;font-size: 14px;&quot;&gt;&lt;b&gt;:80&lt;/b&gt;&lt;/font&gt;&lt;/span&gt;&lt;span style=&quot;color: rgb(142, 68, 173); font-family: Arial, sans-serif; font-size: 10px; background-color: rgb(248, 244, 255);&quot;&gt;&lt;/span&gt;&lt;/div&gt;" style="rounded=1;whiteSpace=wrap;html=1;strokeColor=#0FFF29;fillColor=#EEFFE3;" parent="1" vertex="1">
          <mxGeometry x="120" y="310" width="200" height="200" as="geometry" />
        </mxCell>
        <mxCell id="kMClAFWOrm4Ws88WZ0ih-16" value="&lt;span style=&quot;font-family: Arial, sans-serif; font-size: 14px; background-color: rgb(240, 255, 255);&quot;&gt;&lt;b&gt;⚛️ Frontend&lt;/b&gt;&lt;/span&gt;&lt;div&gt;&lt;b&gt;&lt;span style=&quot;color: rgb(102, 102, 102); font-family: Arial, sans-serif; font-size: 11px; background-color: rgb(240, 255, 255);&quot;&gt;HTML/CSS/JS&lt;/span&gt;&lt;span style=&quot;font-family: Arial, sans-serif; font-size: 14px; background-color: rgb(240, 255, 255);&quot;&gt;&lt;/span&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;span style=&quot;color: rgb(102, 102, 102); font-family: Arial, sans-serif; font-size: 11px; background-color: rgb(240, 255, 255);&quot;&gt;Custom Build&lt;/span&gt;&lt;span style=&quot;color: rgb(102, 102, 102); font-family: Arial, sans-serif; font-size: 11px; background-color: rgb(240, 255, 255);&quot;&gt;&lt;/span&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;span style=&quot;color: rgb(102, 102, 102); font-family: Arial, sans-serif; font-size: 11px; background-color: rgb(240, 255, 255);&quot;&gt;Static Files&lt;/span&gt;&lt;span style=&quot;color: rgb(102, 102, 102); font-family: Arial, sans-serif; font-size: 11px; background-color: rgb(240, 255, 255);&quot;&gt;&lt;/span&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;span style=&quot;color: rgb(102, 102, 102); font-family: Arial, sans-serif; font-size: 11px; background-color: rgb(240, 255, 255);&quot;&gt;&lt;b&gt;&lt;br&gt;&lt;/b&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;b&gt;&lt;span style=&quot;color: rgb(142, 68, 173); font-family: Arial, sans-serif; font-size: 10px; background-color: rgb(248, 244, 255);&quot;&gt;ENV: API_BASE_URL&lt;/span&gt;&lt;br style=&quot;color: rgb(142, 68, 173); font-family: Arial, sans-serif; font-size: 10px;&quot;&gt;&lt;span style=&quot;color: rgb(142, 68, 173); font-family: Arial, sans-serif; font-size: 10px; background-color: rgb(248, 244, 255);&quot;&gt;ENV: NODE_ENV&lt;/span&gt;&lt;span style=&quot;color: rgb(102, 102, 102); font-family: Arial, sans-serif; font-size: 11px; background-color: rgb(240, 255, 255);&quot;&gt;&lt;/span&gt;&lt;/b&gt;&lt;/div&gt;&lt;div&gt;&lt;span style=&quot;color: rgb(142, 68, 173); font-family: Arial, sans-serif; font-size: 10px; background-color: rgb(248, 244, 255);&quot;&gt;&lt;b&gt;&lt;br&gt;&lt;/b&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style=&quot;color: rgb(255, 255, 255); font-family: Arial, sans-serif; background-color: rgb(231, 76, 60);&quot;&gt;&lt;font style=&quot;font-size: 14px;&quot;&gt;&lt;b&gt;:80&lt;/b&gt;&lt;/font&gt;&lt;/span&gt;&lt;span style=&quot;color: rgb(142, 68, 173); font-family: Arial, sans-serif; font-size: 10px; background-color: rgb(248, 244, 255);&quot;&gt;&lt;/span&gt;&lt;/div&gt;" style="rounded=1;whiteSpace=wrap;html=1;strokeColor=#2879FF;fillColor=#D9FFFC;" parent="1" vertex="1">
          <mxGeometry x="440" y="360" width="220" height="160" as="geometry" />
        </mxCell>
        <mxCell id="kMClAFWOrm4Ws88WZ0ih-17" value="&lt;span style=&quot;font-family: Arial, sans-serif; font-size: 14px; font-weight: 700; background-color: rgb(255, 254, 240);&quot;&gt;⚙️ Backend&lt;/span&gt;&lt;div&gt;&lt;span style=&quot;color: rgb(102, 102, 102); font-family: Arial, sans-serif; font-size: 11px; background-color: rgb(255, 254, 240);&quot;&gt;Node.js API&lt;/span&gt;&lt;span style=&quot;font-family: Arial, sans-serif; font-size: 14px; font-weight: 700; background-color: rgb(255, 254, 240);&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style=&quot;color: rgb(102, 102, 102); font-family: Arial, sans-serif; font-size: 11px; background-color: rgb(255, 254, 240);&quot;&gt;From Docker Hub&lt;/span&gt;&lt;span style=&quot;color: rgb(102, 102, 102); font-family: Arial, sans-serif; font-size: 11px; background-color: rgb(255, 254, 240);&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style=&quot;color: rgb(102, 102, 102); font-family: Arial, sans-serif; font-size: 11px; background-color: rgb(255, 254, 240);&quot;&gt;Business Logic&lt;/span&gt;&lt;span style=&quot;color: rgb(102, 102, 102); font-family: Arial, sans-serif; font-size: 11px; background-color: rgb(255, 254, 240);&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style=&quot;background-color: rgb(248, 244, 255); color: rgb(142, 68, 173); font-size: 10px; font-family: Arial, sans-serif;&quot;&gt;&lt;br&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style=&quot;background-color: rgb(248, 244, 255); color: rgb(142, 68, 173); font-size: 10px; font-family: Arial, sans-serif;&quot;&gt;ENV: DB_HOST&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style=&quot;color: rgb(102, 102, 102); font-family: Arial, sans-serif; font-size: 11px; background-color: rgb(255, 254, 240);&quot;&gt;&lt;span style=&quot;color: rgb(142, 68, 173); font-size: 10px; background-color: rgb(248, 244, 255);&quot;&gt;ENV: JWT_SECRET&lt;/span&gt;&lt;br style=&quot;color: rgb(142, 68, 173); font-size: 10px;&quot;&gt;&lt;span style=&quot;color: rgb(142, 68, 173); font-size: 10px; background-color: rgb(248, 244, 255);&quot;&gt;ENV: PORT=3000&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style=&quot;color: rgb(102, 102, 102); font-family: Arial, sans-serif; font-size: 11px; background-color: rgb(255, 254, 240);&quot;&gt;&lt;span style=&quot;color: rgb(142, 68, 173); font-size: 10px; background-color: rgb(248, 244, 255);&quot;&gt;&lt;br&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style=&quot;color: rgb(255, 255, 255); font-family: Arial, sans-serif; font-weight: 700; background-color: rgb(231, 76, 60);&quot;&gt;&lt;font style=&quot;font-size: 14px;&quot;&gt;:3000&lt;/font&gt;&lt;/span&gt;&lt;/div&gt;" style="rounded=1;whiteSpace=wrap;html=1;strokeColor=#FFFF00;fillColor=#FFFEEC;" parent="1" vertex="1">
          <mxGeometry x="750" y="360" width="230" height="170" as="geometry" />
        </mxCell>
        <mxCell id="kMClAFWOrm4Ws88WZ0ih-18" value="" style="rounded=1;whiteSpace=wrap;html=1;strokeColor=#99004D;fillColor=#E7D9FF;" parent="1" vertex="1">
          <mxGeometry x="110" y="630" width="910" height="220" as="geometry" />
        </mxCell>
        <mxCell id="kMClAFWOrm4Ws88WZ0ih-20" value="Default Network&amp;nbsp;" style="rounded=1;whiteSpace=wrap;html=1;strokeColor=#08FF1E;fillColor=#0FFF14;" parent="1" vertex="1">
          <mxGeometry x="170" y="520" width="150" height="30" as="geometry" />
        </mxCell>
        <mxCell id="kMClAFWOrm4Ws88WZ0ih-21" value="&lt;span style=&quot;font-family: Arial, sans-serif; font-size: 14px; font-weight: 700; background-color: rgb(255, 245, 243);&quot;&gt;📈 Prometheus&lt;/span&gt;&lt;div&gt;&lt;span style=&quot;color: rgb(102, 102, 102); font-family: Arial, sans-serif; font-size: 11px; background-color: rgb(255, 245, 243);&quot;&gt;Metrics Collection&lt;/span&gt;&lt;span style=&quot;font-family: Arial, sans-serif; font-size: 14px; font-weight: 700; background-color: rgb(255, 245, 243);&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style=&quot;color: rgb(102, 102, 102); font-family: Arial, sans-serif; font-size: 11px; background-color: rgb(255, 245, 243);&quot;&gt;prom/prometheus&lt;/span&gt;&lt;span style=&quot;color: rgb(102, 102, 102); font-family: Arial, sans-serif; font-size: 11px; background-color: rgb(255, 245, 243);&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style=&quot;color: rgb(102, 102, 102); font-family: Arial, sans-serif; font-size: 11px; background-color: rgb(255, 245, 243);&quot;&gt;&lt;br&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style=&quot;color: rgb(142, 68, 173); font-family: Arial, sans-serif; font-size: 10px; background-color: rgb(248, 244, 255);&quot;&gt;ENV: SCRAPE_INTERVAL&lt;/span&gt;&lt;br style=&quot;color: rgb(142, 68, 173); font-family: Arial, sans-serif; font-size: 10px;&quot;&gt;&lt;span style=&quot;color: rgb(142, 68, 173); font-family: Arial, sans-serif; font-size: 10px; background-color: rgb(248, 244, 255);&quot;&gt;ENV: RETENTION_TIME&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style=&quot;font-size: 18px; background-color: rgb(231, 76, 60); color: rgb(255, 255, 255); font-family: Arial, sans-serif; font-weight: 700;&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;background-color: rgb(231, 76, 60); color: rgb(255, 255, 255); font-family: Arial, sans-serif; font-weight: 700;&quot;&gt;&lt;font style=&quot;font-size: 14px;&quot;&gt;9090&lt;/font&gt;&lt;/span&gt;&lt;/div&gt;" style="rounded=1;whiteSpace=wrap;html=1;strokeColor=#FF0D08;fillColor=#FFFAF9;" parent="1" vertex="1">
          <mxGeometry x="360" y="660" width="190" height="160" as="geometry" />
        </mxCell>
        <mxCell id="kMClAFWOrm4Ws88WZ0ih-22" value="&lt;span style=&quot;font-family: Arial, sans-serif; font-size: 14px; font-weight: 700; background-color: rgb(243, 247, 255);&quot;&gt;📊 cAdvisor&lt;/span&gt;&lt;div&gt;&lt;span style=&quot;color: rgb(102, 102, 102); font-family: Arial, sans-serif; font-size: 11px; background-color: rgb(243, 247, 255);&quot;&gt;Container Metrics&lt;/span&gt;&lt;span style=&quot;font-family: Arial, sans-serif; font-size: 14px; font-weight: 700; background-color: rgb(243, 247, 255);&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style=&quot;color: rgb(102, 102, 102); font-family: Arial, sans-serif; font-size: 11px; background-color: rgb(243, 247, 255);&quot;&gt;Resource Monitor&lt;/span&gt;&lt;span style=&quot;color: rgb(102, 102, 102); font-family: Arial, sans-serif; font-size: 11px; background-color: rgb(243, 247, 255);&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style=&quot;color: rgb(102, 102, 102); font-family: Arial, sans-serif; font-size: 11px; background-color: rgb(243, 247, 255);&quot;&gt;&lt;br&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style=&quot;color: rgb(142, 68, 173); font-family: Arial, sans-serif; font-size: 10px; background-color: rgb(248, 244, 255);&quot;&gt;ENV: HOUSEKEEPING_INTERVAL&lt;/span&gt;&lt;span style=&quot;color: rgb(102, 102, 102); font-family: Arial, sans-serif; font-size: 11px; background-color: rgb(243, 247, 255);&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style=&quot;font-size: 14px; background-color: rgb(231, 76, 60); color: rgb(255, 255, 255); font-weight: 700; font-family: Arial, sans-serif;&quot;&gt;:8085&lt;/span&gt;&lt;/div&gt;" style="rounded=1;whiteSpace=wrap;html=1;strokeColor=#4932FF;fillColor=#ECFFFC;" parent="1" vertex="1">
          <mxGeometry x="590" y="660" width="180" height="160" as="geometry" />
        </mxCell>
        <mxCell id="kMClAFWOrm4Ws88WZ0ih-23" value="&lt;div&gt;&lt;span style=&quot;font-family: Arial, sans-serif; font-weight: 700; background-color: rgb(255, 248, 243);&quot;&gt;&lt;font style=&quot;font-size: 14px;&quot;&gt;&lt;br&gt;&lt;/font&gt;&lt;/span&gt;&lt;/div&gt;&lt;span style=&quot;font-family: Arial, sans-serif; font-weight: 700; background-color: rgb(255, 248, 243);&quot;&gt;&lt;font style=&quot;font-size: 14px;&quot;&gt;&lt;div&gt;&lt;span style=&quot;color: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));&quot;&gt;&lt;br&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style=&quot;color: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));&quot;&gt;📋 Grafana&lt;/span&gt;&lt;/div&gt;&lt;/font&gt;&lt;/span&gt;&lt;div&gt;&lt;font style=&quot;font-size: 12px;&quot;&gt;&lt;span style=&quot;color: rgb(102, 102, 102); font-family: Arial, sans-serif; background-color: rgb(255, 248, 243);&quot;&gt;Dashboards&lt;/span&gt;&lt;br style=&quot;color: rgb(102, 102, 102); font-family: Arial, sans-serif; background-color: rgb(255, 248, 243);&quot;&gt;&lt;/font&gt;&lt;/div&gt;&lt;div&gt;&lt;div style=&quot;color: rgb(102, 102, 102); line-height: 1.4; font-family: Arial, sans-serif;&quot; class=&quot;container-details&quot;&gt;&lt;font size=&quot;3&quot;&gt;Visualization&lt;/font&gt;&lt;/div&gt;&lt;/div&gt;&lt;div style=&quot;color: rgb(102, 102, 102); line-height: 1.4; font-family: Arial, sans-serif;&quot; class=&quot;container-details&quot;&gt;&lt;span style=&quot;color: rgb(142, 68, 173); font-size: 10px; background-color: rgb(248, 244, 255);&quot;&gt;ENV: GF_SECURITY_ADMIN_PASSWORD&lt;/span&gt;&lt;br style=&quot;color: rgb(142, 68, 173); font-size: 10px;&quot;&gt;&lt;span style=&quot;color: rgb(142, 68, 173); font-size: 10px; background-color: rgb(248, 244, 255);&quot;&gt;ENV: GF_SERVER_ROOT_URL&lt;/span&gt;&lt;font size=&quot;3&quot;&gt;&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;color: rgb(102, 102, 102); line-height: 1.4; font-family: Arial, sans-serif;&quot; class=&quot;container-details&quot;&gt;&lt;span style=&quot;background-color: rgb(231, 76, 60); color: rgb(255, 255, 255); font-weight: 700;&quot;&gt;&lt;font size=&quot;3&quot;&gt;:3000&lt;/font&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;br&gt;&lt;/div&gt;&lt;div&gt;&lt;br&gt;&lt;/div&gt;" style="rounded=1;whiteSpace=wrap;html=1;strokeColor=#FF2F0F;fillColor=#FFE1DC;" parent="1" vertex="1">
          <mxGeometry x="800" y="650" width="180" height="170" as="geometry" />
        </mxCell>
        <mxCell id="kMClAFWOrm4Ws88WZ0ih-24" value="&lt;span style=&quot;color: rgb(255, 255, 255); font-family: Arial, sans-serif; font-weight: 700; text-align: start; background-color: rgb(155, 89, 182);&quot;&gt;&lt;font style=&quot;font-size: 18px;&quot;&gt;📊 Monitoring Stack&lt;/font&gt;&lt;/span&gt;" style="rounded=1;whiteSpace=wrap;html=1;strokeColor=#FF1E8C;fillColor=#CC00CC;" parent="1" vertex="1">
          <mxGeometry x="140" y="610" width="210" height="30" as="geometry" />
        </mxCell>
        <mxCell id="sFclhdmLAi877BYuhwAw-2" value="&lt;span style=&quot;color: rgb(255, 255, 255); font-family: Arial, sans-serif; font-weight: 700; text-align: start; background-color: rgb(142, 68, 173);&quot;&gt;&lt;font style=&quot;font-size: 11px;&quot;&gt;Monitor Network&lt;/font&gt;&lt;/span&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#CC00CC;strokeColor=#CC00CC;" vertex="1" parent="1">
          <mxGeometry x="140" y="640" width="100" height="10" as="geometry" />
        </mxCell>
        <mxCell id="sFclhdmLAi877BYuhwAw-3" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#E6D5E5;" vertex="1" parent="1">
          <mxGeometry x="90" y="70" width="200" height="50" as="geometry" />
        </mxCell>
        <mxCell id="sFclhdmLAi877BYuhwAw-12" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="sFclhdmLAi877BYuhwAw-4" target="sFclhdmLAi877BYuhwAw-10">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="sFclhdmLAi877BYuhwAw-4" value="User" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
          <mxGeometry x="130" y="80" width="60" height="30" as="geometry" />
        </mxCell>
        <mxCell id="sFclhdmLAi877BYuhwAw-5" value="" style="points=[[0.35,0,0],[0.98,0.51,0],[1,0.71,0],[0.67,1,0],[0,0.795,0],[0,0.65,0]];verticalLabelPosition=bottom;sketch=0;html=1;verticalAlign=top;aspect=fixed;align=center;pointerEvents=1;shape=mxgraph.cisco19.user;fillColor=#005073;strokeColor=none;" vertex="1" parent="1">
          <mxGeometry x="100" y="75" width="40" height="40" as="geometry" />
        </mxCell>
        <mxCell id="sFclhdmLAi877BYuhwAw-10" value="" style="sketch=0;pointerEvents=1;shadow=0;dashed=0;html=1;strokeColor=none;fillColor=#434445;aspect=fixed;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;align=center;outlineConnect=0;shape=mxgraph.vvd.web_browser;" vertex="1" parent="1">
          <mxGeometry x="230" y="74.5" width="50" height="35.5" as="geometry" />
        </mxCell>
        <mxCell id="sFclhdmLAi877BYuhwAw-13" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=1;exitDx=0;exitDy=0;entryX=0.352;entryY=0.05;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="sFclhdmLAi877BYuhwAw-4" target="kMClAFWOrm4Ws88WZ0ih-15">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="sFclhdmLAi877BYuhwAw-14" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0.045;entryY=0.317;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="kMClAFWOrm4Ws88WZ0ih-15" target="kMClAFWOrm4Ws88WZ0ih-16">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="sFclhdmLAi877BYuhwAw-15" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0.043;entryY=0.471;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="kMClAFWOrm4Ws88WZ0ih-16" target="kMClAFWOrm4Ws88WZ0ih-17">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="sFclhdmLAi877BYuhwAw-16" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.75;exitDx=0;exitDy=0;entryX=0.955;entryY=0.8;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="kMClAFWOrm4Ws88WZ0ih-17" target="kMClAFWOrm4Ws88WZ0ih-16">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="sFclhdmLAi877BYuhwAw-18" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.626;entryY=0.045;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="kMClAFWOrm4Ws88WZ0ih-16" target="kMClAFWOrm4Ws88WZ0ih-18">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="sFclhdmLAi877BYuhwAw-19" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.659;entryY=0.045;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="kMClAFWOrm4Ws88WZ0ih-17" target="kMClAFWOrm4Ws88WZ0ih-18">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="sFclhdmLAi877BYuhwAw-20" value="" style="image;sketch=0;aspect=fixed;html=1;points=[];align=center;fontSize=12;image=img/lib/mscae/Docker.svg;" vertex="1" parent="1">
          <mxGeometry x="60" y="790" width="50" height="41" as="geometry" />
        </mxCell>
        <mxCell id="sFclhdmLAi877BYuhwAw-21" value="" style="image;sketch=0;aspect=fixed;html=1;points=[];align=center;fontSize=12;image=img/lib/mscae/Docker.svg;" vertex="1" parent="1">
          <mxGeometry x="50" y="340" width="50" height="41" as="geometry" />
        </mxCell>
        <mxCell id="sFclhdmLAi877BYuhwAw-22" value="" style="image;sketch=0;aspect=fixed;html=1;points=[];align=center;fontSize=12;image=img/lib/mscae/Docker.svg;" vertex="1" parent="1">
          <mxGeometry x="1030" y="779" width="50" height="41" as="geometry" />
        </mxCell>
        <mxCell id="sFclhdmLAi877BYuhwAw-24" value="" style="image;sketch=0;aspect=fixed;html=1;points=[];align=center;fontSize=12;image=img/lib/mscae/Docker.svg;" vertex="1" parent="1">
          <mxGeometry x="1000" y="330" width="50" height="41" as="geometry" />
        </mxCell>
        <mxCell id="sFclhdmLAi877BYuhwAw-26" value="&lt;font style=&quot;font-size: 14px; color: rgb(255, 255, 255);&quot;&gt;Docker Hub&lt;/font&gt;&lt;div&gt;pmayors/backend&lt;/div&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#4F97FF;" vertex="1" parent="1">
          <mxGeometry x="880" y="75" width="200" height="41.62" as="geometry" />
        </mxCell>
        <mxCell id="sFclhdmLAi877BYuhwAw-27" value="" style="image;sketch=0;aspect=fixed;html=1;points=[];align=center;fontSize=12;image=img/lib/mscae/Docker.svg;" vertex="1" parent="1">
          <mxGeometry x="890" y="80" width="37.8" height="31" as="geometry" />
        </mxCell>
        <mxCell id="sFclhdmLAi877BYuhwAw-28" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.903;entryY=0.098;entryDx=0;entryDy=0;entryPerimeter=0;" edge="1" parent="1" source="sFclhdmLAi877BYuhwAw-26" target="kMClAFWOrm4Ws88WZ0ih-11">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>