diff --git a/packages/admin/src/src/components/Command.jsx b/packages/admin/src/src/components/Command.tsx similarity index 83% rename from packages/admin/src/src/components/Command.jsx rename to packages/admin/src/src/components/Command.tsx index 13ce23cfa..415ab1f31 100644 --- a/packages/admin/src/src/components/Command.jsx +++ b/packages/admin/src/src/components/Command.tsx @@ -1,6 +1,5 @@ import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { withStyles } from '@mui/styles'; +import { type Styles, withStyles } from '@mui/styles'; import { amber, blue, red } from '@mui/material/colors'; @@ -10,9 +9,11 @@ import { import Router from '@iobroker/adapter-react-v5/Components/Router'; +import type { Theme } from '@iobroker/adapter-react-v5/types'; +import type { AdminConnection } from '@iobroker/adapter-react-v5'; import Utils from '../Utils'; -const styles = theme => ({ +const styles: Styles = (theme: Theme) => ({ log: { height: 400, width: 860, @@ -37,8 +38,45 @@ const styles = theme => ({ }, }); -class Command extends Component { - constructor(props) { +interface CommandProps { + noSpacing?: boolean; + host: string; + callback: (exitCode: number) => void; + socket: AdminConnection; + onFinished: (exitCode: number, log: string[]) => void; + ready: boolean; + t: (text: string) => string; + inBackground?: boolean; + commandError?: boolean; + errorFunc?: (exitCode: number, log: string[]) => void; + performed?: () => void; + cmd: string; + onSetCommandRunning: (running: boolean) => void; + showElement?: boolean; + classes: Record; + logsRead?: string[]; +} + +interface CommandState { + log: string[]; + init: boolean; + max: number | null; + value: number | null; + // progressText: string; + moreChecked: boolean; + stopped: boolean; + activeCmdId?: number; + // closeOnReady: boolean; +} + +class Command extends Component { + private readonly logRef: React.RefObject; + + private static pattern = ['error', 'warn', 'info', 'ERROR', 'WARN', 'INFO']; + + private readonly regExp: RegExp; + + constructor(props: CommandProps) { super(props); this.state = { @@ -53,8 +91,7 @@ class Command extends Component { this.logRef = React.createRef(); - const pattern = ['error', 'warn', 'info']; - this.regExp = new RegExp(pattern.join('|'), 'i'); + this.regExp = new RegExp(Command.pattern.join('|'), 'i'); } componentDidMount() { @@ -91,12 +128,13 @@ class Command extends Component { this.setState({ activeCmdId }); + // @ts-expect-error fixed in socket-classes this.props.socket.cmdExec(this.props.host.startsWith('system.host.') ? this.props.host : (`system.host.${this.props.host}`), this.props.cmd, activeCmdId) .catch(error => console.log(error)); } - cmdStdoutHandler(id, text) { + cmdStdoutHandler(id: number, text: string) { if (this.state.activeCmdId && this.state.activeCmdId === id) { const log = this.state.log.slice(); log.push(text); @@ -133,7 +171,7 @@ class Command extends Component { } } - cmdStderrHandler(id, text) { + cmdStderrHandler(id: number, text: string) { if (this.state.activeCmdId && this.state.activeCmdId === id) { const log = this.state.log.slice(); log.push(text); @@ -146,7 +184,7 @@ class Command extends Component { } } - cmdExitHandler(id, exitCode) { + cmdExitHandler(id: number, exitCode: number) { if (this.state.activeCmdId && this.state.activeCmdId === id) { const log = this.state.log.slice(); if (!window.document.hidden && exitCode === 0 && log.length && log[log.length - 1].endsWith('created') && this.props.callback) { @@ -184,7 +222,7 @@ class Command extends Component { } } - colorize(text, maxLength) { + colorize(text: string, maxLength?: number) { if (maxLength !== undefined) { text = text.substring(0, maxLength); } @@ -204,7 +242,7 @@ class Command extends Component { text = text.replace(part, ''); } - const part = text.substr(0, match.length); + const part = text.substring(0, match.length); if (part) { const message = Utils.parseColorMessage(part); result.push({typeof message === 'object' ? message.parts.map((item, i) => {item.text}) : message}); @@ -243,13 +281,13 @@ class Command extends Component { direction="column" spacing={this.props.noSpacing ? 0 : 2} > - {this.props.showElement && + {this.props.showElement === undefined || this.props.showElement === true ? {!this.state.stopped && } - } + : null}
{this.colorize(this.state.log[this.state.log.length - 1])} - {this.props.showElement && + {this.props.showElement === undefined || this.props.showElement === true ? {this.props.t('less')} @@ -280,7 +318,7 @@ class Command extends Component { {this.props.t('more')} - } + : null}
{this.state.moreChecked && @@ -291,25 +329,4 @@ class Command extends Component { } } -Command.defaultProps = { - showElement: true, -}; - -Command.propTypes = { - noSpacing: PropTypes.bool, - host: PropTypes.string.isRequired, - callback: PropTypes.func.isRequired, - socket: PropTypes.object.isRequired, - onFinished: PropTypes.func.isRequired, - ready: PropTypes.bool.isRequired, - t: PropTypes.func.isRequired, - inBackground: PropTypes.bool, - commandError: PropTypes.bool, - errorFunc: PropTypes.func, - performed: PropTypes.func, - cmd: PropTypes.string.isRequired, - onSetCommandRunning: PropTypes.func.isRequired, - showElement: PropTypes.bool, -}; - export default withStyles(styles)(Command); diff --git a/packages/admin/src/src/dialogs/NodeUpdateDialog.tsx b/packages/admin/src/src/dialogs/NodeUpdateDialog.tsx index 355748372..3bc653d30 100644 --- a/packages/admin/src/src/dialogs/NodeUpdateDialog.tsx +++ b/packages/admin/src/src/dialogs/NodeUpdateDialog.tsx @@ -46,43 +46,53 @@ export default class NodeUpdateDialog extends React.Component - {I18n.t('Node.js upgrade')} - - {!this.state.finished ? {I18n.t('Performing this update will restart the js-controller afterwards!')} : null} - {this.state.inProgress ? - - : null} - {this.state.success ? {I18n.t('Node.js update successful, restarting controller now!')} : null} - {this.state.error ? {I18n.t('Node.js update failed: %s', this.state.error)} : null} - - - - - - ; + return ( + + {I18n.t('Node.js upgrade')} + + {!this.state.finished ? ( + + {I18n.t('Performing this update will restart the js-controller afterwards!')} + + ) : null} + {this.state.inProgress ? ( + + + + ) : null} + {this.state.success ? ( + {I18n.t('Node.js update successful, restarting controller now!')} + ) : null} + {this.state.error ? ( + + {I18n.t('Node.js update failed: %s', this.state.error)} + + ) : null} + + + + + + + ); } /** @@ -92,17 +102,22 @@ export default class NodeUpdateDialog extends React.Component = theme => ({ }, }); -const MyMapComponent:React.FC<{addMap: (map: any) => any}> = props => { +const MyMapComponent: React.FC<{ addMap: (map: any) => any }> = props => { const map = useMap(); props.addMap && props.addMap(map); return null; diff --git a/packages/admin/src/src/dialogs/SystemSettingsTabs/RepositoriesDialog.tsx b/packages/admin/src/src/dialogs/SystemSettingsTabs/RepositoriesDialog.tsx index bbbb212af..2cac16aeb 100644 --- a/packages/admin/src/src/dialogs/SystemSettingsTabs/RepositoriesDialog.tsx +++ b/packages/admin/src/src/dialogs/SystemSettingsTabs/RepositoriesDialog.tsx @@ -1,4 +1,3 @@ -// RepositoriesDialog import React, { Component } from 'react'; import { type Styles, withStyles } from '@mui/styles'; import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc'; @@ -36,7 +35,7 @@ import { type Translator, type Theme } from '@iobroker/adapter-react-v5/types'; import type { AdminGuiConfig, ioBrokerObject } from '@/types'; import Utils from '../../Utils'; -const styles:Styles = theme => ({ +const styles: Styles = theme => ({ tabPanel: { width: '100%', height: '100% ', @@ -118,11 +117,11 @@ interface RepositoriesDialogProps { t: Translator; classes: Record; data: ioBrokerObject<{ repositories: Repository }>; - dataAux: ioBrokerObject; + dataAux: ioBrokerObject; multipleRepos: boolean; repoInfo: Repository; saving: boolean; - onChange: (data: ioBrokerObject<{ repositories: Repository }>, dataAux?: ioBrokerObject) => void; + onChange: (data: ioBrokerObject<{ repositories: Repository }>, dataAux?: ioBrokerObject) => void; adminGuiConfig: AdminGuiConfig; } @@ -130,13 +129,13 @@ interface RepositoriesDialogState { error: boolean; confirm: boolean; confirmValue: { - newData: ioBrokerObject; + newData: ioBrokerObject; error: boolean; } | null; } -const SortableList = SortableContainer<{value: any}>(({ value }: {value: any}) => value); -const SortableItem = SortableElement<{value: any}>(({ value }: {value: any}) => value); +const SortableList = SortableContainer<{ value: any }>(({ value }: { value: any }) => value); +const SortableItem = SortableElement<{ value: any }>(({ value }: { value: any }) => value); class RepositoriesDialog extends Component { constructor(props: RepositoriesDialogProps) { @@ -159,9 +158,12 @@ class RepositoriesDialog extends Component = theme => ({ +const styles: Styles = theme => ({ tabPanel: { width: '100%', height: '100% ', @@ -52,7 +50,7 @@ const styles:Styles = theme => ({ interface SSLDialogProps { t: Translator; - data: ioBrokerObject<{letsEncrypt: {email?: string; domains?: string; path?: string}}>; + data: ioBrokerObject<{ letsEncrypt: { email?: string; domains?: string; path?: string } }>; onChange: (data: Record) => void; saving: boolean; classes: Record; diff --git a/packages/admin/src/src/dialogs/SystemSettingsTabs/StatisticsDialog.tsx b/packages/admin/src/src/dialogs/SystemSettingsTabs/StatisticsDialog.tsx index 79751ce69..4a166a2b4 100644 --- a/packages/admin/src/src/dialogs/SystemSettingsTabs/StatisticsDialog.tsx +++ b/packages/admin/src/src/dialogs/SystemSettingsTabs/StatisticsDialog.tsx @@ -1,5 +1,3 @@ -// StatisticsDialog.js - import React, { Component } from 'react'; import { type Styles, withStyles } from '@mui/styles'; @@ -54,10 +52,10 @@ const styles:Styles = theme => ({ interface StatisticsDialogProps { t: Translator; - data: ioBrokerObject; + data: ioBrokerObject; dataAux: ioBrokerObject; themeType: string; - onChange: (data: ioBrokerObject) => void; + onChange: (data: ioBrokerObject) => void; saving: boolean; handle: (type: string) => void; classes: Record;