feat(ui) - custom metrics session list header changes
This commit is contained in:
Shekar Siri
parent
81357fff5b
commit
33b43f96a1
6 changed files with 55 additions and 26 deletions
|
|
@ -57,14 +57,14 @@ function AlertFormModal(props) {
|
|||
title={
|
||||
<div className="flex items-center">
|
||||
<span className="mr-3">{ 'Create Alert' }</span>
|
||||
<IconButton
|
||||
{/* <IconButton
|
||||
circle
|
||||
size="small"
|
||||
icon="plus"
|
||||
outline
|
||||
id="add-button"
|
||||
onClick={ () => toggleForm({}, true) }
|
||||
/>
|
||||
/> */}
|
||||
</div>
|
||||
}
|
||||
isDisplayed={ showModal }
|
||||
|
|
|
|||
|
|
@ -114,6 +114,7 @@ function isInViewport(el) {
|
|||
comparing: state.getIn([ 'dashboard', 'comparing' ]),
|
||||
platform: state.getIn([ 'dashboard', 'platform' ]),
|
||||
dashboardAppearance: state.getIn([ 'user', 'account', 'appearance', 'dashboard' ]),
|
||||
activeWidget: state.getIn(['customMetrics', 'activeWidget']),
|
||||
}), { setPeriod, setPlatform, fetchMetadataOptions })
|
||||
@withPageTitle('Metrics - OpenReplay')
|
||||
@withRouter
|
||||
|
|
@ -168,7 +169,7 @@ export default class Dashboard extends React.PureComponent {
|
|||
}
|
||||
|
||||
render() {
|
||||
const { dashboardAppearance, comparing } = this.props;
|
||||
const { dashboardAppearance, comparing, activeWidget } = this.props;
|
||||
const { pageSection } = this.state;
|
||||
|
||||
const noWidgets = WIDGET_KEYS
|
||||
|
|
@ -189,7 +190,7 @@ export default class Dashboard extends React.PureComponent {
|
|||
<div className={ cn(styles.header, "flex items-center w-full") }>
|
||||
<MetricsFilters />
|
||||
<CustomMetrics />
|
||||
<SessionListModal />
|
||||
{ activeWidget && <SessionListModal activeWidget={activeWidget} /> }
|
||||
</div>
|
||||
<div className="">
|
||||
<NoContent
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { fetchList } from 'Duck/customMetrics';
|
||||
import { list } from 'App/components/BugFinder/CustomFilters/filterModal.css';
|
||||
import CustomMetricWidget from './CustomMetricWidget';
|
||||
import AlertFormModal from 'App/components/Alerts/AlertFormModal';
|
||||
|
||||
|
|
@ -18,6 +17,8 @@ function CustomMetricsWidgets(props: Props) {
|
|||
props.fetchList()
|
||||
}, [])
|
||||
|
||||
console.log('activeMetricId', activeMetricId)
|
||||
|
||||
return (
|
||||
<>
|
||||
{list.map((item: any) => (
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
// import CustomMetricWidgetPreview from 'App/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidgetPreview';
|
||||
import React, { useState } from 'react';
|
||||
import { IconButton, SlideModal } from 'UI';
|
||||
import CustomMetricForm from './CustomMetricForm';
|
||||
|
|
@ -13,7 +12,6 @@ interface Props {
|
|||
}
|
||||
function CustomMetrics(props: Props) {
|
||||
const { metric } = props;
|
||||
// const [showModal, setShowModal] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="self-start">
|
||||
|
|
@ -27,7 +25,6 @@ function CustomMetrics(props: Props) {
|
|||
}
|
||||
isDisplayed={ !!metric }
|
||||
onClose={ () => props.init(null, false)}
|
||||
// size="medium"
|
||||
content={ (!!metric) && (
|
||||
<div style={{ backgroundColor: '#f6f6f6' }}>
|
||||
<CustomMetricForm metric={metric} onClose={() => props.init(null, false)} />
|
||||
|
|
|
|||
|
|
@ -2,4 +2,28 @@
|
|||
padding: 20px;
|
||||
background-color: #f6f6f6;
|
||||
min-height: calc(100vh - 59px);
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
display: flex !important;
|
||||
padding: 4px 6px;
|
||||
border-radius: 3px;
|
||||
color: $gray-darkest;
|
||||
font-weight: 500;
|
||||
&:hover {
|
||||
background-color: $gray-light;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdownTrigger {
|
||||
padding: 4px 8px;
|
||||
border-radius: 3px;
|
||||
&:hover {
|
||||
background-color: $gray-light;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdownIcon {
|
||||
margin-top: 2px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
|
@ -1,9 +1,10 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { SlideModal, NoContent, Dropdown } from 'UI';
|
||||
import { SlideModal, NoContent, Dropdown, Icon } from 'UI';
|
||||
import SessionItem from 'Shared/SessionItem';
|
||||
import stl from './SessionListModal.css';
|
||||
import { connect } from 'react-redux';
|
||||
import { fetchSessionList, setActiveWidget } from 'Duck/customMetrics';
|
||||
import { DateTime } from 'luxon';
|
||||
|
||||
interface Props {
|
||||
loading: boolean;
|
||||
|
|
@ -42,36 +43,41 @@ function SessionListModal(props: Props) {
|
|||
const writeOption = (e, { name, value }) => setActiveSeries(value);
|
||||
|
||||
const filteredSessions = activeSeries === 'all' ? list.reduce((a, b) => a.concat(b.sessions), []) : list.filter(item => item.seriesId === activeSeries).reduce((a, b) => a.concat(b.sessions), []);
|
||||
const startTime = new DateTime(activeWidget.startTimestamp).toFormat('LLL dd, yyyy HH:mm a');
|
||||
const endTime = new DateTime(activeWidget.endTimestamp).toFormat('LLL dd, yyyy HH:mm a');
|
||||
return (
|
||||
<SlideModal
|
||||
title={ activeWidget && (
|
||||
<div className="flex items-center">
|
||||
<div className="mr-auto">{ 'Custom Metric: ' + activeWidget.widget.name } </div>
|
||||
<div className="text-base">
|
||||
<Dropdown
|
||||
className="w-4/6"
|
||||
placeholder="change"
|
||||
selection
|
||||
options={ seriesOptions }
|
||||
name="change"
|
||||
value={ activeSeries }
|
||||
onChange={ writeOption }
|
||||
id="change-dropdown"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
isDisplayed={ !!activeWidget }
|
||||
onClose={ () => props.setActiveWidget(null)}
|
||||
content={ activeWidget && (
|
||||
<div className="">
|
||||
<div className={ stl.wrapper }>
|
||||
<div className="mb-6 flex items-center">
|
||||
<div className="mr-auto">Showing all sessions between <span className="font-medium">{startTime}</span> and <span className="font-medium">{endTime}</span> </div>
|
||||
<div className="flex items-center ml-6">
|
||||
<span className="mr-2 color-gray-medium">Series: </span>
|
||||
<Dropdown
|
||||
className={stl.dropdown}
|
||||
direction="left"
|
||||
options={ seriesOptions }
|
||||
name="change"
|
||||
value={ activeSeries }
|
||||
onChange={ writeOption }
|
||||
id="change-dropdown"
|
||||
// icon={null}
|
||||
icon={ <Icon name="chevron-down" color="gray-dark" size="14" className={stl.dropdownIcon} /> }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<NoContent
|
||||
show={ !loading && (filteredSessions.length === 0 || filteredSessions.size === 0 )}
|
||||
title="No recordings found."
|
||||
>
|
||||
<div className={ stl.wrapper }>
|
||||
{ filteredSessions.map(session => <SessionItem key={ session.sessionId } session={ session } />) }
|
||||
</div>
|
||||
{ filteredSessions.map(session => <SessionItem key={ session.sessionId } session={ session } />) }
|
||||
</NoContent>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -82,5 +88,5 @@ function SessionListModal(props: Props) {
|
|||
export default connect(state => ({
|
||||
loading: state.getIn(['customMetrics', 'sessionListRequest', 'loading']),
|
||||
list: state.getIn(['customMetrics', 'sessionList']),
|
||||
activeWidget: state.getIn(['customMetrics', 'activeWidget']),
|
||||
// activeWidget: state.getIn(['customMetrics', 'activeWidget']),
|
||||
}), { fetchSessionList, setActiveWidget })(SessionListModal);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue