diff --git a/package-lock.json b/package-lock.json index bb62828..1158d42 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,8 @@ "vue": "^3.2.45", "vue-axios": "^3.5.2", "vue-router": "^4.1.6", - "vue-toast-notification": "^3.0.4" + "vue-toast-notification": "^3.0.4", + "vuedraggable": "^4.1.0" }, "devDependencies": { "@rushstack/eslint-patch": "^1.1.4", @@ -5236,6 +5237,11 @@ "node": ">=8" } }, + "node_modules/sortablejs": { + "version": "1.14.0", + "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz", + "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==" + }, "node_modules/source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -6011,6 +6017,17 @@ "vue": "^3.0" } }, + "node_modules/vuedraggable": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz", + "integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==", + "dependencies": { + "sortablejs": "1.14.0" + }, + "peerDependencies": { + "vue": "^3.0.1" + } + }, "node_modules/w3c-xmlserializer": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz", @@ -10107,6 +10124,11 @@ "is-fullwidth-code-point": "^3.0.0" } }, + "sortablejs": { + "version": "1.14.0", + "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz", + "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==" + }, "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -10622,6 +10644,14 @@ "integrity": "sha512-rEhLtcKg8SVdBpdN7PrNst5nmY8dw0j3NkNImqurhlGurqR/QDKoou0t2PuCReEOCTKqHvfLCle2I3kwQWDWDQ==", "requires": {} }, + "vuedraggable": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz", + "integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==", + "requires": { + "sortablejs": "1.14.0" + } + }, "w3c-xmlserializer": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz", diff --git a/package.json b/package.json index 29221d5..578a749 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,8 @@ "vue": "^3.2.45", "vue-axios": "^3.5.2", "vue-router": "^4.1.6", - "vue-toast-notification": "^3.0.4" + "vue-toast-notification": "^3.0.4", + "vuedraggable": "^4.1.0" }, "devDependencies": { "@rushstack/eslint-patch": "^1.1.4", diff --git a/src/components/Discover/sidebarFilter.vue b/src/components/Discover/sidebarFilter.vue new file mode 100644 index 0000000..d0a14d4 --- /dev/null +++ b/src/components/Discover/sidebarFilter.vue @@ -0,0 +1,347 @@ + + + + + + diff --git a/src/components/Discover/sidebarTraces.vue b/src/components/Discover/sidebarTraces.vue index b984be1..c726ab3 100644 --- a/src/components/Discover/sidebarTraces.vue +++ b/src/components/Discover/sidebarTraces.vue @@ -19,7 +19,7 @@ - + #{{ trace.id }}
@@ -37,7 +37,7 @@

Trace #{{ showTraceId }}

-
+
diff --git a/src/components/Discover/table/actAndSeq.vue b/src/components/Discover/table/actAndSeq.vue new file mode 100644 index 0000000..b860b82 --- /dev/null +++ b/src/components/Discover/table/actAndSeq.vue @@ -0,0 +1,86 @@ + + + diff --git a/src/components/Discover/table/actOcc.vue b/src/components/Discover/table/actOcc.vue new file mode 100644 index 0000000..7f223a3 --- /dev/null +++ b/src/components/Discover/table/actOcc.vue @@ -0,0 +1,71 @@ + + + diff --git a/src/components/Discover/table/actOccCase.vue b/src/components/Discover/table/actOccCase.vue new file mode 100644 index 0000000..db2a015 --- /dev/null +++ b/src/components/Discover/table/actOccCase.vue @@ -0,0 +1,92 @@ + + + diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue index 3d84556..1a3fb10 100644 --- a/src/components/Navbar.vue +++ b/src/components/Navbar.vue @@ -22,7 +22,7 @@ - @@ -44,7 +44,7 @@ diff --git a/src/main.js b/src/main.js index ecb24a2..9a2e384 100644 --- a/src/main.js +++ b/src/main.js @@ -11,6 +11,7 @@ import ToastPlugin from 'vue-toast-notification'; import cytoscape from 'cytoscape'; import dagre from 'cytoscape-dagre'; import popper from 'cytoscape-popper'; +import draggable from 'vuedraggable'; // import CSS import "./assets/main.css"; @@ -31,7 +32,9 @@ import TabPanel from 'primevue/tabpanel'; import DataTable from 'primevue/datatable'; import Column from 'primevue/column'; import ColumnGroup from 'primevue/columngroup'; // optional -import Row from 'primevue/row'; +import Row from 'primevue/row'; // optional +import RadioButton from 'primevue/radiobutton'; +import PickList from 'primevue/picklist'; const emitter = mitt(); const app = createApp(App); @@ -71,5 +74,8 @@ app.component('DataTable', DataTable); app.component('Column', Column); app.component('ColumnGroup', ColumnGroup); app.component('Row', Row); +app.component('RadioButton', RadioButton); +app.component('PickList', PickList); +app.component('Draggable', draggable); // 拖曳 app.mount("#app"); diff --git a/src/stores/allMapData.js b/src/stores/allMapData.js index b5bbbf9..76c988b 100644 --- a/src/stores/allMapData.js +++ b/src/stores/allMapData.js @@ -21,6 +21,11 @@ export default defineStore('allMapDataStore', { allTrace: [], allCase: [], allTraceTaskSeq: [], + allFilterTask: [], + allFilterStartToEnd: [], + allFilterEndToStart: [], + allFilterTimeframe: {}, + allFilterTrace: [], httpStatus: 200, }), getters: { @@ -44,7 +49,25 @@ export default defineStore('allMapDataStore', { }, traceTaskSeq: state => { return state.allTraceTaskSeq; - } + }, + // All tasks + filterTasks: state => { + return state.allFilterTask; + }, + // form start to end tasks + filterStartToEnd: state => { + return state.allFilterStartToEnd; + }, + // form end to start tasks + filterEndToStart: state => { + return state.allFilterEndToStart; + }, + filterTimeframe: state => { + return state.allFilterTimeframe; + }, + filterTrace: state => { + return state.allFilterTrace; + }, }, actions: { /** @@ -80,12 +103,10 @@ export default defineStore('allMapDataStore', { */ async getAllTrace() { let logId = this.logId; - // const api = `/api/filters/params?log_id=${logId}`; const api = `/api/logs/${logId}/traces`; try { const response = await this.$axios.get(api); - console.log(response); this.allTrace = response.data; if(this.httpStatus < 300) loading.isLoading = false; @@ -134,5 +155,34 @@ export default defineStore('allMapDataStore', { }); }; }, + /** + * fetch Filter Parameters api. + */ + async getFilterParams() { + let logId = this.logId; + const api = `/api/filters/params?log_id=${logId}`; + + try { + const response = await this.$axios.get(api); + this.allFilterTask = response.data.tasks; + this.allFilterStartToEnd = response.data.sources; + this.allFilterEndToStart = response.data.sinks; + this.allFilterTimeframe = response.data.timeframe; + this.allFilterTrace = response.data.trace; + + if(this.httpStatus < 300) loading.isLoading = false; + } catch(error) { + this.httpStatus = error.request.status; + delay().then(() =>{ + loading.isLoading = true; + return delay(1000); + }).then(()=>{ + loading.isLoading = false; + return delay(500); + }).then(() => { + $toast.default('Failed to load the Filter Parameters.'); + }); + }; + }, }, }) diff --git a/src/views/Discover/index.vue b/src/views/Discover/index.vue index 4985d8c..f05c28e 100644 --- a/src/views/Discover/index.vue +++ b/src/views/Discover/index.vue @@ -1,18 +1,18 @@