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

change(ui) - alignment and other changes in dashboard

Browse source
This commit is contained in:
Shekar Siri 2023-03-29 17:07:55 +02:00
parent 889fa4a519
commit 9afce902af
4 changed files with 20 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -3,9 +3,9 @@ import { NoContent, Pagination } from 'UI';
import { filterList } from 'App/utils';
import { sliceListPerPage } from 'App/utils';
import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
import AlertListItem from './AlertListItem'
import { useStore } from 'App/mstore'
import { observer } from 'mobx-react-lite'
import AlertListItem from './AlertListItem';
import { useStore } from 'App/mstore';
import { observer } from 'mobx-react-lite';
const pageSize = 10;
@ -15,14 +15,19 @@ interface Props {
function AlertsList({ siteId }: Props) {
const { alertsStore, settingsStore } = useStore();
const { fetchWebhooks, webhooks } = settingsStore
const { alerts: alertsList, alertsSearch, fetchList, init } = alertsStore
const { fetchWebhooks, webhooks } = settingsStore;
const { alerts: alertsList, alertsSearch, fetchList, init } = alertsStore;
const page = alertsStore.page;
React.useEffect(() => { fetchList(); fetchWebhooks() }, []);
const alertsArray = alertsList
React.useEffect(() => {
fetchList();
fetchWebhooks();
}, []);
const alertsArray = alertsList;
const filteredAlerts = filterList(alertsArray, alertsSearch, ['name'], (item, query) => query.test(item.query.left))
const filteredAlerts = filterList(alertsArray, alertsSearch, ['name'], (item, query) =>
query.test(item.query.left)
);
const list = alertsSearch !== '' ? filteredAlerts : alertsArray;
return (
@ -31,9 +36,12 @@ function AlertsList({ siteId }: Props) {
title={
<div className="flex flex-col items-center justify-center">
<AnimatedSVG name={ICONS.NO_ALERTS} size={180} />
<div className="text-center text-gray-600 my-4">
<div className="text-center mt-4">
{alertsSearch !== '' ? 'No matching results' : "You haven't created any alerts yet"}
</div>
<div className="text-sm color-gray-medium font-normal">
Alerts helps your team stay up to date with the activity on your app.
</div>
</div>
}
>

4
frontend/app/components/Dashboard/components/Alerts/AlertsView.tsx
View file

@ -38,10 +38,6 @@ function AlertsView({ siteId }: IAlertsView) {
</div>
</div>
</div>
<div className="text-base text-disabled-text flex items-center px-6">
<Icon name="info-circle-fill" className="mr-2" size={16} />
Alerts helps your team stay up to date with the activity on your app.
</div>
<AlertsList siteId={siteId} />
</div>
);

2
frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
View file

@ -17,6 +17,7 @@ function DashboardList() {
show={lenth === 0}
title={
<div className="flex flex-col items-center justify-center">
<AnimatedSVG name={ICONS.NO_DASHBOARDS} size={180} />
<div className="text-center my-4">
{dashboardsSearch !== '' ? (
'No matching results'
@ -29,7 +30,6 @@ function DashboardList() {
</div>
)}
</div>
<AnimatedSVG name={ICONS.NO_DASHBOARDS} size={180} />
</div>
}
>

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

@ -54,10 +54,10 @@ function MetricsList({
title={
<div className="flex flex-col items-center justify-center">
<AnimatedSVG name={ICONS.NO_CARDS} size={180} />
<div className="text-center text-gray-600 my-4">
<div className="text-center mt-4">
{metricsSearch !== '' ? 'No matching results' : "You haven't created any cards yet"}
</div>
<div className="text-base text-disabled-text flex items-center px-6">
<div className="text-sm color-gray-medium font-normal">
Create cards to capture key interactions and track KPIs.
</div>
</div>