bsm-lab
/
dfxconsole
1
0
Fork 0
Code Issues 7 Pull Requests Packages Projects Releases Wiki Activity

front MainView 작업중

Browse Source
main
semin.baek 6 months ago
parent a6db95e19a
commit d2d2b97423
3 changed files with 68 additions and 13 deletions
Show Stats Download Patch File Download Diff File

23
src/main/front/package-lock.json generated
Unescape View File

@ -16,6 +16,7 @@
"sass": "^1.89.2", "sass": "^1.89.2",
"vite-plugin-mkcert": "^1.17.8", "vite-plugin-mkcert": "^1.17.8",
"vue": "^3.5.17", "vue": "^3.5.17",
"vue-chartjs": "^5.3.2",
"vue-router": "^4.5.1" "vue-router": "^4.5.1"
}, },
"devDependencies": { "devDependencies": {
@ -2200,9 +2201,9 @@
} }
}, },
"node_modules/electron-to-chromium": { "node_modules/electron-to-chromium": {
"version": "1.5.193", "version": "1.5.194",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.193.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.194.tgz",
"integrity": "sha512-eePuBZXM9OVCwfYUhd2OzESeNGnWmLyeu0XAEjf7xjijNjHFdeJSzuRUGN4ueT2tEYo5YqjHramKEFxz67p3XA==", "integrity": "sha512-SdnWJwSUot04UR51I2oPD8kuP2VI37/CADR1OHsFOUzZIvfWJBO6q11k5P/uKNyTT3cdOsnyjkrZ+DDShqYqJA==",
"dev": true, "dev": true,
"license": "ISC" "license": "ISC"
}, },
@ -2397,9 +2398,9 @@
} }
}, },
"node_modules/follow-redirects": { "node_modules/follow-redirects": {
"version": "1.15.9", "version": "1.15.11",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
"integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==", "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
"funding": [ "funding": [
{ {
"type": "individual", "type": "individual",
@ -3643,6 +3644,16 @@
} }
} }
}, },
"node_modules/vue-chartjs": {
"version": "5.3.2",
"resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.3.2.tgz",
"integrity": "sha512-NrkbRRoYshbXbWqJkTN6InoDVwVb90C0R7eAVgMWcB9dPikbruaOoTFjFYHE/+tNPdIe6qdLCDjfjPHQ0fw4jw==",
"license": "MIT",
"peerDependencies": {
"chart.js": "^4.1.1",
"vue": "^3.0.0-0 || ^2.7.0"
}
},
"node_modules/vue-router": { "node_modules/vue-router": {
"version": "4.5.1", "version": "4.5.1",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.1.tgz", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.1.tgz",

1
src/main/front/package.json
Unescape View File

@ -18,6 +18,7 @@
"sass": "^1.89.2", "sass": "^1.89.2",
"vite-plugin-mkcert": "^1.17.8", "vite-plugin-mkcert": "^1.17.8",
"vue": "^3.5.17", "vue": "^3.5.17",
"vue-chartjs": "^5.3.2",
"vue-router": "^4.5.1" "vue-router": "^4.5.1"
}, },
"devDependencies": { "devDependencies": {

57
src/main/front/src/views/MainView.vue
Unescape View File

@ -1,6 +1,16 @@
<script setup> <script setup>
import '@/assets/main.css' 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> </script>
<template> <template>
@ -37,7 +47,7 @@ import 'feather-icons'
<div class="col-3"> <div class="col-3">
<div class="card"> <div class="card">
<div class="card-body"> <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>
<p class="card-text">처리량 : 실시간 처리량 숫자</p> <p class="card-text">처리량 : 실시간 처리량 숫자</p>
</div> </div>
@ -46,7 +56,7 @@ import 'feather-icons'
<div class="col-3"> <div class="col-3">
<div class="card"> <div class="card">
<div class="card-body"> <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>
<p class="card-text">처리량 : 실시간 처리량 숫자</p> <p class="card-text">처리량 : 실시간 처리량 숫자</p>
</div> </div>
@ -61,9 +71,7 @@ import 'feather-icons'
<div class="col-6"> <div class="col-6">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">시간당 처리량</h5> <Bar id="shortThoughtputChart" :options="shortThroughputChartOptions" :data="shortThroughputCahrtData"></Bar>
<p class="card-text">그래프</p>
<p class="card-text">에이전트 throughtput 모니터링 요약</p>
</div> </div>
</div> </div>
</div> </div>
@ -80,7 +88,42 @@ import 'feather-icons'
</article> </article>
</div> </div>
<div class="row"> <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> </div>
</main> </main>
</div> </div>

Write Preview
Loading…
Cancel
Save