Skip to content

Commit

Permalink
Merge pull request #146 from kaleido-io/bugfixes
Browse files Browse the repository at this point in the history 
Bugfixes
  • Loading branch information
@dechdev
dechdev authored Mar 28, 2022
2 parents 1748880 + 6738384 commit 369fe1b
Show file tree
Hide file tree
Showing 43 changed files with 556 additions and 684 deletions.
23 changes: 18 additions & 5 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ import {
} from './components/Snackbar/MessageSnackbar';
import { ApplicationContext } from './contexts/ApplicationContext';
import { SnackbarContext } from './contexts/SnackbarContext';
import { INamespace, IStatus, NAMESPACES_PATH } from './interfaces';
import { FF_EVENTS, INamespace, IStatus, NAMESPACES_PATH } from './interfaces';
import { FF_Paths } from './interfaces/constants';
import { themeOptions } from './theme';
import { fetchWithCredentials, summarizeFetchError } from './utils';
Expand All @@ -50,14 +50,18 @@ const App: React.FC = () => {
const [selectedNamespace, setSelectedNamespace] = useState('');
const ws = useRef<ReconnectingWebSocket | null>(null);
const [identity, setIdentity] = useState('');
const [lastEvent, setLastEvent] = useState<MessageEvent>();
const [message, setMessage] = useState('');
const [messageType, setMessageType] = useState<SnackbarMessageType>('error');
const [orgID, setOrgID] = useState('');
const [orgName, setOrgName] = useState('');
const [nodeID, setNodeID] = useState('');
const [nodeName, setNodeName] = useState('');
const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
// Event Context
const [newEvents, setNewEvents] = useState<FF_EVENTS[]>([]);
const [lastRefreshTime, setLastRefresh] = useState<string>(
new Date().toISOString()
);

const { pathname: currentPath } = useMemo(() => {
return window.location;
Expand Down Expand Up @@ -116,7 +120,10 @@ const App: React.FC = () => {
);
ws.current.onmessage = (event: any) => {
const eventData = JSON.parse(event.data);
setLastEvent(eventData);
const eventType: FF_EVENTS = eventData.type;
if (Object.values(FF_EVENTS).includes(eventType)) {
setNewEvents((existing) => [eventType, ...existing]);
}
};

return () => {
Expand All @@ -134,6 +141,11 @@ const App: React.FC = () => {
});
};

const clearNewEvents = () => {
setNewEvents([]);
setLastRefresh(new Date().toISOString());
};

if (initialized) {
if (initError) {
// figure out what to display
Expand All @@ -158,8 +170,9 @@ const App: React.FC = () => {
nodeID,
nodeName,
identity,
lastEvent,
setLastEvent,
newEvents,
clearNewEvents,
lastRefreshTime,
}}
>
<SnackbarContext.Provider
Expand Down
119 changes: 79 additions & 40 deletions src/components/AppWrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,11 @@ import { DateFilterContext } from '../contexts/DateFilterContext';
import { FilterContext } from '../contexts/FilterContext';
import { SlideContext } from '../contexts/SlideContext';
import {
CreatedFilterOptions,
ICreatedTimeFilter,
ITimeFilterObject,
NAMESPACES_PATH,
TimeFilterEnum,
} from '../interfaces';
import { getCreatedTimeFilter, isValidUUID } from '../utils';
import { getTimeFilterObject, isValidUUID } from '../utils';
import { Navigation, NAV_WIDTH } from './Navigation/Navigation';

const Main = styled('main')({
Expand All @@ -38,7 +38,7 @@ export const SLIDE_QUERY_KEY = 'slide';
export const TIME_QUERY_KEY = 'time';

export const AppWrapper: React.FC = () => {
const { pathname } = useLocation();
const { pathname, search } = useLocation();
const { selectedNamespace } = useContext(ApplicationContext);
const [filterAnchor, setFilterAnchor] = useState<HTMLButtonElement | null>(
null
Expand All @@ -47,12 +47,9 @@ export const AppWrapper: React.FC = () => {
// Table filters
const [filterArray, setFilterArray] = useState<string[]>([]);
const [filterString, setFilterString] = useState('');
// Slide filters
const [slideQuery, setSlideQuery] = useState<string | null>(null);
const [slideID, setSlideID] = useState<string | null>(null);
// Date filter
const [dateFilter, setDateFilter] = useState<ICreatedTimeFilter>(
getCreatedTimeFilter('24hours')
);
const [dateFilter, setDateFilter] = useState<ITimeFilterObject>();

if (pathname === '/') {
return (
Expand All @@ -63,28 +60,68 @@ export const AppWrapper: React.FC = () => {
);
}

// Table Filters
useEffect(() => {
const filterArray = searchParams.getAll(FILTERS_QUERY_KEY);
setFilterArray(filterArray);
setFilterString(`&${filterArray.join('&')}`);
}, [pathname]);
initializeTimeSearchParams();
initializeSlideSearchParams();
initializeTableFilterSearchParams();
}, [pathname, search]);

// Slide ID
useEffect(() => {
const slideQuery = searchParams.get(SLIDE_QUERY_KEY);
slideQuery !== null && setSlideQuery(slideQuery);
}, [pathname, setSearchParams]);
const initializeTimeSearchParams = () => {
// If date has already been set
if (
dateFilter?.filterShortString &&
dateFilter?.filterShortString in TimeFilterEnum
) {
setTimeSearchParam(dateFilter.filterShortString);
return;
}
// If time param is invalid
const existingTimeParam = searchParams.get(TIME_QUERY_KEY);
if (existingTimeParam === null || !(existingTimeParam in TimeFilterEnum)) {
setTimeSearchParam(TimeFilterEnum['24hours']);
} else {
// Set filter string for components to consume
setDateFilter(getTimeFilterObject(existingTimeParam as TimeFilterEnum));
}
};

// Time string
useEffect(() => {
const timeString = searchParams.get(TIME_QUERY_KEY) as CreatedFilterOptions;
if (timeString === null) {
addDateToParams(dateFilter.filterShortString);
const setTimeSearchParam = (timeFilter: TimeFilterEnum) => {
searchParams.set(TIME_QUERY_KEY, timeFilter);
setSearchParams(searchParams);
if (
getTimeFilterObject(timeFilter).filterShortString !==
dateFilter?.filterShortString
) {
setDateFilter(getTimeFilterObject(timeFilter));
}
};

const initializeSlideSearchParams = () => {
setSlideID(null);
const existingSlideParam = searchParams.get(SLIDE_QUERY_KEY);
if (existingSlideParam === null || !isValidUUID(existingSlideParam)) {
setSlideSearchParam(null);
} else {
setDateFilter(getCreatedTimeFilter(timeString));
setSlideSearchParam(existingSlideParam);
}
}, [pathname]);
};

const setSlideSearchParam = (slideID: string | null) => {
if (slideID === null) {
searchParams.delete(SLIDE_QUERY_KEY);
setSearchParams(searchParams);
} else if (isValidUUID(slideID)) {
searchParams.set(SLIDE_QUERY_KEY, slideID);
setSearchParams(searchParams);
setSlideID(slideID);
}
};

const initializeTableFilterSearchParams = () => {
const existingFilterArray = searchParams.getAll(FILTERS_QUERY_KEY);
setFilterArray(existingFilterArray);
setFilterString(`&${existingFilterArray.join('&')}`);
};

const addFilterToParams = (filter: string) => {
searchParams.append(FILTERS_QUERY_KEY, filter);
Expand All @@ -101,21 +138,22 @@ export const AppWrapper: React.FC = () => {
setFilterString('');
};

const addSlideToParams = (slideID: string | undefined) => {
if (slideID === undefined) {
searchParams.delete(SLIDE_QUERY_KEY);
} else {
isValidUUID(slideID) && searchParams.set(SLIDE_QUERY_KEY, slideID);
const removeFilter = (filterToRemove: string) => {
const filters = searchParams.getAll(FILTERS_QUERY_KEY);
searchParams.delete(FILTERS_QUERY_KEY);
if (filters.length > 0) {
filters.forEach((f) => {
if (f !== filterToRemove) {
searchParams.append(FILTERS_QUERY_KEY, f);
}
});
setSearchParams(searchParams);
const filterArray = searchParams.getAll(FILTERS_QUERY_KEY);
setFilterArray(filterArray);
setFilterString(`&${filterArray.join('&')}`);
}
};

const addDateToParams = (timeFilterString: CreatedFilterOptions) => {
searchParams.set(TIME_QUERY_KEY, timeFilterString);
setSearchParams(searchParams);
setDateFilter(getCreatedTimeFilter(timeFilterString));
};

return (
<RootDiv>
<FilterContext.Provider
Expand All @@ -125,20 +163,21 @@ export const AppWrapper: React.FC = () => {
filterString,
filterArray,
addFilterToParams,
removeFilter,
clearAllFilters,
}}
>
<DateFilterContext.Provider
value={{
searchParams,
dateFilter,
addDateToParams,
setTimeSearchParam,
}}
>
<SlideContext.Provider
value={{
slideQuery,
addSlideToParams,
slideID,
setSlideSearchParam,
}}
>
<Main>
Expand Down
4 changes: 1 addition & 3 deletions src/components/Cards/EventCards/BaseCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@ interface Props {
color?: string;
onClick?: () => void;
link?: string;
linkState?: any;
}

export const BaseCard: React.FC<Props> = ({
Expand All @@ -44,7 +43,6 @@ export const BaseCard: React.FC<Props> = ({
color,
onClick,
link,
linkState,
}) => {
const navigate = useNavigate();

Expand Down Expand Up @@ -106,7 +104,7 @@ export const BaseCard: React.FC<Props> = ({
{link && (
<IconButton
size="small"
onClick={() => navigate(link, linkState ?? undefined)}
onClick={() => navigate(link)}
sx={{
elevation: 0,
backgroundColor: 'background.paper',
Expand Down
2 changes: 0 additions & 2 deletions src/components/Cards/EventCards/EventCardWrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ export const EventCardWrapper = ({
onHandleViewEvent,
onHandleViewTx,
link,
linkState,
}: Props) => {
const { t } = useTranslation();

Expand All @@ -45,7 +44,6 @@ export const EventCardWrapper = ({
status={<HashPopover address={event.id} shortHash paper />}
color={FF_EVENTS_CATEGORY_MAP[event.type]?.color}
link={link}
linkState={linkState}
/>
</>
);
Expand Down
4 changes: 3 additions & 1 deletion src/components/Charts/Histogram.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ interface Props {
indexBy: string;
isEmpty: boolean;
keys: string[];
isLoading: boolean;
}

export const Histogram: React.FC<Props> = ({
Expand All @@ -32,6 +33,7 @@ export const Histogram: React.FC<Props> = ({
indexBy,
isEmpty,
keys,
isLoading,
}) => {
const [xAxisValues, setXAxisValues] = useState<(string | number)[]>([]);

Expand All @@ -51,7 +53,7 @@ export const Histogram: React.FC<Props> = ({
backgroundColor: 'background.paper',
}}
>
{!data ? (
{!data || isLoading ? (
<FFCircleLoader height="100%" color="warning"></FFCircleLoader>
) : isEmpty ? (
<EmptyStateCard text={emptyText}></EmptyStateCard>
Expand Down
9 changes: 3 additions & 6 deletions src/components/Filters/FilterButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,8 @@ interface Props {

export const FilterButton: React.FC<Props> = ({ onSetFilterAnchor }) => {
const { t } = useTranslation();
const { clearAllFilters, filterArray } = useContext(FilterContext);
const { clearAllFilters, filterArray, removeFilter } =
useContext(FilterContext);

const handleOpenFilter = (event: React.MouseEvent<HTMLButtonElement>) => {
onSetFilterAnchor(event);
Expand All @@ -51,11 +52,7 @@ export const FilterButton: React.FC<Props> = ({ onSetFilterAnchor }) => {
<Grid container alignItems="center" justifyContent="flex-end">
{filterArray.map((filter, index) => (
<Grid key={`${filter}${index}`} item>
<Chip
// TODO: Add back
// onDelete={() => handleRemoveFilter(filter)}
label={filter}
/>
<Chip onDelete={() => removeFilter(filter)} label={filter} />
</Grid>
))}
<Grid item>
Expand Down
12 changes: 4 additions & 8 deletions src/components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,7 @@ interface Props {
title: string | JSX.Element;
subtitle: string;
onRefresh?: any;
numNewEvents?: number;
showNumNewEvents?: boolean;
showRefreshBtn?: boolean;
noDateFilter?: boolean;
noNsFilter?: boolean;
}
Expand All @@ -43,8 +42,7 @@ export const Header: React.FC<Props> = ({
title,
subtitle,
onRefresh,
numNewEvents = 0,
showNumNewEvents = false,
showRefreshBtn = false,
noDateFilter = false,
noNsFilter = false,
}) => {
Expand Down Expand Up @@ -88,17 +86,15 @@ export const Header: React.FC<Props> = ({
alignItems="center"
>
<Grid item pr={1}>
{numNewEvents > 0 && (
{showRefreshBtn && (
<Button
onClick={onRefresh}
variant="contained"
color="info"
sx={{ borderRadius: '16px' }}
>
<Typography sx={{ fontSize: '14px' }}>
{`${t('refresh')}${
showNumNewEvents ? ` (${numNewEvents})` : ''
}`}
{t('refresh')}
</Typography>
</Button>
)}
Expand Down
Loading

0 comments on commit 369fe1b

Please sign in to comment.