ElasticPress / 4.2.2

ElasticPress v4.2.2

elasticpress / assets / js / sync / components / sync-page.js

sync-page.js in ElasticPress 4.2.2, at assets/js/sync/components/sync-page.js

183 lines 5.3 KB

Raw Download Zip

1	/**
2	* WordPress dependencies.
3	*/
4	import { Button, Icon, Panel, PanelBody } from '@wordpress/components';
5	import { WPElement } from '@wordpress/element';
6	import { __ } from '@wordpress/i18n';
7	import { warning } from '@wordpress/icons';
8
9	/**
10	* Internal dependencies.
11	*/
12	import SyncControls from './sync/controls';
13	import SyncLog from './sync/log';
14	import SyncProgress from './sync/progress';
15	import SyncStatus from './sync/status';
16
17	/**
18	* Sync page component.
19	*
20	* @param {object} props Component props.
21	* @param {boolean} props.isCli If sync is a CLI sync.
22	* @param {boolean} props.isComplete If sync is complete.
23	* @param {boolean} props.isDeleting If sync is a delete and sync.
24	* @param {boolean} props.isPaused If sync is paused.
25	* @param {boolean} props.isSyncing If sync is running.
26	* @param {number} props.itemsProcessed Number of items processed.
27	* @param {number} props.itemsTotal Number of items to process.
28	* @param {string} props.lastSyncDateTime Date and time of last sync in ISO-8601.
29	* @param {boolean} props.lastSyncFailed If the last sync had failures.
30	* @param {object[]} props.log Sync message log.
31	* @param {Function} props.onDelete Callback for clicking delete and sync.
32	* @param {Function} props.onPause Callback for clicking pause.
33	* @param {Function} props.onResume Callback for clicking resume.
34	* @param {Function} props.onStop Callback for clicking stop.
35	* @param {Function} props.onSync Callback for clicking sync.
36	* @param {string} props.syncStartDateTime Date and time of current sync in ISO 8601.
37	* @returns {WPElement} Sync page component.
38	*/
39	export default ({
40	isCli,
41	isComplete,
42	isDeleting,
43	isPaused,
44	isSyncing,
45	itemsProcessed,
46	itemsTotal,
47	lastSyncDateTime,
48	lastSyncFailed,
49	log,
50	onDelete,
51	onPause,
52	onResume,
53	onStop,
54	onSync,
55	syncStartDateTime,
56	}) => {
57	return (
58	<>
59	<h1 className="ep-sync-heading">{__('Sync Settings', 'elasticpress')}</h1>
60
61	<Panel className="ep-sync-panel">
62	<PanelBody className="ep-sync-panel__body">
63	<div className="ep-sync-panel__description">
64	<p className="ep-sync-panel__introduction">
65	{__(
66	'If you are missing data in your search results or have recently added custom content types to your site, you should run a sync to reflect these changes.',
67	'elasticpress',
68	)}
69	</p>
70
71	{lastSyncDateTime ? (
72	<>
73	<h3 className="ep-sync-heading">
74	{__('Last Sync', 'elasticpress')}
75	</h3>
76	<SyncStatus
77	dateTime={lastSyncDateTime}
78	isSuccess={!lastSyncFailed}
79	/>
80	</>
81	) : null}
82	</div>
83
84	<div className="ep-sync-panel__controls">
85	<SyncControls
86	disabled={(isSyncing && isDeleting) \|\| (isSyncing && isCli)}
87	isPaused={isPaused}
88	isSyncing={isSyncing && !isDeleting}
89	onPause={onPause}
90	onResume={onResume}
91	onStop={onStop}
92	onSync={onSync}
93	showSync
94	/>
95	</div>
96
97	{!isDeleting && (isSyncing \|\| isComplete) ? (
98	<div className="ep-sync-panel__row">
99	<SyncProgress
100	dateTime={syncStartDateTime}
101	isCli={isCli}
102	isComplete={isComplete}
103	isPaused={isPaused}
104	itemsProcessed={itemsProcessed}
105	itemsTotal={itemsTotal}
106	/>
107	</div>
108	) : null}
109
110	<div className="ep-sync-panel__row">
111	<SyncLog messages={log.filter((m) => !m.isDeleting)} />
112	</div>
113	</PanelBody>
114	</Panel>
115
116	<h2 className="ep-sync-heading">{__('Delete All Data and Sync', 'elasticpress')}</h2>
117
118	<Panel className="ep-sync-panel">
119	<PanelBody className="ep-sync-panel__body">
120	<div className="ep-sync-panel__description">
121	<p className="ep-sync-panel__introduction">
122	{__(
123	'If you are still having issues with your search results, you may need to do a completely fresh sync.',
124	'elasticpress',
125	)}
126	</p>
127
128	<p>
129	<Button
130	className="ep-sync-button ep-sync-button--delete"
131	disabled={isSyncing}
132	isSecondary
133	isDestructive
134	onClick={onDelete}
135	>
136	{__('Delete all Data and Start a Fresh Sync', 'elasticpress')}
137	</Button>
138	</p>
139	</div>
140
141	<div className="ep-sync-panel__controls">
142	<SyncControls
143	disabled={(isSyncing && !isDeleting) \|\| (isSyncing && isCli)}
144	isPaused={isPaused}
145	isSyncing={isSyncing && isDeleting}
146	onPause={onPause}
147	onResume={onResume}
148	onStop={onStop}
149	/>
150	</div>
151
152	{isDeleting && (isSyncing \|\| isComplete) ? (
153	<div className="ep-sync-panel__row">
154	<SyncProgress
155	dateTime={syncStartDateTime}
156	isCli={isCli}
157	isComplete={isComplete}
158	isPaused={isPaused}
159	itemsProcessed={itemsProcessed}
160	itemsTotal={itemsTotal}
161	/>
162	</div>
163	) : null}
164
165	<div className="ep-sync-panel__row">
166	<SyncLog messages={log.filter((m) => m.isDeleting)} />
167	</div>
168
169	<div className="ep-sync-panel__row">
170	<p className="ep-sync-warning">
171	<Icon icon={warning} />
172	{__(
173	'All indexed data on ElasticPress will be deleted without affecting anything on your WordPress website. This may take a few hours depending on the amount of content that needs to be synced and indexed. While this is happening, searches will use the default WordPress results',
174	'elasticpress',
175	)}
176	</p>
177	</div>
178	</PanelBody>
179	</Panel>
180	</>
181	);
182	};
183