From 78e18663aae62ae4b683113381cedd0126fb97d7 Mon Sep 17 00:00:00 2001 From: chiayin Date: Wed, 22 Feb 2023 16:10:40 +0800 Subject: [PATCH] Discover: fetch discover api && set element(nodes, edges) done --- package-lock.json | 85 ++++++++++++---- package.json | 2 + src/components/Navbar.vue | 6 +- src/main.js | 13 ++- src/router/index.js | 23 ++++- src/stores/allMapData.js | 29 ++++++ src/stores/files.js | 6 +- src/stores/login.js | 8 +- src/views/Discover/index.vue | 187 +++++++++++++++++++++++++++++++++++ src/views/Files/index.vue | 75 +++++++------- vite.config.js | 1 + 11 files changed, 361 insertions(+), 74 deletions(-) create mode 100644 src/stores/allMapData.js create mode 100644 src/views/Discover/index.vue diff --git a/package-lock.json b/package-lock.json index 30e8c05..9c417a9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,8 @@ "dependencies": { "autoprefixer": "^10.4.13", "axios": "^1.2.2", + "cytoscape": "^3.23.0", + "cytoscape-klay": "^3.1.4", "mitt": "^3.0.0", "moment": "^2.29.4", "pinia": "^2.0.28", @@ -17,7 +19,6 @@ "tailwindcss": "^3.2.4", "vue": "^3.2.45", "vue-axios": "^3.5.2", - "vue-dataset": "^3.5.0", "vue-router": "^4.1.6", "vue-toast-notification": "^3.0.4" }, @@ -2043,6 +2044,29 @@ "node": "^14.0.0 || ^16.0.0 || >=18.0.0" } }, + "node_modules/cytoscape": { + "version": "3.23.0", + "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.23.0.tgz", + "integrity": "sha512-gRZqJj/1kiAVPkrVFvz/GccxsXhF3Qwpptl32gKKypO4IlqnKBjTOu+HbXtEggSGzC5KCaHp3/F7GgENrtsFkA==", + "dependencies": { + "heap": "^0.2.6", + "lodash": "^4.17.21" + }, + "engines": { + "node": ">=0.10" + } + }, + "node_modules/cytoscape-klay": { + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/cytoscape-klay/-/cytoscape-klay-3.1.4.tgz", + "integrity": "sha512-VwPj0VR25GPfy6qXVQRi/MYlZM/zkdvRhHlgqbM//lSvstgM6fhp3ik/uM8Wr8nlhskfqz/M1fIDmR6UckbS2A==", + "dependencies": { + "klayjs": "^0.4.1" + }, + "peerDependencies": { + "cytoscape": "^3.2.0" + } + }, "node_modules/dashdash": { "version": "1.14.1", "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz", @@ -3248,6 +3272,11 @@ "he": "bin/he" } }, + "node_modules/heap": { + "version": "0.2.7", + "resolved": "https://registry.npmjs.org/heap/-/heap-0.2.7.tgz", + "integrity": "sha512-2bsegYkkHO+h/9MGbn6KWcE45cHZgPANo5LXF7EvWdT0yT2EguSVO1nDgU5c8+ZOPwp2vMNa7YFsJhVcDR9Sdg==" + }, "node_modules/html-encoding-sniffer": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz", @@ -3842,6 +3871,11 @@ "verror": "1.10.0" } }, + "node_modules/klayjs": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/klayjs/-/klayjs-0.4.1.tgz", + "integrity": "sha512-WUNxuO7O79TEkxCj6OIaK5TJBkaWaR/IKNTakgV9PwDn+mrr63MLHed34AcE2yTaDntgO6l0zGFIzhcoTeroTA==" + }, "node_modules/lazy-ass": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/lazy-ass/-/lazy-ass-1.6.0.tgz", @@ -3940,8 +3974,7 @@ "node_modules/lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", - "dev": true + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, "node_modules/lodash.merge": { "version": "4.6.2", @@ -5865,14 +5898,6 @@ "vue": "^3.0.0 || ^2.0.0" } }, - "node_modules/vue-dataset": { - "version": "3.5.0", - "resolved": "https://registry.npmjs.org/vue-dataset/-/vue-dataset-3.5.0.tgz", - "integrity": "sha512-NpIprTm2nAFSlHXS6+kfyZcLe/wSxsh1XsgZVskAe7UFYlC9HRTUvBe+uGmR8wvdh+EE7mzOpW29WQCE7tZ6JA==", - "dependencies": { - "vue": "^3.2.47" - } - }, "node_modules/vue-eslint-parser": { "version": "9.1.0", "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.1.0.tgz", @@ -7703,6 +7728,23 @@ "yauzl": "^2.10.0" } }, + "cytoscape": { + "version": "3.23.0", + "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.23.0.tgz", + "integrity": "sha512-gRZqJj/1kiAVPkrVFvz/GccxsXhF3Qwpptl32gKKypO4IlqnKBjTOu+HbXtEggSGzC5KCaHp3/F7GgENrtsFkA==", + "requires": { + "heap": "^0.2.6", + "lodash": "^4.17.21" + } + }, + "cytoscape-klay": { + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/cytoscape-klay/-/cytoscape-klay-3.1.4.tgz", + "integrity": "sha512-VwPj0VR25GPfy6qXVQRi/MYlZM/zkdvRhHlgqbM//lSvstgM6fhp3ik/uM8Wr8nlhskfqz/M1fIDmR6UckbS2A==", + "requires": { + "klayjs": "^0.4.1" + } + }, "dashdash": { "version": "1.14.1", "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz", @@ -8605,6 +8647,11 @@ "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", "dev": true }, + "heap": { + "version": "0.2.7", + "resolved": "https://registry.npmjs.org/heap/-/heap-0.2.7.tgz", + "integrity": "sha512-2bsegYkkHO+h/9MGbn6KWcE45cHZgPANo5LXF7EvWdT0yT2EguSVO1nDgU5c8+ZOPwp2vMNa7YFsJhVcDR9Sdg==" + }, "html-encoding-sniffer": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz", @@ -9049,6 +9096,11 @@ "verror": "1.10.0" } }, + "klayjs": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/klayjs/-/klayjs-0.4.1.tgz", + "integrity": "sha512-WUNxuO7O79TEkxCj6OIaK5TJBkaWaR/IKNTakgV9PwDn+mrr63MLHed34AcE2yTaDntgO6l0zGFIzhcoTeroTA==" + }, "lazy-ass": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/lazy-ass/-/lazy-ass-1.6.0.tgz", @@ -9112,8 +9164,7 @@ "lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", - "dev": true + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, "lodash.merge": { "version": "4.6.2", @@ -10429,14 +10480,6 @@ "integrity": "sha512-GP+dct7UlAWkl1qoP3ppw0z6jcSua5/IrMpjB5O8bh089iIiJ+hdxPYH2NPEpajlYgkW5EVMP95ttXWdas1O0g==", "requires": {} }, - "vue-dataset": { - "version": "3.5.0", - "resolved": "https://registry.npmjs.org/vue-dataset/-/vue-dataset-3.5.0.tgz", - "integrity": "sha512-NpIprTm2nAFSlHXS6+kfyZcLe/wSxsh1XsgZVskAe7UFYlC9HRTUvBe+uGmR8wvdh+EE7mzOpW29WQCE7tZ6JA==", - "requires": { - "vue": "^3.2.47" - } - }, "vue-eslint-parser": { "version": "9.1.0", "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.1.0.tgz", diff --git a/package.json b/package.json index 0d0fd86..56dd1d0 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,8 @@ "dependencies": { "autoprefixer": "^10.4.13", "axios": "^1.2.2", + "cytoscape": "^3.23.0", + "cytoscape-klay": "^3.1.4", "mitt": "^3.0.0", "moment": "^2.29.4", "pinia": "^2.0.28", diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue index fe030ee..7f23e6c 100644 --- a/src/components/Navbar.vue +++ b/src/components/Navbar.vue @@ -44,8 +44,10 @@ export default { return { showNavbarBreadcrumb: false, // 之後優化要模組化 - // navViewName: { - // files: ['all', 'discover', 'compare', 'design'], + // navViewData: + // { + // FILES: ['ALL', 'DISCOVER', 'COMPARE', 'DESIGN'], + // DISCOVER: ['MAP', 'CONFORMANCE', 'PERFORMANCE', 'DATA'] // }, // navViewName: '', }; diff --git a/src/main.js b/src/main.js index 1bcfb75..69bc2fe 100644 --- a/src/main.js +++ b/src/main.js @@ -8,6 +8,8 @@ import VueAxios from 'vue-axios'; import moment from 'moment'; import mitt from 'mitt'; import ToastPlugin from 'vue-toast-notification'; +import cytoscape from 'cytoscape'; +import klay from 'cytoscape-klay'; import "./assets/main.css"; import 'vue-toast-notification/dist/theme-sugar.css'; @@ -16,19 +18,22 @@ const emitter = mitt(); const app = createApp(App); pinia.use(({ store }) => { - store.$router = markRaw(router) - store.$toast = markRaw(ToastPlugin) + store.$router = markRaw(router); + store.$axios = markRaw(axios); + store.$toast = markRaw(ToastPlugin); }); // can use `this.$moment` in Vue.js app.config.globalProperties.$moment = moment; app.config.globalProperties.emitter = emitter; +app.config.globalProperties.$cytoscape = cytoscape; + +cytoscape.use( klay ); app.use(pinia); app.use(router); app.use(VueAxios, axios); -// use `this.$toast` in Vue.js -app.use(ToastPlugin, { +app.use(ToastPlugin, { // use `this.$toast` in Vue.js duration: 10000, }); diff --git a/src/router/index.js b/src/router/index.js index 5ad5231..57ada47 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,8 +1,9 @@ -import { createRouter, createWebHistory } from "vue-router"; +import { createRouter, createWebHistory, createWebHashHistory, useRoute, useRouter } from "vue-router"; import AuthContainer from '@/views/AuthContainer.vue'; import MainContainer from '@/views/MainContainer.vue'; import Login from '@/views/Login/index.vue'; import Files from '@/views/Files/index.vue'; +import Discover from '@/views/Discover/index.vue'; import MemberArea from '@/views/MemberArea/index.vue'; import NotFound404 from '@/views/NotFound404.vue'; @@ -17,7 +18,7 @@ const routes = [ component: AuthContainer, children: [ { - path: "login", + path: "/login", name: "Login", component: Login, }, @@ -29,15 +30,25 @@ const routes = [ component: MainContainer, children: [ { - path: "member-area", + path: "/member-area", name: "MemberArea", component: MemberArea, }, { - path: "files", + path: "/files", name: "Files", component: Files, }, + { + path: "/discover/:logId", + name: "Discover", + component: Discover, + + // 先注意，之後思考是否修改，網址打 discover 時，要跳預設的頁面 + // path: "discover", + // redirect: 'discover/12345' + + } ] }, { @@ -51,7 +62,9 @@ const routes = [ const base_url = import.meta.env.BASE_URL; const router = createRouter({ - history: createWebHistory(base_url), + history: createWebHistory(base_url), //(/) + // history: createWebHashHistory(base_url), // (/#) + routes }); diff --git a/src/stores/allMapData.js b/src/stores/allMapData.js new file mode 100644 index 0000000..b85c270 --- /dev/null +++ b/src/stores/allMapData.js @@ -0,0 +1,29 @@ +import { defineStore } from "pinia"; + +export default defineStore('allMapDataStore', { + state: () => ({ + logId: null, + processMap: {}, + bpmn: {}, + }), + getters: { + }, + actions: { + /** + * fetch discover api, include '/process-map, /bpmn, /stats, /insights'. + */ + async getAllMapData() { + let logId = this.logId + const api = `/api/logs/${logId}/discover`; + + try { + const response = await this.$axios.get(api); + // console.log(response); + this.processMap = response.data.process_map; + this.bpmn = response.data.bpmn; + } catch(error) { + // console.dir(error); + }; + }, + } +}) diff --git a/src/stores/files.js b/src/stores/files.js index 58cb2bc..14f5171 100644 --- a/src/stores/files.js +++ b/src/stores/files.js @@ -30,7 +30,7 @@ export default defineStore('filesStore', { switchFilesTagData: { ALL: ['Log', 'Filter', 'Rule', 'Design'], DISCOVER: ['Log', 'Filter', 'Rule'], - COMPARE: ['Filter'], + COMPARE: ['Log','Filter'], DESIGN: ['Log', 'Design'], }, filesTag: 'ALL', @@ -60,7 +60,7 @@ export default defineStore('filesStore', { * Fetch event logs api */ async fetchEventLog() { - const api = 'api/logs'; + const api = '/api/logs'; try { const response = await axios.get(api); @@ -92,7 +92,7 @@ export default defineStore('filesStore', { * Fetch filters api */ async fetchFilter() { - const api = 'api/filters'; + const api = '/api/filters'; try { const response = await axios.get(api); diff --git a/src/stores/login.js b/src/stores/login.js index dd9df05..41511f7 100644 --- a/src/stores/login.js +++ b/src/stores/login.js @@ -22,7 +22,7 @@ export default defineStore('loginStore', { * fetch Login For Access Token api */ async signIn() { - const api = 'api/oauth/token'; + const api = '/api/oauth/token'; const config = { headers: { // http post 預設的 url 編碼，非 json 格式 @@ -38,7 +38,7 @@ export default defineStore('loginStore', { const token = response.data.access_token; document.cookie = `luciaToken=${token}`; - this.$router.push('/files') + this.$router.push('/files'); } } catch(error) { this.isInvalid = true; @@ -61,7 +61,7 @@ export default defineStore('loginStore', { * get user detail for 'my-account' api */ async getUserData() { - const api = 'api/my-account'; + const api = '/api/my-account'; try { const response = await axios.get(api); @@ -74,7 +74,7 @@ export default defineStore('loginStore', { * check login for 'my-account' api */ async checkLogin() { - const api = 'api/my-account'; + const api = '/api/my-account'; try { const response = await axios.get(api); diff --git a/src/views/Discover/index.vue b/src/views/Discover/index.vue new file mode 100644 index 0000000..963d685 --- /dev/null +++ b/src/views/Discover/index.vue @@ -0,0 +1,187 @@ + + + diff --git a/src/views/Files/index.vue b/src/views/Files/index.vue index d3c6706..49f6b01 100644 --- a/src/views/Files/index.vue +++ b/src/views/Files/index.vue @@ -6,23 +6,22 @@ @@ -52,7 +51,7 @@ - + {{ file.name }} {{ file.parentLog }} {{ file.fileType }} @@ -64,24 +63,22 @@ @@ -181,12 +178,20 @@ }, methods: { /** - * switch sort + * sort's switch + * @param {string} value */ switchSort(value) { this.sortReverseOrder = (this.sortKey === value)? !this.sortReverseOrder: false; this.sortKey = value; }, + /** + * 選擇該 files 進入 Discover/Compare/Design 頁面 + * @param {object} file + */ + enterDiscover(file){ + this.$router.push({ name: 'Discover', params: { logId: file.id }}); + }, }, mounted() { this.store.fetchEventLog(); diff --git a/vite.config.js b/vite.config.js index 465cbf3..0b95f07 100644 --- a/vite.config.js +++ b/vite.config.js @@ -12,6 +12,7 @@ export default defineConfig(({ mode }) => { // 設定路徑別名 resolve: { alias: { + util: "util/", "@": fileURLToPath(new URL("./src", import.meta.url)), // EX:"/@/components/Header.vue" '/images': 'src/assets/images', // EX: }