mirror of https://github.com/openspug/spug
47 lines
1.6 KiB
JavaScript
47 lines
1.6 KiB
JavaScript
/**
|
|
* Copyright (c) OpenSpug Organization. https://github.com/openspug/spug
|
|
* Copyright (c) <spug.dev@gmail.com>
|
|
* Released under the AGPL-3.0 License.
|
|
*/
|
|
import React, { useState, useEffect } from 'react';
|
|
import { Form } from 'antd';
|
|
import { LoadingOutlined } from '@ant-design/icons';
|
|
import { X_TOKEN } from 'libs';
|
|
import styles from './index.module.less';
|
|
|
|
export default function (props) {
|
|
const [hosts, setHosts] = useState(props.hosts);
|
|
|
|
useEffect(() => {
|
|
let index = 0;
|
|
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
|
const socket = new WebSocket(`${protocol}//${window.location.host}/api/ws/host/${props.token}/?x-token=${X_TOKEN}`);
|
|
socket.onopen = () => socket.send(String(index));
|
|
socket.onmessage = e => {
|
|
if (e.data === 'pong') {
|
|
socket.send(String(index))
|
|
} else {
|
|
index += 1;
|
|
const {key, status, message} = JSON.parse(e.data);
|
|
hosts[key]['status'] = status;
|
|
hosts[key]['message'] = message;
|
|
setHosts({...hosts})
|
|
}
|
|
}
|
|
return () => socket && socket.close()
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [])
|
|
|
|
return (
|
|
<Form labelCol={{span: 8}} wrapperCol={{span: 14}} className={styles.batchSync} style={props.style}>
|
|
{Object.entries(hosts).map(([key, item]) => (
|
|
<Form.Item key={key} label={item.name} extra={item.message}>
|
|
{item.status === 'ok' && <span style={{color: "#52c41a"}}>成功</span>}
|
|
{item.status === 'fail' && <span style={{color: "red"}}>失败</span>}
|
|
{item.status === undefined && <LoadingOutlined/>}
|
|
</Form.Item>
|
|
))}
|
|
</Form>
|
|
)
|
|
}
|