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

fix(ui): wording, keys warnings

Browse source
This commit is contained in:
sylenien 2022-05-16 17:52:46 +02:00 • committed by Delirium
parent bb33ea4714
commit 8a29f8ecf4
6 changed files with 53 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx
View file

@ -1,5 +1,5 @@
import React, { useEffect } from 'react';
import { useObserver } from 'mobx-react-lite';
import { observer } from 'mobx-react-lite';
import { useStore } from 'App/mstore';
import { Button, PageTitle, Loader, NoContent } from 'UI';
import { withSiteId } from 'App/routes';
@ -26,12 +26,12 @@ interface Props {
function DashboardView(props: Props) {
const { siteId, dashboardId } = props;
const { dashboardStore } = useStore();
const { hideModal, showModal } = useModal();
const showAlertModal = useObserver(() => dashboardStore.showAlertModal);
const loading = useObserver(() => dashboardStore.fetchingDashboard);
const dashboards = useObserver(() => dashboardStore.dashboards);
const dashboard: any = useObserver(() => dashboardStore.selectedDashboard);
const period = useObserver(() => dashboardStore.period);
const { showModal } = useModal();
const showAlertModal = dashboardStore.showAlertModal;
const loading = dashboardStore.fetchingDashboard;
const dashboards = dashboardStore.dashboards;
const dashboard: any = dashboardStore.selectedDashboard;
const period = dashboardStore.period;
const [showEditModal, setShowEditModal] = React.useState(false);
useEffect(() => {
@ -43,10 +43,10 @@ function DashboardView(props: Props) {
if (dashboardId) return;
dashboardStore.selectDefaultDashboard();
}, []);
const onAddWidgets = () => {
dashboardStore.initDashboard(dashboard)
showModal(<DashboardModal siteId={siteId} dashboardId={dashboardId} />, {})
showModal(<DashboardModal siteId={siteId} dashboardId={dashboardId} />, { right: true })
}
const onEdit = () => {
@ -67,17 +67,17 @@ function DashboardView(props: Props) {
});
}
}
return useObserver(() => (
return (
<Loader loading={loading}>
<NoContent
show={dashboards.length === 0 || !dashboard || !dashboard.dashboardId}
icon="no-metrics-chart"
title="No dashboards available."
icon="dashboard-icn"
title={<span>Gather and analyze <br /> important metrics in one place.</span>}
size="small"
iconSize={180}
subtext={
<Button primary size="small" onClick={onAddWidgets}>Create Dashboard</Button>
<Button primary size="small" onClick={onAddWidgets}>+ Create Dashboard</Button>
}
>
<div style={{ maxWidth: '1300px', margin: 'auto'}}>
@ -95,7 +95,7 @@ function DashboardView(props: Props) {
<Button primary size="small" onClick={onAddWidgets}>Add Metric</Button>
}
/>
</div>
<div className="flex items-center">
<div className="flex items-center">
@ -132,9 +132,9 @@ function DashboardView(props: Props) {
</div>
</NoContent>
</Loader>
));
);
}
export default withPageTitle('Dashboards - OpenReplay')(
withReport(withRouter(withModal(DashboardView)))
);
withReport(withRouter(withModal(observer(DashboardView))))
);

4
frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx
View file

@ -9,12 +9,14 @@ interface Props {
function DashboardLink({ dashboards}) {
return (
dashboards.map(dashboard => (
<React.Fragment key={dashboard.dashboardId}>
<Link to={`/dashboard/${dashboard.dashboardId}`} className="">
<div className="flex items-center mb-1">
<div className="mr-2 text-4xl no-underline" style={{ textDecoration: 'none'}}>·</div>
<span className="link leading-4">{dashboard.name}</span>
</div>
</Link>
</React.Fragment>
))
);
}
@ -44,4 +46,4 @@ function MetricListItem(props: Props) {
);
}
export default MetricListItem;
export default MetricListItem;

6
frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx
View file

