johanels/akvorado
1
0
Fork 0
mirror of https://github.com/akvorado/akvorado.git synced 2025-12-12 06:24:10 +01:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

build: update to Prettier 3.0.0

Browse Source
This commit is contained in:
Vincent Bernat
2023-07-16 11:22:48 +02:00
parent c49116adae
commit 4aa03744aa
30 changed files with 889 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
console/frontend/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<html lang="en" class="h-full"> <html lang="en" class="h-full">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />

810
console/frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
console/frontend/package.json
View File

@@ -9,7 +9,7 @@
"preview": "vite preview", "preview": "vite preview",
"type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false", "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
"lint": "eslint '{src/**/,}*.{js,ts,vue}'", "lint": "eslint '{src/**/,}*.{js,ts,vue}'",
"format": "prettier --loglevel warn --write '{src/**/,}*.{ts,js,vue,html}'", "format": "prettier --log-level warn --write '{src/**/,}*.{ts,js,vue,html}'",
"test": "vitest run", "test": "vitest run",
"postinstall": "patch-package" "postinstall": "patch-package"
}, },
@@ -51,12 +51,13 @@
"@vue/tsconfig": "^0.1.3", "@vue/tsconfig": "^0.1.3",
"autoprefixer": "^10.4.7", "autoprefixer": "^10.4.7",
"eslint": "^8.19.0", "eslint": "^8.19.0",
"eslint-plugin-prettier": "^5.0.0",
"eslint-plugin-vue": "^9.2.0", "eslint-plugin-vue": "^9.2.0",
"license-compliance": "^2.0.0", "license-compliance": "^2.0.0",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"patch-package": "^7.0.0", "patch-package": "^7.0.0",
"postcss": "^8.4.14", "postcss": "^8.4.14",
"prettier": "^2.7.0", "prettier": "^3.0.0",
"prettier-plugin-tailwindcss": "^0.3.0", "prettier-plugin-tailwindcss": "^0.3.0",
"tailwindcss": "^3.1.2", "tailwindcss": "^3.1.2",
"typescript": "~4.9.3", "typescript": "~4.9.3",

8
console/frontend/src/codemirror/lang-filter/complete.test.ts
View File

@@ -16,7 +16,7 @@ async function get(doc: string) {
extensions: [filterLanguage(), filterCompletion(), autocompletion()], extensions: [filterLanguage(), filterCompletion(), autocompletion()],
}); });
return await state.languageDataAt<typeof complete>("autocomplete", cur)[0]( return await state.languageDataAt<typeof complete>("autocomplete", cur)[0](
new CompletionContext(state, cur, true) new CompletionContext(state, cur, true),
); );
} }
@@ -68,7 +68,7 @@ describe("filter completion", () => {
{ label: "!=", detail: "operator", quoted: false }, { label: "!=", detail: "operator", quoted: false },
{ label: "IN", detail: "operator", quoted: false }, { label: "IN", detail: "operator", quoted: false },
].filter(({ label }) => ].filter(({ label }) =>
label.startsWith(body.prefix ?? "") label.startsWith(body.prefix ?? ""),
), ),
}; };
default: default:
@@ -90,7 +90,7 @@ describe("filter completion", () => {
quoted: "true", quoted: "true",
}, },
].filter(({ label }) => ].filter(({ label }) =>
label.startsWith(body.prefix ?? "") label.startsWith(body.prefix ?? ""),
), ),
}; };
@@ -122,7 +122,7 @@ describe("filter completion", () => {
} }
}, },
}; };
}) }),
); );
}); });

8
console/frontend/src/codemirror/lang-filter/complete.ts
View File

