Skip to content

Commit

Permalink
Merge pull request #46 from buggregator/issue/#45-fix-stop-fetching
Browse files Browse the repository at this point in the history
Issue/#45 fix stop fetching
  • Loading branch information
butschster authored Oct 5, 2023
2 parents f56202e + ab1abac commit f94ddb2
Show file tree
Hide file tree
Showing 7 changed files with 138 additions and 107 deletions.
5 changes: 2 additions & 3 deletions components/PreviewCardHeader/PreviewCardHeader.vue
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
<script lang="ts">
import { defineComponent, PropType } from "vue";
import { EVENT_TYPES } from "~/config/constants";
import { OneOfValues } from "~/config/types";
import { TEventType } from "~/config/types";
import IconSvg from "~/components/IconSvg/IconSvg.vue";
export default defineComponent({
Expand All @@ -76,8 +76,7 @@ export default defineComponent({
},
eventType: {
type: String,
validator: (val: OneOfValues<typeof EVENT_TYPES>) =>
Object.values(EVENT_TYPES).includes(val),
validator: (val: TEventType) => Object.values(EVENT_TYPES).includes(val),
required: true,
},
eventId: {
Expand Down
10 changes: 7 additions & 3 deletions config/types.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
import {EVENT_TYPES} from "~/config/constants";
import {EVENT_TYPES, ALL_EVENTS} from "~/config/constants";

export type OneOfValues<T> = T[keyof T];
export type EventId = string;
export type StatusCode = number; // TODO: update type
export type Email = string; // TODO: update type

export type TEventType = OneOfValues<typeof EVENT_TYPES>;
export type TEventGroup = OneOfValues<typeof EVENT_TYPES | typeof ALL_EVENTS>;


type SMTPUser = {
name: string;
email: Email;
Expand Down Expand Up @@ -314,15 +318,15 @@ export type Inspector = InspectorTransaction[] | InspectorSegment[];

export interface ServerEvent<T> {
uuid: EventId,
type: OneOfValues<typeof EVENT_TYPES> | string,
type: TEventType | string,
payload: T,
project_id: string | null,
timestamp: number
}

export interface NormalizedEvent {
id: EventId,
type: OneOfValues<typeof EVENT_TYPES> | string,
type: TEventType | string,
labels: string[],
origin: object | null,
serverName: string,
Expand Down
9 changes: 5 additions & 4 deletions pages/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ import { useNuxtApp } from "#app";
import PreviewEventMapper from "~/components/PreviewEventMapper/PreviewEventMapper.vue";
import { ALL_EVENTS } from "~/config/constants";
import pluralize from "pluralize";
import { TEventGroup } from "~/config/types";
export default defineComponent({
components: {
Expand Down Expand Up @@ -117,15 +118,15 @@ export default defineComponent({
return $events.removeAll();
}
return $events.removeByType(this.type);
return $events.removeByType(this.type as TEventGroup);
},
toggleUpdate() {
const { $cachedEvents } = useNuxtApp();
if (this.isEventsPaused) {
$cachedEvents.runUpdatesByType(this.type);
$cachedEvents.runUpdatesByType(this.type as TEventGroup);
} else {
$cachedEvents.stopUpdatesByType(this.type);
$cachedEvents.stopUpdatesByType(this.type as TEventGroup);
}
},
},
Expand Down Expand Up @@ -163,7 +164,7 @@ export default defineComponent({
}
.events-page__btn-stop-events--active {
@apply opacity-100 text-blue-500;
@apply opacity-100 text-blue-500 dark:text-blue-500;
}
.events-page__btn-stop-events-count {
Expand Down
35 changes: 22 additions & 13 deletions plugins/events.client.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import {apiTransport} from '~/utils/events-transport'
import {useEventStore} from "~/stores/events";
import {EventId, OneOfValues, ServerEvent} from "~/config/types";
import {EVENT_TYPES} from "~/config/constants";
import {useCachedIdsStore} from "~/stores/cached-ids";
import { EventId, ServerEvent, TEventGroup } from "~/config/types";
import {storeToRefs} from "pinia";

export default defineNuxtPlugin(() => {
const eventsStore = useEventStore();
const cachedIdsStore = useCachedIdsStore();

const {
deleteEvent,
Expand All @@ -15,32 +16,37 @@ export default defineNuxtPlugin(() => {
makeEventUrl,
} = apiTransport({
onEventReceiveCb: (event: ServerEvent<unknown>) => {
eventsStore.addEvents([event]);
eventsStore.addList([event]);
}
});

const removeAll = () => {
deleteEventsAll();
eventsStore.removeEvents()
eventsStore.removeAll()
cachedIdsStore.removeAll()
}

const removeById = (eventId: EventId) => {
deleteEvent(eventId);
eventsStore.removeEventById(eventId);
eventsStore.removeById(eventId);
cachedIdsStore.removeById(eventId);
}

const removeByType = (type: OneOfValues<typeof EVENT_TYPES>) => {
const removeByType = (type: TEventGroup) => {
deleteEventsByType(type);
eventsStore.removeEventsByType(type);
eventsStore.removeByType(type);
cachedIdsStore.removeByType(type);
}

const getAll = () => {
getEventsAll.then((events: ServerEvent<unknown>[]) => {
if (events.length) {
eventsStore.addEvents(events);
eventsStore.addList(events);
cachedIdsStore.syncWithActive(events.map(({ uuid }) => uuid));
} else {
// NOTE: clear cached events hardly
eventsStore.removeEvents();
eventsStore.removeAll();
cachedIdsStore.removeAll();
}
}).catch((err) => {
console.error('getAll err', err);
Expand All @@ -49,9 +55,12 @@ export default defineNuxtPlugin(() => {

const {
events,
cachedEventsIdsMap,
} = storeToRefs(eventsStore)

const {
cachedIds,
} = storeToRefs(cachedIdsStore)

return {
provide: {
events: {
Expand All @@ -63,9 +72,9 @@ export default defineNuxtPlugin(() => {
removeById,
},
cachedEvents: {
eventsIdsByType: cachedEventsIdsMap,
stopUpdatesByType: eventsStore.setCachedEvents,
runUpdatesByType: eventsStore.removeCachedEvents,
eventsIdsByType: cachedIds,
stopUpdatesByType: cachedIdsStore.setByType,
runUpdatesByType: cachedIdsStore.removeByType,
}
}
}
Expand Down
91 changes: 91 additions & 0 deletions stores/cached-ids.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
import { defineStore } from "pinia";
import { EventId, ServerEvent, TEventGroup, TEventType } from "~/config/types";
import { ALL_EVENTS, EVENT_TYPES, LOCAL_STORAGE_KEYS } from "~/config/constants";
import { useEventStore } from "~/stores/events";


type TCachedEventsEmptyMap = Record<TEventType, EventId[]>;

const initialcachedIds: TCachedEventsEmptyMap = {
[EVENT_TYPES.SENTRY]: [] as EventId[],
[EVENT_TYPES.INSPECTOR]: [] as EventId[],
[EVENT_TYPES.PROFILER]: [] as EventId[],
[EVENT_TYPES.SMTP]: [] as EventId[],
[EVENT_TYPES.RAY_DUMP]: [] as EventId[],
[EVENT_TYPES.VAR_DUMP]: [] as EventId[],
[EVENT_TYPES.HTTP_DUMP]: [] as EventId[],
[ALL_EVENTS]: [] as EventId[],
};

const { localStorage } = window;
const getCachedIds = (): TCachedEventsEmptyMap => {
const storageValue = localStorage?.getItem(LOCAL_STORAGE_KEYS.CACHED_EVENTS);

if (storageValue) {
return JSON.parse(storageValue) as TCachedEventsEmptyMap;
}

return initialcachedIds;
};

const syncLocalStorage = (cachedEventMap: TCachedEventsEmptyMap) => {
localStorage?.setItem(LOCAL_STORAGE_KEYS.CACHED_EVENTS, JSON.stringify(cachedEventMap));
}

export const useCachedIdsStore = defineStore("useCachedIdsStore", {
state: () => ({
cachedIds: getCachedIds(),
}),
getters: {
cachedTypesList(state) {
return Object.entries(state.cachedIds).filter(([_, value]) => value.length > 0).map(([key]) => key)
}
},
actions: {
setByType(cachedType: TEventGroup) {
const { events } = useEventStore();

events
.filter(({ type }) =>
type === cachedType || cachedType === ALL_EVENTS
)
.forEach((event) => {
this.cachedIds[cachedType].push(event.uuid);
});

syncLocalStorage(this.cachedIds);
},
removeByType(type: TEventGroup) {
this.cachedIds[type].length = 0;
syncLocalStorage(this.cachedIds);
},
removeById(eventUuid: EventId) {
this.cachedTypesList.forEach((type) => {
this.cachedIds[type] = this.cachedIds[type].filter(
(uuid: EventId) => uuid !== eventUuid
);
});

syncLocalStorage(this.cachedIds);
},
removeAll() {
this.cachedIds = initialcachedIds;
syncLocalStorage(this.cachedIds);
},
syncWithActive(activeIds: EventId[]) {
if (!activeIds.length) {
this.removeAll();

return;
}

this.cachedTypesList.forEach((type) => {
this.cachedIds[type] = this.cachedIds[type].filter(
(uuid: EventId) => activeIds.includes(uuid)
);
});

syncLocalStorage(this.cachedIds);
}
}
})
90 changes: 9 additions & 81 deletions stores/events.ts
Original file line number Diff line number Diff line change
@@ -1,110 +1,38 @@
import { defineStore } from "pinia";
import {
EventId,
OneOfValues,
ServerEvent,
} from "~/config/types";
import { ALL_EVENTS, EVENT_TYPES, LOCAL_STORAGE_KEYS } from "~/config/constants";
import { EventId, ServerEvent, TEventType } from "~/config/types";

type TCachedEventsEmptyMap = Record<OneOfValues<typeof EVENT_TYPES>, EventId[]>;

const initialCachedEventsIdsMap: TCachedEventsEmptyMap = {
[EVENT_TYPES.SENTRY]: [] as EventId[],
[EVENT_TYPES.INSPECTOR]: [] as EventId[],
[EVENT_TYPES.PROFILER]: [] as EventId[],
[EVENT_TYPES.SMTP]: [] as EventId[],
[EVENT_TYPES.RAY_DUMP]: [] as EventId[],
[EVENT_TYPES.VAR_DUMP]: [] as EventId[],
[EVENT_TYPES.HTTP_DUMP]: [] as EventId[],
[ALL_EVENTS]: [] as EventId[],
};

const { localStorage } = window;
const getCachedEventsIdsMap = (): TCachedEventsEmptyMap => {
const storageValue = localStorage?.getItem(LOCAL_STORAGE_KEYS.CACHED_EVENTS);

if (storageValue) {
return JSON.parse(storageValue) as TCachedEventsEmptyMap;
}

return initialCachedEventsIdsMap;
};

export const useEventStore = defineStore("useEventStore", {
state: () => ({
events: [] as ServerEvent<unknown>[],
cachedEventsIdsMap: getCachedEventsIdsMap(),
}),
actions: {
addEvents(events: ServerEvent<unknown>[]) {
addList(events: ServerEvent<unknown>[]) {
events.forEach((event) => {
const isExistedEvent = this.events.some((el) => el.uuid === event.uuid);
if (!isExistedEvent) {
this.events.unshift(event);
} else {
this.events = this.events.map((el) => {
if (el.uuid === event.uuid) {
return event;
if (el.uuid !== event.uuid) {
return el; // add new
}
return el;

return event; // replace existed
});
}
});
},
removeEvents() {
removeAll() {
this.events.length = 0;

this.cachedEventsIdsMap = initialCachedEventsIdsMap;
},
removeEventById(eventUuid: EventId) {
const eventType = this.events.find(
({ uuid }) => uuid === eventUuid
)?.type;

if (eventType) {
this.cachedEventsIdsMap[eventType] = this.cachedEventsIdsMap[
eventType
].filter((uuid: EventId) => uuid !== eventUuid);
}

if (this.cachedEventsIdsMap[ALL_EVENTS].length) {
this.cachedEventsIdsMap[ALL_EVENTS] = this.cachedEventsIdsMap[
ALL_EVENTS
].filter((uuid: EventId) => uuid !== eventUuid);
}

removeById(eventUuid: EventId) {
this.events = this.events.filter(({ uuid }) => uuid !== eventUuid);
},
removeEventsByType(eventType: OneOfValues<typeof EVENT_TYPES>) {
this.cachedEventsIdsMap[eventType].length = 0;
removeByType(eventType: TEventType) {
this.events = this.events.filter(({ type }) => type !== eventType);
},

setCachedEvents(
eventType: OneOfValues<typeof EVENT_TYPES | typeof ALL_EVENTS>
) {
this.events
.filter(({ type }) =>
eventType === ALL_EVENTS ? true : type === eventType
)
.forEach((event) => {
this.cachedEventsIdsMap[eventType].push(event.uuid);
});

localStorage?.setItem(
LOCAL_STORAGE_KEYS.CACHED_EVENTS,
JSON.stringify(this.cachedEventsIdsMap)
);
},
removeCachedEvents(
eventType: OneOfValues<typeof EVENT_TYPES | typeof ALL_EVENTS>
) {
this.cachedEventsIdsMap[eventType].length = 0;

localStorage?.setItem(
LOCAL_STORAGE_KEYS.CACHED_EVENTS,
JSON.stringify(this.cachedEventsIdsMap)
);
},
},
});
Loading

0 comments on commit f94ddb2

Please sign in to comment.