2020-09-15 15:01:07 +02:00
|
|
|
import * as React from 'react';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
|
|
import ButtonBar from '../ConfigScreen/ButtonBar';
|
2020-11-07 17:59:37 +02:00
|
|
|
import { _ } from '@joplin/lib/locale';
|
2020-09-15 15:01:07 +02:00
|
|
|
|
|
|
|
const { connect } = require('react-redux');
|
2020-11-07 17:59:37 +02:00
|
|
|
const Setting = require('@joplin/lib/models/Setting').default;
|
2020-10-09 19:35:46 +02:00
|
|
|
const bridge = require('electron').remote.require('./bridge').default;
|
2020-11-07 17:59:37 +02:00
|
|
|
const { themeStyle } = require('@joplin/lib/theme');
|
|
|
|
const { ReportService } = require('@joplin/lib/services/report.js');
|
2020-09-15 15:01:07 +02:00
|
|
|
const fs = require('fs-extra');
|
|
|
|
|
|
|
|
interface Props {
|
2020-11-12 21:29:22 +02:00
|
|
|
themeId: string;
|
|
|
|
style: any;
|
|
|
|
dispatch: Function;
|
2020-09-15 15:01:07 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
async function exportDebugReportClick() {
|
|
|
|
const filename = `syncReport-${new Date().getTime()}.csv`;
|
|
|
|
|
|
|
|
const filePath = bridge().showSaveDialog({
|
|
|
|
title: _('Please select where the sync status should be exported to'),
|
|
|
|
defaultPath: filename,
|
|
|
|
});
|
|
|
|
|
|
|
|
if (!filePath) return;
|
|
|
|
|
|
|
|
const service = new ReportService();
|
|
|
|
const csv = await service.basicItemList({ format: 'csv' });
|
|
|
|
await fs.writeFileSync(filePath, csv);
|
|
|
|
}
|
|
|
|
|
2020-11-12 21:13:28 +02:00
|
|
|
function StatusScreen(props: Props) {
|
2020-09-15 15:01:07 +02:00
|
|
|
const [report, setReport] = useState<any[]>([]);
|
|
|
|
|
|
|
|
async function resfreshScreen() {
|
|
|
|
const service = new ReportService();
|
|
|
|
const r = await service.status(Setting.value('sync.target'));
|
|
|
|
setReport(r);
|
|
|
|
}
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
resfreshScreen();
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
const theme = themeStyle(props.themeId);
|
|
|
|
const style = { ...props.style,
|
|
|
|
display: 'flex',
|
|
|
|
flexDirection: 'column',
|
|
|
|
};
|
|
|
|
|
|
|
|
const retryStyle = Object.assign({}, theme.urlStyle, { marginLeft: 5 });
|
|
|
|
const retryAllStyle = Object.assign({}, theme.urlStyle, { marginTop: 5, display: 'inline-block' });
|
|
|
|
|
|
|
|
const containerPadding = theme.configScreenPadding;
|
|
|
|
|
|
|
|
const containerStyle = Object.assign({}, theme.containerStyle, {
|
|
|
|
padding: containerPadding,
|
|
|
|
flex: 1,
|
|
|
|
});
|
|
|
|
|
2020-11-12 21:13:28 +02:00
|
|
|
function renderSectionTitleHtml(key: string, title: string) {
|
2020-09-15 15:01:07 +02:00
|
|
|
return (
|
|
|
|
<h2 key={`section_${key}`} style={theme.h2Style}>
|
|
|
|
{title}
|
|
|
|
</h2>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-11-12 21:13:28 +02:00
|
|
|
function renderSectionRetryAllHtml(key: string, retryAllHandler: any) {
|
2020-09-15 15:01:07 +02:00
|
|
|
return (
|
|
|
|
<a key={`retry_all_${key}`} href="#" onClick={retryAllHandler} style={retryAllStyle}>
|
|
|
|
{_('Retry All')}
|
|
|
|
</a>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-11-12 21:13:28 +02:00
|
|
|
const renderSectionHtml = (key: string, section: any) => {
|
2020-09-15 15:01:07 +02:00
|
|
|
const itemsHtml = [];
|
|
|
|
|
|
|
|
itemsHtml.push(renderSectionTitleHtml(section.title, section.title));
|
|
|
|
|
|
|
|
for (const n in section.body) {
|
|
|
|
if (!section.body.hasOwnProperty(n)) continue;
|
|
|
|
const item = section.body[n];
|
|
|
|
let text = '';
|
|
|
|
|
|
|
|
let retryLink = null;
|
|
|
|
if (typeof item === 'object') {
|
|
|
|
if (item.canRetry) {
|
|
|
|
const onClick = async () => {
|
|
|
|
await item.retryHandler();
|
|
|
|
resfreshScreen();
|
|
|
|
};
|
|
|
|
|
|
|
|
retryLink = (
|
|
|
|
<a href="#" onClick={onClick} style={retryStyle}>
|
|
|
|
{_('Retry')}
|
|
|
|
</a>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
text = item.text;
|
|
|
|
} else {
|
|
|
|
text = item;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!text) text = '\xa0';
|
|
|
|
|
|
|
|
itemsHtml.push(
|
|
|
|
<div style={theme.textStyle} key={`item_${n}`}>
|
|
|
|
<span>{text}</span>
|
|
|
|
{retryLink}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (section.canRetryAll) {
|
|
|
|
itemsHtml.push(renderSectionRetryAllHtml(section.title, section.retryAllHandler));
|
|
|
|
}
|
|
|
|
|
|
|
|
return <div key={key}>{itemsHtml}</div>;
|
|
|
|
};
|
|
|
|
|
2020-11-12 21:13:28 +02:00
|
|
|
function renderBodyHtml(report: any) {
|
2020-09-15 15:01:07 +02:00
|
|
|
const sectionsHtml = [];
|
|
|
|
|
|
|
|
for (let i = 0; i < report.length; i++) {
|
|
|
|
const section = report[i];
|
|
|
|
if (!section.body.length) continue;
|
|
|
|
sectionsHtml.push(renderSectionHtml(`${i}`, section));
|
|
|
|
}
|
|
|
|
|
|
|
|
return <div>{sectionsHtml}</div>;
|
|
|
|
}
|
|
|
|
|
|
|
|
const body = renderBodyHtml(report);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div style={style}>
|
|
|
|
<div style={containerStyle}>
|
|
|
|
<a style={theme.textStyle} onClick={() => exportDebugReportClick()} href="#">
|
|
|
|
Export debug report
|
|
|
|
</a>
|
|
|
|
{body}
|
|
|
|
</div>
|
|
|
|
<ButtonBar
|
|
|
|
onCancelClick={() => props.dispatch({ type: 'NAV_BACK' })}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-11-12 21:13:28 +02:00
|
|
|
const mapStateToProps = (state: any) => {
|
2020-09-15 15:01:07 +02:00
|
|
|
return {
|
|
|
|
themeId: state.settings.theme,
|
|
|
|
settings: state.settings,
|
|
|
|
locale: state.settings.locale,
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
export default connect(mapStateToProps)(StatusScreen);
|
|
|
|
|