@@ -24,7 +24,7 @@ export const complete = async (ctx: CompletionContext) => {
// Remote completion // Remote completion
const remote = async ( const remote = async (
payload: { what: string; column?: string; prefix?: string }, payload: { what: string; column?: string; prefix?: string },
transform = (x: { label: string; detail?: string }) => x transform = (x: { label: string; detail?: string }) => x,
) => { ) => {
const response = await fetch("/api/v0/console/filter/complete", { const response = await fetch("/api/v0/console/filter/complete", {
method: "POST", method: "POST",
@@ -39,7 +39,7 @@ export const complete = async (ctx: CompletionContext) => {
transform({ transform({
label: quoted ? `"${label}"` : label, label: quoted ? `"${label}"` : label,
detail, detail,
}) }),
), ),
]; ];
}; };
@@ -107,7 +107,7 @@ export const complete = async (ctx: CompletionContext) => {
if (c?.name === "Column") { if (c?.name === "Column") {
let prefix: string | undefined = ctx.state.sliceDoc( let prefix: string | undefined = ctx.state.sliceDoc(
nodeBefore.from, nodeBefore.from,
nodeBefore.to nodeBefore.to,
); );
completion.from = nodeBefore.from; completion.from = nodeBefore.from;
completion.to = nodeBefore.to; completion.to = nodeBefore.to;
@@ -130,7 +130,7 @@ export const complete = async (ctx: CompletionContext) => {
(o) => (o) =>
nodeAncestor(nodeBefore, ["ListOfValues", "ValueLParen"]) nodeAncestor(nodeBefore, ["ListOfValues", "ValueLParen"])
? { ...o, apply: `${o.label},` } ? { ...o, apply: `${o.label},` }
: o : o,
); );
} }
} else if (nodeBefore.name === "Filter" || nodeBefore.name === "⚠") { } else if (nodeBefore.name === "Filter" || nodeBefore.name === "⚠") {

4
console/frontend/src/codemirror/lang-filter/grammar.test.ts
View File

@@ -10,13 +10,13 @@ import * as path from "path";
import { fileURLToPath } from "url"; import { fileURLToPath } from "url";
const caseFile = path.join( const caseFile = path.join(
path.dirname(fileURLToPath(import.meta.url)), path.dirname(fileURLToPath(import.meta.url)),
"grammar.test.txt" "grammar.test.txt",
); );
describe("filter parsing", () => { describe("filter parsing", () => {
for (const { name, run } of fileTests( for (const { name, run } of fileTests(
fs.readFileSync(caseFile, "utf8"), fs.readFileSync(caseFile, "utf8"),
"grammar.test.txt" "grammar.test.txt",
)) ))
it(name, () => run(parser)); it(name, () => run(parser));
}); });

2
console/frontend/src/codemirror/lang-filter/linter.ts
View File

@@ -34,7 +34,7 @@ export const linterSource = async (view: EditorView) => {
severity: "error", severity: "error",
message: message, message: message,
}; };
} },
) || []; ) || [];
return diagnostic; return diagnostic;
}; };

2
console/frontend/src/components/InfoBox.vue
View File

@@ -18,7 +18,7 @@ const props = withDefaults(
}>(), }>(),
{ {
kind: "error", kind: "error",
} },
); );
const classes = computed<string>(() => { const classes = computed<string>(() => {

2
console/frontend/src/components/InputBase.vue
View File

@@ -44,7 +44,7 @@ withDefaults(
{ {
label: "", label: "",
error: "", error: "",
} },
); );
const id = uuidv4(); const id = uuidv4();

2
console/frontend/src/components/InputButton.vue
View File

@@ -55,6 +55,6 @@ withDefaults(
size: "normal", size: "normal",
disabled: false, disabled: false,
floading: false, floading: false,
} },
); );
</script> </script>

2
console/frontend/src/components/InputCheckbox.vue
View File

@@ -12,7 +12,7 @@
@change=" @change="
$emit( $emit(
'update:modelValue', 'update:modelValue',
($event.target as HTMLInputElement).checked ($event.target as HTMLInputElement).checked,
) )
" "
/> />

35
console/frontend/src/components/InputDimensions.vue
View File

@@ -88,7 +88,7 @@ const props = withDefaults(
}>(), }>(),
{ {
minDimensions: 0, minDimensions: 0,
} },
); );
const emit = defineEmits<{ const emit = defineEmits<{
(e: "update:modelValue", value: typeof props.modelValue): void; (e: "update:modelValue", value: typeof props.modelValue): void;
@@ -121,8 +121,8 @@ const canAggregate = computed(
() => () =>
intersection( intersection(
selectedDimensions.value.map((dim) => dim.name), selectedDimensions.value.map((dim) => dim.name),
serverConfiguration.value?.truncatable || [] serverConfiguration.value?.truncatable || [],
).length > 0 ).length > 0,
); );
const truncate4 = ref("32"); const truncate4 = ref("32");
const truncate4Error = computed(() => { const truncate4Error = computed(() => {
@@ -145,24 +145,25 @@ const hasErrors = computed(
!!limitError.value || !!limitError.value ||
!!dimensionsError.value || !!dimensionsError.value ||
!!truncate4Error.value || !!truncate4Error.value ||
!!truncate6Error.value !!truncate6Error.value,
); );
const dimensions = computed(() => const dimensions = computed(
serverConfiguration.value?.dimensions.map((v, idx) => ({ () =>
id: idx + 1, serverConfiguration.value?.dimensions.map((v, idx) => ({
name: v, id: idx + 1,
color: dataColor( name: v,
["Exporter", "Src", "Dst", "In", "Out", ""] color: dataColor(
.map((p) => v.startsWith(p)) ["Exporter", "Src", "Dst", "In", "Out", ""]
.indexOf(true) .map((p) => v.startsWith(p))
), .indexOf(true),
})) ),
})),
); );
const removeDimension = (dimension: (typeof dimensions.value)[0]) => { const removeDimension = (dimension: (typeof dimensions.value)[0]) => {
selectedDimensions.value = selectedDimensions.value.filter( selectedDimensions.value = selectedDimensions.value.filter(
(d) => d !== dimension (d) => d !== dimension,
); );
}; };
@@ -179,7 +180,7 @@ watch(
.map((name) => dimensions.find((d) => d.name === name)) .map((name) => dimensions.find((d) => d.name === name))
.filter((d): d is (typeof dimensions)[0] => !!d); .filter((d): d is (typeof dimensions)[0] => !!d);
}, },
{ immediate: true, deep: true } { immediate: true, deep: true },
); );
watch( watch(
[selectedDimensions, limit, truncate4, truncate6, hasErrors] as const, [selectedDimensions, limit, truncate4, truncate6, hasErrors] as const,
@@ -199,7 +200,7 @@ watch(
) { ) {
emit("update:modelValue", updated); emit("update:modelValue", updated);
} }
} },
); );
</script> </script>