@ -39,7 +39,9 @@ function MetricsList(props: Props) {
</div>
{sliceListPerPage(list, metricStore.page - 1, metricStore.pageSize).map((metric: any) => (
<MetricListItem metric={metric} />
<React.Fragment key={metric.metricId}>
<MetricListItem metric={metric} />
</React.Fragment>
))}
</div>
@ -56,4 +58,4 @@ function MetricsList(props: Props) {
));
}
export default MetricsList;
export default MetricsList;

4
frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx
View file

@ -24,7 +24,7 @@ function MetricsView(props: Props) {
<PageTitle title="Metrics" className="" />
<span className="text-2xl color-gray-medium ml-2">{metricsCount}</span>
</div>
<Link to={'/metrics/create'}><Button primary size="small">Add Metric</Button></Link>
<Link to={'/metrics/create'}><Button primary size="small">Create Metric</Button></Link>
<div className="ml-auto w-1/3">
<MetricsSearch />
</div>
@ -34,4 +34,4 @@ function MetricsView(props: Props) {
));
}
export default withPageTitle('Metrics - OpenReplay')(MetricsView);
export default withPageTitle('Metrics - OpenReplay')(MetricsView);

12
frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx
View file

@ -34,17 +34,17 @@ function WidgetForm(props: Props) {
const write = ({ target: { value, name } }) => metricStore.merge({ [ name ]: value });
const writeOption = (e, { value, name }) => {
const obj = { [ name ]: value };
if (name === 'metricValue') {
obj['metricValue'] = [value];
}
if (name === 'metricOf') {
if (value === FilterKey.ISSUE) {
obj['metricValue'] = ['all'];
}
}
if (name === 'metricType') {
if (value === 'timeseries') {
obj['metricOf'] = timeseriesOptions[0].value;
@ -67,7 +67,7 @@ function WidgetForm(props: Props) {
} else {
history.push(withSiteId(metricDetails(metric.metricId), siteId));
}
}
});
}
@ -85,7 +85,7 @@ function WidgetForm(props: Props) {
const onObserveChanges = () => {
// metricStore.fetchMetricChartData(metric);
}
return useObserver(() => (
<div className="p-4">
<div className="form-group">
@ -222,4 +222,4 @@ function WidgetForm(props: Props) {
));
}
export default WidgetForm;
export default WidgetForm;

38
frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
View file

@ -30,7 +30,7 @@ interface Props {
function WidgetWrapper(props: Props) {
const { dashboardStore } = useStore();
const { isWidget = false, active = false, index = 0, moveListItem = null, isPreview = false, isTemplate = false, dashboardId, siteId } = props;
const widget: any = useObserver(() => props.widget);
const widget: any = useObserver(() => props.widget);
const isPredefined = widget.metricType === 'predefined';
const dashboard = useObserver(() => dashboardStore.selectedDashboard);
const isOverviewWidget = widget.widgetType === 'predefined' && widget.viewType === 'overview';
@ -69,13 +69,13 @@ function WidgetWrapper(props: Props) {
const onChartClick = () => {
if (!isWidget || isPredefined) return;
props.history.push(withSiteId(dashboardMetricDetails(dashboard?.dashboardId, widget.metricId),siteId));
}
const ref: any = useRef(null)
const dragDropRef: any = dragRef(dropRef(ref))
return useObserver(() => (
<div
className={cn("relative rounded bg-white border", 'col-span-' + widget.config.col, { "cursor-pointer" : isTemplate })}
@ -101,20 +101,22 @@ function WidgetWrapper(props: Props) {
<div className='mx-2'/>
</>
)}
<ItemMenu
items={[
{
text: 'Edit', onClick: onChartClick,
disabled: widget.metricType === 'predefined',
disabledMessage: 'Cannot edit system generated metrics'
},
{
text: 'Remove from view',
onClick: onDelete
},
]}
/>
{!isTemplate && (
<ItemMenu
items={[
{
text: widget.metricType === 'predefined' ? 'Cannot edit system generated metrics' : 'Edit',
onClick: onChartClick,
disabled: widget.metricType === 'predefined',
},
{
text: 'Remove from view',
onClick: onDelete
},
]}
/>
)}
</div>
)}
</div>
@ -128,4 +130,4 @@ function WidgetWrapper(props: Props) {
));
}
export default withRouter(WidgetWrapper);
export default withRouter(WidgetWrapper);