jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): alerts list loader

Browse source
This commit is contained in:
Shekar Siri 2023-11-02 12:21:54 +01:00
parent bcd240b242
commit e9644326d7
2 changed files with 51 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
frontend/app/components/Dashboard/components/Alerts/AlertsList.tsx
View file

@ -1,5 +1,5 @@
import React from 'react';
import { NoContent, Pagination } from 'UI';
import { Loader, NoContent, Pagination } from 'UI';
import { filterList } from 'App/utils';
import { sliceListPerPage } from 'App/utils';
import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
@ -31,46 +31,48 @@ function AlertsList({ siteId }: Props) {
const list = alertsSearch !== '' ? filteredAlerts : alertsArray;
return (
<NoContent
show={list.length === 0}
title={
<div className="flex flex-col items-center justify-center">
<AnimatedSVG name={ICONS.NO_ALERTS} size={180} />
<div className="text-center mt-4">
{alertsSearch !== '' ? 'No matching results' : "You haven't created any alerts yet"}
<Loader loading={alertsStore.loading}>
<NoContent
show={list.length === 0}
title={
<div className='flex flex-col items-center justify-center'>
<AnimatedSVG name={ICONS.NO_ALERTS} size={180} />
<div className='text-center mt-4'>
{alertsSearch !== '' ? 'No matching results' : 'You haven\'t created any alerts yet'}
</div>
</div>
</div>
}
subtext="Configure alerts to stay informed about app activity with threshold or change-based notifications."
>
<div className="mt-3 border-b">
<div className="grid grid-cols-12 py-2 font-medium px-6">
<div className="col-span-8">Title</div>
<div className="col-span-2">Type</div>
<div className="col-span-2 text-right">Modified</div>
}
subtext='Configure alerts to stay informed about app activity with threshold or change-based notifications.'
>
<div className='mt-3 border-b'>
<div className='grid grid-cols-12 py-2 font-medium px-6'>
<div className='col-span-8'>Title</div>
<div className='col-span-2'>Type</div>
<div className='col-span-2 text-right'>Modified</div>
</div>
{sliceListPerPage(list, page - 1, pageSize).map((alert: any) => (
<React.Fragment key={alert.alertId}>
<AlertListItem alert={alert} siteId={siteId} init={init} webhooks={webhooks} />
</React.Fragment>
))}
</div>
{sliceListPerPage(list, page - 1, pageSize).map((alert: any) => (
<React.Fragment key={alert.alertId}>
<AlertListItem alert={alert} siteId={siteId} init={init} webhooks={webhooks} />
</React.Fragment>
))}
</div>
<div className="w-full flex items-center justify-between pt-4 px-6">
<div className="text-disabled-text">
Showing <span className="font-semibold">{Math.min(list.length, pageSize)}</span> out of{' '}
<span className="font-semibold">{list.length}</span> Alerts
<div className='w-full flex items-center justify-between pt-4 px-6'>
<div className='text-disabled-text'>
Showing <span className='font-semibold'>{Math.min(list.length, pageSize)}</span> out of{' '}
<span className='font-semibold'>{list.length}</span> Alerts
</div>
<Pagination
page={page}
totalPages={Math.ceil(list.length / pageSize)}
onPageChange={(page) => alertsStore.updateKey('page', page)}
limit={pageSize}
debounceRequest={100}
/>
</div>
<Pagination
page={page}
totalPages={Math.ceil(list.length / pageSize)}
onPageChange={(page) => alertsStore.updateKey('page', page)}
limit={pageSize}
debounceRequest={100}
/>
</div>
</NoContent>
</NoContent>
</Loader>
);
}

24
frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx
View file

@ -8,9 +8,9 @@ import ListView from './ListView';
import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
function MetricsList({
siteId,
onSelectionChange,
}: {
siteId,
onSelectionChange
}: {
siteId: string;
onSelectionChange?: (selected: any[]) => void;
}) {
@ -18,7 +18,7 @@ function MetricsList({
const metricsSearch = metricStore.filter.query;
const listView = useObserver(() => metricStore.listView);
const [selectedMetrics, setSelectedMetrics] = useState<any>([]);
const dashboard = dashboardStore.selectedDashboard;
const existingCardIds = useMemo(() => dashboard?.widgets?.map(i => parseInt(i.metricId)), [dashboard]);
const cards = useMemo(() => !!onSelectionChange ? metricStore.filteredCards.filter(i => !existingCardIds?.includes(parseInt(i.metricId))) : metricStore.filteredCards, [metricStore.filteredCards]);
@ -54,14 +54,14 @@ function MetricsList({
<NoContent
show={lenth === 0}
title={
<div className="flex flex-col items-center justify-center">
<div className='flex flex-col items-center justify-center'>
<AnimatedSVG name={ICONS.NO_CARDS} size={180} />
<div className="text-center mt-4">
{metricsSearch !== '' ? 'No matching results' : "You haven't created any cards yet"}
<div className='text-center mt-4'>
{metricsSearch !== '' ? 'No matching results' : 'You haven\'t created any cards yet'}
</div>
</div>
}
subtext="Utilize cards to visualize key user interactions or product performance metrics."
subtext='Utilize cards to visualize key user interactions or product performance metrics.'
>
{listView ? (
<ListView
@ -85,11 +85,11 @@ function MetricsList({
/>
)}
<div className="w-full flex items-center justify-between py-4 px-6 border-t">
<div className="text-disabled-text">
<div className='w-full flex items-center justify-between py-4 px-6 border-t'>
<div className='text-disabled-text'>
Showing{' '}
<span className="font-semibold">{Math.min(cards.length, metricStore.pageSize)}</span> out
of <span className="font-semibold">{cards.length}</span> cards
<span className='font-semibold'>{Math.min(cards.length, metricStore.pageSize)}</span> out
of <span className='font-semibold'>{cards.length}</span> cards
</div>
<Pagination
page={metricStore.page}