12
console/frontend/src/components/InputFilter.vue
View File

@@ -114,7 +114,7 @@ type SavedFilter = {
const selectedSavedFilter = ref<SavedFilter | null>(null); const selectedSavedFilter = ref<SavedFilter | null>(null);
const { data: rawSavedFilters, execute: refreshSavedFilters } = useFetch( const { data: rawSavedFilters, execute: refreshSavedFilters } = useFetch(
`/api/v0/console/filter/saved` `/api/v0/console/filter/saved`,
).json<{ ).json<{
filters: Array<SavedFilter>; filters: Array<SavedFilter>;
}>(); }>();
@@ -161,7 +161,7 @@ watch(
(model) => { (model) => {
if (model) expression.value = model.expression; if (model) expression.value = model.expression;
}, },
{ immediate: true } { immediate: true },
); );
watch( watch(
() => ({ expression: expression.value, errors: !!error.value }), () => ({ expression: expression.value, errors: !!error.value }),
@@ -170,7 +170,7 @@ watch(
emit("update:modelValue", value); emit("update:modelValue", value);
} }
}, },
{ immediate: true } { immediate: true },
); );
// https://github.com/surmon-china/vue-codemirror/blob/59598ff72327ab6c5ee70a640edc9e2eb2518775/src/codemirror.ts#L52 // https://github.com/surmon-china/vue-codemirror/blob/59598ff72327ab6c5ee70a640edc9e2eb2518775/src/codemirror.ts#L52
@@ -198,7 +198,7 @@ const filterTheme = computed(() => [
{ tag: t.string, color: isDark.value ? "#ff0086" : "#880000" }, { tag: t.string, color: isDark.value ? "#ff0086" : "#880000" },
{ tag: t.comment, color: isDark.value ? "#7d8799" : "#4f4f4f" }, { tag: t.comment, color: isDark.value ? "#7d8799" : "#4f4f4f" },
{ tag: t.operator, color: isDark.value ? "#00a3ff" : "#333399" }, { tag: t.operator, color: isDark.value ? "#00a3ff" : "#333399" },
]) ]),
), ),
/* Theme is in tailwind.css */ /* Theme is in tailwind.css */
EditorView.theme({}, { dark: isDark.value }), EditorView.theme({}, { dark: isDark.value }),
@@ -274,7 +274,7 @@ onMounted(() => {
}); });
} }
}, },
{ immediate: true } { immediate: true },
); );
// Dynamic extensions // Dynamic extensions
@@ -286,7 +286,7 @@ onMounted(() => {
const exts = extensions.filter((e) => !!e); const exts = extensions.filter((e) => !!e);
if (component.view !== null) dynamicExtensions(component.view, exts); if (component.view !== null) dynamicExtensions(component.view, exts);
}, },
{ immediate: true } { immediate: true },
); );
}); });
onBeforeUnmount(() => component.view?.destroy()); onBeforeUnmount(() => component.view?.destroy());

10
console/frontend/src/components/InputListBox.vue
View File

