|
|
|
|
@ -1,6 +1,16 @@
|
|
|
|
|
<script setup>
|
|
|
|
|
import '@/assets/main.css'
|
|
|
|
|
import 'feather-icons'
|
|
|
|
|
import { Bar } from 'vue-chartjs'
|
|
|
|
|
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
|
|
|
|
|
ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
|
|
|
|
|
const shortThroughputCahrtData = {
|
|
|
|
|
labels: ['agent-mkami', 'agent-ami'],
|
|
|
|
|
datasets: [{ label: '시간당 처리량', data: [4568, 3232] }],
|
|
|
|
|
}
|
|
|
|
|
const shortThroughputChartOptions = {
|
|
|
|
|
responsive: true,
|
|
|
|
|
indexAxis: 'y',
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
@ -37,7 +47,7 @@ import 'feather-icons'
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<div class="card-body">
|
|
|
|
|
<h5 class="card-title">agent-mkami</h5>
|
|
|
|
|
<h5 class="card-title">agent-mkami <i class="bi bi-lightbulb-fill text-success"></i></h5>
|
|
|
|
|
<p class="card-text">상태 : 아이콘</p>
|
|
|
|
|
<p class="card-text">처리량 : 실시간 처리량 숫자</p>
|
|
|
|
|
</div>
|
|
|
|
|
@ -46,7 +56,7 @@ import 'feather-icons'
|
|
|
|
|
<div class="col-3">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<div class="card-body">
|
|
|
|
|
<h5 class="card-title">agent-ami</h5>
|
|
|
|
|
<h5 class="card-title">agent-ami <i class="bi bi-lightbulb-fill text-success"></i></h5>
|
|
|
|
|
<p class="card-text">상태 : 아이콘</p>
|
|
|
|
|
<p class="card-text">처리량 : 실시간 처리량 숫자</p>
|
|
|
|
|
</div>
|
|
|
|
|
@ -61,9 +71,7 @@ import 'feather-icons'
|
|
|
|
|
<div class="col-6">
|
|
|
|
|
<div class="card">
|
|
|
|
|
<div class="card-body">
|
|
|
|
|
<h5 class="card-title">시간당 처리량</h5>
|
|
|
|
|
<p class="card-text">그래프</p>
|
|
|
|
|
<p class="card-text">에이전트 throughtput 모니터링 요약</p>
|
|
|
|
|
<Bar id="shortThoughtputChart" :options="shortThroughputChartOptions" :data="shortThroughputCahrtData"></Bar>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -80,7 +88,42 @@ import 'feather-icons'
|
|
|
|
|
</article>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<article class="col-12 pt-3"><h5 class="h5">에이전트 목록</h5></article>
|
|
|
|
|
<article class="col-12 pt-3">
|
|
|
|
|
<h5 class="h5">에이전트 목록</h5>
|
|
|
|
|
<table class="table table-striped table-bordered align-middle">
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th scope="col" class="text-center">Agent ID</th>
|
|
|
|
|
<th scope="col" class="text-center">Host</th>
|
|
|
|
|
<th scope="col" class="text-center">port</th>
|
|
|
|
|
<th scope="col" class="text-center">Postman Count</th>
|
|
|
|
|
<th scope="col" class="text-center">Dropbox Count</th>
|
|
|
|
|
<th scope="col" class="text-center">Status</th>
|
|
|
|
|
<th scope="col" class="text-center">Setting</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody class="table-group-divider">
|
|
|
|
|
<tr>
|
|
|
|
|
<td scope="row">agent-mkami</td>
|
|
|
|
|
<td>mkami.foxsoft.kr</td>
|
|
|
|
|
<td>17801</td>
|
|
|
|
|
<td class="text-end">32</td>
|
|
|
|
|
<td class="text-end">25</td>
|
|
|
|
|
<td class="text-center"><i class="bi bi-lightbulb-fill text-success"></i></td>
|
|
|
|
|
<td class="text-center"><button type="button" class="btn btn-primary btn-sm">설정</button></td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td scope="row">agent-ami</td>
|
|
|
|
|
<td>ami.foxsoft.kr</td>
|
|
|
|
|
<td>17801</td>
|
|
|
|
|
<td class="text-end">32</td>
|
|
|
|
|
<td class="text-end">25</td>
|
|
|
|
|
<td class="text-center"><i class="bi bi-lightbulb-fill text-success"></i></td>
|
|
|
|
|
<td class="text-center"><button type="button" class="btn btn-primary btn-sm">설정</button></td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</article>
|
|
|
|
|
</div>
|
|
|
|
|
</main>
|
|
|
|
|
</div>
|
|
|
|
|
|
