Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Store dismissed events in local storage #75

Merged
merged 1 commit into from
Apr 8, 2024
Merged

Store dismissed events in local storage #75

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 21 additions & 12 deletions web/src/ToastNotifications.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { useState } from 'react';
import { ACTION_DISMISS_FLUX_EVENT } from './redux';
import { useState, useEffect } from 'react';
import { XMarkIcon } from '@heroicons/react/24/outline';
import { Transition } from '@headlessui/react'
import { NavigationButton } from './NavigationButton';
Expand All @@ -9,31 +8,41 @@ function ToastNotifications(props) {

let reduxState = store.getState();
const [fluxEvents, setFluxEvents] = useState(reduxState.fluxEvents);
const [dismissedFluxEvents, setDismissedFluxEvents] = useState(reduxState.dismissedFluxEvents);
const [dismissed, setDismissed] = useState(JSON.parse(localStorage.getItem("dismissed")) ?? [])
store.subscribe(() => setFluxEvents(reduxState.fluxEvents));
store.subscribe(() => setDismissedFluxEvents(reduxState.dismissedFluxEvents));

const warningEvents = fluxEvents.filter(e => e.type === "Warning" && !dismissedFluxEvents.some(de => isSameEvent(e, de))).slice(0, 3);
useEffect(() => {
localStorage.setItem("dismissed", JSON.stringify(dismissed));
}, [dismissed]);

useEffect(() => {
setDismissed(dismissed.filter(d => {
const parsed = Date.parse(d.firstTimestamp, "yyyy-MM-dd'T'HH:mm:ss");
const day = 24 * 60 * 60 * 1000;
return (Date.now() - parsed) < day
}))
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

const dismiss = (event) => {
store.dispatch({
type: ACTION_DISMISS_FLUX_EVENT, payload: event
});
setDismissed([...dismissed, event]);
}

const warningEvents = fluxEvents.filter(e => e.type === "Warning" && !dismissed.some(d => isSameEvent(e, d))).slice(0, 3);

return (
<div className="fixed top-0 inset-x-0 z-50 text-center text-gray-700 text-sm space-y-2 max-w-7xl mx-auto py-2">
{warningEvents.map((e, index) => {
return (
<ToastElement key={index} event={e} index={index} dismiss={dismiss} handleNavigationSelect={handleNavigationSelect} />
<ToastElement key={index} event={e} dismiss={dismiss} handleNavigationSelect={handleNavigationSelect} />
)
})}
</div>
)
}

function ToastElement(props) {
const { event, index, dismiss, handleNavigationSelect } = props;
const { event, dismiss, handleNavigationSelect } = props;
return (
<Transition
as="div"
Expand All @@ -48,10 +57,10 @@ function ToastElement(props) {
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 -translate-y-12"
>
<div key={index} className="rounded-md shadow-lg bg-orange-400" role="alert">
<div className="rounded-md shadow-lg bg-orange-400" role="alert">
<div className="flex p-4">
<NavigationButton handleNavigation={() => handleNavigationSelect(event.involvedObjectKind === "Kustomization" ? "Kustomizations" : "Sources", event.involvedObjectNamespace, event.involvedObject, event.involvedObjectKind)}>
<span className='font-bold'>{event.involvedObjectKind} {event.involvedObjectNamespace}/{event.involvedObject}</span>: {event.message}
<p className="break-all line-clamp-3"><span className='font-bold'>{event.involvedObjectKind} {event.involvedObjectNamespace}/{event.involvedObject}</span>: {event.message}</p>
</NavigationButton>
<div className="ml-auto">
<button
Expand Down
9 changes: 0 additions & 9 deletions web/src/redux.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,13 @@ import * as serviceEventHandlers from './serviceEventHandlers';
export const initialState = {
fluxState: {},
fluxEvents: [],
dismissedFluxEvents: [],
services: [],
podLogs: {},
textColors: {},
}

export const ACTION_FLUX_STATE_RECEIVED = 'FLUX_STATE_RECEIVED';
export const ACTION_FLUX_EVENTS_RECEIVED = 'FLUX_EVENTS_RECEIVED';
export const ACTION_DISMISS_FLUX_EVENT = 'FLUX_EVENTS_DISMISSED';
export const ACTION_SERVICES_RECEIVED = 'SERVICES_RECEIVED';
export const ACTION_POD_LOGS_RECEIVED = 'POD_LOGS_RECEIVED';
export const ACTION_CLEAR_PODLOGS = 'CLEAR_POD_LOGS';
Expand All @@ -41,8 +39,6 @@ export function rootReducer(state = initialState, action) {
return fluxStateReceived(state, action.payload)
case ACTION_FLUX_EVENTS_RECEIVED:
return fluxEventsReceived(state, action.payload)
case ACTION_DISMISS_FLUX_EVENT:
return dismissFluxEvent(state, action.payload)
case ACTION_SERVICES_RECEIVED:
return servicesReceived(state, action.payload)
case ACTION_POD_LOGS_RECEIVED:
Expand Down Expand Up @@ -92,11 +88,6 @@ function fluxEventsReceived(state, payload) {
return state
}

function dismissFluxEvent(state, payload) {
state.dismissedFluxEvents = [...state.dismissedFluxEvents, payload]
return state
}

function servicesReceived(state, payload) {
state.services = payload
return state
Expand Down
Loading