diff --git a/src/Frontend/package-lock.json b/src/Frontend/package-lock.json index 5d6608797..38a02e0a9 100644 --- a/src/Frontend/package-lock.json +++ b/src/Frontend/package-lock.json @@ -15,6 +15,7 @@ "@tinyhttp/content-disposition": "^2.2.2", "@vue-flow/controls": "^1.1.2", "@vue-flow/core": "^1.42.5", + "@vuepic/vue-datepicker": "^11.0.2", "bootstrap": "^5.3.5", "bootstrap-icons": "^1.11.3", "codemirror": "^6.0.1", @@ -2663,6 +2664,21 @@ } } }, + "node_modules/@vuepic/vue-datepicker": { + "version": "11.0.2", + "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-11.0.2.tgz", + "integrity": "sha512-uHh78mVBXCEjam1uVfTzZ/HkyDwut/H6b2djSN9YTF+l/EA+XONfdCnOVSi1g+qVGSy65DcQAwyBNidAssnudQ==", + "license": "MIT", + "dependencies": { + "date-fns": "^4.1.0" + }, + "engines": { + "node": ">=18.12.0" + }, + "peerDependencies": { + "vue": ">=3.3.0" + } + }, "node_modules/@vueuse/core": { "version": "10.11.1", "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.11.1.tgz", @@ -3478,6 +3494,16 @@ "node": ">=18" } }, + "node_modules/date-fns": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz", + "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/kossnocorp" + } + }, "node_modules/de-indent": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz", diff --git a/src/Frontend/package.json b/src/Frontend/package.json index 6e11d0376..b2fea93c5 100644 --- a/src/Frontend/package.json +++ b/src/Frontend/package.json @@ -24,6 +24,7 @@ "@tinyhttp/content-disposition": "^2.2.2", "@vue-flow/controls": "^1.1.2", "@vue-flow/core": "^1.42.5", + "@vuepic/vue-datepicker": "^11.0.2", "bootstrap": "^5.3.5", "bootstrap-icons": "^1.11.3", "codemirror": "^6.0.1", diff --git a/src/Frontend/src/assets/status_archived.svg b/src/Frontend/src/assets/status_archived.svg new file mode 100644 index 000000000..3ee4db593 --- /dev/null +++ b/src/Frontend/src/assets/status_archived.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/Frontend/src/assets/status_failed.svg b/src/Frontend/src/assets/status_failed.svg new file mode 100644 index 000000000..ff5a79e20 --- /dev/null +++ b/src/Frontend/src/assets/status_failed.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/Frontend/src/assets/status_repeated_failed.svg b/src/Frontend/src/assets/status_repeated_failed.svg new file mode 100644 index 000000000..c80647d75 --- /dev/null +++ b/src/Frontend/src/assets/status_repeated_failed.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/Frontend/src/assets/status_resolved.svg b/src/Frontend/src/assets/status_resolved.svg new file mode 100644 index 000000000..b7ab8c1f6 --- /dev/null +++ b/src/Frontend/src/assets/status_resolved.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/Frontend/src/assets/status_retry_issued.svg b/src/Frontend/src/assets/status_retry_issued.svg new file mode 100644 index 000000000..f64c7dc97 --- /dev/null +++ b/src/Frontend/src/assets/status_retry_issued.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/Frontend/src/assets/status_successful.svg b/src/Frontend/src/assets/status_successful.svg new file mode 100644 index 000000000..340e02ac4 --- /dev/null +++ b/src/Frontend/src/assets/status_successful.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/Frontend/src/components/FilterInput.vue b/src/Frontend/src/components/FilterInput.vue index 41d124f28..7c06247ae 100644 --- a/src/Frontend/src/components/FilterInput.vue +++ b/src/Frontend/src/components/FilterInput.vue @@ -3,13 +3,17 @@ import { ref, watch } from "vue"; import debounce from "lodash/debounce"; const model = defineModel({ required: true }); -const props = withDefaults(defineProps<{ placeholder?: string; ariaLabel?: string }>(), { placeholder: "Filter by name...", ariaLabel: "filter by name" }); +const props = withDefaults(defineProps<{ placeholder?: string; ariaLabel?: string }>(), { placeholder: "Filter by name...", ariaLabel: "Filter by name" }); const localInput = ref(model.value); const debounceUpdateModel = debounce((value: string) => { model.value = value; }, 600); +watch(model, (newValue) => { + localInput.value = newValue; +}); + watch(localInput, (newValue) => { debounceUpdateModel(newValue); }); @@ -17,7 +21,7 @@ watch(localInput, (newValue) => { @@ -34,7 +38,6 @@ watch(localInput, (newValue) => { div.filter-input { position: relative; - width: 280px; height: 36px; } diff --git a/src/Frontend/src/components/audit/AuditList.vue b/src/Frontend/src/components/audit/AuditList.vue index 67b0ab47c..bdd31ccef 100644 --- a/src/Frontend/src/components/audit/AuditList.vue +++ b/src/Frontend/src/components/audit/AuditList.vue @@ -1,19 +1,20 @@ diff --git a/src/Frontend/src/components/audit/DatePickerRange.vue b/src/Frontend/src/components/audit/DatePickerRange.vue new file mode 100644 index 000000000..5de94afbf --- /dev/null +++ b/src/Frontend/src/components/audit/DatePickerRange.vue @@ -0,0 +1,61 @@ + + + + + diff --git a/src/Frontend/src/components/audit/FiltersPanel.vue b/src/Frontend/src/components/audit/FiltersPanel.vue new file mode 100644 index 000000000..72dd98bdb --- /dev/null +++ b/src/Frontend/src/components/audit/FiltersPanel.vue @@ -0,0 +1,119 @@ + + + + + diff --git a/src/Frontend/src/components/audit/ListFilterSelector.vue b/src/Frontend/src/components/audit/ListFilterSelector.vue new file mode 100644 index 000000000..db6871d84 --- /dev/null +++ b/src/Frontend/src/components/audit/ListFilterSelector.vue @@ -0,0 +1,113 @@ + + + + + diff --git a/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue b/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue index 0838371b0..7ed378c38 100644 --- a/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue +++ b/src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue @@ -14,6 +14,7 @@ import EndpointDetails from "@/resources/EndpointDetails.ts"; import { hexToCSSFilter } from "hex-to-css-filter"; import TextEllipses from "@/components/TextEllipses.vue"; import { useLayout } from "@/components/messages2/FlowDiagram/useLayout.ts"; +import { formatTypeName } from "@/composables/formatUtils.ts"; enum MessageType { Event = "Event message", @@ -40,18 +41,10 @@ class SagaInvocation { const sagaIdHeader = getHeaderByKey(message, NServiceBusHeaders.SagaId); const originatedSagaIdHeader = getHeaderByKey(message, NServiceBusHeaders.OriginatingSagaId); this.id = saga.saga_id; - this.sagaType = this.toName(saga.saga_type); + this.sagaType = formatTypeName(saga.saga_type); this.isSagaCompleted = saga.change_status === "Completed"; this.isSagaInitiated = sagaIdHeader === undefined && originatedSagaIdHeader !== undefined; } - - private toName(type: string) { - const clazz = type.split(",")[0]; - let objectName = clazz.split(".").pop() ?? ""; - objectName = objectName.replace("+", "."); - - return objectName; - } } interface NodeData { diff --git a/src/Frontend/src/components/messages2/HeadersView.vue b/src/Frontend/src/components/messages2/HeadersView.vue index fe655a054..293c12caf 100644 --- a/src/Frontend/src/components/messages2/HeadersView.vue +++ b/src/Frontend/src/components/messages2/HeadersView.vue @@ -3,6 +3,7 @@ import CopyToClipboard from "@/components/CopyToClipboard.vue"; import { computed, ref } from "vue"; import { useMessageStore } from "@/stores/MessageStore"; import { storeToRefs } from "pinia"; +import FilterInput from "@/components/FilterInput.vue"; const { headers } = storeToRefs(useMessageStore()); @@ -26,7 +27,9 @@ const filteredHeaders = computed(() => {
- +
+ +
diff --git a/src/Frontend/src/components/monitoring/MonitoringFilter.vue b/src/Frontend/src/components/monitoring/MonitoringFilter.vue index e88a5371e..17b41f6c3 100644 --- a/src/Frontend/src/components/monitoring/MonitoringFilter.vue +++ b/src/Frontend/src/components/monitoring/MonitoringFilter.vue @@ -16,13 +16,6 @@ const monitoringStore = useMonitoringStore();