vignesh/Resourcemanagement
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(ec2): style memory trend chart with black screen, green line, and rectangular panels
All checks were successful
Deploy Beta (NATIVE) / deploy (push) Successful in 46s
Details

Browse source
This commit is contained in:
vickytechkey 2026-10-23 21:35:33 +05:30
parent 4fbd3e8b7c
commit 98b4a8ca65
2 changed files with 121 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

135
src/components/EC2InstanceDetailModal.vue
View file

@ -178,16 +178,22 @@
<div v-show="currentTab === 'memory'">
<div v-if="history && history.hasMemoryAgent" class="row g-4">
<div class="col-12">
<div class="alert alert-success d-flex align-items-center">
<font-awesome-icon icon="check-circle" class="fa-2x me-3" />
<div class="alert alert-success d-flex align-items-center mb-3">
<font-awesome-icon icon="check-circle" class="fa-2x me-3 text-success" />
<div>
<h6 class="mb-0 fw-bold">{{ $t("CloudWatch Memory Agent Active") }}</h6>
<small>{{ $t("Receiving live OS memory utilization metrics from CWAgent/mem_used_percent.") }}</small>
</div>
</div>
<div class="card shadow-sm">
<div class="card-header bg-transparent fw-semibold">
{{ $t("Memory Utilization Trend") }}
<div class="card metric-card chart-panel shadow-sm">
<div class="card-header d-flex justify-content-between align-items-center">
<span class="fw-semibold text-white">
<font-awesome-icon icon="memory" class="text-success me-2" />
{{ $t("Memory Utilization Trend") }}
</span>
<span v-if="latestMem != null" class="badge memory-badge">
Current: {{ latestMem }}%
</span>
</div>
<div class="card-body">
<div class="chart-container" style="height: 320px;">
@ -517,17 +523,43 @@ sudo /opt/aws/amazon-cloudwatch-agent/bin/amazon-cloudwatch-agent-ctl \\
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: datasets.length > 1, labels: { color: textColor } },
legend: {
display: datasets.length > 1,
labels: {
color: "#ffffff",
font: { weight: "bold" },
},
},
tooltip: {
backgroundColor: "#18181b",
titleColor: "#ffffff",
bodyColor: "#f4f4f5",
borderColor: "#3f3f46",
borderWidth: 1,
padding: 10,
displayColors: true,
},
},
scales: {
x: {
grid: { color: gridColor },
ticks: { color: textColor, maxTicksLimit: 7 },
grid: {
color: "rgba(255, 255, 255, 0.08)",
borderColor: "#3f3f46",
},
ticks: {
color: "#e4e4e7",
maxTicksLimit: 8,
font: { size: 11 },
},
},
y: {
grid: { color: gridColor },
grid: {
color: "rgba(255, 255, 255, 0.08)",
borderColor: "#3f3f46",
},
ticks: {
color: textColor,
color: "#e4e4e7",
font: { size: 11 },
callback: (v) => `${v}${yUnit}`,
},
},
@ -575,11 +607,16 @@ sudo /opt/aws/amazon-cloudwatch-agent/bin/amazon-cloudwatch-agent-ctl \\
{
label: "Memory %",
data: values,
borderColor: "#ffc107",
backgroundColor: "rgba(255, 193, 7, 0.15)",
borderColor: "#00e676",
backgroundColor: "rgba(0, 230, 118, 0.18)",
fill: true,
tension: 0.25,
pointRadius: values.length > 30 ? 0 : 2,
borderWidth: 2.5,
pointRadius: values.length > 30 ? 2 : 4,
pointHoverRadius: 6,
pointBackgroundColor: "#00e676",
pointBorderColor: "#ffffff",
pointBorderWidth: 1.5,
},
],
"%"
@ -601,11 +638,16 @@ sudo /opt/aws/amazon-cloudwatch-agent/bin/amazon-cloudwatch-agent-ctl \\
{
label: "Memory %",
data: values,
borderColor: "#198754",
backgroundColor: "rgba(25, 135, 84, 0.15)",
borderColor: "#00e676",
backgroundColor: "rgba(0, 230, 118, 0.2)",
fill: true,
tension: 0.25,
pointRadius: 2,
borderWidth: 2.5,
pointRadius: 4,
pointHoverRadius: 7,
pointBackgroundColor: "#00e676",
pointBorderColor: "#ffffff",
pointBorderWidth: 1.5,
},
],
"%"
@ -846,4 +888,65 @@ sudo /opt/aws/amazon-cloudwatch-agent/bin/amazon-cloudwatch-agent-ctl \\
border-radius: 4px !important;
font-size: 0.82rem !important;
}
/* Force pure rectangle shapes without 50rem pills */
.card,
.metric-card,
.chart-panel,
.alert {
border-radius: 8px !important;
}
/* Black Screen for Metric and Chart Cards */
.metric-card,
.chart-panel {
background-color: #000000 !important;
border: 1px solid #27272a !important;
border-radius: 8px !important;
color: #ffffff !important;
overflow: hidden !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}
.metric-card .card-header,
.chart-panel .card-header {
background-color: #09090b !important;
border-bottom: 1px solid #27272a !important;
color: #ffffff !important;
font-weight: 600 !important;
padding: 0.85rem 1.15rem !important;
border-radius: 8px 8px 0 0 !important;
}
.metric-card .card-body,
.chart-panel .card-body {
background-color: #000000 !important;
color: #ffffff !important;
padding: 1.15rem !important;
border-radius: 0 0 8px 8px !important;
}
/* Alert banner as a neat rectangle */
.alert.alert-success {
background-color: #064e3b !important;
border: 1px solid #059669 !important;
color: #ecfdf5 !important;
border-radius: 8px !important;
}
.alert.alert-success h6 {
color: #ffffff !important;
}
.alert.alert-success small {
color: #a7f3d0 !important;
}
.memory-badge {
background-color: #00e676 !important;
color: #000000 !important;
font-weight: 700 !important;
padding: 4px 8px !important;
border-radius: 4px !important;
}
</style>

3
src/pages/EC2Dashboard.vue
View file

@ -833,8 +833,9 @@ export default {
justify-content: center;
}
.filter-bar,
.kpi-card {
border-radius: 14px;
border-radius: 10px !important;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}