@@ -7,7 +7,9 @@
:class="$attrs['class']" :class="$attrs['class']"
:multiple="multiple" :multiple="multiple"
:model-value="modelValue" :model-value="modelValue"
@update:model-value="(selected: any) => $emit('update:modelValue', selected)" @update:model-value="
(selected: any) => $emit('update:modelValue', selected)
"
> >
<div class="relative"> <div class="relative">
<InputBase v-slot="{ id, childClass }" v-bind="otherAttrs" :error="error"> <InputBase v-slot="{ id, childClass }" v-bind="otherAttrs" :error="error">
@@ -118,7 +120,7 @@ const props = withDefaults(
filter: null, filter: null,
error: "", error: "",
multiple: false, multiple: false,
} },
); );
defineEmits<{ defineEmits<{
(e: "update:modelValue", value: typeof props.modelValue): void; (e: "update:modelValue", value: typeof props.modelValue): void;
@@ -142,7 +144,7 @@ const component = computed(() =>
Options: ComboboxOptions, Options: ComboboxOptions,
Option: ComboboxOption, Option: ComboboxOption,
Input: ComboboxInput, Input: ComboboxInput,
} },
); );
const filteredItems = computed(() => { const filteredItems = computed(() => {
if (props.filter === null) return props.items; if (props.filter === null) return props.items;
@@ -150,7 +152,7 @@ const filteredItems = computed(() => {
query.value query.value
.toLowerCase() .toLowerCase()
.split(/\W+/) .split(/\W+/)
.every((w) => `${it[props.filter!]}`.toLowerCase().includes(w)) .every((w) => `${it[props.filter!]}`.toLowerCase().includes(w)),
); );
}); });
const otherAttrs = computed(() => { const otherAttrs = computed(() => {

10
console/frontend/src/components/InputTimeRange.vue
View File

@@ -39,7 +39,7 @@ const parsedTimes = computed(() => ({
end: SugarDate.create(endTime.value), end: SugarDate.create(endTime.value),
})); }));
const startTimeError = computed(() => const startTimeError = computed(() =>
isNaN(parsedTimes.value.start.valueOf()) ? "Invalid date" : "" isNaN(parsedTimes.value.start.valueOf()) ? "Invalid date" : "",
); );
const endTimeError = computed( const endTimeError = computed(
() => () =>
@@ -47,10 +47,10 @@ const endTimeError = computed(
(!isNaN(parsedTimes.value.start.valueOf()) && (!isNaN(parsedTimes.value.start.valueOf()) &&
parsedTimes.value.start > parsedTimes.value.end && parsedTimes.value.start > parsedTimes.value.end &&
"End date should be before start date") || "End date should be before start date") ||
"" "",
); );
const hasErrors = computed( const hasErrors = computed(
() => !!(startTimeError.value || endTimeError.value) () => !!(startTimeError.value || endTimeError.value),
); );
const presets = [ const presets = [
@@ -127,7 +127,7 @@ watch(
endTime.value = m.end; endTime.value = m.end;
} }
}, },
{ immediate: true, deep: true } { immediate: true, deep: true },
); );
watch( watch(
[startTime, endTime, hasErrors] as const, [startTime, endTime, hasErrors] as const,
@@ -149,7 +149,7 @@ watch(
emit("update:modelValue", newModel); emit("update:modelValue", newModel);
} }
}, },
{ immediate: true } { immediate: true },
); );
</script> </script>

2
console/frontend/src/components/TitleProvider.vue
View File

