fix(ui): fix nocontent message for dashboards and metrics
This commit is contained in:
sylenien
parent
cff38e3912
commit
7d6d9d50ff
2 changed files with 110 additions and 97 deletions
|
|
@ -7,56 +7,64 @@ import { sliceListPerPage } from 'App/utils';
|
|||
import DashboardListItem from './DashboardListItem';
|
||||
|
||||
function DashboardList() {
|
||||
const { dashboardStore } = useStore();
|
||||
const [shownDashboards, setDashboards] = React.useState([]);
|
||||
const dashboards = dashboardStore.dashboards;
|
||||
const dashboardsSearch = dashboardStore.dashboardsSearch;
|
||||
const { dashboardStore } = useStore();
|
||||
const [shownDashboards, setDashboards] = React.useState([]);
|
||||
const dashboards = dashboardStore.dashboards;
|
||||
const dashboardsSearch = dashboardStore.dashboardsSearch;
|
||||
|
||||
React.useEffect(() => {
|
||||
setDashboards(filterList(dashboards, dashboardsSearch, ['name', 'owner', 'description']))
|
||||
}, [dashboardsSearch])
|
||||
|
||||
const list = dashboardsSearch !== '' ? shownDashboards : dashboards;
|
||||
const lenth = list.length;
|
||||
React.useEffect(() => {
|
||||
setDashboards(filterList(dashboards, dashboardsSearch, ['name', 'owner', 'description']));
|
||||
}, [dashboardsSearch]);
|
||||
|
||||
return (
|
||||
<NoContent
|
||||
show={lenth === 0}
|
||||
title={
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<Icon name="no-dashboard" size={80} color="figmaColors-accent-secondary" />
|
||||
<div className="text-center text-gray-600 my-4">You haven't created any dashboards yet</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="mt-3 border-b">
|
||||
<div className="grid grid-cols-12 py-2 font-medium px-3">
|
||||
<div className="col-span-8">Title</div>
|
||||
<div className="col-span-2">Visibility</div>
|
||||
<div className="col-span-2 text-right">Created</div>
|
||||
</div>
|
||||
const list = dashboardsSearch !== '' ? shownDashboards : dashboards;
|
||||
const lenth = list.length;
|
||||
|
||||
{sliceListPerPage(list, dashboardStore.page - 1, dashboardStore.pageSize).map((dashboard: any) => (
|
||||
<React.Fragment key={dashboard.dashboardId}>
|
||||
<DashboardListItem dashboard={dashboard} />
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
return (
|
||||
<NoContent
|
||||
show={lenth === 0}
|
||||
title={
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<Icon name="no-dashboard" size={80} color="figmaColors-accent-secondary" />
|
||||
<div className="text-center text-gray-600 my-4">
|
||||
{dashboardsSearch !== ''
|
||||
? 'No matching results'
|
||||
: "You haven't created any dashboards yet"}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="mt-3 border-b">
|
||||
<div className="grid grid-cols-12 py-2 font-medium px-3">
|
||||
<div className="col-span-8">Title</div>
|
||||
<div className="col-span-2">Visibility</div>
|
||||
<div className="col-span-2 text-right">Created</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full flex items-center justify-between pt-4">
|
||||
<div className="text-disabled-text">
|
||||
Showing <span className="font-semibold">{Math.min(list.length, dashboardStore.pageSize)}</span> out of <span className="font-semibold">{list.length}</span> Dashboards
|
||||
</div>
|
||||
<Pagination
|
||||
page={dashboardStore.page}
|
||||
totalPages={Math.ceil(lenth / dashboardStore.pageSize)}
|
||||
onPageChange={(page) => dashboardStore.updateKey('page', page)}
|
||||
limit={dashboardStore.pageSize}
|
||||
debounceRequest={100}
|
||||
/>
|
||||
</div>
|
||||
</NoContent>
|
||||
);
|
||||
{sliceListPerPage(list, dashboardStore.page - 1, dashboardStore.pageSize).map(
|
||||
(dashboard: any) => (
|
||||
<React.Fragment key={dashboard.dashboardId}>
|
||||
<DashboardListItem dashboard={dashboard} />
|
||||
</React.Fragment>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="w-full flex items-center justify-between pt-4">
|
||||
<div className="text-disabled-text">
|
||||
Showing{' '}
|
||||
<span className="font-semibold">{Math.min(list.length, dashboardStore.pageSize)}</span>{' '}
|
||||
out of <span className="font-semibold">{list.length}</span> Dashboards
|
||||
</div>
|
||||
<Pagination
|
||||
page={dashboardStore.page}
|
||||
totalPages={Math.ceil(lenth / dashboardStore.pageSize)}
|
||||
onPageChange={(page) => dashboardStore.updateKey('page', page)}
|
||||
limit={dashboardStore.pageSize}
|
||||
debounceRequest={100}
|
||||
/>
|
||||
</div>
|
||||
</NoContent>
|
||||
);
|
||||
}
|
||||
|
||||
export default observer(DashboardList);
|
||||
|
|
|
|||
|
|
@ -8,62 +8,67 @@ import { sliceListPerPage } from 'App/utils';
|
|||
import { IWidget } from 'App/mstore/types/widget';
|
||||
|
||||
function MetricsList({ siteId }: { siteId: string }) {
|
||||
const { metricStore } = useStore();
|
||||
const metrics = useObserver(() => metricStore.metrics);
|
||||
const metricsSearch = useObserver(() => metricStore.metricsSearch);
|
||||
const { metricStore } = useStore();
|
||||
const metrics = useObserver(() => metricStore.metrics);
|
||||
const metricsSearch = useObserver(() => metricStore.metricsSearch);
|
||||
|
||||
const filterByDashboard = (item: IWidget, searchRE: RegExp) => {
|
||||
const dashboardsStr = item.dashboards.map((d: any) => d.name).join(' ')
|
||||
return searchRE.test(dashboardsStr)
|
||||
}
|
||||
const list = metricsSearch !== ''
|
||||
? filterList(metrics, metricsSearch, ['name', 'metricType', 'owner'], filterByDashboard)
|
||||
: metrics;
|
||||
const lenth = list.length;
|
||||
const filterByDashboard = (item: IWidget, searchRE: RegExp) => {
|
||||
const dashboardsStr = item.dashboards.map((d: any) => d.name).join(' ');
|
||||
return searchRE.test(dashboardsStr);
|
||||
};
|
||||
const list =
|
||||
metricsSearch !== ''
|
||||
? filterList(metrics, metricsSearch, ['name', 'metricType', 'owner'], filterByDashboard)
|
||||
: metrics;
|
||||
const lenth = list.length;
|
||||
|
||||
useEffect(() => {
|
||||
metricStore.updateKey('sessionsPage', 1);
|
||||
}, [])
|
||||
useEffect(() => {
|
||||
metricStore.updateKey('sessionsPage', 1);
|
||||
}, []);
|
||||
|
||||
return useObserver(() => (
|
||||
<NoContent
|
||||
show={lenth === 0}
|
||||
title={
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<Icon name="no-metrics" size={80} color="figmaColors-accent-secondary" />
|
||||
<div className="text-center text-gray-600 my-4">You haven't created any metrics yet</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="mt-3 border-b rounded bg-white">
|
||||
<div className="grid grid-cols-12 py-2 font-medium px-3">
|
||||
<div className="col-span-3">Title</div>
|
||||
<div className="col-span-3">Owner</div>
|
||||
<div className="col-span-4">Visibility</div>
|
||||
<div className="col-span-2 text-right">Last Modified</div>
|
||||
</div>
|
||||
return useObserver(() => (
|
||||
<NoContent
|
||||
show={lenth === 0}
|
||||
title={
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<Icon name="no-metrics" size={80} color="figmaColors-accent-secondary" />
|
||||
<div className="text-center text-gray-600 my-4">
|
||||
{metricsSearch !== '' ? 'No matching results' : "You haven't created any metrics yet"}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="mt-3 border-b rounded bg-white">
|
||||
<div className="grid grid-cols-12 py-2 font-medium px-3">
|
||||
<div className="col-span-3">Title</div>
|
||||
<div className="col-span-3">Owner</div>
|
||||
<div className="col-span-4">Visibility</div>
|
||||
<div className="col-span-2 text-right">Last Modified</div>
|
||||
</div>
|
||||
|
||||
{sliceListPerPage(list, metricStore.page - 1, metricStore.pageSize).map((metric: any) => (
|
||||
<React.Fragment key={metric.metricId}>
|
||||
<MetricListItem metric={metric} siteId={siteId} />
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
{sliceListPerPage(list, metricStore.page - 1, metricStore.pageSize).map((metric: any) => (
|
||||
<React.Fragment key={metric.metricId}>
|
||||
<MetricListItem metric={metric} siteId={siteId} />
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="w-full flex items-center justify-between pt-4">
|
||||
<div className="text-disabled-text">
|
||||
Showing <span className="font-semibold">{Math.min(list.length, metricStore.pageSize)}</span> out of <span className="font-semibold">{list.length}</span> metrics
|
||||
</div>
|
||||
<Pagination
|
||||
page={metricStore.page}
|
||||
totalPages={Math.ceil(lenth / metricStore.pageSize)}
|
||||
onPageChange={(page) => metricStore.updateKey('page', page)}
|
||||
limit={metricStore.pageSize}
|
||||
debounceRequest={100}
|
||||
/>
|
||||
</div>
|
||||
</NoContent>
|
||||
));
|
||||
<div className="w-full flex items-center justify-between pt-4">
|
||||
<div className="text-disabled-text">
|
||||
Showing{' '}
|
||||
<span className="font-semibold">{Math.min(list.length, metricStore.pageSize)}</span> out
|
||||
of <span className="font-semibold">{list.length}</span> metrics
|
||||
</div>
|
||||
<Pagination
|
||||
page={metricStore.page}
|
||||
totalPages={Math.ceil(lenth / metricStore.pageSize)}
|
||||
onPageChange={(page) => metricStore.updateKey('page', page)}
|
||||
limit={metricStore.pageSize}
|
||||
debounceRequest={100}
|
||||
/>
|
||||
</div>
|
||||
</NoContent>
|
||||
));
|
||||
}
|
||||
|
||||
export default MetricsList;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue