imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Discover: fetch discover api && set element(nodes, edges) done

Browse Source
This commit is contained in:
chiayin
2023-02-22 16:10:40 +08:00
parent 8228f9791c
commit 78e18663aa
11 changed files with 361 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
package-lock.json generated
View File

@@ -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",

2
package.json
View File

@@ -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",

6
src/components/Navbar.vue
View File

@@ -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: '',
};

13
src/main.js
View File

@@ -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,
});

23
src/router/index.js
View File

@@ -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
});

29
src/stores/allMapData.js Normal file
View File

@@ -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);
};
},
}
})

6
src/stores/files.js
View File

@@ -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);

8
src/stores/login.js
View File

@@ -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);

187
src/views/Discover/index.vue Normal file
View File

@@ -0,0 +1,187 @@
<template>
<h1>H1底家啦～~~，這裡是 Discovery 動物頻道耶~</h1>
<div class="flex min-w-full min-h-screen">
<div class="cyto" id="cyto"></div>
</div>
</template>
<script>
import { storeToRefs } from 'pinia';
import LoadingStore from '@/stores/loading.js';
import AllMapDataStore from '@/stores/allMapData.js';
export default {
setup() {
const loadingStore = LoadingStore();
const allMapDataStore = AllMapDataStore();
const { isLoading } = storeToRefs(loadingStore);
const { processMap, bpmn } = storeToRefs(allMapDataStore);
return {
isLoading,
processMap, bpmn, allMapDataStore,
}
},
data() {
return {
processMapData: {
startId: 0,
endId: 1,
nodes: [],
edges: [],
},
curveStyle:'unbundled-bezier', // 貝茲曲線 bezier | 直角 unbundled-bezier
}
},
methods: {
/**
* Switch curve-style is 'bezier' or 'unbundled-bezier'.
* @param {string} style 貝茲曲線 bezier | 直角 unbundled-bezier
*/
switchCurveStyle(style){
this.curveStyle = style;
},
/**
* 將node資料彙整
* @param {string} type ProcessMap | BPMN
*/
setNodesData(type){
const logFreq = {
"total": "",
"rel_freq": "",
"average": "",
"median": "",
"max": "",
"min": "",
"cases": ""
};
const logDuration = {
"total": "",
"rel_duration": "",
"average": "",
"median": "",
"max": "",
"min": "",
};
// BPMN 才有 gateway 類別
const gateway = {
parallel: "+",
exclusive: "x",
inclusive: "o",
};
// 將 api call 回來的資料帶進 node
this.processMap.vertices.forEach(node => {
switch (node.type) {
// add type of 'event' node
case 'event':
if(node.event_type === 'start') this.processMapData.startId = node.id;
else if(node.event_type === 'end') this.processMapData.endId = node.id;
this.processMapData.nodes.push({
data:{
id:node.id,
type:node.type,
label:node.event_type,
height:60,
width:60,
backgroundColor:'#FFCCCC',
bordercolor:'#003366',
shape:"ellipse",
freq:logFreq,
duration:logDuration,
}
});
break;
// add type of 'activity' node
default:
this.processMapData.nodes.push({
data:{
id:node.id,
type:node.type,
label:node.label,
height:80,
width:100,
backgroundColor:'#FFCCCC',
bordercolor:'#003366',
shape:"ellipse",
freq:node.freq,
duration:node.duration,
}
})
break;
}
});
},
/**
* 將edge資料彙整
* @param {string} type ProcessMap/BPMN
*/
setEdgesData(type) {
//add event duration is empty
const event_duration = {
"total": "",
"rel_duration": "",
"average": "",
"median": "",
"max": "",
"min": "",
"cases": ""
};
this.processMap.edges.forEach(edge => {
this.processMapData.nodes.push({
data: {
source:edge.tail,
target:edge.head,
freq:edge.freq,
duration:edge.duration == null ? event_duration:edge.duration,
style:'dotted',
lineWidth:1,
},
});
});
},
/**
* create and setting cytoscape
*/
createCytoscape() {
let graphId = document.getElementById('cyto');
// let nodes
// let edges
let cy = this.$cytoscape({
container: graphId,
// elements: {
// nodes: nodes, // 節點的資料
// edges: edges, // 關係線的資料
// },
layout: {
name: 'klay',
rankDir: 'LR' // 直向 TB | 橫向 LR
},
style: [
{
selector: 'node',
}
],
})
// this.$cytoscape.warnings(false); // false
},
async executeApi() {
await this.allMapDataStore.getAllMapData();
this.setNodesData();
console.log(this.processMapData.nodes);
}
},
created() {
this.allMapDataStore.logId = this.$route.params.logId;
},
mounted() {
this.isLoading = false
// this.createCytoscape();
this.executeApi();
},
}
</script>

23
src/views/Files/index.vue
View File

@@ -6,8 +6,8 @@
<!-- card group 最多六個-->
<ul class="flex justify-start items-center gap-4 overflow-x-auto w-full h-[192px] scrollbar whitespace-nowrap pb-4">
<!-- card item v-for -->
<li class="min-w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:text-primary hover:bg-primary/50 hover:border-primary duration-300" v-for="(file, index) in recentlyUsedFiles.slice(0, 6)" :key="file.id">
<a href="" class="h-full flex flex-col justify-between">
<li class="min-w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:text-primary hover:bg-primary/50 hover:border-primary duration-300
flex flex-col justify-between cursor-pointer" v-for="(file, index) in recentlyUsedFiles.slice(0, 6)" :key="file.id" @dblclick="enterDiscover(file)">
<div>
<figure class="mb-2">
<IconDataFormat class="w-8 h-8 hover:fill-primary"></IconDataFormat>
@@ -22,7 +22,6 @@
<p class="text-sm text-neutral-500">
{{ file.accessed_at }}
</p>
</a>
</li>
</ul>
</section>
@@ -52,7 +51,7 @@
</tr>
</thead>
<tbody>
<tr v-for="(file, index) in allFiles" :key="file.id">
<tr v-for="(file, index) in allFiles" :key="file.id" @dblclick="enterDiscover(file)">
<td>{{ file.name }}</td>
<td class="text-neutral-500">{{ file.parentLog }}</td>
<td class="text-neutral-500">{{ file.fileType }}</td>
@@ -64,9 +63,8 @@
</div>
<!-- All Files type of grid -->
<ul class="flex justify-start items-start gap-4 flex-wrap overflow-y-scroll overflow-x-hidden max-h-[calc(100vh_-_480px)] scrollbar" v-else>
<li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:text-primary hover:bg-primary/50 hover:border-primary duration-300"
v-for="(file, index) in allFiles" :key="file.id">
<a href="" class="h-full flex flex-col justify-between">
<li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:text-primary hover:bg-primary/50 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer"
v-for="(file, index) in allFiles" :key="file.id" @dblclick="enterDiscover(file)">
<div>
<figure class="mb-2">
<IconDataFormat class="w-8 h-8 hover:fill-primary"></IconDataFormat>
@@ -81,7 +79,6 @@
<p class="text-sm text-neutral-500">
{{ file.updated_at }}
</p>
</a>
</li>
</ul>
</section>
@@ -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();

1
vite.config.js
View File

@@ -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:<img src="/images/logo.png">
}