@@ -21,7 +21,7 @@ const documentTitle = ref<string | null>(null);
const title = computed(() => const title = computed(() =>
[applicationName, viewName.value, documentTitle.value] [applicationName, viewName.value, documentTitle.value]
.filter((k) => !!k) .filter((k) => !!k)
.join(" | ") .join(" | "),
); );
useTitle(title); useTitle(title);
useRouter().beforeEach((to, from) => { useRouter().beforeEach((to, from) => {

2
console/frontend/src/components/UserProvider.vue
View File

@@ -33,7 +33,7 @@ watch(
execute(false); execute(false);
} }
}, },
{ immediate: true } { immediate: true },
); );
provide(UserKey, { provide(UserKey, {

10
console/frontend/src/utils/palette.ts
View File

@@ -75,8 +75,8 @@ const orderedColors = ["blue", "orange", "aqua", "green", "magenta"] as const;
const darkPalette = [5, 6, 7, 8, 9, 10] const darkPalette = [5, 6, 7, 8, 9, 10]
.map((idx) => .map((idx) =>
orderedColors.map( orderedColors.map(
(colorName: keyof typeof colors) => colors[colorName][idx] (colorName: keyof typeof colors) => colors[colorName][idx],
) ),
) )
.flat(); .flat();
const lightPalette = [5, 4, 3, 2, 1, 0] const lightPalette = [5, 4, 3, 2, 1, 0]
@@ -90,13 +90,13 @@ const lightenColor = (color: string, amount: number) =>
( (
"0" + "0" +
Math.min(255, Math.max(0, parseInt(color, 16) + amount)).toString(16) Math.min(255, Math.max(0, parseInt(color, 16) + amount)).toString(16)
).slice(-2) ).slice(-2),
); );
export function dataColor( export function dataColor(
index: number, index: number,
alternate = false, alternate = false,
theme: "light" | "dark" = "light" theme: "light" | "dark" = "light",
) { ) {
const palette = theme === "light" ? lightPalette : darkPalette; const palette = theme === "light" ? lightPalette : darkPalette;
const correctedIndex = index % 2 === 0 ? index : index + orderedColors.length; const correctedIndex = index % 2 === 0 ? index : index + orderedColors.length;
@@ -110,7 +110,7 @@ export function dataColor(
export function dataColorGrey( export function dataColorGrey(
index: number, index: number,
alternate = false, alternate = false,
theme: "light" | "dark" = "light" theme: "light" | "dark" = "light",
) { ) {
const palette = const palette =
theme === "light" theme === "light"

8
console/frontend/src/views/DocumentationPage.vue
View File

@@ -100,7 +100,7 @@ const errorMessage = computed(
data.value && data.value &&
"message" in data.value && "message" in data.value &&
(data.value.message || `Server returned an error: ${error.value}`)) || (data.value.message || `Server returned an error: ${error.value}`)) ||
"" "",
); );
const markdown = computed( const markdown = computed(
() => () =>
@@ -108,11 +108,11 @@ const markdown = computed(
data.value && data.value &&
"markdown" in data.value && "markdown" in data.value &&
data.value.markdown) || data.value.markdown) ||
"" "",
); );
const toc = computed( const toc = computed(
() => () =>
(!error.value && data.value && "toc" in data.value && data.value.toc) || [] (!error.value && data.value && "toc" in data.value && data.value.toc) || [],
); );
const activeDocument = computed(() => props.id || null); const activeDocument = computed(() => props.id || null);
const activeSlug = useRouteHash(); const activeSlug = useRouteHash();
@@ -133,7 +133,7 @@ watch([markdown, activeSlug] as const, async () => {
(activeSlug.value && (activeSlug.value &&
( (
document.querySelector( document.querySelector(
`#${CSS.escape(activeSlug.value.slice(1))}` `#${CSS.escape(activeSlug.value.slice(1))}`,
) as HTMLElement | null ) as HTMLElement | null
)?.offsetTop) || )?.offsetTop) ||
0; 0;

4
console/frontend/src/views/HomePage.vue
View File

@@ -58,7 +58,7 @@ import { ServerConfigKey } from "@/components/ServerConfigProvider.vue";
const serverConfiguration = inject(ServerConfigKey)!; const serverConfiguration = inject(ServerConfigKey)!;
const topWidgets = computed( const topWidgets = computed(
() => serverConfiguration.value?.homepageTopWidgets ?? [] () => serverConfiguration.value?.homepageTopWidgets ?? [],
); );
const widgetTitle = (name: string) => const widgetTitle = (name: string) =>
({ ({
@@ -71,7 +71,7 @@ const widgetTitle = (name: string) =>
etype: "IPv4/IPv6", etype: "IPv4/IPv6",
"src-port": "Top source ports", "src-port": "Top source ports",
"dst-port": "Top destination ports", "dst-port": "Top destination ports",
}[name] ?? "???"); })[name] ?? "???";
const refreshOften = useInterval(10_000); const refreshOften = useInterval(10_000);
const refreshOccasionally = useInterval(60_000); const refreshOccasionally = useInterval(60_000);

2
console/frontend/src/views/HomePage/WidgetFlowRate.vue
View File

@@ -22,7 +22,7 @@ const props = withDefaults(
}>(), }>(),
{ {
refresh: 0, refresh: 0,
} },
); );
const url = computed(() => `/api/v0/console/widget/flow-rate?${props.refresh}`); const url = computed(() => `/api/v0/console/widget/flow-rate?${props.refresh}`);

4
console/frontend/src/views/HomePage/WidgetGraph.vue
View File

@@ -36,7 +36,7 @@ const props = withDefaults(
}>(), }>(),
{ {
refresh: 0, refresh: 0,
} },
); );
type ECOption = ComposeOption< type ECOption = ComposeOption<
@@ -95,6 +95,6 @@ const option = computed(
: data.value.data.map(({ t, gbps }) => [t, gbps]).slice(0, -1), : data.value.data.map(({ t, gbps }) => [t, gbps]).slice(0, -1),
}, },
], ],
}) }),
); );
</script> </script>

