56 lines
1.6 KiB
JavaScript
56 lines
1.6 KiB
JavaScript
import React, { useEffect, useState } from 'react'
|
|
import { Loader, NoContent, Input } from 'UI';
|
|
import AlertItem from './AlertItem'
|
|
import { fetchList, init } 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"
|
|
fluid
|
|
placeholder="Search by Name or Metric"
|
|
onChange={({ target: { value } }) => setQuery(value)}
|
|
/>
|
|
</div>
|
|
<Loader loading={ loading }>
|
|
<NoContent
|
|
title="No data available."
|
|
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, init })(AlertsList)
|