Skip to content

Commit f94ddb2

Browse files
butschsterbutschster
authored
Merge pull request #46 from buggregator/issue/#45-fix-stop-fetching
Issue/#45 fix stop fetching
2 parents f56202e + ab1abac commit f94ddb2

File tree

7 files changed

+138
-107
lines changed

7 files changed

+138
-107
lines changed

‎components/PreviewCardHeader/PreviewCardHeader.vue‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
<script lang="ts">
6363
import { defineComponent, PropType } from "vue";
6464
import { EVENT_TYPES } from "~/config/constants";
65-
import { OneOfValues } from "~/config/types";
65+
import { TEventType } from "~/config/types";
6666
import IconSvg from "~/components/IconSvg/IconSvg.vue";
6767
6868
export default defineComponent({
@@ -76,8 +76,7 @@ export default defineComponent({
7676
},
7777
eventType: {
7878
type: String,
79-
validator: (val: OneOfValues<typeof EVENT_TYPES>) =>
80-
Object.values(EVENT_TYPES).includes(val),
79+
validator: (val: TEventType) => Object.values(EVENT_TYPES).includes(val),
8180
required: true,
8281
},
8382
eventId: {

‎config/types.ts‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
1-
import {EVENT_TYPES} from "~/config/constants";
1+
import {EVENT_TYPES, ALL_EVENTS} from "~/config/constants";
22

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

8+
export type TEventType = OneOfValues<typeof EVENT_TYPES>;
9+
export type TEventGroup = OneOfValues<typeof EVENT_TYPES | typeof ALL_EVENTS>;
10+
11+
812
type SMTPUser = {
913
name: string;
1014
email: Email;
@@ -314,15 +318,15 @@ export type Inspector = InspectorTransaction[] | InspectorSegment[];
314318

315319
export interface ServerEvent<T> {
316320
uuid: EventId,
317-
type: OneOfValues<typeof EVENT_TYPES> | string,
321+
type: TEventType | string,
318322
payload: T,
319323
project_id: string | null,
320324
timestamp: number
321325
}
322326

323327
export interface NormalizedEvent {
324328
id: EventId,
325-
type: OneOfValues<typeof EVENT_TYPES> | string,
329+
type: TEventType | string,
326330
labels: string[],
327331
origin: object | null,
328332
serverName: string,

‎pages/index.vue‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ import { useNuxtApp } from "#app";
5050
import PreviewEventMapper from "~/components/PreviewEventMapper/PreviewEventMapper.vue";
5151
import { ALL_EVENTS } from "~/config/constants";
5252
import pluralize from "pluralize";
53+
import { TEventGroup } from "~/config/types";
5354
5455
export default defineComponent({
5556
components: {
@@ -117,15 +118,15 @@ export default defineComponent({
117118
return $events.removeAll();
118119
}
119120
120-
return $events.removeByType(this.type);
121+
return $events.removeByType(this.type as TEventGroup);
121122
},
122123
toggleUpdate() {
123124
const { $cachedEvents } = useNuxtApp();
124125
125126
if (this.isEventsPaused) {
126-
$cachedEvents.runUpdatesByType(this.type);
127+
$cachedEvents.runUpdatesByType(this.type as TEventGroup);
127128
} else {
128-
$cachedEvents.stopUpdatesByType(this.type);
129+
$cachedEvents.stopUpdatesByType(this.type as TEventGroup);
129130
}
130131
},
131132
},
@@ -163,7 +164,7 @@ export default defineComponent({
163164
}
164165
165166
.events-page__btn-stop-events--active {
166-
@apply opacity-100 text-blue-500;
167+
@apply opacity-100 text-blue-500 dark:text-blue-500;
167168
}
168169
169170
.events-page__btn-stop-events-count {

‎plugins/events.client.ts‎

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import {apiTransport} from '~/utils/events-transport'
22
import {useEventStore} from "~/stores/events";
3-
import {EventId, OneOfValues, ServerEvent} from "~/config/types";
4-
import {EVENT_TYPES} from "~/config/constants";
3+
import {useCachedIdsStore} from "~/stores/cached-ids";
4+
import { EventId, ServerEvent, TEventGroup } from "~/config/types";
55
import {storeToRefs} from "pinia";
66

77
export default defineNuxtPlugin(() => {
88
const eventsStore = useEventStore();
9+
const cachedIdsStore = useCachedIdsStore();
910

1011
const {
1112
deleteEvent,
@@ -15,32 +16,37 @@ export default defineNuxtPlugin(() => {
1516
makeEventUrl,
1617
} = apiTransport({
1718
onEventReceiveCb: (event: ServerEvent<unknown>) => {
18-
eventsStore.addEvents([event]);
19+
eventsStore.addList([event]);
1920
}
2021
});
2122

2223
const removeAll = () => {
2324
deleteEventsAll();
24-
eventsStore.removeEvents()
25+
eventsStore.removeAll()
26+
cachedIdsStore.removeAll()
2527
}
2628

2729
const removeById = (eventId: EventId) => {
2830
deleteEvent(eventId);
29-
eventsStore.removeEventById(eventId);
31+
eventsStore.removeById(eventId);
32+
cachedIdsStore.removeById(eventId);
3033
}
3134

32-
const removeByType = (type: OneOfValues<typeof EVENT_TYPES>) => {
35+
const removeByType = (type: TEventGroup) => {
3336
deleteEventsByType(type);
34-
eventsStore.removeEventsByType(type);
37+
eventsStore.removeByType(type);
38+
cachedIdsStore.removeByType(type);
3539
}
3640

3741
const getAll = () => {
3842
getEventsAll.then((events: ServerEvent<unknown>[]) => {
3943
if (events.length) {
40-
eventsStore.addEvents(events);
44+
eventsStore.addList(events);
45+
cachedIdsStore.syncWithActive(events.map(({ uuid }) => uuid));
4146
} else {
4247
// NOTE: clear cached events hardly
43-
eventsStore.removeEvents();
48+
eventsStore.removeAll();
49+
cachedIdsStore.removeAll();
4450
}
4551
}).catch((err) => {
4652
console.error('getAll err', err);
@@ -49,9 +55,12 @@ export default defineNuxtPlugin(() => {
4955

5056
const {
5157
events,
52-
cachedEventsIdsMap,
5358
} = storeToRefs(eventsStore)
5459

60+
const {
61+
cachedIds,
62+
} = storeToRefs(cachedIdsStore)
63+
5564
return {
5665
provide: {
5766
events: {
@@ -63,9 +72,9 @@ export default defineNuxtPlugin(() => {
6372
removeById,
6473
},
6574
cachedEvents: {
66-
eventsIdsByType: cachedEventsIdsMap,
67-
stopUpdatesByType: eventsStore.setCachedEvents,
68-
runUpdatesByType: eventsStore.removeCachedEvents,
75+
eventsIdsByType: cachedIds,
76+
stopUpdatesByType: cachedIdsStore.setByType,
77+
runUpdatesByType: cachedIdsStore.removeByType,
6978
}
7079
}
7180
}

‎stores/cached-ids.ts‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import { defineStore } from "pinia";
2+
import { EventId, ServerEvent, TEventGroup, TEventType } from "~/config/types";
3+
import { ALL_EVENTS, EVENT_TYPES, LOCAL_STORAGE_KEYS } from "~/config/constants";
4+
import { useEventStore } from "~/stores/events";
5+
6+
7+
type TCachedEventsEmptyMap = Record<TEventType, EventId[]>;
8+
9+
const initialcachedIds: TCachedEventsEmptyMap = {
10+
[EVENT_TYPES.SENTRY]: [] as EventId[],
11+
[EVENT_TYPES.INSPECTOR]: [] as EventId[],
12+
[EVENT_TYPES.PROFILER]: [] as EventId[],
13+
[EVENT_TYPES.SMTP]: [] as EventId[],
14+
[EVENT_TYPES.RAY_DUMP]: [] as EventId[],
15+
[EVENT_TYPES.VAR_DUMP]: [] as EventId[],
16+
[EVENT_TYPES.HTTP_DUMP]: [] as EventId[],
17+
[ALL_EVENTS]: [] as EventId[],
18+
};
19+
20+
const { localStorage } = window;
21+
const getCachedIds = (): TCachedEventsEmptyMap => {
22+
const storageValue = localStorage?.getItem(LOCAL_STORAGE_KEYS.CACHED_EVENTS);
23+
24+
if (storageValue) {
25+
return JSON.parse(storageValue) as TCachedEventsEmptyMap;
26+
}
27+
28+
return initialcachedIds;
29+
};
30+
31+
const syncLocalStorage = (cachedEventMap: TCachedEventsEmptyMap) => {
32+
localStorage?.setItem(LOCAL_STORAGE_KEYS.CACHED_EVENTS, JSON.stringify(cachedEventMap));
33+
}
34+
35+
export const useCachedIdsStore = defineStore("useCachedIdsStore", {
36+
state: () => ({
37+
cachedIds: getCachedIds(),
38+
}),
39+
getters: {
40+
cachedTypesList(state) {
41+
return Object.entries(state.cachedIds).filter(([_, value]) => value.length > 0).map(([key]) => key)
42+
}
43+
},
44+
actions: {
45+
setByType(cachedType: TEventGroup) {
46+
const { events } = useEventStore();
47+
48+
events
49+
.filter(({ type }) =>
50+
type === cachedType || cachedType === ALL_EVENTS
51+
)
52+
.forEach((event) => {
53+
this.cachedIds[cachedType].push(event.uuid);
54+
});
55+
56+
syncLocalStorage(this.cachedIds);
57+
},
58+
removeByType(type: TEventGroup) {
59+
this.cachedIds[type].length = 0;
60+
syncLocalStorage(this.cachedIds);
61+
},
62+
removeById(eventUuid: EventId) {
63+
this.cachedTypesList.forEach((type) => {
64+
this.cachedIds[type] = this.cachedIds[type].filter(
65+
(uuid: EventId) => uuid !== eventUuid
66+
);
67+
});
68+
69+
syncLocalStorage(this.cachedIds);
70+
},
71+
removeAll() {
72+
this.cachedIds = initialcachedIds;
73+
syncLocalStorage(this.cachedIds);
74+
},
75+
syncWithActive(activeIds: EventId[]) {
76+
if (!activeIds.length) {
77+
this.removeAll();
78+
79+
return;
80+
}
81+
82+
this.cachedTypesList.forEach((type) => {
83+
this.cachedIds[type] = this.cachedIds[type].filter(
84+
(uuid: EventId) => activeIds.includes(uuid)
85+
);
86+
});
87+
88+
syncLocalStorage(this.cachedIds);
89+
}
90+
}
91+
})

‎stores/events.ts‎

Lines changed: 9 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,38 @@
11
import { defineStore } from "pinia";
2-
import {
3-
EventId,
4-
OneOfValues,
5-
ServerEvent,
6-
} from "~/config/types";
7-
import { ALL_EVENTS, EVENT_TYPES, LOCAL_STORAGE_KEYS } from "~/config/constants";
2+
import { EventId, ServerEvent, TEventType } from "~/config/types";
83

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

11-
const initialCachedEventsIdsMap: TCachedEventsEmptyMap = {
12-
[EVENT_TYPES.SENTRY]: [] as EventId[],
13-
[EVENT_TYPES.INSPECTOR]: [] as EventId[],
14-
[EVENT_TYPES.PROFILER]: [] as EventId[],
15-
[EVENT_TYPES.SMTP]: [] as EventId[],
16-
[EVENT_TYPES.RAY_DUMP]: [] as EventId[],
17-
[EVENT_TYPES.VAR_DUMP]: [] as EventId[],
18-
[EVENT_TYPES.HTTP_DUMP]: [] as EventId[],
19-
[ALL_EVENTS]: [] as EventId[],
20-
};
21-
22-
const { localStorage } = window;
23-
const getCachedEventsIdsMap = (): TCachedEventsEmptyMap => {
24-
const storageValue = localStorage?.getItem(LOCAL_STORAGE_KEYS.CACHED_EVENTS);
25-
26-
if (storageValue) {
27-
return JSON.parse(storageValue) as TCachedEventsEmptyMap;
28-
}
29-
30-
return initialCachedEventsIdsMap;
31-
};
325

336
export const useEventStore = defineStore("useEventStore", {
347
state: () => ({
358
events: [] as ServerEvent<unknown>[],
36-
cachedEventsIdsMap: getCachedEventsIdsMap(),
379
}),
3810
actions: {
39-
addEvents(events: ServerEvent<unknown>[]) {
11+
addList(events: ServerEvent<unknown>[]) {
4012
events.forEach((event) => {
4113
const isExistedEvent = this.events.some((el) => el.uuid === event.uuid);
4214
if (!isExistedEvent) {
4315
this.events.unshift(event);
4416
} else {
4517
this.events = this.events.map((el) => {
46-
if (el.uuid === event.uuid) {
47-
return event;
18+
if (el.uuid !== event.uuid) {
19+
return el; // add new
4820
}
49-
return el;
21+
22+
return event; // replace existed
5023
});
5124
}
5225
});
5326
},
54-
removeEvents() {
27+
removeAll() {
5528
this.events.length = 0;
56-
57-
this.cachedEventsIdsMap = initialCachedEventsIdsMap;
5829
},
59-
removeEventById(eventUuid: EventId) {
60-
const eventType = this.events.find(
61-
({ uuid }) => uuid === eventUuid
62-
)?.type;
63-
64-
if (eventType) {
65-
this.cachedEventsIdsMap[eventType] = this.cachedEventsIdsMap[
66-
eventType
67-
].filter((uuid: EventId) => uuid !== eventUuid);
68-
}
69-
70-
if (this.cachedEventsIdsMap[ALL_EVENTS].length) {
71-
this.cachedEventsIdsMap[ALL_EVENTS] = this.cachedEventsIdsMap[
72-
ALL_EVENTS
73-
].filter((uuid: EventId) => uuid !== eventUuid);
74-
}
75-
30+
removeById(eventUuid: EventId) {
7631
this.events = this.events.filter(({ uuid }) => uuid !== eventUuid);
7732
},
78-
removeEventsByType(eventType: OneOfValues<typeof EVENT_TYPES>) {
79-
this.cachedEventsIdsMap[eventType].length = 0;
33+
removeByType(eventType: TEventType) {
8034
this.events = this.events.filter(({ type }) => type !== eventType);
8135
},
8236

83-
setCachedEvents(
84-
eventType: OneOfValues<typeof EVENT_TYPES | typeof ALL_EVENTS>
85-
) {
86-
this.events
87-
.filter(({ type }) =>
88-
eventType === ALL_EVENTS ? true : type === eventType
89-
)
90-
.forEach((event) => {
91-
this.cachedEventsIdsMap[eventType].push(event.uuid);
92-
});
93-
94-
localStorage?.setItem(
95-
LOCAL_STORAGE_KEYS.CACHED_EVENTS,
96-
JSON.stringify(this.cachedEventsIdsMap)
97-
);
98-
},
99-
removeCachedEvents(
100-
eventType: OneOfValues<typeof EVENT_TYPES | typeof ALL_EVENTS>
101-
) {
102-
this.cachedEventsIdsMap[eventType].length = 0;
103-
104-
localStorage?.setItem(
105-
LOCAL_STORAGE_KEYS.CACHED_EVENTS,
106-
JSON.stringify(this.cachedEventsIdsMap)
107-
);
108-
},
10937
},
11038
});

0 commit comments

Comments
 (0)