42 lines
1.5 KiB
JavaScript
42 lines
1.5 KiB
JavaScript
import React from 'react'
|
|
import stl from './sessionStack.css'
|
|
import cn from 'classnames';
|
|
import { Icon } from 'UI'
|
|
import { names } from 'Types/watchdog'
|
|
import { applySavedFilter, setActiveFlow } from 'Duck/filters';
|
|
import { connect } from 'react-redux';
|
|
import { setActiveTab } from 'Duck/sessions';
|
|
|
|
const IconLabel = ({ icon, label}) => (
|
|
<div className="w-9/12 flex items-center justify-end">
|
|
<Icon name={icon} size="20" color={label > 0 ? 'gray' : 'gray-medium'} />
|
|
<div className={cn('ml-2 text-xl', label > 0 ? 'color-gray' : 'color-gray-medium')}>{label}</div>
|
|
</div>
|
|
)
|
|
|
|
function SessionStack({ flow = {}, applySavedFilter, setActiveTab, setActiveFlow }) {
|
|
const onAllClick = (flow) => {
|
|
setActiveFlow(flow)
|
|
applySavedFilter(flow.filter)
|
|
setActiveTab({ type: 'all', name: 'All'})
|
|
}
|
|
return (
|
|
<div className={stl.wrapper}>
|
|
<div
|
|
className="text-xl mb-6 capitalize color-teal cursor-pointer"
|
|
onClick={() => onAllClick(flow)}>
|
|
{flow.name}
|
|
</div>
|
|
<div className="flex items-center">
|
|
<div className="w-2/12 text-xl"><span className="text-3xl">{flow.count}</span> Sessions</div>
|
|
<div className="w-6/12 flex items-center ml-auto">
|
|
{flow.watchdogs.map(({type, count}) => (
|
|
<IconLabel key={type} icon={names[type].icon} label={count} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default connect(null, { applySavedFilter, setActiveTab, setActiveFlow })(SessionStack)
|