parent
75828ce439
commit
4a5a8feabd
@ -0,0 +1,66 @@
|
|||||||
|
<script setup>
|
||||||
|
import '@/assets/main.css'
|
||||||
|
import { useApiClient } from '@/main'
|
||||||
|
import { onMounted, ref } from 'vue'
|
||||||
|
|
||||||
|
const apiClient = useApiClient()
|
||||||
|
|
||||||
|
async function getAgentInfoDtoList() {
|
||||||
|
const response = await apiClient.post('/app-api/agent/getAgentInfoDtoList')
|
||||||
|
return response.data
|
||||||
|
}
|
||||||
|
|
||||||
|
let dfxAgentInfoDtoList = ref([])
|
||||||
|
|
||||||
|
function setDfaAgentInfoDto(dfxAgentInfoDto) {
|
||||||
|
alert(dfxAgentInfoDto)
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
dfxAgentInfoDtoList.value = await getAgentInfoDtoList()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<main class="dfx-main container w-100">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12 pt-2 border-bottom">
|
||||||
|
<h3 class="h3">Dashboard</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<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 v-if="dfxAgentInfoDtoList.length > 0" v-for="dfxAgentInfoDto in dfxAgentInfoDtoList" :key="`${dfxAgentInfoDto.agentId}-${dfxAgentInfoDto.hostName}`">
|
||||||
|
<td scope="row">{{ dfxAgentInfoDto.agentId }}</td>
|
||||||
|
<td>{{ dfxAgentInfoDto.hostName }}</td>
|
||||||
|
<td>{{ dfxAgentInfoDto.listenPort }}</td>
|
||||||
|
<td class="text-end">{{ dfxAgentInfoDto.postmanCount }}</td>
|
||||||
|
<td class="text-end">{{ dfxAgentInfoDto.dropboxCount }}</td>
|
||||||
|
<td class="text-center"><i class="bi bi-lightbulb-fill" :class="dfxAgentInfoDto.statusCode == 'STATUS_OK' ? 'text-success' : 'text-secondary'"></i></td>
|
||||||
|
<td class="text-center"><button type="button" class="btn btn-primary btn-sm" @click.prevent="setDfaAgentInfoDto(dfxAgentInfoDto)">설정</button></td>
|
||||||
|
</tr>
|
||||||
|
<tr v-else>
|
||||||
|
<td scope="row" class="text-center" colspan="7">no data.</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
@ -0,0 +1,123 @@
|
|||||||
|
<script setup>
|
||||||
|
import '@/assets/main.css'
|
||||||
|
import { Bar, Line } from 'vue-chartjs'
|
||||||
|
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, PointElement, LineElement, CategoryScale, LinearScale } from 'chart.js'
|
||||||
|
|
||||||
|
ChartJS.register(Title, Tooltip, Legend, BarElement, PointElement, LineElement, CategoryScale, LinearScale)
|
||||||
|
const shortThroughputCahrtData = {
|
||||||
|
labels: ['agent-mkami', 'agent-ami'],
|
||||||
|
datasets: [{ label: '분당 처리량', data: [4568, 3232] }],
|
||||||
|
}
|
||||||
|
const shortThroughputChartOptions = {
|
||||||
|
responsive: true,
|
||||||
|
indexAxis: 'y',
|
||||||
|
}
|
||||||
|
const daysThroughputChartData = {
|
||||||
|
labels: ['2025-09-01', '2025-09-02', '2025-09-03', '2025-09-04', '2025-09-05', '2025-09-06', '2025-09-07'],
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: '주간 처리량',
|
||||||
|
backgroundColor: '#f87979',
|
||||||
|
data: [40, 39, 10, 40, 39, 80, 40],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
const daysThroughputChartOptions = {
|
||||||
|
responsive: true,
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<main class="dfx-main container w-100">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12 pt-2 border-bottom">
|
||||||
|
<h3 class="h3">Dashboard</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<article class="col-12 pt-3">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-3">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">agent-mkami <i class="bi bi-lightbulb-fill text-success"></i></h5>
|
||||||
|
<p class="card-text">Host : mkami-oracle</p>
|
||||||
|
<p class="card-text">처리량 : 789</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">agent-ami <i class="bi bi-lightbulb-fill text-success"></i></h5>
|
||||||
|
<p class="card-text">상태 : ami-cubrid</p>
|
||||||
|
<p class="card-text">처리량 : 345</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<article class="col-12 pt-3">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<Bar id="shortThoughtputChart" :options="shortThroughputChartOptions" :data="shortThroughputCahrtData"></Bar>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<Line :option="daysThroughputChartOptions" :data="daysThroughputChartData"></Line>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<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>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
Loading…
Reference in new issue