diff --git a/src/assets/css/reset.css b/src/assets/css/reset.css index cab237c00c15de7d5708589f544f1d65e59cb3a1..679a21acfb4d47f52b131768a94c9e8fe6ab5bdd 100644 --- a/src/assets/css/reset.css +++ b/src/assets/css/reset.css @@ -18,6 +18,7 @@ time, mark, audio, video { font: inherit; vertical-align: baseline; font-family: "pretendard"; + color: var(--color-black); } /* HTML5 display-role reset for older browsers */ diff --git a/src/router/index.js b/src/router/index.js index 092f92fe58c49764edb96d25272062d46937da03..46cc8ae9ea17d150a13b7c236f16e696115372fc 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -68,8 +68,6 @@ const router = createRouter({ // 로그인 이후 들어오는 모든 하위 페이지 각각 getItem 모두 적용 : 모든 페이지에서 새로고침시 로그인이 유지되도록 function isAuthenticated() { - console.log(isAuthenticated); - console.log(!!localStorage.getItem('loginInfo')); //true return localStorage.getItem('loginInfo') } diff --git a/src/store/fetchData.js b/src/store/fetchData.js index 056150d0ab3e233f2b5197d9d5ce07375d1845f0..cb2441b4ea46b5cb638e093c8bb8b27beb938e4f 100644 --- a/src/store/fetchData.js +++ b/src/store/fetchData.js @@ -31,20 +31,14 @@ async function pipeline() { }) } -// table 에 pipeline 에서 추출한 key 를 넣어주는 pipelinekey -// epoch-time 의 start 랑 end 값을 파라미터로 받기 async function table(pipelineKey, startEpoch, endEpoch) { - console.log("pipelineKey : " + pipelineKey) - console.log("startEpoch in fetchData : " + startEpoch) - return await axios.get(`/dashboard/sql/table`, { headers: { "Authorization": `Bearer ${store.state.user.info.accessToken}`, }, params: { pipeline: pipelineKey, - // 시간 필터 start 와 end 추가 start_epoch_time: startEpoch, end_epoch_time: endEpoch }, diff --git a/src/views/Monitoring.vue b/src/views/Monitoring.vue index 145933a3dde15f9a54f94d3e050cd96e61a0e8bf..7b3f618e01e07131dca56b1d3d9ceb82bda8a72c 100644 --- a/src/views/Monitoring.vue +++ b/src/views/Monitoring.vue @@ -8,134 +8,47 @@ export default { name: "Monitoring", data() { return { - pipelineSelectedCheckbox: [], - isDropdownOpen: false, - allChecked: true, pipelineList: [], - tableList: [], // 원본 데이터 유지 - pipelineFilter: [], - tableListFilter: [], // 필터된 데이터 테이블에 출력 - // 추후 기본값은 all 으로 설정예정 + tableList: [], + tableListFilter: [], pipelineSelected: [], - moduleFilter: "", - // 시간 필터 - defaultDateStart: new Date().toISOString().substring(0, 10), // 현재 날짜를 기본값으로 설정 - defaultDateEnd: new Date().toISOString().substring(0, 10), // 현재 날짜를 기본값으로 설정 - selectedDuration: { // 실시간 하루종일 기간 설정 - // 시작 종료 변경 - start: new Date(new Date().setHours(0, 0, 0, 0)).getTime(), // 00:00:00:00 - end: new Date().getTime(), // 현재시각 - }, + currentTime: new Date(), + showToolTip: false } }, components: {SideBar, Header}, methods: { - toggleDropdown() { - this.isDropdownOpen = !this.isDropdownOpen; - }, async getPipeline() { this.pipelineList = (await pipeline()).data.data; }, getFilter() { - // 파이프라인 필터의 목록을 표기해준다. - this.pipelineFilter = this.pipelineList.map(item => ({name: item.name, key: item.key})); - console.log(this.pipelineFilter) this.pipelineSelected = this.pipelineList.map(item => (item.key)); + console.log(this.pipelineSelected) }, async getTable() { for (const pipeline of this.pipelineList) { - // key 와 name 두개의 데이터를 뽑아내기 + let pipelineKey = pipeline.key let pipelineName = pipeline.name - console.log(`key: ${pipelineKey}, name: ${pipelineName}`) - const startDate = this.selectedDuration.start; - const endDate = this.selectedDuration.end; - - const response = (await table(pipelineKey, startDate, endDate)).data.data + const response = (await table(pipelineKey)).data.data response.forEach((table) => { - // 뽑아낸 key 와 name 데이터를 table 데이터에 push 집어넣기 table.pipelinekey = pipelineKey; table.pipelineName = pipelineName; this.tableList.push(table); }); } - // for (const {pipelineKey, pipelineName} of this.pipelineList.map(item => ({name: item.name, key: item.key}))) { - // console.log(pipelineKey, pipelineName) - // - // const response = (await table(pipelineKey, this.selectedDuration.start, this.selectedDuration.end)).data.data - // response.forEach((item) => { - // // 테이블에 key 가 없어서 key 생성 pipelinekey 키 생성해서 키잡고 필터 처리하기 - // item.pipelinekey = pipelineKey; - // item.pipelineName = pipelineName; - // this.tableList.push(item); - // }); - // console.log(pipelineKey) - // } }, - setPipelineSelected(pipelineKey, event) { - // 이미 선택된 값인지 확인 - // const isAlreadySelected = event.target.checked; - console.log(`pipeline-key: ${pipelineKey}, ${event.target.checked}`) - - const isAlreadySelected = this.pipelineSelected.includes(pipelineKey); - - // 선택된 값이면 제거 - if (isAlreadySelected) { - this.pipelineSelected = this.pipelineSelected.filter(item => item !== pipelineKey); - } else { - // 새로운 값이면 추가 - this.pipelineSelected.push(pipelineKey); - // pipelineList 배열에서 pipelineKey와 일치하는 항목만 남긴다. - this.pipelineList = this.pipelineList.filter((item) => item === pipelineKey); - console.log("pipelineList : " + this.pipelineList); - } - - // // 체크박스 - // // const isChecked = event.target.checked; - // // console.log("isChecked" + isChecked) - // - // const checkedItem = this.pipelineSelected.filter(function (item){ - // return item.checked; - // }).length; - // console.log(this.pipelineFilter) - // console.log(checkedItem) - // - // // if - // // (checkbox 갯수와 checked 된 갯수가 일치하면) {allchecked = true} - // // else{ - // // checkbox 갯수와 checked 된 갯수가 불일치하면 allchecked = false } - }, - - // 필터는 모두 한번에 구현해서 watch 에 넣기 filterTable() { - // 파이프라인 필터 - this.tableListFilter = []; // 필터된 데이터 초기화 - let filteredTableList = this.tableList; // 원본을 그대로 유지하기 위해 tableList 를 참조해서 filteredTableList 를 만들어 사용한다 - // filtered pipelineKey - // 원본데이터와 선택된 pipelineSelected 를 includes 메서드를 사용하여 값을 대조해서 table 리스트를 filter - filteredTableList = filteredTableList.filter((item) => this.pipelineSelected.includes(item.pipelinekey)) - // 그리고 filter 된 data 를 table 에 출력 - - - // 모듈 필터 - // module 선택값이 "" 비어있으면 table 전체를 그대로 출력하고 - if (this.moduleFilter === "") { - this.tableListFilter = filteredTableList; - } else { - // 아니면 module 에 선택된 값과 매칭되는 것을 출력해라 - this.tableListFilter = filteredTableList.filter(item => item.moduleType === this.moduleFilter) - console.table(this.tableListFilter); - } + let filteredTableList = this.tableList; - // Post 모듈이 아닌 경우 filter,discard : - 하이픈 const result = filteredTableList.map(item => { if (item.moduleType !== "Post") { item.discard = "-"; @@ -143,33 +56,24 @@ export default { } return item; }) - }, - - changeStart(event) { - // epoch-time 으로 변형시키기 위한 .getTime() 메소드 - this.selectedDuration.start = new Date(event.target.value).getTime(); - // value 값을 startEpoch 로 받아서 params 로 보내기 - - - console.log("this.selectedDuration.start : " + this.selectedDuration.start); }, - changeEnd(event) { - this.selectedDuration.end = new Date(event.target.value).getTime(); - - console.log("this.selectedDuration.end : " + this.selectedDuration.end) - - }, }, computed: { + timeFormat() { + return this.currentTime.toLocaleTimeString("ko-KR", { + hour12: true, + hour: "2-digit", + minute: "2-digit", + second: "2-digit" + }) + }, store() { return store }, - // sum - // 이제 table 의 insert 를 출력한후 map 으로 모든 insert 를 출력하고 + 연산자로 합산을 구해서 출력시켜야한다. totalSum() { return (column) => { function sum(arr) { @@ -180,9 +84,7 @@ export default { return sum; } - console.log(this.tableListFilter) const number = this.tableListFilter - // moduleType 이 Post 인 경우만 .filter 시켜라 .filter((item) => item.moduleType === "Post") .map((item) => item[column]); return sum(number); @@ -198,36 +100,21 @@ export default { }, deep: true }, - moduleFilter: { - handler() { - this.filterTable(); - }, - deep: true - }, - // // 시간 필터 추가 getTable filterTable - // // watch 에서 async await 쓰기 : getTable - selectedDuration: { - async handler() { - // 데이터 초기화 : date 변경을 감시하면서 sum 값이 중복 계산되고 있었고, table 데이터 초기화로 해결 - this.tableList = []; - this.tableListFilter = []; - // table 에 업데이트 되는 시간 조절 async await 사용 - await this.getTable(); - this.filterTable(); - }, - deep: true - } - }, + }, -// create 은 바로 실행이기 때문에 순차실행을 위해 async await 을 걸어준다. async created() { await this.getPipeline(); await this.getTable(); await this.getFilter(); this.tableListFilter = this.tableList }, + mounted() { + setInterval(() => { + this.currentTime = new Date(); + }, 5000) + } } @@ -238,57 +125,16 @@ export default {
-
-

Summery

-
- -
-
- - -
-
- - -
-
- -
- -
- - - -
- -
    -
  • - - -
    • - -
  • - - -
    • -
-
-
- - -
- - -
+
+

Monitoring

+ +
+

가장 최신으로 업데이트되는 모든 데이터를 확인할 수 있어요.

+
+ + {{ timeFormat }} + 데이터는 5초마다 갱신됩니다. +
@@ -331,6 +177,7 @@ export default {

Detail

+ @@ -362,6 +209,7 @@ export default { diff --git a/src/views/Summery.vue b/src/views/Summery.vue index 922f7ff283f151181ef02c947ee5ed5efa988715..d97a392ed0adb56cd75b69281fd37ed39bc47484 100644 --- a/src/views/Summery.vue +++ b/src/views/Summery.vue @@ -12,19 +12,16 @@ export default { isDropdownOpen: false, allChecked: true, pipelineList: [], - tableList: [], // 원본 데이터 유지 + tableList: [], pipelineFilter: [], - tableListFilter: [], // 필터된 데이터 테이블에 출력 - // 추후 기본값은 all 으로 설정예정 + tableListFilter: [], pipelineSelected: [], moduleFilter: "", - // 시간 필터 - defaultDateStart: new Date().toISOString().substring(0, 10), // 현재 날짜를 기본값으로 설정 - defaultDateEnd: new Date().toISOString().substring(0, 10), // 현재 날짜를 기본값으로 설정 - selectedDuration: { // 실시간 하루종일 기간 설정 - // 시작 종료 변경 - start: new Date(new Date().setHours(0, 0, 0, 0)).getTime(), // 00:00:00:00 - end: new Date().getTime(), // 현재시각 + defaultDateStart: new Date().toISOString().substring(0, 10), + defaultDateEnd: new Date().toISOString().substring(0, 10), + selectedDuration: { + start: new Date(new Date().setHours(0, 0, 0, 0)).getTime(), + end: new Date().getTime(), }, } }, @@ -39,103 +36,47 @@ export default { }, getFilter() { - // 파이프라인 필터의 목록을 표기해준다. this.pipelineFilter = this.pipelineList.map(item => ({name: item.name, key: item.key})); - console.log(this.pipelineFilter) this.pipelineSelected = this.pipelineList.map(item => (item.key)); }, async getTable() { for (const pipeline of this.pipelineList) { - // key 와 name 두개의 데이터를 뽑아내기 + let pipelineKey = pipeline.key let pipelineName = pipeline.name - console.log(`key: ${pipelineKey}, name: ${pipelineName}`) const startDate = this.selectedDuration.start; const endDate = this.selectedDuration.end; const response = (await table(pipelineKey, startDate, endDate)).data.data response.forEach((table) => { - // 뽑아낸 key 와 name 데이터를 table 데이터에 push 집어넣기 table.pipelinekey = pipelineKey; table.pipelineName = pipelineName; this.tableList.push(table); }); } - // for (const {pipelineKey, pipelineName} of this.pipelineList.map(item => ({name: item.name, key: item.key}))) { - // console.log(pipelineKey, pipelineName) - // - // const response = (await table(pipelineKey, this.selectedDuration.start, this.selectedDuration.end)).data.data - // response.forEach((item) => { - // // 테이블에 key 가 없어서 key 생성 pipelinekey 키 생성해서 키잡고 필터 처리하기 - // item.pipelinekey = pipelineKey; - // item.pipelineName = pipelineName; - // this.tableList.push(item); - // }); - // console.log(pipelineKey) - // } }, - setPipelineSelected(pipelineKey, event) { - // 이미 선택된 값인지 확인 - // const isAlreadySelected = event.target.checked; - console.log(`pipeline-key: ${pipelineKey}, ${event.target.checked}`) + setPipelineSelected(pipelineKey) { const isAlreadySelected = this.pipelineSelected.includes(pipelineKey); - // 선택된 값이면 제거 if (isAlreadySelected) { this.pipelineSelected = this.pipelineSelected.filter(item => item !== pipelineKey); } else { - // 새로운 값이면 추가 this.pipelineSelected.push(pipelineKey); - - // pipelineList 배열에서 pipelineKey와 일치하는 항목만 남긴다. this.pipelineList = this.pipelineList.filter((item) => item === pipelineKey); - console.log("pipelineList : " + this.pipelineList); } - - // // 체크박스 - // // const isChecked = event.target.checked; - // // console.log("isChecked" + isChecked) - // - // const checkedItem = this.pipelineSelected.filter(function (item){ - // return item.checked; - // }).length; - // console.log(this.pipelineFilter) - // console.log(checkedItem) - // - // // if - // // (checkbox 갯수와 checked 된 갯수가 일치하면) {allchecked = true} - // // else{ - // // checkbox 갯수와 checked 된 갯수가 불일치하면 allchecked = false } }, - // 필터는 모두 한번에 구현해서 watch 에 넣기 filterTable() { - // 파이프라인 필터 - this.tableListFilter = []; // 필터된 데이터 초기화 - let filteredTableList = this.tableList; // 원본을 그대로 유지하기 위해 tableList 를 참조해서 filteredTableList 를 만들어 사용한다 - // filtered pipelineKey - // 원본데이터와 선택된 pipelineSelected 를 includes 메서드를 사용하여 값을 대조해서 table 리스트를 filter + this.tableListFilter = []; + let filteredTableList = this.tableList; filteredTableList = filteredTableList.filter((item) => this.pipelineSelected.includes(item.pipelinekey)) - // 그리고 filter 된 data 를 table 에 출력 - - - // 모듈 필터 - // module 선택값이 "" 비어있으면 table 전체를 그대로 출력하고 - if (this.moduleFilter === "") { - this.tableListFilter = filteredTableList; - } else { - // 아니면 module 에 선택된 값과 매칭되는 것을 출력해라 - this.tableListFilter = filteredTableList.filter(item => item.moduleType === this.moduleFilter) - console.table(this.tableListFilter); - } - // Post 모듈이 아닌 경우 filter,discard : - 하이픈 const result = filteredTableList.map(item => { if (item.moduleType !== "Post") { item.discard = "-"; @@ -143,23 +84,22 @@ export default { } return item; }) + + if (this.moduleFilter === "") { + this.tableListFilter = filteredTableList; + } else { + this.tableListFilter = filteredTableList.filter(item => item.moduleType === this.moduleFilter) + console.table(this.tableListFilter); + } }, changeStart(event) { - // epoch-time 으로 변형시키기 위한 .getTime() 메소드 this.selectedDuration.start = new Date(event.target.value).getTime(); - // value 값을 startEpoch 로 받아서 params 로 보내기 - - - console.log("this.selectedDuration.start : " + this.selectedDuration.start); }, changeEnd(event) { this.selectedDuration.end = new Date(event.target.value).getTime(); - - console.log("this.selectedDuration.end : " + this.selectedDuration.end) - }, }, @@ -168,8 +108,6 @@ export default { store() { return store }, - // sum - // 이제 table 의 insert 를 출력한후 map 으로 모든 insert 를 출력하고 + 연산자로 합산을 구해서 출력시켜야한다. totalSum() { return (column) => { function sum(arr) { @@ -180,9 +118,7 @@ export default { return sum; } - console.log(this.tableListFilter) const number = this.tableListFilter - // moduleType 이 Post 인 경우만 .filter 시켜라 .filter((item) => item.moduleType === "Post") .map((item) => item[column]); return sum(number); @@ -205,14 +141,10 @@ export default { deep: true }, - // // 시간 필터 추가 getTable filterTable - // // watch 에서 async await 쓰기 : getTable selectedDuration: { async handler() { - // 데이터 초기화 : date 변경을 감시하면서 sum 값이 중복 계산되고 있었고, table 데이터 초기화로 해결 this.tableList = []; this.tableListFilter = []; - // table 에 업데이트 되는 시간 조절 async await 사용 await this.getTable(); this.filterTable(); }, @@ -220,8 +152,6 @@ export default { } }, - -// create 은 바로 실행이기 때문에 순차실행을 위해 async await 을 걸어준다. async created() { await this.getPipeline(); await this.getTable(); @@ -241,6 +171,7 @@ export default {

Summery

+
@@ -255,6 +186,7 @@ export default {
+
@@ -331,6 +263,7 @@ export default {

Detail

+
@@ -362,6 +295,7 @@ export default {