PreferencesUserSettingsTab: Move the event index UI into a separate component.
This commit is contained in:
Damir Jelić
parent
3c46a56391
commit
3b99f7565d
2 changed files with 134 additions and 87 deletions
131
src/components/views/settings/EventIndexPanel.js
Normal file
131
src/components/views/settings/EventIndexPanel.js
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
/*
|
||||
Copyright 2020 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import * as sdk from '../../../index';
|
||||
import { _t } from '../../../languageHandler';
|
||||
import Modal from '../../../Modal';
|
||||
import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
|
||||
import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
|
||||
import Field from "../elements/Field";
|
||||
import {formatBytes} from "../../../utils/FormattingUtils";
|
||||
import EventIndexPeg from "../../../indexing/EventIndexPeg";
|
||||
|
||||
export default class EventIndexPanel extends React.Component {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.state = {
|
||||
eventIndexSize: 0,
|
||||
crawlingRooms: 0,
|
||||
totalCrawlingRooms: 0,
|
||||
eventIndexingEnabled:
|
||||
SettingsStore.getValueAt(SettingLevel.DEVICE, 'enableCrawling'),
|
||||
crawlerSleepTime:
|
||||
SettingsStore.getValueAt(SettingLevel.DEVICE, 'crawlerSleepTime'),
|
||||
};
|
||||
}
|
||||
|
||||
async componentWillMount(): void {
|
||||
let eventIndexSize = 0;
|
||||
let crawlingRooms = 0;
|
||||
let totalCrawlingRooms = 0;
|
||||
|
||||
const eventIndex = EventIndexPeg.get();
|
||||
|
||||
if (eventIndex !== null) {
|
||||
eventIndexSize = await eventIndex.indexSize();
|
||||
const crawledRooms = eventIndex.currentlyCrawledRooms();
|
||||
crawlingRooms = crawledRooms.crawlingRooms.size;
|
||||
totalCrawlingRooms = crawledRooms.totalRooms.size;
|
||||
}
|
||||
|
||||
this.setState({
|
||||
eventIndexSize,
|
||||
crawlingRooms,
|
||||
totalCrawlingRooms,
|
||||
});
|
||||
}
|
||||
|
||||
_onEventIndexingEnabledChange = (checked) => {
|
||||
SettingsStore.setValue("enableCrawling", null, SettingLevel.DEVICE, checked);
|
||||
|
||||
if (checked) EventIndexPeg.start();
|
||||
else EventIndexPeg.stop();
|
||||
|
||||
this.setState({eventIndexingEnabled: checked});
|
||||
}
|
||||
|
||||
_onCrawlerSleepTimeChange = (e) => {
|
||||
this.setState({crawlerSleepTime: e.target.value});
|
||||
SettingsStore.setValue("crawlerSleepTime", null, SettingLevel.DEVICE, e.target.value);
|
||||
}
|
||||
|
||||
render() {
|
||||
let eventIndexingSettings = null;
|
||||
let crawlerState;
|
||||
|
||||
if (!this.state.eventIndexingEnabled) {
|
||||
crawlerState = <div>{_t("Message downloader is stopped.")}</div>;
|
||||
} else if (this.state.crawlingRooms === 0) {
|
||||
crawlerState = <div>{_t("Message downloader is currently idle.")}</div>;
|
||||
} else {
|
||||
crawlerState = (
|
||||
<div>{_t(
|
||||
"Currently downloading mesages in %(crawlingRooms)s of %(totalRooms)s rooms.",
|
||||
{ crawlingRooms: this.state.crawlingRooms,
|
||||
totalRooms: this.state.totalCrawlingRooms,
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (EventIndexPeg.get() !== null) {
|
||||
eventIndexingSettings = (
|
||||
<div className="mx_SettingsTab_section">
|
||||
<span className="mx_SettingsTab_subheading">{_t("Encrypted search")}</span>
|
||||
{
|
||||
_t( "To enable search in encrypted rooms, Riot needs to run " +
|
||||
"a background process to download historical messages " +
|
||||
"from those rooms to your computer.",
|
||||
)
|
||||
}
|
||||
<div className='mx_SettingsTab_subsectionText'>
|
||||
{_t("Message disk usage:")} {formatBytes(this.state.eventIndexSize, 0)}<br />
|
||||
{crawlerState}<br />
|
||||
</div>
|
||||
|
||||
<LabelledToggleSwitch
|
||||
value={this.state.eventIndexingEnabled}
|
||||
onChange={this._onEventIndexingEnabledChange}
|
||||
label={_t('Enable message downloading')} />
|
||||
|
||||
<Field
|
||||
id={"crawlerSleepTimeMs"}
|
||||
label={_t('Message downloading sleep time(ms)')}
|
||||
type='number'
|
||||
value={this.state.crawlerSleepTime}
|
||||
onChange={this._onCrawlerSleepTimeChange} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return eventIndexingSettings;
|
||||
}
|
||||
}
|
||||
|
|
@ -23,7 +23,6 @@ import SettingsStore from "../../../../../settings/SettingsStore";
|
|||
import Field from "../../../elements/Field";
|
||||
import * as sdk from "../../../../..";
|
||||
import PlatformPeg from "../../../../../PlatformPeg";
|
||||
import EventIndexPeg from "../../../../../indexing/EventIndexPeg";
|
||||
import {formatBytes} from "../../../../../utils/FormattingUtils";
|
||||
|
||||
export default class PreferencesUserSettingsTab extends React.Component {
|
||||
|
|
@ -72,13 +71,6 @@ export default class PreferencesUserSettingsTab extends React.Component {
|
|||
alwaysShowMenuBarSupported: false,
|
||||
minimizeToTray: true,
|
||||
minimizeToTraySupported: false,
|
||||
eventIndexSize: 0,
|
||||
crawlingRooms: 0,
|
||||
totalCrawlingRooms: 0,
|
||||
eventIndexingEnabled:
|
||||
SettingsStore.getValueAt(SettingLevel.DEVICE, 'enableCrawling'),
|
||||
crawlerSleepTime:
|
||||
SettingsStore.getValueAt(SettingLevel.DEVICE, 'crawlerSleepTime'),
|
||||
autocompleteDelay:
|
||||
SettingsStore.getValueAt(SettingLevel.DEVICE, 'autocompleteDelay').toString(10),
|
||||
readMarkerInViewThresholdMs:
|
||||
|
|
@ -109,19 +101,6 @@ export default class PreferencesUserSettingsTab extends React.Component {
|
|||
minimizeToTray = await platform.getMinimizeToTrayEnabled();
|
||||
}
|
||||
|
||||
let eventIndexSize = 0;
|
||||
let crawlingRooms = 0;
|
||||
let totalCrawlingRooms = 0;
|
||||
|
||||
const eventIndex = EventIndexPeg.get();
|
||||
|
||||
if (eventIndex !== null) {
|
||||
eventIndexSize = await eventIndex.indexSize();
|
||||
const crawledRooms = eventIndex.currentlyCrawledRooms();
|
||||
crawlingRooms = crawledRooms.crawlingRooms.size;
|
||||
totalCrawlingRooms = crawledRooms.totalRooms.size;
|
||||
}
|
||||
|
||||
this.setState({
|
||||
autoLaunch,
|
||||
autoLaunchSupported,
|
||||
|
|
@ -129,9 +108,6 @@ export default class PreferencesUserSettingsTab extends React.Component {
|
|||
alwaysShowMenuBar,
|
||||
minimizeToTraySupported,
|
||||
minimizeToTray,
|
||||
eventIndexSize,
|
||||
crawlingRooms,
|
||||
totalCrawlingRooms,
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -162,26 +138,14 @@ export default class PreferencesUserSettingsTab extends React.Component {
|
|||
SettingsStore.setValue("readMarkerOutOfViewThresholdMs", null, SettingLevel.DEVICE, e.target.value);
|
||||
};
|
||||
|
||||
_onEventIndexingEnabledChange = (checked) => {
|
||||
SettingsStore.setValue("enableCrawling", null, SettingLevel.DEVICE, checked);
|
||||
|
||||
if (checked) EventIndexPeg.start();
|
||||
else EventIndexPeg.stop();
|
||||
|
||||
this.setState({eventIndexingEnabled: checked});
|
||||
}
|
||||
|
||||
_onCrawlerSleepTimeChange = (e) => {
|
||||
this.setState({crawlerSleepTime: e.target.value});
|
||||
SettingsStore.setValue("crawlerSleepTime", null, SettingLevel.DEVICE, e.target.value);
|
||||
}
|
||||
|
||||
_renderGroup(settingIds) {
|
||||
const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
|
||||
return settingIds.map(i => <SettingsFlag key={i} name={i} level={SettingLevel.ACCOUNT} />);
|
||||
}
|
||||
|
||||
render() {
|
||||
const EventIndexPanel = sdk.getComponent('views.settings.EventIndexPanel');
|
||||
|
||||
let autoLaunchOption = null;
|
||||
if (this.state.autoLaunchSupported) {
|
||||
autoLaunchOption = <LabelledToggleSwitch
|
||||
|
|
@ -206,59 +170,11 @@ export default class PreferencesUserSettingsTab extends React.Component {
|
|||
label={_t('Show tray icon and minimize window to it on close')} />;
|
||||
}
|
||||
|
||||
let eventIndexingSettings = null;
|
||||
let crawlerState;
|
||||
|
||||
if (!this.state.eventIndexingEnabled) {
|
||||
crawlerState = <div>{_t("Message downloader is stopped.")}</div>;
|
||||
} else if (this.state.crawlingRooms === 0) {
|
||||
crawlerState = <div>{_t("Message downloader is currently idle.")}</div>;
|
||||
} else {
|
||||
crawlerState = (
|
||||
<div>{_t(
|
||||
"Currently downloading mesages in %(crawlingRooms)s of %(totalRooms)s rooms.",
|
||||
{ crawlingRooms: this.state.crawlingRooms,
|
||||
totalRooms: this.state.totalCrawlingRooms,
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (EventIndexPeg.get() !== null) {
|
||||
eventIndexingSettings = (
|
||||
<div className="mx_SettingsTab_section">
|
||||
<span className="mx_SettingsTab_subheading">{_t("Encrypted search")}</span>
|
||||
{
|
||||
_t( "To enable search in encrypted rooms, Riot needs to run " +
|
||||
"a background process to download historical messages " +
|
||||
"from those rooms to your computer.",
|
||||
)
|
||||
}
|
||||
<div className='mx_SettingsTab_subsectionText'>
|
||||
{_t("Message disk usage:")} {formatBytes(this.state.eventIndexSize, 0)}<br />
|
||||
{crawlerState}<br />
|
||||
</div>
|
||||
|
||||
<LabelledToggleSwitch
|
||||
value={this.state.eventIndexingEnabled}
|
||||
onChange={this._onEventIndexingEnabledChange}
|
||||
label={_t('Enable message downloading')} />
|
||||
|
||||
<Field
|
||||
id={"crawlerSleepTimeMs"}
|
||||
label={_t('Message downloading sleep time(ms)')}
|
||||
type='number'
|
||||
value={this.state.crawlerSleepTime}
|
||||
onChange={this._onCrawlerSleepTimeChange} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx_SettingsTab mx_PreferencesUserSettingsTab">
|
||||
<div className="mx_SettingsTab_heading">{_t("Preferences")}</div>
|
||||
|
||||
{eventIndexingSettings}
|
||||
<EventIndexPanel />
|
||||
|
||||
<div className="mx_SettingsTab_section">
|
||||
<span className="mx_SettingsTab_subheading">{_t("Composer")}</span>
|
||||
|
|
|
|||
Loading…
Reference in a new issue