feat(ui) - issues - widget
This commit is contained in:
Shekar Siri
parent
bea34112c9
commit
06855c41f4
6 changed files with 0 additions and 154 deletions
|
|
@ -1,20 +0,0 @@
|
|||
import { SideMenuitem } from "UI";
|
||||
import Divider from 'Components/Errors/ui/Divider';
|
||||
|
||||
function SideMenuDividedItem({ className, noTopDivider = false, noBottomDivider = false, ...props }) {
|
||||
return (
|
||||
<div className={className}>
|
||||
{ !noTopDivider && <Divider /> }
|
||||
<SideMenuitem
|
||||
className="my-3"
|
||||
{ ...props }
|
||||
/>
|
||||
{ !noBottomDivider && <Divider /> }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
SideMenuDividedItem.displayName = "SideMenuDividedItem";
|
||||
|
||||
export default SideMenuDividedItem;
|
||||
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
import cn from 'classnames';
|
||||
import stl from './sideMenuHeader.module.css';
|
||||
|
||||
function SideMenuHeader({ text, className }) {
|
||||
return (
|
||||
<div className={ cn(className, stl.label, "uppercase color-gray") }>
|
||||
{ text }
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
SideMenuHeader.displayName = "SideMenuHeader";
|
||||
export default SideMenuHeader;
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
import { SideMenuitem } from 'UI';
|
||||
import SideMenuHeader from './SideMenuHeader';
|
||||
import { setShowAlerts } from 'Duck/dashboard';
|
||||
import stl from './sideMenuSection.module.css';
|
||||
import { connect } from 'react-redux';
|
||||
import { NavLink } from 'react-router-dom';
|
||||
import { withSiteId } from 'App/routes';
|
||||
import CustomMetrics from 'Shared/CustomMetrics';
|
||||
|
||||
function SideMenuSection({ title, items, onItemClick, setShowAlerts, siteId, activeSection }) {
|
||||
return (
|
||||
<>
|
||||
<SideMenuHeader className="mb-4" text={ title }/>
|
||||
{ items.filter(i => i.section === 'metrics').map(item =>
|
||||
<SideMenuitem
|
||||
key={ item.key }
|
||||
active={ item.active }
|
||||
title={ item.label }
|
||||
iconName={ item.icon }
|
||||
onClick={() => onItemClick(item)}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className={stl.divider} />
|
||||
<div className="my-3">
|
||||
<SideMenuitem
|
||||
id="menu-manage-alerts"
|
||||
title="Manage Alerts"
|
||||
iconName="bell-plus"
|
||||
onClick={() => setShowAlerts(true)}
|
||||
/>
|
||||
</div>
|
||||
<div className={stl.divider} />
|
||||
<div className="my-3">
|
||||
<CustomMetrics />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
SideMenuSection.displayName = "SideMenuSection";
|
||||
|
||||
export default connect(state => ({
|
||||
siteId: state.getIn([ 'site', 'siteId' ])
|
||||
}), { setShowAlerts })(SideMenuSection);
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
.label {
|
||||
letter-spacing: 0.2em;
|
||||
color: gray;
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
.divider {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background-color: $gray-light;
|
||||
}
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { fetchList } from 'Duck/customMetrics';
|
||||
import CustomMetricWidget from './CustomMetricWidget';
|
||||
import AlertFormModal from 'App/components/Alerts/AlertFormModal';
|
||||
import { init as initAlert } from 'Duck/alerts';
|
||||
import LazyLoad from 'react-lazyload';
|
||||
import CustomMetrics from 'App/components/shared/CustomMetrics';
|
||||
|
||||
interface Props {
|
||||
fetchList: Function;
|
||||
list: any;
|
||||
onClickEdit: (e) => void;
|
||||
initAlert: Function;
|
||||
}
|
||||
function CustomMetricsWidgets(props: Props) {
|
||||
const { list } = props;
|
||||
const [activeMetricId, setActiveMetricId] = useState(null);
|
||||
const activeList = list.filter(item => item.active);
|
||||
|
||||
useEffect(() => {
|
||||
props.fetchList()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="gap-4 grid grid-cols-2">
|
||||
{activeList.map((item: any) => (
|
||||
<LazyLoad>
|
||||
<CustomMetricWidget
|
||||
key={item.metricId}
|
||||
metric={item}
|
||||
onClickEdit={props.onClickEdit}
|
||||
onAlertClick={(e) => {
|
||||
setActiveMetricId(item.metricId)
|
||||
props.initAlert({ query: { left: item.series.first().seriesId }})
|
||||
}}
|
||||
/>
|
||||
</LazyLoad>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{list.size === 0 && (
|
||||
<div className="flex items-center py-2">
|
||||
<div className="mr-2 color-gray-medium">Be proactive by monitoring the metrics you care about the most.</div>
|
||||
<CustomMetrics />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{list.size > 0 && activeList && activeList.size === 0 && (
|
||||
<div className="flex items-center py-2">
|
||||
<div className="mr-2 color-gray-medium">It's blank here, add a metric to this section.</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<AlertFormModal
|
||||
showModal={!!activeMetricId}
|
||||
metricId={activeMetricId}
|
||||
onClose={() => setActiveMetricId(null)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default connect(state => ({
|
||||
list: state.getIn(['customMetrics', 'list']),
|
||||
}), { fetchList, initAlert })(CustomMetricsWidgets);
|
||||
Loading…
Add table
Reference in a new issue