4
console/frontend/src/views/HomePage/WidgetLastFlow.vue
View File

@@ -28,7 +28,7 @@ const props = withDefaults(
defineProps<{ defineProps<{
refresh?: number; refresh?: number;
}>(), }>(),
{ refresh: 0 } { refresh: 0 },
); );
const url = computed(() => `/api/v0/console/widget/flow-last?${props.refresh}`); const url = computed(() => `/api/v0/console/widget/flow-last?${props.refresh}`);
@@ -37,7 +37,7 @@ const { data } = useFetch(url, { refetch: true })
.json<Record<string, string | number>>(); .json<Record<string, string | number>>();
const lastFlow = computed((): [string, string | number][] => ({ const lastFlow = computed((): [string, string | number][] => ({
...Object.entries(data.value || {}).sort(([f1], [f2]) => ...Object.entries(data.value || {}).sort(([f1], [f2]) =>
compareFields(f1, f2) compareFields(f1, f2),
), ),
})); }));
</script> </script>

8
console/frontend/src/views/HomePage/WidgetTop.vue
View File

@@ -44,7 +44,7 @@ type ECOption = ComposeOption<
>; >;
const url = computed( const url = computed(
() => `/api/v0/console/widget/top/${props.what}?${props.refresh}` () => `/api/v0/console/widget/top/${props.what}?${props.refresh}`,
); );
const { data } = useFetch(url, { refetch: true }) const { data } = useFetch(url, { refetch: true })
.get() .get()
@@ -98,9 +98,9 @@ const options = computed(
100 - 100 -
(data.value?.top || []).reduce( (data.value?.top || []).reduce(
(c, n) => c + n.percent, (c, n) => c + n.percent,
0 0,
), ),
0 0,
), ),
}, },
].filter(({ value }) => value > 0.05), ].filter(({ value }) => value > 0.05),
@@ -115,6 +115,6 @@ const options = computed(
}, },
}, },
], ],
}) }),
); );
</script> </script>

14
console/frontend/src/views/VisualizePage.vue
View File

@@ -109,7 +109,7 @@ const decodeState = (serialized: string | undefined): ModelType => {
const encodeState = (state: ModelType) => { const encodeState = (state: ModelType) => {
if (state === null) return ""; if (state === null) return "";
return LZString.compressToBase64( return LZString.compressToBase64(
JSON.stringify(state, Object.keys(state).sort()) JSON.stringify(state, Object.keys(state).sort()),
); );
}; };
watch( watch(
@@ -120,7 +120,7 @@ watch(
state.value = newState; state.value = newState;
} }
}, },
{ immediate: true } { immediate: true },
); );
const encodedState = computed(() => encodeState(state.value)); const encodedState = computed(() => encodeState(state.value));
@@ -133,7 +133,7 @@ const orderedJSONPayload = <T extends Record<string, any>>(input: T): T => {
.sort() .sort()
.reduce( .reduce(
(o, k) => ((o[k] = input[k]), o), (o, k) => ((o[k] = input[k]), o),
{} as { [key: string]: any } {} as { [key: string]: any },
) as T; ) as T;
}; };
const jsonPayload = computed( const jsonPayload = computed(
@@ -163,7 +163,7 @@ const jsonPayload = computed(
}; };
return orderedJSONPayload(input); return orderedJSONPayload(input);
} }
} },
); );
const request = ref<ModelType>(null); // Same as state, but once request is successful const request = ref<ModelType>(null); // Same as state, but once request is successful
const { data, execute, isFetching, aborted, abort, canAbort, error } = useFetch( const { data, execute, isFetching, aborted, abort, canAbort, error } = useFetch(
@@ -191,7 +191,7 @@ const { data, execute, isFetching, aborted, abort, canAbort, error } = useFetch(
}; };
}, },
async afterFetch( async afterFetch(
ctx: AfterFetchContext<GraphLineHandlerOutput | GraphSankeyHandlerOutput> ctx: AfterFetchContext<GraphLineHandlerOutput | GraphSankeyHandlerOutput>,
) { ) {
// Update data. Not done in a computed value as we want to keep the // Update data. Not done in a computed value as we want to keep the
// previous data in case of errors. // previous data in case of errors.
@@ -199,7 +199,7 @@ const { data, execute, isFetching, aborted, abort, canAbort, error } = useFetch(
if (data === null || !state.value) return ctx; if (data === null || !state.value) return ctx;
console.groupCollapsed("SQL query"); console.groupCollapsed("SQL query");
console.info( console.info(
response.headers.get("x-sql-query")?.replace(/ {2}( )*/g, "\n$1") response.headers.get("x-sql-query")?.replace(/ {2}( )*/g, "\n$1"),
); );
console.groupEnd(); console.groupEnd();
if (state.value.graphType === "sankey") { if (state.value.graphType === "sankey") {
@@ -239,7 +239,7 @@ const { data, execute, isFetching, aborted, abort, canAbort, error } = useFetch(
return ctx; return ctx;
}, },
immediate: false, immediate: false,
} },
) )
.post(jsonPayload, "json") .post(jsonPayload, "json")
.json< .json<

