58 lines
2.2 KiB
JavaScript
58 lines
2.2 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import { Loader, NoContent, Input, Button } from 'UI';
|
|
import AlertItem from './AlertItem';
|
|
import { fetchList } from 'Duck/alerts';
|
|
import { connect } from 'react-redux';
|
|
import { getRE } from 'App/utils';
|
|
|
|
const AlertsList = (props) => {
|
|
const { loading, list, instance, onEdit } = props;
|
|
const [query, setQuery] = useState('');
|
|
|
|
useEffect(() => {
|
|
props.fetchList();
|
|
}, []);
|
|
|
|
const filterRE = getRE(query, 'i');
|
|
const _filteredList = list.filter(({ name, query: { left } }) => filterRE.test(name) || filterRE.test(left));
|
|
|
|
return (
|
|
<div>
|
|
<div className="mb-3 w-full px-3">
|
|
<Input name="searchQuery" placeholder="Search by Name or Metric" onChange={({ target: { value } }) => setQuery(value)} />
|
|
</div>
|
|
<Loader loading={loading}>
|
|
<NoContent
|
|
title="No alerts have been setup yet."
|
|
subtext={
|
|
<div className="flex flex-col items-center">
|
|
<div>Alerts helps your team stay up to date with the activity on your app.</div>
|
|
<Button variant="primary" className="mt-4" icon="plus" onClick={props.onClickCreate}>
|
|
Create
|
|
</Button>
|
|
</div>
|
|
}
|
|
size="small"
|
|
show={list.size === 0}
|
|
>
|
|
<div className="bg-white">
|
|
{_filteredList.map((a) => (
|
|
<div className="border-b" key={a.key}>
|
|
<AlertItem active={instance.alertId === a.alertId} alert={a} onEdit={() => onEdit(a.toData())} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</NoContent>
|
|
</Loader>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default connect(
|
|
(state) => ({
|
|
list: state.getIn(['alerts', 'list']).sort((a, b) => b.createdAt - a.createdAt),
|
|
instance: state.getIn(['alerts', 'instance']),
|
|
loading: state.getIn(['alerts', 'loading']),
|
|
}),
|
|
{ fetchList }
|
|
)(AlertsList);
|