refactor(editor): Migrate LogStreaming.store.ts to composition API (#10719)
Some checks are pending
Test Master / install-and-build (push) Waiting to run
Test Master / Unit tests (18.x) (push) Blocked by required conditions
Test Master / Unit tests (20.x) (push) Blocked by required conditions
Test Master / Unit tests (22.4) (push) Blocked by required conditions
Test Master / Lint (push) Blocked by required conditions
Test Master / Notify Slack on failure (push) Blocked by required conditions
Benchmark Docker Image CI / build (push) Waiting to run

This commit is contained in:
Ricardo Espinoza 2024-09-19 09:15:01 -04:00 committed by GitHub
parent f5474ff791
commit cee57b6504
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 212 additions and 190 deletions

View file

@ -7,8 +7,9 @@ import {
hasDestinationId,
saveDestinationToDb,
sendTestMessageToDestination,
} from '../api/eventbus.ee';
} from '@/api/eventbus.ee';
import { useRootStore } from './root.store';
import { ref } from 'vue';
export interface EventSelectionItem {
selected: boolean;
@ -32,80 +33,142 @@ export interface DestinationSettingsStore {
[key: string]: DestinationStoreItem;
}
export const useLogStreamingStore = defineStore('logStreaming', {
state: () => ({
items: {} as DestinationSettingsStore,
eventNames: new Set<string>(),
}),
getters: {},
actions: {
addDestination(destination: MessageEventBusDestinationOptions) {
if (destination.id && this.items[destination.id]) {
this.items[destination.id].destination = destination;
export const useLogStreamingStore = defineStore('logStreaming', () => {
const items = ref<DestinationSettingsStore>({});
const eventNames = ref(new Set<string>());
const rootStore = useRootStore();
const addDestination = (destination: MessageEventBusDestinationOptions) => {
if (destination.id && items.value[destination.id]) {
items.value[destination.id].destination = destination;
} else {
this.setSelectionAndBuildItems(destination);
setSelectionAndBuildItems(destination);
}
},
getDestination(destinationId: string): MessageEventBusDestinationOptions | undefined {
if (this.items[destinationId]) {
return this.items[destinationId].destination;
};
const setSelectionAndBuildItems = (destination: MessageEventBusDestinationOptions) => {
if (destination.id) {
if (!items.value[destination.id]) {
items.value[destination.id] = {
destination,
selectedEvents: new Set<string>(),
eventGroups: [],
isNew: false,
} as DestinationStoreItem;
}
items.value[destination.id]?.selectedEvents?.clear();
if (destination.subscribedEvents) {
for (const eventName of destination.subscribedEvents) {
items.value[destination.id]?.selectedEvents?.add(eventName);
}
}
items.value[destination.id].eventGroups = eventGroupsFromStringList(
eventNames.value,
items.value[destination.id]?.selectedEvents,
);
}
};
const getDestination = (destinationId: string) => {
if (items.value[destinationId]) {
return items.value[destinationId].destination;
} else {
return;
}
},
getAllDestinations(): MessageEventBusDestinationOptions[] {
};
const getAllDestinations = () => {
const destinations: MessageEventBusDestinationOptions[] = [];
for (const key of Object.keys(this.items)) {
destinations.push(this.items[key].destination);
for (const key of Object.keys(items)) {
destinations.push(items.value[key].destination);
}
return destinations;
},
updateDestination(destination: MessageEventBusDestinationOptions) {
if (destination.id && this.items[destination.id]) {
this.$patch((state) => {
if (destination.id && this.items[destination.id]) {
state.items[destination.id].destination = destination;
};
const clearDestinations = () => {
items.value = {};
};
const addEventName = (name: string) => {
eventNames.value.add(name);
};
const removeEventName = (name: string) => {
eventNames.value.delete(name);
};
const clearEventNames = () => {
eventNames.value.clear();
};
const addSelectedEvent = (id: string, name: string) => {
items.value[id]?.selectedEvents?.add(name);
setSelectedInGroup(id, name, true);
};
const removeSelectedEvent = (id: string, name: string) => {
items.value[id]?.selectedEvents?.delete(name);
setSelectedInGroup(id, name, false);
};
const setSelectedInGroup = (destinationId: string, name: string, isSelected: boolean) => {
if (items.value[destinationId]) {
const groupName = eventGroupFromEventName(name);
const groupIndex = items.value[destinationId].eventGroups.findIndex(
(e) => e.name === groupName,
);
if (groupIndex > -1) {
if (groupName === name) {
items.value[destinationId].eventGroups[groupIndex].selected = isSelected;
} else {
const eventIndex = items.value[destinationId].eventGroups[groupIndex].children.findIndex(
(e) => e.name === name,
);
if (eventIndex > -1) {
items.value[destinationId].eventGroups[groupIndex].children[eventIndex].selected =
isSelected;
if (isSelected) {
items.value[destinationId].eventGroups[groupIndex].indeterminate = isSelected;
} else {
let anySelected = false;
for (
let i = 0;
i < items.value[destinationId].eventGroups[groupIndex].children.length;
i++
) {
anySelected =
anySelected ||
items.value[destinationId].eventGroups[groupIndex].children[i].selected;
}
// to trigger refresh
state.items = { ...state.items };
});
items.value[destinationId].eventGroups[groupIndex].indeterminate = anySelected;
}
},
removeDestination(destinationId: string) {
}
}
}
}
};
const removeDestinationItemTree = (id: string) => {
delete items.value[id];
};
const updateDestination = (destination: MessageEventBusDestinationOptions) => {
if (destination.id && items.value[destination.id]) {
items.value[destination.id].destination = destination;
}
};
const removeDestination = (destinationId: string) => {
if (!destinationId) return;
delete this.items[destinationId];
if (this.items[destinationId]) {
this.$patch({
items: {
...this.items,
},
});
}
},
clearDestinations() {
this.items = {};
},
addEventName(name: string) {
this.eventNames.add(name);
},
removeEventName(name: string) {
this.eventNames.delete(name);
},
clearEventNames() {
this.eventNames.clear();
},
addSelectedEvent(id: string, name: string) {
this.items[id]?.selectedEvents?.add(name);
this.setSelectedInGroup(id, name, true);
},
removeSelectedEvent(id: string, name: string) {
this.items[id]?.selectedEvents?.delete(name);
this.setSelectedInGroup(id, name, false);
},
getSelectedEvents(destinationId: string): string[] {
delete items.value[destinationId];
};
const getSelectedEvents = (destinationId: string): string[] => {
const selectedEvents: string[] = [];
if (this.items[destinationId]) {
for (const group of this.items[destinationId].eventGroups) {
if (items.value[destinationId]) {
for (const group of items.value[destinationId].eventGroups) {
if (group.selected) {
selectedEvents.push(group.name);
}
@ -117,136 +180,95 @@ export const useLogStreamingStore = defineStore('logStreaming', {
}
}
return selectedEvents;
},
setSelectedInGroup(destinationId: string, name: string, isSelected: boolean) {
if (this.items[destinationId]) {
const groupName = eventGroupFromEventName(name);
const groupIndex = this.items[destinationId].eventGroups.findIndex(
(e) => e.name === groupName,
);
if (groupIndex > -1) {
if (groupName === name) {
this.$patch((state) => {
state.items[destinationId].eventGroups[groupIndex].selected = isSelected;
});
} else {
const eventIndex = this.items[destinationId].eventGroups[groupIndex].children.findIndex(
(e) => e.name === name,
);
if (eventIndex > -1) {
this.$patch((state) => {
state.items[destinationId].eventGroups[groupIndex].children[eventIndex].selected =
isSelected;
if (isSelected) {
state.items[destinationId].eventGroups[groupIndex].indeterminate = isSelected;
} else {
let anySelected = false;
for (
let i = 0;
i < state.items[destinationId].eventGroups[groupIndex].children.length;
i++
) {
anySelected =
anySelected ||
state.items[destinationId].eventGroups[groupIndex].children[i].selected;
}
state.items[destinationId].eventGroups[groupIndex].indeterminate = anySelected;
}
});
}
}
}
}
},
removeDestinationItemTree(id: string) {
delete this.items[id];
},
clearDestinationItemTrees() {
this.items = {} as DestinationSettingsStore;
},
setSelectionAndBuildItems(destination: MessageEventBusDestinationOptions) {
if (destination.id) {
if (!this.items[destination.id]) {
this.items[destination.id] = {
destination,
selectedEvents: new Set<string>(),
eventGroups: [],
isNew: false,
} as DestinationStoreItem;
}
this.items[destination.id]?.selectedEvents?.clear();
if (destination.subscribedEvents) {
for (const eventName of destination.subscribedEvents) {
this.items[destination.id]?.selectedEvents?.add(eventName);
}
}
this.items[destination.id].eventGroups = eventGroupsFromStringList(
this.eventNames,
this.items[destination.id]?.selectedEvents,
);
}
},
async saveDestination(destination: MessageEventBusDestinationOptions): Promise<boolean> {
};
const saveDestination = async (
destination: MessageEventBusDestinationOptions,
): Promise<boolean> => {
if (!hasDestinationId(destination)) {
return false;
}
const rootStore = useRootStore();
const selectedEvents = this.getSelectedEvents(destination.id);
const selectedEvents = getSelectedEvents(destination.id);
try {
await saveDestinationToDb(rootStore.restApiContext, destination, selectedEvents);
this.updateDestination(destination);
updateDestination(destination);
return true;
} catch (e) {
return false;
}
},
async sendTestMessage(destination: MessageEventBusDestinationOptions): Promise<boolean> {
};
const sendTestMessage = async (
destination: MessageEventBusDestinationOptions,
): Promise<boolean> => {
if (!hasDestinationId(destination)) {
return false;
}
const rootStore = useRootStore();
const testResult = await sendTestMessageToDestination(rootStore.restApiContext, destination);
return testResult;
},
async fetchEventNames(): Promise<string[]> {
const rootStore = useRootStore();
};
const fetchEventNames = async () => {
return await getEventNamesFromBackend(rootStore.restApiContext);
},
async fetchDestinations(): Promise<MessageEventBusDestinationOptions[]> {
const rootStore = useRootStore();
};
const fetchDestinations = async (): Promise<MessageEventBusDestinationOptions[]> => {
return await getDestinationsFromBackend(rootStore.restApiContext);
},
async deleteDestination(destinationId: string) {
const rootStore = useRootStore();
};
const deleteDestination = async (destinationId: string) => {
await deleteDestinationFromDb(rootStore.restApiContext, destinationId);
this.removeDestination(destinationId);
},
},
removeDestination(destinationId);
};
return {
addDestination,
setSelectionAndBuildItems,
getDestination,
getAllDestinations,
clearDestinations,
addEventName,
removeEventName,
clearEventNames,
addSelectedEvent,
removeSelectedEvent,
setSelectedInGroup,
removeDestinationItemTree,
updateDestination,
removeDestination,
getSelectedEvents,
saveDestination,
sendTestMessage,
fetchEventNames,
fetchDestinations,
deleteDestination,
items,
};
});
export function eventGroupFromEventName(eventName: string): string | undefined {
export const eventGroupFromEventName = (eventName: string): string | undefined => {
const matches = eventName.match(/^[\w\s]+\.[\w\s]+/);
if (matches && matches?.length > 0) {
return matches[0];
}
return undefined;
}
};
function prettifyEventName(label: string, group = ''): string {
const prettifyEventName = (label: string, group = ''): string => {
label = label.replace(group + '.', '');
if (label.length > 0) {
label = label[0].toUpperCase() + label.substring(1);
label = label.replaceAll('.', ' ');
}
return label;
}
};
export function eventGroupsFromStringList(
export const eventGroupsFromStringList = (
dottedList: Set<string>,
selectionList: Set<string> = new Set(),
) {
) => {
const result = [] as EventSelectionGroup[];
const eventNameArray = Array.from(dottedList.values());
@ -287,4 +309,4 @@ export function eventGroupsFromStringList(
result.push(collection);
}
return result;
}
};

View file

@ -95,7 +95,7 @@ export default defineComponent({
},
async getDestinationDataFromBackend(): Promise<void> {
this.logStreamingStore.clearEventNames();
this.logStreamingStore.clearDestinationItemTrees();
this.logStreamingStore.clearDestinations();
this.allDestinations = [];
const eventNamesData = await this.logStreamingStore.fetchEventNames();
if (eventNamesData) {