style(ec2): redesign memory instruction box with solid black background and white text
All checks were successful
Deploy Beta (NATIVE) / deploy (push) Successful in 49s
All checks were successful
Deploy Beta (NATIVE) / deploy (push) Successful in 49s
This commit is contained in:
parent
ec8ab87996
commit
4fbd3e8b7c
1 changed files with 189 additions and 39 deletions
|
|
@ -198,50 +198,66 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="p-2">
|
||||
<div class="card border-warning mb-4">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title fw-bold text-warning mb-2">
|
||||
<font-awesome-icon icon="exclamation-triangle" class="me-2" />
|
||||
<div v-else class="p-1">
|
||||
<div class="instruction-box mb-4">
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<font-awesome-icon icon="exclamation-triangle" class="text-warning fa-lg me-2" />
|
||||
<h5 class="fw-bold mb-0 text-white">
|
||||
{{ $t("How to Enable EC2 Memory Usage Monitoring") }}
|
||||
</h5>
|
||||
<p class="text-muted">
|
||||
AWS CloudWatch only reports hypervisor-level metrics (like CPU and Network) by default. To monitor RAM/Memory usage, AWS provides the free <strong>Amazon CloudWatch Agent</strong>.
|
||||
</p>
|
||||
</div>
|
||||
<p class="instruction-intro mb-4">
|
||||
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 <strong>Amazon CloudWatch Agent</strong>.
|
||||
</p>
|
||||
|
||||
<h6 class="fw-bold mt-4">{{ $t("Step 1: Install CloudWatch Agent (Amazon Linux, Ubuntu, Debian)") }}</h6>
|
||||
<pre class="bg-dark text-light p-3 rounded font-monospace small"><code># On Amazon Linux / RHEL / CentOS:
|
||||
sudo yum install -y amazon-cloudwatch-agent
|
||||
<!-- Step 1 -->
|
||||
<div class="step-card mb-4">
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<div class="fw-bold text-white step-title">
|
||||
<span class="step-number me-2">1</span>
|
||||
{{ $t("Install CloudWatch Agent") }}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm copy-btn"
|
||||
@click="copyCode(step1Code, 'step1')"
|
||||
>
|
||||
<font-awesome-icon :icon="copiedStep === 'step1' ? 'check' : 'copy'" class="me-1" />
|
||||
{{ copiedStep === 'step1' ? $t("Copied!") : $t("Copy") }}
|
||||
</button>
|
||||
</div>
|
||||
<pre class="instruction-code"><code>{{ step1Code }}</code></pre>
|
||||
</div>
|
||||
|
||||
# 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</code></pre>
|
||||
<!-- Step 2 -->
|
||||
<div class="step-card mb-4">
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<div class="fw-bold text-white step-title">
|
||||
<span class="step-number me-2">2</span>
|
||||
{{ $t("Configure & Start CloudWatch Agent") }}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm copy-btn"
|
||||
@click="copyCode(step2Code, 'step2')"
|
||||
>
|
||||
<font-awesome-icon :icon="copiedStep === 'step2' ? 'check' : 'copy'" class="me-1" />
|
||||
{{ copiedStep === 'step2' ? $t("Copied!") : $t("Copy") }}
|
||||
</button>
|
||||
</div>
|
||||
<pre class="instruction-code"><code>{{ step2Code }}</code></pre>
|
||||
</div>
|
||||
|
||||
<h6 class="fw-bold mt-4">{{ $t("Step 2: Start Agent with Memory Metrics Configuration") }}</h6>
|
||||
<pre class="bg-dark text-light p-3 rounded font-monospace small"><code># 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</code></pre>
|
||||
|
||||
<div class="alert alert-info mt-3 mb-0 small">
|
||||
<font-awesome-icon icon="info-circle" class="me-1" />
|
||||
<strong>IAM Permission:</strong> Ensure the EC2 instance has an IAM Role with the <code>CloudWatchAgentServerPolicy</code> policy attached so it can send metrics to CloudWatch.
|
||||
<!-- IAM Info -->
|
||||
<div class="instruction-iam-box p-3 rounded">
|
||||
<div class="d-flex align-items-start">
|
||||
<font-awesome-icon icon="info-circle" class="text-info fa-lg me-2 mt-1" />
|
||||
<div>
|
||||
<strong class="text-white">{{ $t("IAM Permission Required") }}:</strong>
|
||||
<span class="text-white-50 ms-1">
|
||||
Ensure the EC2 instance has an IAM Role with the <code class="iam-policy-badge">CloudWatchAgentServerPolicy</code> policy attached so it is authorized to publish metrics to CloudWatch.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -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;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue