37 lines
No EOL
1.2 KiB
TypeScript
37 lines
No EOL
1.2 KiB
TypeScript
import React from 'react';
|
|
import { Button, PageTitle, Icon, Link } from 'UI';
|
|
import { withSiteId, metricCreate } from 'App/routes';
|
|
import MetricsList from '../MetricsList';
|
|
import MetricsSearch from '../MetricsSearch';
|
|
import { useStore } from 'App/mstore';
|
|
import { useObserver } from 'mobx-react-lite';
|
|
|
|
interface Props{
|
|
siteId: number;
|
|
}
|
|
function MetricsView(props: Props) {
|
|
const { siteId } = props;
|
|
const { metricStore } = useStore();
|
|
const metricsCount = useObserver(() => metricStore.metrics.length);
|
|
|
|
React.useEffect(() => {
|
|
metricStore.fetchList();
|
|
}, []);
|
|
return useObserver(() => (
|
|
<div>
|
|
<div className="flex items-center mb-4 justify-between">
|
|
<div className="flex items-baseline mr-3">
|
|
<PageTitle title="Metrics" className="" />
|
|
<span className="text-2xl color-gray-medium ml-2">{metricsCount}</span>
|
|
</div>
|
|
<Link to={'/metrics/create'}><Button primary size="small">Add Metric</Button></Link>
|
|
<div className="ml-auto w-1/3">
|
|
<MetricsSearch />
|
|
</div>
|
|
</div>
|
|
<MetricsList />
|
|
</div>
|
|
));
|
|
}
|
|
|
|
export default MetricsView; |