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