22
console/frontend/src/views/VisualizePage/DataGraphLine.vue
View File

@@ -93,7 +93,7 @@ const graph = computed((): ECOption => {
// Unfortunately, eCharts does not seem to make it easy // Unfortunately, eCharts does not seem to make it easy
// to inverse an axis and put the result below. Therefore, // to inverse an axis and put the result below. Therefore,
// we use negative values for the second axis. // we use negative values for the second axis.
(row, rowIdx) => row[timeIdx] * (data.axis[rowIdx] % 2 ? 1 : -1) (row, rowIdx) => row[timeIdx] * (data.axis[rowIdx] % 2 ? 1 : -1),
), ),
]; ];
if (data.graphType === "stacked100") { if (data.graphType === "stacked100") {
@@ -101,11 +101,11 @@ const graph = computed((): ECOption => {
const [, ...values] = result; const [, ...values] = result;
const positiveSum = values.reduce( const positiveSum = values.reduce(
(prev, cur) => (cur > 0 ? prev + cur : prev), (prev, cur) => (cur > 0 ? prev + cur : prev),
0 0,
); );
const negativeSum = values.reduce( const negativeSum = values.reduce(
(prev, cur) => (cur < 0 ? prev + cur : prev), (prev, cur) => (cur < 0 ? prev + cur : prev),
0 0,
); );
result = [ result = [
t, t,
@@ -114,7 +114,7 @@ const graph = computed((): ECOption => {
? v / positiveSum ? v / positiveSum
: v < 0 && negativeSum < 0 : v < 0 && negativeSum < 0
? -v / negativeSum ? -v / negativeSum
: v : v,
), ),
]; ];
} }
@@ -210,13 +210,13 @@ const graph = computed((): ECOption => {
`<tr>`, `<tr>`,
`<td>${row.marker} ${row.seriesName}</td>`, `<td>${row.marker} ${row.seriesName}</td>`,
`<td class="pl-2">${data.bidirectional ? "↑" : ""}<b>${formatXps( `<td class="pl-2">${data.bidirectional ? "↑" : ""}<b>${formatXps(
row.up row.up,
)}</b></td>`, )}</b></td>`,
data.bidirectional data.bidirectional
? `<td class="pl-2">↓<b>${formatXps(row.down)}</b></td>` ? `<td class="pl-2">↓<b>${formatXps(row.down)}</b></td>`
: "", : "",
`</tr>`, `</tr>`,
].join("") ].join(""),
) )
.join(""); .join("");
return `${ return `${
@@ -324,7 +324,7 @@ const graph = computed((): ECOption => {
} }
if (data.graphType === "grid") { if (data.graphType === "grid") {
const uniqRows = uniqWith(data.rows, isEqual).filter((row) => const uniqRows = uniqWith(data.rows, isEqual).filter((row) =>
row.some((name) => name !== "Other") row.some((name) => name !== "Other"),
), ),
uniqRowIndex = (row: string[]) => uniqRowIndex = (row: string[]) =>
findIndex(uniqRows, (orow) => isEqual(row, orow)), findIndex(uniqRows, (orow) => isEqual(row, orow)),
@@ -338,9 +338,9 @@ const graph = computed((): ECOption => {
const [, ...cdr] = row; const [, ...cdr] = row;
return fn.apply( return fn.apply(
null, null,
cdr.filter((_, idx) => !otherIndexes.includes(idx + 1)) cdr.filter((_, idx) => !otherIndexes.includes(idx + 1)),
); );
}) }),
), ),
maxY = somethingY(Math.max), maxY = somethingY(Math.max),
minY = somethingY(Math.min); minY = somethingY(Math.min);
@@ -454,7 +454,7 @@ const updateTimeRange = (evt: BrushModel) => {
return; return;
} }
const [start, end] = evt.areas[0].coordRange.map( const [start, end] = evt.areas[0].coordRange.map(
(t) => new Date(t as number) (t) => new Date(t as number),
); );
chartComponent.value.dispatchAction({ chartComponent.value.dispatchAction({
type: "brush", type: "brush",
@@ -472,6 +472,6 @@ watch(
type: "highlight", type: "highlight",
seriesIndex: index, seriesIndex: index,
}); });
} },
); );
</script> </script>

