jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): fix messages for empty dashboad

Browse source
This commit is contained in:
sylenien 2022-05-16 17:50:51 +02:00 • committed by Delirium
parent f66e780596
commit 5c7f6c1738
4 changed files with 48 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
frontend/app/components/Alerts/AlertForm.js
View file

@ -37,7 +37,7 @@ const Section = ({ index, title, description, content }) => (
{ description && <div className="text-sm color-gray-medium">{description}</div>}
</div>
</div>
<div className="ml-10">
{content}
</div>
@ -122,7 +122,7 @@ const AlertForm = props => {
<Dropdown
className="w-4/6"
placeholder="change"
selection
selection
options={ changeOptions }
name="change"
value={ instance.change }
@ -145,7 +145,7 @@ const AlertForm = props => {
onChange={ writeQueryOption }
/>
</div>
<div className="flex items-center my-3">
<label className="w-2/6 flex-shrink-0 font-normal">{'is'}</label>
<div className="w-4/6 flex items-center">
@ -172,7 +172,7 @@ const AlertForm = props => {
)}
{ !unit && (
<Input
className="pl-4"
className="pl-4"
name="right"
value={ instance.query.right }
onChange={ writeQuery }
@ -242,7 +242,7 @@ const AlertForm = props => {
name="webhook"
type="checkbox"
checked={ instance.webhook }
onClick={ onChangeOption }
onClick={ onChangeOption }
label="Webhook"
/>
</div>
@ -266,7 +266,7 @@ const AlertForm = props => {
<div className="flex items-start my-4">
<label className="w-2/6 flex-shrink-0 font-normal pt-2">{'Email'}</label>
<div className="w-4/6">
<DropdownChips
<DropdownChips
textFiled
validate={validateEmail}
selected={instance.emailInput}
@ -277,7 +277,7 @@ const AlertForm = props => {
</div>
)}
{instance.webhook && (
<div className="flex items-start my-4">
<label className="w-2/6 flex-shrink-0 font-normal pt-2">{'Webhook'}</label>
@ -294,8 +294,8 @@ const AlertForm = props => {
}
/>
</div>
<div className="flex items-center justify-between absolute bottom-0 left-0 right-0 p-6 border-t z-10 bg-white">
<div className="flex items-center">
<Button

12
frontend/app/components/Alerts/Alerts.js
View file

@ -1,5 +1,6 @@
import React, { useEffect, useState } from 'react'
import AlertsList from './AlertsList'
import React, { useEffect, useState } from 'react';
import { toast } from 'react-toastify';
import AlertsList from './AlertsList';
import { SlideModal, IconButton } from 'UI';
import { init, edit, save, remove } from 'Duck/alerts';
import { fetchList as fetchWebhooks } from 'Duck/webhook';
@ -24,7 +25,10 @@ const Alerts = props => {
const wasUpdating = instance.exists();
props.save(instance).then(() => {
if (!wasUpdating) {
toast.success('New alert saved')
toggleForm(null, false);
} else {
toast.success('Alert updated')
}
})
}
@ -54,10 +58,10 @@ const Alerts = props => {
title={
<div className="flex items-center">
<span className="mr-3">{ 'Alerts' }</span>
<IconButton
<IconButton
circle
size="small"
icon="plus"
icon="plus"
outline
id="add-button"
onClick={ () => toggleForm({}, true) }

37
frontend/app/components/Dashboard/Dashboard.js
View file

@ -9,7 +9,7 @@ import { WIDGET_KEYS, WIDGET_LIST } from 'Types/dashboard';
import CustomMetricsModal from 'Shared/CustomMetrics/CustomMetricsModal';
import SessionListModal from 'Shared/CustomMetrics/SessionListModal';
import {
import {
MissingResources,
SlowestResources,
DomBuildingTime,
@ -34,7 +34,7 @@ import {
SpeedIndexLocation,
SessionsPerBrowser,
CallsErrors5xx,
CallsErrors4xx
CallsErrors4xx
} from './Widgets';
import SideMenuSection from './SideMenu/SideMenuSection';
@ -66,7 +66,7 @@ const menuList = [
icon: "sliders",
label: getStatusLabel(CUSTOM_METRICS),
active: status === CUSTOM_METRICS,
},
},
{
key: ERRORS_N_CRASHES,
section: 'metrics',
@ -103,7 +103,7 @@ function getStatusLabel(status) {
return "Errors";
case RESOURCES:
return "Resources";
default:
default:
return "";
}
}
@ -136,12 +136,12 @@ export default class Dashboard extends React.PureComponent {
menuList.forEach(item => {
this.list[item.key] = React.createRef();
});
props.fetchMetadataOptions();
props.fetchMetadataOptions();
}
state = {
rangeName: this.props.period.rangeName,
startDate: null,
startDate: null,
endDate: null,
pageSection: 'metrics',
};
@ -151,8 +151,8 @@ export default class Dashboard extends React.PureComponent {
}
componentDidMount() {
const { history, location } = this.props;
// TODO check the hash navigato it
const { history, location } = this.props;
// TODO check the hash navigato it
}
onMenuItemClick = ({section, key}) => {
@ -190,7 +190,7 @@ export default class Dashboard extends React.PureComponent {
const noWidgets = WIDGET_KEYS
.filter(key => dashboardAppearance[ key ])
.length === 0;
return (
<div className="page-margin container-90">
<div className="side-menu">
@ -198,19 +198,20 @@ export default class Dashboard extends React.PureComponent {
title="Metrics"
onItemClick={this.onMenuItemClick}
items={menuList}
activeSection={this.state.pageSection}
/>
</div>
<div className="side-menu-margined">
<div>
<div className={ cn(styles.header, "flex items-center w-full") }>
<div className={ cn(styles.header, "flex items-center w-full") }>
<MetricsFilters />
{ activeWidget && <SessionListModal activeWidget={activeWidget} /> }
</div>
<div className="">
<NoContent
show={ noWidgets }
title="You haven't added any insights widgets!"
title="You haven't added any insights metrics!"
subtext="Add new to keep track of Processed Sessions, Application Activity, Errors and lot more."
animatedIcon="empty-state"
>
@ -226,7 +227,7 @@ export default class Dashboard extends React.PureComponent {
</div>
</WidgetSection>
<WidgetSection
<WidgetSection
title="Custom Metrics"
type={CUSTOM_METRICS}
className="mb-4"
@ -255,7 +256,7 @@ export default class Dashboard extends React.PureComponent {
{ dashboardAppearance.resourcesByParty && <WidgetHolder Component={ErrorsByOrigin} /> }
{ dashboardAppearance.domainsErrors_4xx && <WidgetHolder Component={CallsErrors4xx} /> }
{ dashboardAppearance.domainsErrors_5xx && <WidgetHolder Component={CallsErrors5xx} /> }
{ dashboardAppearance.callsErrors &&
{ dashboardAppearance.callsErrors &&
<div className="col-span-2"><WidgetHolder fullWidth Component={CallWithErrors} /></div>
}
</div>
@ -267,7 +268,7 @@ export default class Dashboard extends React.PureComponent {
{ dashboardAppearance.crashes && <WidgetHolder Component={Crashes} /> }
{ dashboardAppearance.pagesResponseTime && <WidgetHolder Component={ResponseTime} /> }
{ dashboardAppearance.impactedSessionsBySlowPages && <WidgetHolder Component={SessionsImpactedBySlowRequests} /> }
{ dashboardAppearance.pagesResponseTimeDistribution &&
{ dashboardAppearance.pagesResponseTimeDistribution &&
<div className="col-span-2"><WidgetHolder fullWidth Component={ResponseTimeDistribution} /></div>
}
{ dashboardAppearance.pagesDomBuildtime && <WidgetHolder Component={DomBuildingTime} /> }
@ -287,7 +288,7 @@ export default class Dashboard extends React.PureComponent {
{ dashboardAppearance.resourcesLoadingTime && <WidgetHolder Component={ResourceLoadingTime} /> }
{ dashboardAppearance.resourceTypeVsResponseEnd && <WidgetHolder Component={ResourceLoadedVsResponseEnd} /> }
{ dashboardAppearance.missingResources && <WidgetHolder Component={MissingResources} /> }
{ dashboardAppearance.slowestResources &&
{ dashboardAppearance.slowestResources &&
<div className="col-span-2"><WidgetHolder fullWidth Component={SlowestResources} /></div>
}
</div>
@ -301,4 +302,4 @@ export default class Dashboard extends React.PureComponent {
</div>
);
}
}
}

18
frontend/app/components/Dashboard/NewDashboard.tsx
View file

@ -1,16 +1,17 @@
import React, { useEffect } from 'react';
import { useObserver } from "mobx-react-lite";
import { useStore } from 'App/mstore';
import { withRouter } from 'react-router-dom';
import { withRouter, RouteComponentProps } from 'react-router-dom';
import DashboardSideMenu from './components/DashboardSideMenu';
import { Loader } from 'UI';
import DashboardRouter from './components/DashboardRouter';
import cn from 'classnames';
function NewDashboard(props) {
function NewDashboard(props: RouteComponentProps<{}>) {
const { history, match: { params: { siteId, dashboardId, metricId } } } = props;
const { dashboardStore } = useStore();
const loading = useObserver(() => dashboardStore.isLoading);
const dashboardsNumber = useObserver(() => dashboardStore.dashboards.length);
const isMetricDetails = history.location.pathname.includes('/metrics/') || history.location.pathname.includes('/metric/');
useEffect(() => {
@ -20,14 +21,19 @@ function NewDashboard(props) {
}
});
}, [siteId]);
return useObserver(() => (
<Loader loading={loading}>
<div className="page-margin container-90">
<div className={cn("side-menu", { 'hidden' : isMetricDetails })}>
<div className={cn("side-menu", { 'hidden' : isMetricDetails || dashboardsNumber === 0 })}>
<DashboardSideMenu siteId={siteId} />
</div>
<div className={cn({ "side-menu-margined" : !isMetricDetails, "container-70" : isMetricDetails })}>
<div
className={cn({
"side-menu-margined" : !isMetricDetails || dashboardsNumber !== 0,
"container-70" : isMetricDetails || dashboardsNumber === 0
})}
>
<DashboardRouter siteId={siteId} />
</div>
</div>
@ -35,4 +41,4 @@ function NewDashboard(props) {
));
}
export default withRouter(NewDashboard);
export default withRouter(NewDashboard);