From 4fbd3e8b7cd1b2ee8263089c5e1a4a82904dd70e Mon Sep 17 00:00:00 2001 From: vickytechkey Date: Fri, 23 Oct 2026 21:25:16 +0530 Subject: [PATCH] style(ec2): redesign memory instruction box with solid black background and white text --- src/components/EC2InstanceDetailModal.vue | 228 ++++++++++++++++++---- 1 file changed, 189 insertions(+), 39 deletions(-) diff --git a/src/components/EC2InstanceDetailModal.vue b/src/components/EC2InstanceDetailModal.vue index 991c1aa..61c4562 100644 --- a/src/components/EC2InstanceDetailModal.vue +++ b/src/components/EC2InstanceDetailModal.vue @@ -198,50 +198,66 @@ -
-
-
-
- +
+
+
+ +
{{ $t("How to Enable EC2 Memory Usage Monitoring") }}
-

- AWS CloudWatch only reports hypervisor-level metrics (like CPU and Network) by default. To monitor RAM/Memory usage, AWS provides the free Amazon CloudWatch Agent. -

+
+

+ AWS CloudWatch only reports hypervisor-level metrics (such as CPU and Network) by default. To monitor OS-level RAM / Memory usage, AWS provides the free Amazon CloudWatch Agent. +

-
{{ $t("Step 1: Install CloudWatch Agent (Amazon Linux, Ubuntu, Debian)") }}
- 
# On Amazon Linux / RHEL / CentOS:
-sudo yum install -y amazon-cloudwatch-agent
+                                
+                                

+                                    

+                                        

+                                            1
+                                            {{ $t("Install CloudWatch Agent") }}
+                                        

+                                        
+                                    

+                                    
{{ step1Code }}

+                                

 
-# On Ubuntu / Debian:
-wget https://amazoncloudwatch-agent.s3.amazonaws.com/ubuntu/amd64/latest/amazon-cloudwatch-agent.deb
-sudo dpkg -i -E ./amazon-cloudwatch-agent.deb
+ +
+
+
+ 2 + {{ $t("Configure & Start CloudWatch Agent") }} +
+ +
+ 
{{ step2Code }}
+
-
{{ $t("Step 2: Start Agent with Memory Metrics Configuration") }}
- 
# Save config file /opt/aws/amazon-cloudwatch-agent/etc/amazon-cloudwatch-agent.json:
-sudo tee /opt/aws/amazon-cloudwatch-agent/etc/amazon-cloudwatch-agent.json << 'EOF'
-{
-  "metrics": {
-    "metrics_collected": {
-      "mem": {
-        "measurement": ["mem_used_percent"],
-        "metrics_collection_interval": 60
-      }
-    },
-    "append_dimensions": {
-      "InstanceId": "${aws:InstanceId}"
-    }
-  }
-}
-EOF
-
-# Start the agent:
-sudo /opt/aws/amazon-cloudwatch-agent/bin/amazon-cloudwatch-agent-ctl \
-  -a fetch-config -m ec2 -s -c file:/opt/aws/amazon-cloudwatch-agent/etc/amazon-cloudwatch-agent.json
- -
- - IAM Permission: Ensure the EC2 instance has an IAM Role with the CloudWatchAgentServerPolicy policy attached so it can send metrics to CloudWatch. + +
+
+ +
+ {{ $t("IAM Permission Required") }}: + + Ensure the EC2 instance has an IAM Role with the CloudWatchAgentServerPolicy policy attached so it is authorized to publish metrics to CloudWatch. + +
@@ -374,6 +390,42 @@ export default { hours: 1, loading: false, history: null, + copiedStep: null, + step1Code: `# On Amazon Linux / RHEL / CentOS: +sudo yum install -y amazon-cloudwatch-agent + +# On Ubuntu / Debian (x86_64 / amd64): +wget https://amazoncloudwatch-agent.s3.amazonaws.com/ubuntu/amd64/latest/amazon-cloudwatch-agent.deb +sudo dpkg -i -E ./amazon-cloudwatch-agent.deb + +# On Ubuntu / Debian (Graviton / arm64): +wget https://amazoncloudwatch-agent.s3.amazonaws.com/ubuntu/arm64/latest/amazon-cloudwatch-agent.deb +sudo dpkg -i -E ./amazon-cloudwatch-agent.deb`, + step2Code: `# Save config file /opt/aws/amazon-cloudwatch-agent/etc/amazon-cloudwatch-agent.json: +sudo tee /opt/aws/amazon-cloudwatch-agent/etc/amazon-cloudwatch-agent.json << 'EOF' +{ + "agent": { + "metrics_collection_interval": 60, + "run_as_user": "root" + }, + "metrics": { + "namespace": "CWAgent", + "metrics_collected": { + "mem": { + "measurement": ["mem_used_percent"], + "metrics_collection_interval": 60 + } + }, + "append_dimensions": { + "InstanceId": "\${aws:InstanceId}" + } + } +} +EOF + +# Start and enable the CloudWatch Agent: +sudo /opt/aws/amazon-cloudwatch-agent/bin/amazon-cloudwatch-agent-ctl \\ + -a fetch-config -m ec2 -s -c file:/opt/aws/amazon-cloudwatch-agent/etc/amazon-cloudwatch-agent.json`, charts: { cpu: null, mem: null, @@ -659,6 +711,18 @@ export default { if (val >= 60) return "bg-warning text-dark"; return "bg-info text-dark"; }, + + copyCode(text, stepId) { + if (navigator && navigator.clipboard) { + navigator.clipboard.writeText(text); + this.copiedStep = stepId; + setTimeout(() => { + if (this.copiedStep === stepId) { + this.copiedStep = null; + } + }, 2000); + } + }, }, }; @@ -696,4 +760,90 @@ export default { .font-monospace { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } + +.instruction-box { + background-color: #000000 !important; + color: #ffffff !important; + border: 1px solid #27272a !important; + border-radius: 12px !important; + padding: 24px !important; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important; +} + +.instruction-intro { + color: #e4e4e7 !important; + font-size: 0.95rem; + line-height: 1.6; +} + +.step-card { + background: transparent !important; +} + +.step-number { + display: inline-flex; + align-items: center; + justify-content: center; + width: 22px; + height: 22px; + background-color: #3b82f6; + color: #ffffff; + font-size: 0.75rem; + font-weight: 700; + border-radius: 50%; +} + +.step-title { + font-size: 0.95rem; + color: #ffffff !important; +} + +.copy-btn { + font-size: 0.78rem; + padding: 3px 10px; + border: 1px solid #52525b !important; + color: #f4f4f5 !important; + background-color: #18181b !important; + border-radius: 6px; + transition: all 0.15s ease-in-out; +} + +.copy-btn:hover { + background-color: #27272a !important; + color: #ffffff !important; + border-color: #a1a1aa !important; +} + +.instruction-code { + background-color: #050505 !important; + color: #ffffff !important; + border: 1px solid #27272a !important; + border-radius: 8px !important; + padding: 16px 18px !important; + font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; + font-size: 0.85rem !important; + line-height: 1.55 !important; + white-space: pre !important; + overflow-x: auto !important; + margin-bottom: 0 !important; +} + +.instruction-code code { + color: #ffffff !important; + background-color: transparent !important; +} + +.instruction-iam-box { + background-color: #09090b !important; + border: 1px solid #27272a !important; +} + +.iam-policy-badge { + background-color: #18181b !important; + color: #67e8f9 !important; + border: 1px solid rgba(34, 211, 238, 0.3) !important; + padding: 2px 7px !important; + border-radius: 4px !important; + font-size: 0.82rem !important; +}