4
console/frontend/src/views/VisualizePage/DataGraphSankey.vue
View File

@@ -54,7 +54,7 @@ const option = computed((): ECOption => {
marker, marker,
`<span style="display:inline-block;margin-left:1em;">${nodeData.name}</span>`, `<span style="display:inline-block;margin-left:1em;">${nodeData.name}</span>`,
`<span style="display:inline-block;margin-left:2em;font-weight:bold;">${formatXps( `<span style="display:inline-block;margin-left:2em;font-weight:bold;">${formatXps(
value.valueOf() as number value.valueOf() as number,
)}`, )}`,
].join(""); ].join("");
} else if (dataType === "edge") { } else if (dataType === "edge") {
@@ -69,7 +69,7 @@ const option = computed((): ECOption => {
? [ ? [
`${source} → ${target}`, `${source} → ${target}`,
`<span style="display:inline-block;margin-left:2em;font-weight:bold;">${formatXps( `<span style="display:inline-block;margin-left:2em;font-weight:bold;">${formatXps(
value.valueOf() as number value.valueOf() as number,
)}`, )}`,
].join("") ].join("")
: ""; : "";

4
console/frontend/src/views/VisualizePage/DataTable.vue
View File

@@ -116,7 +116,7 @@ const highlight = (index: number | null) => {
(() => { (() => {
let count = 0; let count = 0;
return (_, idx) => axis[idx] != displayedAxis.value || count++ < index; return (_, idx) => axis[idx] != displayedAxis.value || count++ < index;
})() })(),
).length; ).length;
emit("highlighted", originalIndex); emit("highlighted", originalIndex);
}; };
@@ -221,6 +221,6 @@ const table = computed(
}; };
} }
return null; return null;
} },
); );
</script> </script>

8
console/frontend/src/views/VisualizePage/OptionsPanel.vue
View File

@@ -146,7 +146,7 @@ const props = withDefaults(
}>(), }>(),
{ {
loading: false, loading: false,
} },
); );
const emit = defineEmits<{ const emit = defineEmits<{
(e: "update:modelValue", value: typeof props.modelValue): void; (e: "update:modelValue", value: typeof props.modelValue): void;
@@ -217,7 +217,7 @@ const options = computed((): InternalModelType => {
const applyLabel = computed(() => const applyLabel = computed(() =>
isEqual(options.value, omit(props.modelValue, ["start", "end"])) isEqual(options.value, omit(props.modelValue, ["start", "end"]))
? "Refresh" ? "Refresh"
: "Apply" : "Apply",
); );
const hasErrors = computed( const hasErrors = computed(
() => () =>
@@ -225,7 +225,7 @@ const hasErrors = computed(
timeRange.value?.errors || timeRange.value?.errors ||
dimensions.value?.errors || dimensions.value?.errors ||
filter.value?.errors filter.value?.errors
) ),
); );
const serverConfiguration = inject(ServerConfigKey)!; const serverConfiguration = inject(ServerConfigKey)!;
@@ -281,7 +281,7 @@ watch(
submitOptions(true); submitOptions(true);
} }
}, },
{ immediate: true, deep: true } { immediate: true, deep: true },
); );
</script> </script>

6
console/frontend/src/views/VisualizePage/RequestSummary.vue
View File

@@ -67,7 +67,7 @@ import { TitleKey } from "@/components/TitleProvider.vue";
const props = defineProps<{ request: ModelType }>(); const props = defineProps<{ request: ModelType }>();
const start = computed(() => const start = computed(() =>
props.request ? SugarDate(props.request.start).long() : null props.request ? SugarDate(props.request.start).long() : null,
); );
const end = computed(() => { const end = computed(() => {
if (props.request === null) return null; if (props.request === null) return null;
@@ -75,7 +75,7 @@ const end = computed(() => {
SugarDate(props.request.start).toDateString().raw === SugarDate(props.request.start).toDateString().raw ===
SugarDate(props.request.end).toDateString().raw SugarDate(props.request.end).toDateString().raw
? "%X" ? "%X"
: "{long}" : "{long}",
); );
}); });
@@ -90,7 +90,7 @@ const computedTitle = computed(() =>
end.value, end.value,
] ]
.filter((e) => !!e) .filter((e) => !!e)
.join(" · ") .join(" · "),
); );
watch(computedTitle, (t) => title.set(t)); watch(computedTitle, (t) => title.set(t));
</script> </script>