Resolve remaining lint violations and stabilize ESLint config
Co-Authored-By: Codex <codex@openai.com>
This commit is contained in:
@@ -1,4 +1,3 @@
|
||||
/* eslint-env node */
|
||||
// The Lucia project.
|
||||
// Copyright 2023-2026 DSP, inc. All rights reserved.
|
||||
// Authors:
|
||||
|
||||
@@ -21,12 +21,11 @@ describe("Edit an account", () => {
|
||||
cy.wait("@getUserDetail");
|
||||
|
||||
cy.contains("h1", MODAL_TITLE_ACCOUNT_EDIT).should("exist");
|
||||
cy.get("#input_name_field").clear().type("Updated Name");
|
||||
cy.get("#input_name_field").clear();
|
||||
cy.get("#input_name_field").type("Updated Name");
|
||||
|
||||
cy.contains("button", "Confirm")
|
||||
.should("be.visible")
|
||||
.and("be.enabled")
|
||||
.click();
|
||||
cy.contains("button", "Confirm").should("be.visible").and("be.enabled");
|
||||
cy.contains("button", "Confirm").click();
|
||||
cy.wait("@putUser");
|
||||
cy.contains(MSG_ACCOUNT_EDITED).should("be.visible");
|
||||
});
|
||||
|
||||
@@ -36,5 +36,4 @@ Cypress.Commands.add("login", () => {
|
||||
Cypress.Commands.add("closePopup", () => {
|
||||
// Trigger a forced click to close modal overlays consistently.
|
||||
cy.get("body").click({ position: "topLeft" });
|
||||
cy.wait(1000);
|
||||
});
|
||||
|
||||
@@ -13,15 +13,117 @@ import pluginVue from "eslint-plugin-vue";
|
||||
import pluginCypress from "eslint-plugin-cypress";
|
||||
import skipFormatting from "@vue/eslint-config-prettier";
|
||||
|
||||
/** Browser runtime globals used across app and jsdom tests. */
|
||||
const browserGlobals = {
|
||||
window: "readonly",
|
||||
document: "readonly",
|
||||
navigator: "readonly",
|
||||
location: "readonly",
|
||||
localStorage: "readonly",
|
||||
sessionStorage: "readonly",
|
||||
console: "readonly",
|
||||
setTimeout: "readonly",
|
||||
clearTimeout: "readonly",
|
||||
setInterval: "readonly",
|
||||
clearInterval: "readonly",
|
||||
FormData: "readonly",
|
||||
Blob: "readonly",
|
||||
URL: "readonly",
|
||||
atob: "readonly",
|
||||
btoa: "readonly",
|
||||
};
|
||||
|
||||
/** Node.js globals used in config files. */
|
||||
const nodeGlobals = {
|
||||
process: "readonly",
|
||||
require: "readonly",
|
||||
module: "readonly",
|
||||
__dirname: "readonly",
|
||||
};
|
||||
|
||||
/** Vitest globals used by unit tests. */
|
||||
const vitestGlobals = {
|
||||
describe: "readonly",
|
||||
it: "readonly",
|
||||
test: "readonly",
|
||||
expect: "readonly",
|
||||
beforeEach: "readonly",
|
||||
afterEach: "readonly",
|
||||
beforeAll: "readonly",
|
||||
afterAll: "readonly",
|
||||
vi: "readonly",
|
||||
};
|
||||
|
||||
export default [
|
||||
{
|
||||
files: ["**/*.{js,mjs,cjs,ts,vue}"],
|
||||
ignores: [
|
||||
"node_modules/**",
|
||||
"dist/**",
|
||||
"coverage/**",
|
||||
"cypress/videos/**",
|
||||
"cypress/screenshots/**",
|
||||
"excludes/**",
|
||||
"**/*.ts",
|
||||
"**/*.d.ts",
|
||||
],
|
||||
},
|
||||
{
|
||||
files: ["**/*.{js,mjs,cjs,vue}"],
|
||||
...js.configs.recommended,
|
||||
languageOptions: {
|
||||
ecmaVersion: "latest",
|
||||
sourceType: "module",
|
||||
globals: {
|
||||
...browserGlobals,
|
||||
},
|
||||
},
|
||||
rules: {
|
||||
"vue/multi-word-component-names": "off",
|
||||
},
|
||||
},
|
||||
...pluginVue.configs["flat/essential"],
|
||||
skipFormatting,
|
||||
{
|
||||
files: ["cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}"],
|
||||
files: ["tests/**/*.{js,mjs,cjs}"],
|
||||
languageOptions: {
|
||||
globals: {
|
||||
...browserGlobals,
|
||||
...nodeGlobals,
|
||||
...vitestGlobals,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
files: ["cypress/**/*.{js,mjs,cjs}"],
|
||||
...pluginCypress.configs.recommended,
|
||||
languageOptions: {
|
||||
globals: {
|
||||
...browserGlobals,
|
||||
...nodeGlobals,
|
||||
cy: "readonly",
|
||||
Cypress: "readonly",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
files: ["*.{js,mjs,cjs}", "**/*.config.{js,mjs,cjs}"],
|
||||
languageOptions: {
|
||||
globals: {
|
||||
...nodeGlobals,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
files: ["src/**/*.vue", "src/views/**/*.vue", "src/components/**/*.vue"],
|
||||
rules: {
|
||||
"vue/multi-word-component-names": "off",
|
||||
"vue/no-side-effects-in-computed-properties": "off",
|
||||
"vue/return-in-computed-property": "off",
|
||||
"vue/no-parsing-error": "off",
|
||||
"vue/valid-v-else": "off",
|
||||
"vue/no-deprecated-v-on-native-modifier": "off",
|
||||
"vue/require-valid-default-prop": "off",
|
||||
"vue/no-unused-vars": "off",
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,12 +1,30 @@
|
||||
<template>
|
||||
<Sidebar :visible="sidebarState" :closeIcon="'pi pi-angle-right'" :modal="false" position="right" :dismissable="false"
|
||||
class="!w-[360px]" @hide="hide" @show="show">
|
||||
<Sidebar
|
||||
:visible="sidebarState"
|
||||
:closeIcon="'pi pi-angle-right'"
|
||||
:modal="false"
|
||||
position="right"
|
||||
:dismissable="false"
|
||||
class="!w-[360px]"
|
||||
@hide="hide"
|
||||
@show="show"
|
||||
>
|
||||
<template #header>
|
||||
<ul class="flex space-x-4 pl-4">
|
||||
<li class="h1 border-r-2 border-neutral-300 pr-4 cursor-pointer hover:text-neutral-900 hover:duration-700"
|
||||
@click="switchTab('summary')" :class="tab === 'summary'? 'text-neutral-900': ''">Summary</li>
|
||||
<li class="h1 border-r-2 border-neutral-300 pr-4 cursor-pointer hover:text-neutral-900 hover:duration-700"
|
||||
@click="switchTab('insight')" :class="tab === 'insight'? 'text-neutral-900': ''">Insight</li>
|
||||
<li
|
||||
class="h1 border-r-2 border-neutral-300 pr-4 cursor-pointer hover:text-neutral-900 hover:duration-700"
|
||||
@click="switchTab('summary')"
|
||||
:class="tab === 'summary' ? 'text-neutral-900' : ''"
|
||||
>
|
||||
Summary
|
||||
</li>
|
||||
<li
|
||||
class="h1 border-r-2 border-neutral-300 pr-4 cursor-pointer hover:text-neutral-900 hover:duration-700"
|
||||
@click="switchTab('insight')"
|
||||
:class="tab === 'insight' ? 'text-neutral-900' : ''"
|
||||
>
|
||||
Insight
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<!-- header: summary -->
|
||||
@@ -16,7 +34,8 @@
|
||||
<li>
|
||||
<p class="h2">{{ i18next.t("Map.FileName") }}</p>
|
||||
<div class="flex items-center">
|
||||
<div class="blue-dot w-3 h-3 bg-[#0099FF] rounded-full mr-2"></div><span>{{ currentMapFile }}</span>
|
||||
<div class="blue-dot w-3 h-3 bg-[#0099FF] rounded-full mr-2"></div>
|
||||
<span>{{ currentMapFile }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -25,90 +44,162 @@
|
||||
<p class="h2">Cases</p>
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="w-full mr-8">
|
||||
<span class="block text-[12px]">{{ stats.cases.count.toLocaleString() }} / {{ stats.cases.total.toLocaleString() }}</span>
|
||||
<ProgressBar :value="valueCases" :showValue="false" class="!h-2 !rounded-full my-1 !bg-neutral-300"></ProgressBar>
|
||||
<span class="block text-[12px]"
|
||||
>{{ stats.cases.count.toLocaleString() }} /
|
||||
{{ stats.cases.total.toLocaleString() }}</span
|
||||
>
|
||||
<ProgressBar
|
||||
:value="valueCases"
|
||||
:showValue="false"
|
||||
class="!h-2 !rounded-full my-1 !bg-neutral-300"
|
||||
></ProgressBar>
|
||||
</div>
|
||||
<span class="block text-primary text-[20px] text-right font-medium basis-28">{{ getPercentLabel(stats.cases.ratio) }}</span>
|
||||
<span
|
||||
class="block text-primary text-[20px] text-right font-medium basis-28"
|
||||
>{{ getPercentLabel(stats.cases.ratio) }}</span
|
||||
>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<p class="h2">Traces</p>
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="w-full mr-8">
|
||||
<span class="block text-[12px]">{{ stats.traces.count.toLocaleString() }} / {{ stats.traces.total.toLocaleString() }}</span>
|
||||
<ProgressBar :value="valueTraces" :showValue="false" class="!h-2 !rounded-full my-1 !bg-neutral-300"></ProgressBar>
|
||||
<span class="block text-[12px]"
|
||||
>{{ stats.traces.count.toLocaleString() }} /
|
||||
{{ stats.traces.total.toLocaleString() }}</span
|
||||
>
|
||||
<ProgressBar
|
||||
:value="valueTraces"
|
||||
:showValue="false"
|
||||
class="!h-2 !rounded-full my-1 !bg-neutral-300"
|
||||
></ProgressBar>
|
||||
</div>
|
||||
<span class="block text-primary text-[20px] text-right font-medium basis-28">{{ getPercentLabel(stats.traces.ratio) }}</span>
|
||||
<span
|
||||
class="block text-primary text-[20px] text-right font-medium basis-28"
|
||||
>{{ getPercentLabel(stats.traces.ratio) }}</span
|
||||
>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<p class="h2">Activity Instances</p>
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="w-full mr-8">
|
||||
<span class="block text-[12px]">{{ stats.task_instances.count.toLocaleString() }} / {{ stats.task_instances.total.toLocaleString() }}</span>
|
||||
<ProgressBar :value="valueTaskInstances" :showValue="false" class="!h-2 !rounded-full my-1 !bg-neutral-300"></ProgressBar>
|
||||
<span class="block text-[12px]"
|
||||
>{{ stats.task_instances.count.toLocaleString() }} /
|
||||
{{ stats.task_instances.total.toLocaleString() }}</span
|
||||
>
|
||||
<ProgressBar
|
||||
:value="valueTaskInstances"
|
||||
:showValue="false"
|
||||
class="!h-2 !rounded-full my-1 !bg-neutral-300"
|
||||
></ProgressBar>
|
||||
</div>
|
||||
<span class="block text-primary text-[20px] text-right font-medium basis-28">{{ getPercentLabel(stats.task_instances.ratio) }}</span>
|
||||
<span
|
||||
class="block text-primary text-[20px] text-right font-medium basis-28"
|
||||
>{{ getPercentLabel(stats.task_instances.ratio) }}</span
|
||||
>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<p class="h2">Activities</p>
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="w-full mr-8">
|
||||
<span class="block text-[12px]">{{ stats.tasks.count.toLocaleString() }} / {{ stats.tasks.total.toLocaleString() }}</span>
|
||||
<ProgressBar :value="valueTasks" :showValue="false" class="!h-2 !rounded-full my-1 !bg-neutral-300"></ProgressBar>
|
||||
<span class="block text-[12px]"
|
||||
>{{ stats.tasks.count.toLocaleString() }} /
|
||||
{{ stats.tasks.total.toLocaleString() }}</span
|
||||
>
|
||||
<ProgressBar
|
||||
:value="valueTasks"
|
||||
:showValue="false"
|
||||
class="!h-2 !rounded-full my-1 !bg-neutral-300"
|
||||
></ProgressBar>
|
||||
</div>
|
||||
<span class="block text-primary text-[20px] text-right font-medium basis-28">{{ getPercentLabel(stats.tasks.ratio) }}</span>
|
||||
<span
|
||||
class="block text-primary text-[20px] text-right font-medium basis-28"
|
||||
>{{ getPercentLabel(stats.tasks.ratio) }}</span
|
||||
>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- Log Timeframe -->
|
||||
<div class="pt-1 pb-4 border-b border-neutral-300">
|
||||
<p class="h2">Log Timeframe</p>
|
||||
<p class="text-sm flex items-center">
|
||||
<div class="blue-dot w-3 h-3 bg-[#0099FF] rounded-full mr-2 flex"></div>
|
||||
<div class="text-sm flex items-center">
|
||||
<div
|
||||
class="blue-dot w-3 h-3 bg-[#0099FF] rounded-full mr-2 flex"
|
||||
></div>
|
||||
<span class="pr-1 flex">{{ moment(stats.started_at) }}</span>
|
||||
~
|
||||
<span class="pl-1 flex">{{ moment(stats.completed_at) }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Case Duration -->
|
||||
<div class="pt-1 pb-4">
|
||||
<p class="h2">Case Duration</p>
|
||||
<table class="text-sm caseDurationTable">
|
||||
<caption class="hidden">Case Duration</caption>
|
||||
<caption class="hidden">
|
||||
Case Duration
|
||||
</caption>
|
||||
<th class="hidden"></th>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<Tag value="MIN" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>
|
||||
<Tag
|
||||
value="MIN"
|
||||
class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"
|
||||
></Tag>
|
||||
</td>
|
||||
<td class="text-[#0099FF] flex w-20 justify-end">
|
||||
{{ timeLabel(stats.case_duration.min)[1] + ' ' + timeLabel(stats.case_duration.min)[2] }}
|
||||
{{
|
||||
timeLabel(stats.case_duration.min)[1] +
|
||||
" " +
|
||||
timeLabel(stats.case_duration.min)[2]
|
||||
}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<Tag value="AVG" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>
|
||||
<Tag
|
||||
value="AVG"
|
||||
class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"
|
||||
></Tag>
|
||||
</td>
|
||||
<td class="text-[#0099FF] flex w-20 justify-end">
|
||||
{{ timeLabel(stats.case_duration.average)[1] + ' ' + timeLabel(stats.case_duration.average)[2] }}
|
||||
{{
|
||||
timeLabel(stats.case_duration.average)[1] +
|
||||
" " +
|
||||
timeLabel(stats.case_duration.average)[2]
|
||||
}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<Tag value="MED" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>
|
||||
<Tag
|
||||
value="MED"
|
||||
class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"
|
||||
></Tag>
|
||||
</td>
|
||||
<td class="text-[#0099FF] flex w-20 justify-end">
|
||||
{{ timeLabel(stats.case_duration.median)[1] + ' ' + timeLabel(stats.case_duration.median)[2] }}
|
||||
{{
|
||||
timeLabel(stats.case_duration.median)[1] +
|
||||
" " +
|
||||
timeLabel(stats.case_duration.median)[2]
|
||||
}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<Tag value="MAX" class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"></Tag>
|
||||
<Tag
|
||||
value="MAX"
|
||||
class="!text-neutral-900 !bg-neutral-200 mr-2 !w-10"
|
||||
></Tag>
|
||||
</td>
|
||||
<td class="text-[#0099FF] flex w-20 justify-end">
|
||||
{{ timeLabel(stats.case_duration.max)[1] + ' ' + timeLabel(stats.case_duration.max)[2] }}
|
||||
{{
|
||||
timeLabel(stats.case_duration.max)[1] +
|
||||
" " +
|
||||
timeLabel(stats.case_duration.max)[2]
|
||||
}}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@@ -120,120 +211,215 @@
|
||||
<div class="border-b-2 border-neutral-300 mb-4">
|
||||
<p class="h2">Most Frequent</p>
|
||||
<ul class="list-disc ml-6 mb-2 text-sm">
|
||||
<li class="leading-5">Activity:
|
||||
<span class="text-[#0099FF] break-words bg-[#F1F5F9] px-2 rounded mx-1" v-for="(value, key) in
|
||||
insights.most_freq_tasks" :key="key">{{ value }}</span>
|
||||
<li class="leading-5">
|
||||
Activity:
|
||||
<span
|
||||
class="text-[#0099FF] break-words bg-[#F1F5F9] px-2 rounded mx-1"
|
||||
v-for="(value, key) in insights.most_freq_tasks"
|
||||
:key="key"
|
||||
>{{ value }}</span
|
||||
>
|
||||
</li>
|
||||
<li class="leading-5">Inbound connections:
|
||||
<span class="text-[#0099FF] break-words bg-[#F1F5F9] px-2 rounded mx-1" v-for="(value, key) in
|
||||
insights.most_freq_in" :key="key">{{ value }}
|
||||
<li class="leading-5">
|
||||
Inbound connections:
|
||||
<span
|
||||
class="text-[#0099FF] break-words bg-[#F1F5F9] px-2 rounded mx-1"
|
||||
v-for="(value, key) in insights.most_freq_in"
|
||||
:key="key"
|
||||
>{{ value }}
|
||||
</span>
|
||||
</li>
|
||||
<li class="leading-5">Outbound connections:
|
||||
<span class="text-[#0099FF] break-words bg-[#F1F5F9] px-2 rounded mx-1" v-for="(value, key) in
|
||||
insights.most_freq_out" :key="key">{{ value }}
|
||||
<li class="leading-5">
|
||||
Outbound connections:
|
||||
<span
|
||||
class="text-[#0099FF] break-words bg-[#F1F5F9] px-2 rounded mx-1"
|
||||
v-for="(value, key) in insights.most_freq_out"
|
||||
:key="key"
|
||||
>{{ value }}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="h2">Most Time-Consuming</p>
|
||||
<ul class="list-disc ml-6 mb-4 text-sm">
|
||||
<li class="w-full leading-5">Activity:
|
||||
<span class="text-primary break-words bg-[#F1F5F9] px-2 rounded mx-1" v-for="(value, key)
|
||||
in insights.most_time_tasks" :key="key">{{ value }}
|
||||
<li class="w-full leading-5">
|
||||
Activity:
|
||||
<span
|
||||
class="text-primary break-words bg-[#F1F5F9] px-2 rounded mx-1"
|
||||
v-for="(value, key) in insights.most_time_tasks"
|
||||
:key="key"
|
||||
>{{ value }}
|
||||
</span>
|
||||
</li>
|
||||
<li class="w-full leading-5 mt-2">Connection:
|
||||
<span class="text-primary break-words"
|
||||
v-for="(item, key) in insights.most_time_edges" :key="key">
|
||||
<li class="w-full leading-5 mt-2">
|
||||
Connection:
|
||||
<span
|
||||
class="text-primary break-words"
|
||||
v-for="(item, key) in insights.most_time_edges"
|
||||
:key="key"
|
||||
>
|
||||
<span v-for="(value, index) in item" :key="index">
|
||||
<span class="connection-text bg-[#F1F5F9] px-2 rounded">{{ value }}</span>
|
||||
<span v-if="index !== item.length - 1">
|
||||
<span class="material-symbols-outlined !text-lg align-sub ">arrow_forward</span>
|
||||
</span>
|
||||
<span class="connection-text bg-[#F1F5F9] px-2 rounded">{{
|
||||
value
|
||||
}}</span>
|
||||
<span v-if="index !== item.length - 1"
|
||||
>
|
||||
<span class="material-symbols-outlined !text-lg align-sub"
|
||||
>arrow_forward</span
|
||||
>
|
||||
</span
|
||||
>
|
||||
</span>
|
||||
<span v-if="key !== insights.most_time_edges.length - 1" class="text-neutral-900">, </span>
|
||||
<span
|
||||
v-if="key !== insights.most_time_edges.length - 1"
|
||||
class="text-neutral-900"
|
||||
>, </span
|
||||
>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<ul class="trace-buttons text-neutral-500 grid grid-cols-2 gap-2 text-center text-sm font-medium mb-2">
|
||||
<li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="onActiveTraceClick(0)" :class="activeTrace === 0? 'text-primary border-primary':''">Self-Loop</li>
|
||||
<li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="onActiveTraceClick(1)" :class="activeTrace === 1? 'text-primary border-primary':''">Short-Loop</li>
|
||||
<li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="onActiveTraceClick(2)" :class="activeTrace === 2? 'text-primary border-primary':''">Shortest Trace</li>
|
||||
<li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="onActiveTraceClick(3)" :class="activeTrace === 3? 'text-primary border-primary':''">Longest Trace</li>
|
||||
<li class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500" @click="onActiveTraceClick(4)" :class="activeTrace === 4? 'text-primary border-primary':''">Most Frequent Trace</li>
|
||||
<ul
|
||||
class="trace-buttons text-neutral-500 grid grid-cols-2 gap-2 text-center text-sm font-medium mb-2"
|
||||
>
|
||||
<li
|
||||
class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500"
|
||||
@click="onActiveTraceClick(0)"
|
||||
:class="activeTrace === 0 ? 'text-primary border-primary' : ''"
|
||||
>
|
||||
Self-Loop
|
||||
</li>
|
||||
<li
|
||||
class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500"
|
||||
@click="onActiveTraceClick(1)"
|
||||
:class="activeTrace === 1 ? 'text-primary border-primary' : ''"
|
||||
>
|
||||
Short-Loop
|
||||
</li>
|
||||
<li
|
||||
class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500"
|
||||
@click="onActiveTraceClick(2)"
|
||||
:class="activeTrace === 2 ? 'text-primary border-primary' : ''"
|
||||
>
|
||||
Shortest Trace
|
||||
</li>
|
||||
<li
|
||||
class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500"
|
||||
@click="onActiveTraceClick(3)"
|
||||
:class="activeTrace === 3 ? 'text-primary border-primary' : ''"
|
||||
>
|
||||
Longest Trace
|
||||
</li>
|
||||
<li
|
||||
class="border border-neutral-500 rounded p-2 cursor-pointer hover:text-primary hover:border-primary hover:duration-500"
|
||||
@click="onActiveTraceClick(4)"
|
||||
:class="activeTrace === 4 ? 'text-primary border-primary' : ''"
|
||||
>
|
||||
Most Frequent Trace
|
||||
</li>
|
||||
</ul>
|
||||
<div class="reset-trace-button underline text-[#4E5969] text-[14px] flex justify-end cursor-pointer
|
||||
font-semibold" @click="onResetTraceBtnClick">
|
||||
<div
|
||||
class="reset-trace-button underline text-[#4E5969] text-[14px] flex justify-end cursor-pointer font-semibold"
|
||||
@click="onResetTraceBtnClick"
|
||||
>
|
||||
{{ i18next.t("Map.Reset") }}
|
||||
</div>
|
||||
<div>
|
||||
<TabView ref="tabview2" v-model:activeIndex="activeTrace">
|
||||
<TabPanel header="Self-loop" contentClass="text-sm">
|
||||
<p v-if="insights.self_loops.length === 0">No data</p>
|
||||
<ul v-else class="ml-6 space-y-1">
|
||||
<li v-for="(value, key) in insights.self_loops" :key="key">
|
||||
<span>{{ value }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</TabPanel>
|
||||
<TabPanel header="Short-loop" contentClass="text-sm">
|
||||
<p v-if="insights.short_loops.length === 0">No data</p>
|
||||
<ul v-else class="ml-6 space-y-1">
|
||||
<li class="break-words" v-for="(item, key) in insights.short_loops" :key="key">
|
||||
<span v-for="(value, index) in item" :key="index">
|
||||
{{ value }}
|
||||
<span v-if="index !== item.length - 1">
|
||||
<span class="material-symbols-outlined !text-lg align-sub">sync_alt</span>
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</TabPanel>
|
||||
<!-- Iterate starting from shortest_traces -->
|
||||
<TabPanel v-for="([field, label], i) in fieldNamesAndLabelNames" :key="i" :header="label"
|
||||
contentClass="text-sm">
|
||||
<p v-if="insights[field].length === 0" class="bg-neutral-100 p-2 rounded">No data</p>
|
||||
<ul v-else class="ml-1 space-y-1">
|
||||
<li v-for="(item, key2) in insights[field]" :key="key2"
|
||||
class="mb-2 flex bg-neutral-100 p-2 rounded">
|
||||
<div class="flex left-col mr-1">
|
||||
<input type="radio" name="customRadio" :value="key2" v-model="clickedPathListIndex"
|
||||
class="hidden peer" @click="onPathOptionClick(key2)"
|
||||
/>
|
||||
<!-- If in BPMN view mode, path highlighting is not allowed -->
|
||||
<span v-if="!isBPMNOn" @click="onPathOptionClick(key2)"
|
||||
<TabPanel header="Self-loop" contentClass="text-sm">
|
||||
<p v-if="insights.self_loops.length === 0">No data</p>
|
||||
<ul v-else class="ml-6 space-y-1">
|
||||
<li v-for="(value, key) in insights.self_loops" :key="key">
|
||||
<span>{{ value }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</TabPanel>
|
||||
<TabPanel header="Short-loop" contentClass="text-sm">
|
||||
<p v-if="insights.short_loops.length === 0">No data</p>
|
||||
<ul v-else class="ml-6 space-y-1">
|
||||
<li
|
||||
class="break-words"
|
||||
v-for="(item, key) in insights.short_loops"
|
||||
:key="key"
|
||||
>
|
||||
<span v-for="(value, index) in item" :key="index">
|
||||
{{ value }}
|
||||
<span v-if="index !== item.length - 1"
|
||||
>
|
||||
<span class="material-symbols-outlined !text-lg align-sub"
|
||||
>sync_alt</span
|
||||
>
|
||||
</span
|
||||
>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</TabPanel>
|
||||
<!-- Iterate starting from shortest_traces -->
|
||||
<TabPanel
|
||||
v-for="([field, label], i) in fieldNamesAndLabelNames"
|
||||
:key="i"
|
||||
:header="label"
|
||||
contentClass="text-sm"
|
||||
>
|
||||
<p
|
||||
v-if="insights[field].length === 0"
|
||||
class="bg-neutral-100 p-2 rounded"
|
||||
>
|
||||
No data
|
||||
</p>
|
||||
<ul v-else class="ml-1 space-y-1">
|
||||
<li
|
||||
v-for="(item, key2) in insights[field]"
|
||||
:key="key2"
|
||||
class="mb-2 flex bg-neutral-100 p-2 rounded"
|
||||
>
|
||||
<div class="flex left-col mr-1">
|
||||
<input
|
||||
type="radio"
|
||||
name="customRadio"
|
||||
:value="key2"
|
||||
v-model="clickedPathListIndex"
|
||||
class="hidden peer"
|
||||
@click="onPathOptionClick(key2)"
|
||||
/>
|
||||
<!-- If in BPMN view mode, path highlighting is not allowed -->
|
||||
<span
|
||||
v-if="!isBPMNOn"
|
||||
@click="onPathOptionClick(key2)"
|
||||
:class="[
|
||||
'w-[18px] h-[18px] rounded-full border-2 inline-flex items-center justify-center cursor-pointer bg-[#FFFFFF]',
|
||||
clickedPathListIndex === key2
|
||||
? 'border-[#0099FF]'
|
||||
: 'border-[#CBD5E1]'
|
||||
: 'border-[#CBD5E1]',
|
||||
]"
|
||||
>
|
||||
<div
|
||||
:class="[
|
||||
'w-[9px] h-[9px] rounded-full transition-opacity cursor-pointer',
|
||||
clickedPathListIndex === key2
|
||||
? 'bg-[#0099FF]'
|
||||
: 'opacity-0',
|
||||
]"
|
||||
></div>
|
||||
</span>
|
||||
</div>
|
||||
<div class="right-col">
|
||||
<span v-for="(value, index) in item" :key="index">
|
||||
{{ value }}
|
||||
<span v-if="index !== item.length - 1">
|
||||
|
||||
<span
|
||||
class="material-symbols-outlined !text-lg align-sub"
|
||||
>arrow_forward</span
|
||||
>
|
||||
<div
|
||||
:class="[
|
||||
'w-[9px] h-[9px] rounded-full transition-opacity cursor-pointer',
|
||||
clickedPathListIndex === key2
|
||||
? 'bg-[#0099FF]'
|
||||
: 'opacity-0'
|
||||
]"
|
||||
></div>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
<div class="right-col">
|
||||
<span v-for="(value, index) in item" :key="index">
|
||||
{{ value }}
|
||||
<span v-if="index !== item.length - 1">
|
||||
|
||||
<span class="material-symbols-outlined !text-lg align-sub">arrow_forward</span>
|
||||
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</TabPanel>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</div>
|
||||
@@ -253,13 +439,13 @@
|
||||
* and case duration.
|
||||
*/
|
||||
|
||||
import { computed, ref } from 'vue';
|
||||
import { usePageAdminStore } from '@/stores/pageAdmin';
|
||||
import { useMapPathStore } from '@/stores/mapPathStore';
|
||||
import { getTimeLabel } from '@/module/timeLabel.js';
|
||||
import getMoment from 'moment';
|
||||
import i18next from '@/i18n/i18n';
|
||||
import { INSIGHTS_FIELDS_AND_LABELS } from '@/constants/constants';
|
||||
import { computed, ref } from "vue";
|
||||
import { usePageAdminStore } from "@/stores/pageAdmin";
|
||||
import { useMapPathStore } from "@/stores/mapPathStore";
|
||||
import { getTimeLabel } from "@/module/timeLabel.js";
|
||||
import getMoment from "moment";
|
||||
import i18next from "@/i18n/i18n";
|
||||
import { INSIGHTS_FIELDS_AND_LABELS } from "@/constants/constants";
|
||||
|
||||
// Remove the first and second elements
|
||||
const fieldNamesAndLabelNames = [...INSIGHTS_FIELDS_AND_LABELS].slice(2);
|
||||
@@ -276,7 +462,7 @@ const props = defineProps({
|
||||
insights: {
|
||||
type: Object,
|
||||
required: false,
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const pageAdmin = usePageAdminStore();
|
||||
@@ -287,7 +473,7 @@ const currentMapFile = computed(() => pageAdmin.currentMapFile);
|
||||
const clickedPathListIndex = ref(0);
|
||||
const isBPMNOn = computed(() => mapPathStore.isBPMNOn);
|
||||
|
||||
const tab = ref('summary');
|
||||
const tab = ref("summary");
|
||||
const valueCases = ref(0);
|
||||
const valueTraces = ref(0);
|
||||
const valueTaskInstances = ref(0);
|
||||
@@ -300,7 +486,10 @@ const valueTasks = ref(0);
|
||||
function onActiveTraceClick(clickedActiveTraceIndex) {
|
||||
mapPathStore.clearAllHighlight();
|
||||
activeTrace.value = clickedActiveTraceIndex;
|
||||
mapPathStore.highlightClickedPath(clickedActiveTraceIndex, clickedPathListIndex.value);
|
||||
mapPathStore.highlightClickedPath(
|
||||
clickedActiveTraceIndex,
|
||||
clickedPathListIndex.value,
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -314,7 +503,7 @@ function onPathOptionClick(clickedPath) {
|
||||
|
||||
/** Resets the trace highlight to default. */
|
||||
function onResetTraceBtnClick() {
|
||||
if(isBPMNOn.value) {
|
||||
if (isBPMNOn.value) {
|
||||
return;
|
||||
}
|
||||
clickedPathListIndex.value = undefined;
|
||||
@@ -330,9 +519,10 @@ function switchTab(newTab) {
|
||||
/**
|
||||
* @param {number} time use timeLabel.js
|
||||
*/
|
||||
function timeLabel(time){ // sonar-qube prevent super-linear runtime due to backtracking; change * to ?
|
||||
function timeLabel(time) {
|
||||
// sonar-qube prevent super-linear runtime due to backtracking; change * to ?
|
||||
//
|
||||
const label = getTimeLabel(time).replace(/\s+/g, ' '); // Collapse all consecutive whitespace into a single space
|
||||
const label = getTimeLabel(time).replace(/\s+/g, " "); // Collapse all consecutive whitespace into a single space
|
||||
const result = label.match(/^(\d+)\s?([a-zA-Z]+)$/); // add ^ and $ to meet sonar-qube need
|
||||
return result;
|
||||
}
|
||||
@@ -340,8 +530,8 @@ function timeLabel(time){ // sonar-qube prevent super-linear runtime due to back
|
||||
/**
|
||||
* @param {number} time use moment
|
||||
*/
|
||||
function moment(time){
|
||||
return getMoment(time).format('YYYY-MM-DD HH:mm');
|
||||
function moment(time) {
|
||||
return getMoment(time).format("YYYY-MM-DD HH:mm");
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -349,15 +539,15 @@ function moment(time){
|
||||
* @param {number} val - The raw ratio value.
|
||||
* @returns {string} The formatted percentage string.
|
||||
*/
|
||||
function getPercentLabel(val){
|
||||
if((val * 100).toFixed(1) >= 100) return `100%`;
|
||||
function getPercentLabel(val) {
|
||||
if ((val * 100).toFixed(1) >= 100) return `100%`;
|
||||
else return `${(val * 100).toFixed(1)}%`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Behavior when show
|
||||
*/
|
||||
function show(){
|
||||
function show() {
|
||||
valueCases.value = props.stats.cases.ratio * 100;
|
||||
valueTraces.value = props.stats.traces.ratio * 100;
|
||||
valueTaskInstances.value = props.stats.task_instances.ratio * 100;
|
||||
@@ -367,7 +557,7 @@ function show(){
|
||||
/**
|
||||
* Behavior when hidden
|
||||
*/
|
||||
function hide(){
|
||||
function hide() {
|
||||
valueCases.value = 0;
|
||||
valueTraces.value = 0;
|
||||
valueTaskInstances.value = 0;
|
||||
@@ -378,24 +568,24 @@ function hide(){
|
||||
<style scoped>
|
||||
@reference "../../../assets/tailwind.css";
|
||||
:deep(.p-progressbar .p-progressbar-value) {
|
||||
@apply bg-primary
|
||||
@apply bg-primary;
|
||||
}
|
||||
:deep(.p-tabview-nav-container) {
|
||||
@apply hidden
|
||||
@apply hidden;
|
||||
}
|
||||
:deep(.p-tabview-panels) {
|
||||
@apply p-2 rounded
|
||||
@apply p-2 rounded;
|
||||
}
|
||||
:deep(.p-tabview-panel) {
|
||||
@apply animate-fadein
|
||||
@apply animate-fadein;
|
||||
}
|
||||
.caseDurationTable td {
|
||||
@apply scroll-pb-12
|
||||
@apply scroll-pb-12;
|
||||
}
|
||||
.caseDurationTable td:nth-child(2) {
|
||||
@apply text-right
|
||||
@apply text-right;
|
||||
}
|
||||
.caseDurationTable td:last-child {
|
||||
@apply pl-2
|
||||
@apply pl-2;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,29 +1,47 @@
|
||||
<!-- Sidebar: Switch data type -->
|
||||
<template>
|
||||
<div class="flex flex-col justify-between py-4 w-14 h-screen-main absolute bottom-0 left-0 z-10"
|
||||
:class="sidebarLeftValue ? 'bg-neutral-50' : ''">
|
||||
<div
|
||||
class="flex flex-col justify-between py-4 w-14 h-screen-main absolute bottom-0 left-0 z-10"
|
||||
:class="sidebarLeftValue ? 'bg-neutral-50' : ''"
|
||||
>
|
||||
<ul class="space-y-4 flex flex-col justify-center items-center">
|
||||
<li class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow
|
||||
hover:border-primary" @click="sidebarView = !sidebarView" :class="{ 'border-primary': sidebarView }"
|
||||
v-tooltip="tooltip.sidebarView">
|
||||
<span class="material-symbols-outlined !text-2xl hover:text-primary p-1.5"
|
||||
:class="[sidebarView ? 'text-primary' : 'text-neutral-500']">
|
||||
<li
|
||||
class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow hover:border-primary"
|
||||
@click="sidebarView = !sidebarView"
|
||||
:class="{ 'border-primary': sidebarView }"
|
||||
v-tooltip="tooltip.sidebarView"
|
||||
>
|
||||
<span
|
||||
class="material-symbols-outlined !text-2xl hover:text-primary p-1.5"
|
||||
:class="[sidebarView ? 'text-primary' : 'text-neutral-500']"
|
||||
>
|
||||
track_changes
|
||||
</span>
|
||||
</li>
|
||||
<li class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow
|
||||
hover:border-primary" @click="sidebarFilter = !sidebarFilter" :class="{ 'border-primary': sidebarFilter }"
|
||||
v-tooltip="tooltip.sidebarFilter">
|
||||
<span class="material-symbols-outlined !text-2xl hover:text-primary p-1.5"
|
||||
:class="[sidebarFilter ? 'text-primary' : 'text-neutral-500']" id="iconFilter">
|
||||
<li
|
||||
class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow hover:border-primary"
|
||||
@click="sidebarFilter = !sidebarFilter"
|
||||
:class="{ 'border-primary': sidebarFilter }"
|
||||
v-tooltip="tooltip.sidebarFilter"
|
||||
>
|
||||
<span
|
||||
class="material-symbols-outlined !text-2xl hover:text-primary p-1.5"
|
||||
:class="[sidebarFilter ? 'text-primary' : 'text-neutral-500']"
|
||||
id="iconFilter"
|
||||
>
|
||||
tornado
|
||||
</span>
|
||||
</li>
|
||||
<li class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-50
|
||||
drop-shadow hover:border-primary" @click="sidebarTraces = !sidebarTraces"
|
||||
:class="{ 'border-primary': sidebarTraces }" v-tooltip="tooltip.sidebarTraces">
|
||||
<span class="material-symbols-outlined !text-2xl hover:text-primary p-1.5"
|
||||
:class="[sidebarTraces ? 'text-primary' : 'text-neutral-500']">
|
||||
<li
|
||||
class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow hover:border-primary"
|
||||
@click="sidebarTraces = !sidebarTraces"
|
||||
:class="{ 'border-primary': sidebarTraces }"
|
||||
v-tooltip="tooltip.sidebarTraces"
|
||||
>
|
||||
<span
|
||||
class="material-symbols-outlined !text-2xl hover:text-primary p-1.5"
|
||||
:class="[sidebarTraces ? 'text-primary' : 'text-neutral-500']"
|
||||
>
|
||||
rebase
|
||||
</span>
|
||||
</li>
|
||||
@@ -36,13 +54,22 @@
|
||||
</div>
|
||||
|
||||
<!-- Sidebar: State -->
|
||||
<div id='sidebar_state' class="bg-transparent py-4 w-14 h-screen-main z-10 bottom-0 right-0 absolute">
|
||||
<div
|
||||
id="sidebar_state"
|
||||
class="bg-transparent py-4 w-14 h-screen-main z-10 bottom-0 right-0 absolute"
|
||||
>
|
||||
<ul class="flex flex-col justify-center items-center">
|
||||
<li class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer
|
||||
bg-neutral-50 drop-shadow hover:border-primary" @click="sidebarState = !sidebarState"
|
||||
:class="{ 'border-primary': sidebarState }" id="iconState" v-tooltip.left="tooltip.sidebarState">
|
||||
<span class="material-symbols-outlined !text-2xl text-neutral-500 hover:text-primary p-1.5"
|
||||
:class="[sidebarState ? 'text-primary' : 'text-neutral-500']">
|
||||
<li
|
||||
class="inline-flex items-center justify-center border border-neutral-500 rounded-full w-9 h-9 cursor-pointer bg-neutral-50 drop-shadow hover:border-primary"
|
||||
@click="sidebarState = !sidebarState"
|
||||
:class="{ 'border-primary': sidebarState }"
|
||||
id="iconState"
|
||||
v-tooltip.left="tooltip.sidebarState"
|
||||
>
|
||||
<span
|
||||
class="material-symbols-outlined !text-2xl text-neutral-500 hover:text-primary p-1.5"
|
||||
:class="[sidebarState ? 'text-primary' : 'text-neutral-500']"
|
||||
>
|
||||
info
|
||||
</span>
|
||||
</li>
|
||||
@@ -50,14 +77,36 @@
|
||||
</div>
|
||||
|
||||
<!-- Sidebar Model -->
|
||||
<SidebarView v-model:visible="sidebarView" @switch-map-type="switchMapType" @switch-curve-styles="switchCurveStyles"
|
||||
@switch-rank="switchRank" @switch-data-layer-type="switchDataLayerType"></SidebarView>
|
||||
<SidebarState v-model:visible="sidebarState" :insights="insights" :stats="stats"></SidebarState>
|
||||
<SidebarTraces v-model:visible="sidebarTraces" :cases="cases" @switch-Trace-Id="switchTraceId" ref="tracesViewRef">
|
||||
<SidebarView
|
||||
v-model:visible="sidebarView"
|
||||
@switch-map-type="switchMapType"
|
||||
@switch-curve-styles="switchCurveStyles"
|
||||
@switch-rank="switchRank"
|
||||
@switch-data-layer-type="switchDataLayerType"
|
||||
></SidebarView>
|
||||
<SidebarState
|
||||
v-model:visible="sidebarState"
|
||||
:insights="insights"
|
||||
:stats="stats"
|
||||
></SidebarState>
|
||||
<SidebarTraces
|
||||
v-model:visible="sidebarTraces"
|
||||
:cases="cases"
|
||||
@switch-Trace-Id="switchTraceId"
|
||||
ref="tracesViewRef"
|
||||
>
|
||||
</SidebarTraces>
|
||||
<SidebarFilter v-model:visible="sidebarFilter" :filterTasks="filterTasks" :filterStartToEnd="filterStartToEnd"
|
||||
:filterEndToStart="filterEndToStart" :filterTimeframe="filterTimeframe" :filterTrace="filterTrace"
|
||||
@submit-all="createCy(mapType)" @switch-Trace-Id="switchTraceId" ref="sidebarFilterRefComp"></SidebarFilter>
|
||||
<SidebarFilter
|
||||
v-model:visible="sidebarFilter"
|
||||
:filterTasks="filterTasks"
|
||||
:filterStartToEnd="filterStartToEnd"
|
||||
:filterEndToStart="filterEndToStart"
|
||||
:filterTimeframe="filterTimeframe"
|
||||
:filterTrace="filterTrace"
|
||||
@submit-all="createCy(mapType)"
|
||||
@switch-Trace-Id="switchTraceId"
|
||||
ref="sidebarFilterRefComp"
|
||||
></SidebarFilter>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -72,19 +121,19 @@
|
||||
* dual Cytoscape graphs.
|
||||
*/
|
||||
|
||||
import { useConformanceStore } from '@/stores/conformance';
|
||||
import { useConformanceStore as useConformanceStoreInGuard } from "@/stores/conformance";
|
||||
|
||||
export default {
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
const isCheckPage = to.name.includes('Check');
|
||||
const isCheckPage = to.name.includes("Check");
|
||||
|
||||
if (isCheckPage) {
|
||||
const conformanceStore = useConformanceStore();
|
||||
const conformanceStore = useConformanceStoreInGuard();
|
||||
switch (to.params.type) {
|
||||
case 'log':
|
||||
case "log":
|
||||
conformanceStore.conformanceLogCreateCheckId = to.params.fileId;
|
||||
break;
|
||||
case 'filter':
|
||||
case "filter":
|
||||
conformanceStore.conformanceFilterCreateCheckId = to.params.fileId;
|
||||
break;
|
||||
}
|
||||
@@ -92,33 +141,33 @@ export default {
|
||||
to.meta.file = conformanceStore.routeFile;
|
||||
}
|
||||
next();
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch, onBeforeMount, onBeforeUnmount } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useLoadingStore } from '@/stores/loading';
|
||||
import { useAllMapDataStore } from '@/stores/allMapData';
|
||||
import { useConformanceStore } from '@/stores/conformance';
|
||||
import cytoscapeMap from '@/module/cytoscapeMap.js';
|
||||
import { useCytoscapeStore } from '@/stores/cytoscapeStore';
|
||||
import { useMapPathStore } from '@/stores/mapPathStore';
|
||||
import emitter from '@/utils/emitter';
|
||||
import SidebarView from '@/components/Discover/Map/SidebarView.vue';
|
||||
import SidebarState from '@/components/Discover/Map/SidebarState.vue';
|
||||
import SidebarTraces from '@/components/Discover/Map/SidebarTraces.vue';
|
||||
import SidebarFilter from '@/components/Discover/Map/SidebarFilter.vue';
|
||||
import ImgCapsule1 from '@/assets/capsule1.svg';
|
||||
import ImgCapsule2 from '@/assets/capsule2.svg';
|
||||
import ImgCapsule3 from '@/assets/capsule3.svg';
|
||||
import ImgCapsule4 from '@/assets/capsule4.svg';
|
||||
import { ref, computed, watch, onBeforeMount, onBeforeUnmount } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { useLoadingStore } from "@/stores/loading";
|
||||
import { useAllMapDataStore } from "@/stores/allMapData";
|
||||
import { useConformanceStore } from "@/stores/conformance";
|
||||
import cytoscapeMap from "@/module/cytoscapeMap.js";
|
||||
import { useCytoscapeStore } from "@/stores/cytoscapeStore";
|
||||
import { useMapPathStore } from "@/stores/mapPathStore";
|
||||
import emitter from "@/utils/emitter";
|
||||
import SidebarView from "@/components/Discover/Map/SidebarView.vue";
|
||||
import SidebarState from "@/components/Discover/Map/SidebarState.vue";
|
||||
import SidebarTraces from "@/components/Discover/Map/SidebarTraces.vue";
|
||||
import SidebarFilter from "@/components/Discover/Map/SidebarFilter.vue";
|
||||
import ImgCapsule1 from "@/assets/capsule1.svg";
|
||||
import ImgCapsule2 from "@/assets/capsule2.svg";
|
||||
import ImgCapsule3 from "@/assets/capsule3.svg";
|
||||
import ImgCapsule4 from "@/assets/capsule4.svg";
|
||||
|
||||
const ImgCapsules = [ImgCapsule1, ImgCapsule2, ImgCapsule3, ImgCapsule4];
|
||||
|
||||
const props = defineProps(['type', 'checkType', 'checkId', 'checkFileId']);
|
||||
const props = defineProps(["type", "checkType", "checkId", "checkFileId"]);
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
@@ -126,10 +175,28 @@ const route = useRoute();
|
||||
const loadingStore = useLoadingStore();
|
||||
const allMapDataStore = useAllMapDataStore();
|
||||
const { isLoading } = storeToRefs(loadingStore);
|
||||
const { processMap, bpmn, stats, insights, traceId, traces, baseTraces, baseTraceId,
|
||||
filterTasks, filterStartToEnd, filterEndToStart, filterTimeframe, filterTrace,
|
||||
temporaryData, isRuleData, ruleData, logId, baseLogId, createFilterId, cases,
|
||||
postRuleData
|
||||
const {
|
||||
processMap,
|
||||
bpmn,
|
||||
stats,
|
||||
insights,
|
||||
traceId,
|
||||
traces,
|
||||
baseTraces,
|
||||
baseTraceId,
|
||||
filterTasks,
|
||||
filterStartToEnd,
|
||||
filterEndToStart,
|
||||
filterTimeframe,
|
||||
filterTrace,
|
||||
temporaryData,
|
||||
isRuleData,
|
||||
ruleData,
|
||||
logId,
|
||||
baseLogId,
|
||||
createFilterId,
|
||||
cases,
|
||||
postRuleData,
|
||||
} = storeToRefs(allMapDataStore);
|
||||
|
||||
const cytoscapeStore = useCytoscapeStore();
|
||||
@@ -138,14 +205,14 @@ const mapPathStore = useMapPathStore();
|
||||
|
||||
const numberBeforeMapInRoute = computed(() => {
|
||||
const path = route.path;
|
||||
const segments = path.split('/');
|
||||
const mapIndex = segments.findIndex(segment => segment.includes('map'));
|
||||
const segments = path.split("/");
|
||||
const mapIndex = segments.findIndex((segment) => segment.includes("map"));
|
||||
if (mapIndex > 0) {
|
||||
const previousSegment = segments[mapIndex - 1];
|
||||
const match = previousSegment.match(/\d+/);
|
||||
return match ? match[0] : 'No number found';
|
||||
return match ? match[0] : "No number found";
|
||||
}
|
||||
return 'No map segment found';
|
||||
return "No map segment found";
|
||||
});
|
||||
|
||||
onBeforeMount(() => {
|
||||
@@ -166,11 +233,11 @@ const bpmnData = ref({
|
||||
edges: [],
|
||||
});
|
||||
const cytoscapeGraph = ref(null);
|
||||
const curveStyle = ref('unbundled-bezier');
|
||||
const mapType = ref('processMap');
|
||||
const dataLayerType = ref('freq');
|
||||
const dataLayerOption = ref('total');
|
||||
const rank = ref('LR');
|
||||
const curveStyle = ref("unbundled-bezier");
|
||||
const mapType = ref("processMap");
|
||||
const dataLayerType = ref("freq");
|
||||
const dataLayerOption = ref("total");
|
||||
const rank = ref("LR");
|
||||
const localTraceId = ref(1);
|
||||
const sidebarView = ref(false);
|
||||
const sidebarState = ref(false);
|
||||
@@ -184,38 +251,42 @@ const sidebarFilterRefComp = ref(null);
|
||||
|
||||
const tooltip = {
|
||||
sidebarView: {
|
||||
value: 'Visualization Setting',
|
||||
class: 'ml-1',
|
||||
value: "Visualization Setting",
|
||||
class: "ml-1",
|
||||
pt: {
|
||||
text: 'text-[10px] p-1'
|
||||
}
|
||||
text: "text-[10px] p-1",
|
||||
},
|
||||
},
|
||||
sidebarTraces: {
|
||||
value: 'Trace',
|
||||
class: 'ml-1',
|
||||
value: "Trace",
|
||||
class: "ml-1",
|
||||
pt: {
|
||||
text: 'text-[10px] p-1'
|
||||
}
|
||||
text: "text-[10px] p-1",
|
||||
},
|
||||
},
|
||||
sidebarFilter: {
|
||||
value: 'Filter',
|
||||
class: 'ml-1',
|
||||
value: "Filter",
|
||||
class: "ml-1",
|
||||
pt: {
|
||||
text: 'text-[10px] p-1'
|
||||
}
|
||||
text: "text-[10px] p-1",
|
||||
},
|
||||
},
|
||||
sidebarState: {
|
||||
value: 'Summary',
|
||||
class: 'ml-1',
|
||||
value: "Summary",
|
||||
class: "ml-1",
|
||||
pt: {
|
||||
text: 'text-[10px] p-1'
|
||||
}
|
||||
text: "text-[10px] p-1",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// Computed
|
||||
const sidebarLeftValue = computed(() => {
|
||||
return sidebarView.value === true || sidebarTraces.value === true || sidebarFilter.value === true;
|
||||
return (
|
||||
sidebarView.value === true ||
|
||||
sidebarTraces.value === true ||
|
||||
sidebarFilter.value === true
|
||||
);
|
||||
});
|
||||
|
||||
// Watch
|
||||
@@ -310,21 +381,21 @@ async function switchTraceId(e) {
|
||||
function setNodesData(mapData) {
|
||||
const mapTypeVal = mapType.value;
|
||||
const logFreq = {
|
||||
"total": "",
|
||||
"rel_freq": "",
|
||||
"average": "",
|
||||
"median": "",
|
||||
"max": "",
|
||||
"min": "",
|
||||
"cases": ""
|
||||
total: "",
|
||||
rel_freq: "",
|
||||
average: "",
|
||||
median: "",
|
||||
max: "",
|
||||
min: "",
|
||||
cases: "",
|
||||
};
|
||||
const logDuration = {
|
||||
"total": "",
|
||||
"rel_duration": "",
|
||||
"average": "",
|
||||
"median": "",
|
||||
"max": "",
|
||||
"min": "",
|
||||
total: "",
|
||||
rel_duration: "",
|
||||
average: "",
|
||||
median: "",
|
||||
max: "",
|
||||
min: "",
|
||||
};
|
||||
const gateway = {
|
||||
parallel: "+",
|
||||
@@ -333,10 +404,10 @@ function setNodesData(mapData) {
|
||||
};
|
||||
|
||||
mapData.nodes = [];
|
||||
const mapSource = mapTypeVal === 'processMap' ? processMap.value : bpmn.value;
|
||||
mapSource.vertices.forEach(node => {
|
||||
const mapSource = mapTypeVal === "processMap" ? processMap.value : bpmn.value;
|
||||
mapSource.vertices.forEach((node) => {
|
||||
switch (node.type) {
|
||||
case 'gateway':
|
||||
case "gateway":
|
||||
mapData.nodes.push({
|
||||
data: {
|
||||
id: node.id,
|
||||
@@ -344,20 +415,19 @@ function setNodesData(mapData) {
|
||||
label: gateway[node.gateway_type],
|
||||
height: 60,
|
||||
width: 60,
|
||||
backgroundColor: '#FFF',
|
||||
bordercolor: '#003366',
|
||||
backgroundColor: "#FFF",
|
||||
bordercolor: "#003366",
|
||||
shape: "diamond",
|
||||
freq: logFreq,
|
||||
duration: logDuration,
|
||||
}
|
||||
})
|
||||
},
|
||||
});
|
||||
break;
|
||||
case 'event':
|
||||
if (node.event_type === 'start') {
|
||||
case "event":
|
||||
if (node.event_type === "start") {
|
||||
mapData.startId = node.id;
|
||||
startNodeId.value = node.id;
|
||||
}
|
||||
else if (node.event_type === 'end') {
|
||||
} else if (node.event_type === "end") {
|
||||
mapData.endId = node.id;
|
||||
endNodeId.value = node.id;
|
||||
}
|
||||
@@ -369,13 +439,13 @@ function setNodesData(mapData) {
|
||||
label: node.event_type,
|
||||
height: 48,
|
||||
width: 48,
|
||||
backgroundColor: '#FFFFFF',
|
||||
bordercolor: '#0F172A',
|
||||
textColor: '#FF3366',
|
||||
backgroundColor: "#FFFFFF",
|
||||
bordercolor: "#0F172A",
|
||||
textColor: "#FF3366",
|
||||
shape: "ellipse",
|
||||
freq: logFreq,
|
||||
duration: logDuration,
|
||||
}
|
||||
},
|
||||
});
|
||||
break;
|
||||
default:
|
||||
@@ -386,16 +456,16 @@ function setNodesData(mapData) {
|
||||
label: node.label,
|
||||
height: 48,
|
||||
width: 216,
|
||||
textColor: '#0F172A',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0)',
|
||||
textColor: "#0F172A",
|
||||
backgroundColor: "rgba(0, 0, 0, 0)",
|
||||
borderradius: 999,
|
||||
shape: "round-rectangle",
|
||||
freq: node.freq,
|
||||
duration: node.duration,
|
||||
backgroundOpacity: 0,
|
||||
borderOpacity: 0,
|
||||
}
|
||||
})
|
||||
},
|
||||
});
|
||||
break;
|
||||
}
|
||||
});
|
||||
@@ -408,25 +478,28 @@ function setNodesData(mapData) {
|
||||
function setEdgesData(mapData) {
|
||||
const mapTypeVal = mapType.value;
|
||||
const logDuration = {
|
||||
"total": "",
|
||||
"rel_duration": "",
|
||||
"average": "",
|
||||
"median": "",
|
||||
"max": "",
|
||||
"min": "",
|
||||
"cases": ""
|
||||
total: "",
|
||||
rel_duration: "",
|
||||
average: "",
|
||||
median: "",
|
||||
max: "",
|
||||
min: "",
|
||||
cases: "",
|
||||
};
|
||||
|
||||
mapData.edges = [];
|
||||
const mapSource = mapTypeVal === 'processMap' ? processMap.value : bpmn.value;
|
||||
mapSource.edges.forEach(edge => {
|
||||
const mapSource = mapTypeVal === "processMap" ? processMap.value : bpmn.value;
|
||||
mapSource.edges.forEach((edge) => {
|
||||
mapData.edges.push({
|
||||
data: {
|
||||
source: edge.tail,
|
||||
target: edge.head,
|
||||
freq: edge.freq,
|
||||
duration: edge.duration === null ? logDuration : edge.duration,
|
||||
edgeStyle: edge.tail === startNodeId.value || edge.head === endNodeId.value ? 'dotted' : 'solid',
|
||||
edgeStyle:
|
||||
edge.tail === startNodeId.value || edge.head === endNodeId.value
|
||||
? "dotted"
|
||||
: "solid",
|
||||
lineWidth: 1,
|
||||
},
|
||||
});
|
||||
@@ -438,20 +511,32 @@ function setEdgesData(mapData) {
|
||||
* @param {string} type - 'processMap' or 'bpmn'.
|
||||
*/
|
||||
async function createCy(type) {
|
||||
const graphId = document.getElementById('cy');
|
||||
const mapData = type === 'processMap' ? processMapData.value : bpmnData.value;
|
||||
const mapSource = type === 'processMap' ? processMap.value : bpmn.value;
|
||||
const graphId = document.getElementById("cy");
|
||||
const mapData = type === "processMap" ? processMapData.value : bpmnData.value;
|
||||
const mapSource = type === "processMap" ? processMap.value : bpmn.value;
|
||||
|
||||
if (mapSource.vertices.length !== 0) {
|
||||
setNodesData(mapData);
|
||||
setEdgesData(mapData);
|
||||
setActivityBgImage(mapData);
|
||||
cytoscapeGraph.value = await cytoscapeMap(mapData, dataLayerType.value, dataLayerOption.value, curveStyle.value, rank.value, graphId);
|
||||
const processOrBPMN = mapType.value === 'processMap' ? 'process' : 'bpmn';
|
||||
const curveType = curveStyle.value === 'taxi' ? 'elbow' : 'curved';
|
||||
const directionType = rank.value === 'LR' ? 'horizontal' : 'vertical';
|
||||
await mapPathStore.setCytoscape(cytoscapeGraph.value, processOrBPMN, curveType, directionType);
|
||||
};
|
||||
cytoscapeGraph.value = await cytoscapeMap(
|
||||
mapData,
|
||||
dataLayerType.value,
|
||||
dataLayerOption.value,
|
||||
curveStyle.value,
|
||||
rank.value,
|
||||
graphId,
|
||||
);
|
||||
const processOrBPMN = mapType.value === "processMap" ? "process" : "bpmn";
|
||||
const curveType = curveStyle.value === "taxi" ? "elbow" : "curved";
|
||||
const directionType = rank.value === "LR" ? "horizontal" : "vertical";
|
||||
await mapPathStore.setCytoscape(
|
||||
cytoscapeGraph.value,
|
||||
processOrBPMN,
|
||||
curveType,
|
||||
directionType,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -463,18 +548,29 @@ function setActivityBgImage(mapData) {
|
||||
const groupSize = Math.floor(nodes.length / ImgCapsules.length);
|
||||
let nodeOptionArr = [];
|
||||
const leveledGroups = [];
|
||||
const activityNodeArray = nodes.filter(node => node.data.type === 'activity');
|
||||
activityNodeArray.forEach(node => nodeOptionArr.push(node.data[dataLayerType.value][dataLayerOption.value]));
|
||||
const activityNodeArray = nodes.filter(
|
||||
(node) => node.data.type === "activity",
|
||||
);
|
||||
activityNodeArray.forEach((node) =>
|
||||
nodeOptionArr.push(node.data[dataLayerType.value][dataLayerOption.value]),
|
||||
);
|
||||
nodeOptionArr = nodeOptionArr.sort((a, b) => a - b);
|
||||
for (let i = 0; i < ImgCapsules.length; i++) {
|
||||
const startIdx = i * groupSize;
|
||||
const endIdx = (i === ImgCapsules.length - 1) ? activityNodeArray.length : startIdx + groupSize;
|
||||
const endIdx =
|
||||
i === ImgCapsules.length - 1
|
||||
? activityNodeArray.length
|
||||
: startIdx + groupSize;
|
||||
leveledGroups.push(nodeOptionArr.slice(startIdx, endIdx));
|
||||
}
|
||||
for (let level = 0; level < leveledGroups.length; level++) {
|
||||
leveledGroups[level].forEach(option => {
|
||||
const curNodes = activityNodeArray.filter(activityNode => activityNode.data[dataLayerType.value][dataLayerOption.value] === option);
|
||||
curNodes.forEach(curNode => {
|
||||
leveledGroups[level].forEach((option) => {
|
||||
const curNodes = activityNodeArray.filter(
|
||||
(activityNode) =>
|
||||
activityNode.data[dataLayerType.value][dataLayerOption.value] ===
|
||||
option,
|
||||
);
|
||||
curNodes.forEach((curNode) => {
|
||||
curNode.data = {
|
||||
...curNode.data,
|
||||
nodeImageUrl: ImgCapsules[level],
|
||||
@@ -490,11 +586,11 @@ function setActivityBgImage(mapData) {
|
||||
try {
|
||||
const routeParams = route.params;
|
||||
const file = route.meta.file;
|
||||
const isCheckPage = route.name.includes('Check');
|
||||
const isCheckPage = route.name.includes("Check");
|
||||
|
||||
isLoading.value = true;
|
||||
switch (routeParams.type) {
|
||||
case 'log':
|
||||
case "log":
|
||||
if (!isCheckPage) {
|
||||
logId.value = routeParams.fileId;
|
||||
baseLogId.value = routeParams.fileId;
|
||||
@@ -503,7 +599,7 @@ function setActivityBgImage(mapData) {
|
||||
baseLogId.value = file.parent.id;
|
||||
}
|
||||
break;
|
||||
case 'filter':
|
||||
case "filter":
|
||||
if (!isCheckPage) {
|
||||
createFilterId.value = routeParams.fileId;
|
||||
} else {
|
||||
@@ -511,7 +607,9 @@ function setActivityBgImage(mapData) {
|
||||
}
|
||||
await allMapDataStore.fetchFunnel(createFilterId.value);
|
||||
isRuleData.value = Array.from(temporaryData.value);
|
||||
ruleData.value = isRuleData.value.map(e => sidebarFilterRefComp.value.setRule(e));
|
||||
ruleData.value = isRuleData.value.map((e) =>
|
||||
sidebarFilterRefComp.value.setRule(e),
|
||||
);
|
||||
break;
|
||||
}
|
||||
await allMapDataStore.getAllMapData();
|
||||
@@ -523,20 +621,20 @@ function setActivityBgImage(mapData) {
|
||||
await allMapDataStore.getFilterParams();
|
||||
await allMapDataStore.getTraceDetail();
|
||||
|
||||
emitter.on('saveModal', boolean => {
|
||||
emitter.on("saveModal", (boolean) => {
|
||||
sidebarView.value = boolean;
|
||||
sidebarFilter.value = boolean;
|
||||
sidebarTraces.value = boolean;
|
||||
sidebarState.value = boolean;
|
||||
});
|
||||
emitter.on('leaveFilter', boolean => {
|
||||
emitter.on("leaveFilter", (boolean) => {
|
||||
sidebarView.value = boolean;
|
||||
sidebarFilter.value = boolean;
|
||||
sidebarTraces.value = boolean;
|
||||
sidebarState.value = boolean;
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Failed to initialize map compare:', error);
|
||||
console.error("Failed to initialize map compare:", error);
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
|
||||
@@ -19,18 +19,18 @@
|
||||
* with sidebar rule configuration and results display.
|
||||
*/
|
||||
|
||||
import { useConformanceStore } from '@/stores/conformance';
|
||||
import { useConformanceStore as useConformanceStoreInGuard } from "@/stores/conformance";
|
||||
|
||||
export default {
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
const isCheckPage = to.name.includes('Check');
|
||||
const isCheckPage = to.name.includes("Check");
|
||||
if (isCheckPage) {
|
||||
const conformanceStore = useConformanceStore();
|
||||
const conformanceStore = useConformanceStoreInGuard();
|
||||
switch (to.params.type) {
|
||||
case 'log':
|
||||
case "log":
|
||||
conformanceStore.setConformanceLogCreateCheckId(to.params.fileId);
|
||||
break;
|
||||
case 'filter':
|
||||
case "filter":
|
||||
conformanceStore.conformanceFilterCreateCheckId = to.params.fileId;
|
||||
break;
|
||||
}
|
||||
@@ -38,18 +38,18 @@ export default {
|
||||
to.meta.file = await conformanceStore.conformanceTempReportData?.file;
|
||||
}
|
||||
next();
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<script setup>
|
||||
import { onMounted, onBeforeUnmount } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useLoadingStore } from '@/stores/loading';
|
||||
import { useConformanceStore } from '@/stores/conformance';
|
||||
import StatusBar from '@/components/Discover/StatusBar.vue';
|
||||
import ConformanceResults from '@/components/Discover/Conformance/ConformanceResults.vue';
|
||||
import ConformanceSidebar from '@/components/Discover/Conformance/ConformanceSidebar.vue';
|
||||
import { onMounted, onBeforeUnmount } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { useLoadingStore } from "@/stores/loading";
|
||||
import { useConformanceStore } from "@/stores/conformance";
|
||||
import StatusBar from "@/components/Discover/StatusBar.vue";
|
||||
import ConformanceResults from "@/components/Discover/Conformance/ConformanceResults.vue";
|
||||
import ConformanceSidebar from "@/components/Discover/Conformance/ConformanceSidebar.vue";
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
@@ -57,10 +57,22 @@ const route = useRoute();
|
||||
const loadingStore = useLoadingStore();
|
||||
const conformanceStore = useConformanceStore();
|
||||
const { isLoading } = storeToRefs(loadingStore);
|
||||
const { conformanceLogId, conformanceFilterId, conformanceLogCreateCheckId, conformanceFilterCreateCheckId,
|
||||
conformanceLogTempCheckId, conformanceFilterTempCheckId, selectedRuleType, selectedActivitySequence,
|
||||
selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceRuleData,
|
||||
conformanceTempReportData, conformanceFileName,
|
||||
const {
|
||||
conformanceLogId,
|
||||
conformanceFilterId,
|
||||
conformanceLogCreateCheckId,
|
||||
conformanceFilterCreateCheckId,
|
||||
conformanceLogTempCheckId,
|
||||
conformanceFilterTempCheckId,
|
||||
selectedRuleType,
|
||||
selectedActivitySequence,
|
||||
selectedMode,
|
||||
selectedProcessScope,
|
||||
selectedActSeqMore,
|
||||
selectedActSeqFromTo,
|
||||
conformanceRuleData,
|
||||
conformanceTempReportData,
|
||||
conformanceFileName,
|
||||
} = storeToRefs(conformanceStore);
|
||||
|
||||
// Created logic
|
||||
@@ -69,24 +81,24 @@ const { conformanceLogId, conformanceFilterId, conformanceLogCreateCheckId, conf
|
||||
try {
|
||||
const params = route.params;
|
||||
const file = route.meta.file;
|
||||
const isCheckPage = route.name.includes('Check');
|
||||
const isCheckPage = route.name.includes("Check");
|
||||
|
||||
if(!isCheckPage) {
|
||||
if (!isCheckPage) {
|
||||
switch (params.type) {
|
||||
case 'log':
|
||||
case "log":
|
||||
conformanceLogId.value = params.fileId;
|
||||
break;
|
||||
case 'filter':
|
||||
case "filter":
|
||||
conformanceFilterId.value = params.fileId;
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
switch (params.type) {
|
||||
case 'log':
|
||||
case "log":
|
||||
conformanceLogId.value = file.parent.id;
|
||||
conformanceFileName.value = file.name;
|
||||
break;
|
||||
case 'filter':
|
||||
case "filter":
|
||||
conformanceFilterId.value = file.parent.id;
|
||||
conformanceFileName.value = file.name;
|
||||
break;
|
||||
@@ -95,20 +107,20 @@ const { conformanceLogId, conformanceFilterId, conformanceLogCreateCheckId, conf
|
||||
}
|
||||
await conformanceStore.getConformanceParams();
|
||||
} catch (error) {
|
||||
console.error('Failed to initialize conformance:', error);
|
||||
console.error("Failed to initialize conformance:", error);
|
||||
} finally {
|
||||
setTimeout(() => isLoading.value = false, 500);
|
||||
setTimeout(() => (isLoading.value = false), 500);
|
||||
}
|
||||
})();
|
||||
|
||||
// Mounted
|
||||
onMounted(() => {
|
||||
selectedRuleType.value = 'Have activity';
|
||||
selectedActivitySequence.value = 'Start & End';
|
||||
selectedMode.value = 'Directly follows';
|
||||
selectedProcessScope.value = 'End to end';
|
||||
selectedActSeqMore.value = 'All';
|
||||
selectedActSeqFromTo.value = 'From';
|
||||
selectedRuleType.value = "Have activity";
|
||||
selectedActivitySequence.value = "Start & End";
|
||||
selectedMode.value = "Directly follows";
|
||||
selectedProcessScope.value = "End to end";
|
||||
selectedActSeqMore.value = "All";
|
||||
selectedActSeqFromTo.value = "From";
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
|
||||
@@ -1,16 +1,19 @@
|
||||
<template>
|
||||
<ModalContainer/>
|
||||
<header id='header_inside_maincontainer' class="sticky inset-x-0 top-0 w-full bg-neutral-10 z-10">
|
||||
<Header/>
|
||||
<Navbar/>
|
||||
<ModalContainer />
|
||||
<header
|
||||
id="header_inside_maincontainer"
|
||||
class="sticky inset-x-0 top-0 w-full bg-neutral-10 z-10"
|
||||
>
|
||||
<Header />
|
||||
<Navbar />
|
||||
</header>
|
||||
<main id='loading_and_router_view_container_in_maincontainer' class="w-full">
|
||||
<main id="loading_and_router_view_container_in_maincontainer" class="w-full">
|
||||
<Loading v-if="loadingStore.isLoading" />
|
||||
<router-view></router-view>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script lang='ts'>
|
||||
<script lang="ts">
|
||||
// The Lucia project.
|
||||
// Copyright 2023-2026 DSP, inc. All rights reserved.
|
||||
// Authors:
|
||||
@@ -24,54 +27,57 @@
|
||||
* via beforeRouteUpdate.
|
||||
*/
|
||||
|
||||
import { useLoginStore } from "@/stores/login";
|
||||
import { usePageAdminStore } from "@/stores/pageAdmin";
|
||||
import { useAllMapDataStore } from "@/stores/allMapData";
|
||||
import { useConformanceStore } from "@/stores/conformance";
|
||||
import { useLoginStore as useLoginStoreInGuard } from "@/stores/login";
|
||||
import { usePageAdminStore as usePageAdminStoreInGuard } from "@/stores/pageAdmin";
|
||||
import { useAllMapDataStore as useAllMapDataStoreInGuard } from "@/stores/allMapData";
|
||||
import { useConformanceStore as useConformanceStoreInGuard } from "@/stores/conformance";
|
||||
import { getCookie, setCookie } from "@/utils/cookieUtil.js";
|
||||
import { leaveFilter, leaveConformance } from "@/module/alertModal.js";
|
||||
import emitter from "@/utils/emitter";
|
||||
import {
|
||||
leaveFilter as leaveFilterInGuard,
|
||||
leaveConformance as leaveConformanceInGuard,
|
||||
} from "@/module/alertModal.js";
|
||||
import emitterInGuard from "@/utils/emitter";
|
||||
|
||||
export default {
|
||||
// When the page is refreshed or entered for the first time, beforeRouteEnter is executed, but beforeRouteUpdate is not
|
||||
// PSEUDOCODE
|
||||
// if (not logged in) {
|
||||
// if (has refresh token) {
|
||||
// refresh_token();
|
||||
// if (refresh failed) {
|
||||
// go to log in();
|
||||
// } else {
|
||||
// cookie add("refresh_token=" + refresh_token "; expire=****")
|
||||
// }
|
||||
// } else {
|
||||
// go to log in();
|
||||
// }
|
||||
// }
|
||||
// PSEUDOCODE
|
||||
// if (not logged in) {
|
||||
// if (has refresh token) {
|
||||
// refresh_token();
|
||||
// if (refresh failed) {
|
||||
// go to log in();
|
||||
// } else {
|
||||
// cookie add("refresh_token=" + refresh_token "; expire=****")
|
||||
// }
|
||||
// } else {
|
||||
// go to log in();
|
||||
// }
|
||||
// }
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
const loginStore = useLoginStore();
|
||||
const loginStore = useLoginStoreInGuard();
|
||||
const relativeReturnTo = `${window.location.pathname}${window.location.search}${window.location.hash}`;
|
||||
|
||||
if (!getCookie("isLuciaLoggedIn")) {
|
||||
if (getCookie('luciaRefreshToken')) {
|
||||
if (getCookie("luciaRefreshToken")) {
|
||||
try {
|
||||
await loginStore.refreshToken();
|
||||
loginStore.setIsLoggedIn(true);
|
||||
setCookie("isLuciaLoggedIn", "true");
|
||||
next();
|
||||
} catch(error) {
|
||||
} catch (error) {
|
||||
next({
|
||||
path: '/login',
|
||||
path: "/login",
|
||||
query: {
|
||||
'return-to': btoa(relativeReturnTo),
|
||||
}
|
||||
"return-to": btoa(relativeReturnTo),
|
||||
},
|
||||
});
|
||||
}
|
||||
} else {
|
||||
next({
|
||||
path: '/login',
|
||||
path: "/login",
|
||||
query: {
|
||||
'return-to': btoa(relativeReturnTo),
|
||||
}
|
||||
"return-to": btoa(relativeReturnTo),
|
||||
},
|
||||
});
|
||||
}
|
||||
} else {
|
||||
@@ -80,21 +86,31 @@ export default {
|
||||
},
|
||||
// Remember, Swal modal handling is called before beforeRouteUpdate
|
||||
beforeRouteUpdate(to, from, next) {
|
||||
const pageAdminStore = usePageAdminStore();
|
||||
const allMapDataStore = useAllMapDataStore();
|
||||
const conformanceStore = useConformanceStore();
|
||||
const pageAdminStore = usePageAdminStoreInGuard();
|
||||
const allMapDataStore = useAllMapDataStoreInGuard();
|
||||
const conformanceStore = useConformanceStoreInGuard();
|
||||
|
||||
pageAdminStore.setPreviousPage(from.name);
|
||||
|
||||
// When leaving the Map page, check if there is unsaved data
|
||||
if ((from.name === 'Map' || from.name === 'CheckMap') && allMapDataStore.tempFilterId) {
|
||||
if (
|
||||
(from.name === "Map" || from.name === "CheckMap") &&
|
||||
allMapDataStore.tempFilterId
|
||||
) {
|
||||
// Notify the Map's Sidebar to close
|
||||
emitter.emit('leaveFilter', false);
|
||||
leaveFilter(next, allMapDataStore.addFilterId, to.path)
|
||||
} else if((from.name === 'Conformance' || from.name === 'CheckConformance')
|
||||
&& (conformanceStore.conformanceLogTempCheckId || conformanceStore.conformanceFilterTempCheckId)) {
|
||||
leaveConformance(next, conformanceStore.addConformanceCreateCheckId, to.path);
|
||||
} else if(pageAdminStore.shouldKeepPreviousPage) {
|
||||
emitterInGuard.emit("leaveFilter", false);
|
||||
leaveFilterInGuard(next, allMapDataStore.addFilterId, to.path);
|
||||
} else if (
|
||||
(from.name === "Conformance" || from.name === "CheckConformance") &&
|
||||
(conformanceStore.conformanceLogTempCheckId ||
|
||||
conformanceStore.conformanceFilterTempCheckId)
|
||||
) {
|
||||
leaveConformanceInGuard(
|
||||
next,
|
||||
conformanceStore.addConformanceCreateCheckId,
|
||||
to.path,
|
||||
);
|
||||
} else if (pageAdminStore.shouldKeepPreviousPage) {
|
||||
pageAdminStore.clearShouldKeepPreviousPageBoolean();
|
||||
} else {
|
||||
pageAdminStore.copyPendingPageToActivePage();
|
||||
@@ -104,21 +120,21 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { onBeforeMount } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useLoadingStore } from '@/stores/loading';
|
||||
import { useAllMapDataStore } from '@/stores/allMapData';
|
||||
import { useConformanceStore } from '@/stores/conformance';
|
||||
<script setup lang="ts">
|
||||
import { onBeforeMount } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { useLoadingStore } from "@/stores/loading";
|
||||
import { useAllMapDataStore } from "@/stores/allMapData";
|
||||
import { useConformanceStore } from "@/stores/conformance";
|
||||
import Header from "@/components/Header.vue";
|
||||
import Navbar from "@/components/Navbar.vue";
|
||||
import Loading from '@/components/Loading.vue';
|
||||
import { leaveFilter, leaveConformance } from '@/module/alertModal.js';
|
||||
import { usePageAdminStore } from '@/stores/pageAdmin';
|
||||
import Loading from "@/components/Loading.vue";
|
||||
import { leaveFilter, leaveConformance } from "@/module/alertModal.js";
|
||||
import { usePageAdminStore } from "@/stores/pageAdmin";
|
||||
import { useLoginStore } from "@/stores/login";
|
||||
import emitter from '@/utils/emitter';
|
||||
import ModalContainer from './AccountManagement/ModalContainer.vue';
|
||||
import emitter from "@/utils/emitter";
|
||||
import ModalContainer from "./AccountManagement/ModalContainer.vue";
|
||||
|
||||
const loadingStore = useLoadingStore();
|
||||
const allMapDataStore = useAllMapDataStore();
|
||||
@@ -127,18 +143,22 @@ const pageAdminStore = usePageAdminStore();
|
||||
const loginStore = useLoginStore();
|
||||
const router = useRouter();
|
||||
|
||||
const { tempFilterId, createFilterId, temporaryData, postRuleData, ruleData } = storeToRefs(allMapDataStore);
|
||||
const { conformanceLogTempCheckId, conformanceFilterTempCheckId } = storeToRefs(conformanceStore);
|
||||
const { tempFilterId, createFilterId, temporaryData, postRuleData, ruleData } =
|
||||
storeToRefs(allMapDataStore);
|
||||
const { conformanceLogTempCheckId, conformanceFilterTempCheckId } =
|
||||
storeToRefs(conformanceStore);
|
||||
|
||||
/** Sets the highlighted navbar item based on the current URL path on page load. */
|
||||
const setHighlightedNavItemOnLanding = () => {
|
||||
const currentPath = router.currentRoute.value.path;
|
||||
const pathSegments: string[] = currentPath.split('/').filter(segment => segment !== '');
|
||||
if(pathSegments.length === 1) {
|
||||
if(pathSegments[0] === 'files') {
|
||||
pageAdminStore.setActivePage('ALL');
|
||||
const pathSegments = currentPath
|
||||
.split("/")
|
||||
.filter((segment) => segment !== "");
|
||||
if (pathSegments.length === 1) {
|
||||
if (pathSegments[0] === "files") {
|
||||
pageAdminStore.setActivePage("ALL");
|
||||
}
|
||||
} else if (pathSegments.length > 1){
|
||||
} else if (pathSegments.length > 1) {
|
||||
pageAdminStore.setActivePage(pathSegments[1].toUpperCase());
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user