ProxyConfig.jsx 10.1 KB
Newer Older
1
/* eslint-disable jsx-a11y/alt-text */
2
import React, { useEffect, useState } from 'react';
3 4 5 6 7 8 9 10 11 12 13 14 15
import {
  Card,
  Form,
  Input,
  Button,
  Switch,
  message,
  Divider,
  Row,
  Col,
  Spin,
  notification,
} from 'antd';
16 17 18 19 20 21 22 23 24
import styles from './ProxyConfig.less';
import {
  GetNginxConfigInfo,
  InsertNginxConfig,
  StartNginx,
  StopNginx,
  ReloadNginx,
  NginxCache,
  NginxLog,
邓超's avatar
邓超 committed
25
} from '@/services/hostmanager/hostmanager';
26
import { ReloadOutlined } from '@ant-design/icons';
27
import configuration from '../../../../assets/images/icons/消息.svg';
28 29

const layout = {
30 31
  labelCol: { span: 2 },
  wrapperCol: { span: 22 },
32 33
};
const tailLayout = {
34
  wrapperCol: { offset: 11, span: 13 },
35 36 37
};

const ProxyConfig = () => {
38 39
  const [loading, setLoading] = useState(false); // 加载
  const [form] = Form.useForm();
40

41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60
  const [flag, setFlag] = useState(1);
  const [currentConfig, setCurrentConfig] = useState({
    NginxPort: '',
    IISIPProt: '',
    EMQIPPort: '',
    IsStartNginx: false,
    IsStartNginxCache: false,
    IsStartNginxLog: false,
  });
  const onFinish = values => {
    setLoading(true);
    InsertNginxConfig({
      port: values.NginxPort,
      iisLocation: values.IISIPProt,
      emqLocation: values.EMQIPPort,
    }).then(res => {
      setLoading(false);
      if (res.code === 0) {
        message.success('保存成功');
      } else {
61
        message.error(res.msg);
62 63 64
      }
    });
  };
65

66
  const onFinishFailed = errorInfo => {};
67

68 69 70 71 72
  const OperateNginx = checked => {
    if (checked) {
      OperateStartNginx();
    } else {
      OperateStopNginx();
73
    }
74
  };
75
  // 开启Nginx
76
  const OperateStartNginx = () => {
77
    setLoading(true);
78
    StartNginx().then(res => {
79
      setLoading(false);
80
      if (res.code === 0) {
81
        message.success('开启成功');
82 83
        setFlag(flag + 1);
      } else {
84
        message.error(res.msg);
85 86 87
      }
    });
  };
88
  // 停止Nginx
89
  const OperateStopNginx = () => {
90
    setLoading(true);
91
    StopNginx().then(res => {
92
      setLoading(false);
93
      if (res.code === 0) {
94
        message.success('关闭成功');
95 96
        setFlag(flag + 1);
      } else {
97
        message.error(res.msg);
98 99 100
      }
    });
  };
101 102 103 104 105 106 107 108 109 110 111 112 113
  // // 开启/关闭缓存
  // const OperateNginxCache = isOpen => {
  //   NginxCache({
  //     isOpen: isOpen ? 1 : 0,
  //   }).then(res => {
  //     if (res.code === 0) {
  //       setFlag(flag + 1);
  //       message.success(isOpen ? '开启成功' : '关闭成功');
  //     } else {
  //       message.error(res.msg);
  //     }
  //   });
  // };
114
  // 开启/关闭日志
115 116 117 118 119 120 121 122 123 124 125 126
  const OperateNginxLog = isOpen => {
    NginxLog({
      isOpen: isOpen ? 1 : 0,
    }).then(res => {
      if (res.code === 0) {
        setFlag(flag + 1);
        message.success(isOpen ? '开启成功' : '关闭成功');
      } else {
        message.error(res.msg);
      }
    });
  };
127

128 129 130 131 132 133 134 135 136
  const OperateReloadNginx = () => {
    ReloadNginx().then(res => {
      if (res.code === 0) {
        message.success('重载成功');
      } else {
        message.error('重载失败');
      }
    });
  };
137

138
  useEffect(() => {
139 140 141 142 143 144 145 146
    // let aa = window.location.origin;
    // let pepole = aa.split('//');
    // console.log(pepole[1]);
    // form.setFieldsValue({
    //   NginxPort: '8002',
    //   IISIPProt: pepole[1],
    //   EMQIPPort: '127.0.0.1:8083',
    // });
147 148 149 150
    GetNginxConfigInfo().then(res => {
      if (res.code === 0) {
        setCurrentConfig({
          NginxPort: res.data.NginxPort,
151
          IISIPProt: res.data.IISIPProt,
152 153 154 155 156 157 158 159 160
          EMQIPPort: res.data.EMQIPPort,
          IsStartNginx: res.data.IsStartNginx,
          IsStartNginxCache: res.data.IsStartNginxCache,
          IsStartNginxLog: res.data.IsStartNginxLog,
        });
        let obj = {};
        Object.keys(currentConfig).forEach(k => {
          obj[k] = res.data[k];
        });
161 162 163 164 165 166 167 168 169 170 171
        console.log(obj);
        // if (obj.NginxPort) {
        //   form.setFieldsValue({ NginxPort: obj.NginxPort });
        // }
        // if (obj.IISIPProt) {
        //   form.setFieldsValue({ IISIPProt: obj.IISIPProt });
        // }
        // if (obj.EMQIPPort) {
        //   form.setFieldsValue({ EMQIPPort: obj.EMQIPPort });
        // }
        // form.setFieldsValue(obj);
172
      } else {
173 174 175 176 177
        notification.error({
          message: '提示',
          duration: 3,
          description: res.msg,
        });
178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203
      }
    });
  }, [flag]);
  //     GetNginxConfigInfoOLD().then(
  //         res => {
  //             if (res.say.statusCode === "0000") {
  //                 setCurrentConfig({
  //                     NginxPort: res.getMe[0].NginxPort,
  //                     IISIPProt: res.getMe[0].IISIPProt,
  //                     EMQIPPort: res.getMe[0].EMQIPPort,
  //                     IsStartNginx: res.getMe[0].IsStartNginx,
  //                     IsStartNginxCache: res.getMe[0].IsStartNginxCache,
  //                     IsStartNginxLog: res.getMe[0].IsStartNginxLog,
  //                 })
  //                 let obj = {};
  //                 Object.keys(currentConfig).forEach(k => {
  //                     obj[k] = res.getMe[0][k];
  //                 });
  //                 console.log(obj)
  //                 form.setFieldsValue(obj);
  //             } else {
  //                 message.errorInfo(res.msg)
  //             }
  //         }
  //     )
  // }, [])
204

205 206 207 208 209 210 211 212 213 214 215 216 217
  return (
    <div className={styles.proxy_container}>
      <Card style={{ width: '100%', height: 'calc(100vh - 130px)' }}>
        <Spin spinning={loading} tip="loading">
          <Form
            form={form}
            name="basic"
            initialValues={{ remember: true }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
          >
            <div style={{ display: 'flex', alignItems: 'center', marginTop: '10px' }}>
              <img src={configuration} style={{ height: '16px' }} />
218
              <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>Nginx配置文件管理</span>
219 220 221
            </div>
            <Divider />
            <Form.Item
222 223 224
              style={{ marginLeft: '12px' }}
              label="Nginx端口"
              labelAlign="right"
225 226 227 228 229
              name="NginxPort"
              rules={[
                {
                  required: true,
                  pattern: new RegExp(/^[1-9]\d*$/, 'g'),
230
                  message: '请输入Nginx端口,例如:8002',
231 232 233
                },
              ]}
            >
234
              <Input style={{ width: '300px' }} placeholder="请输入Nginx端口,示例:8002" />
235 236
            </Form.Item>
            <Form.Item
237 238 239
              style={{ marginLeft: '34px' }}
              label="IIS地址"
              labelAlign="right"
240 241 242 243 244 245 246 247 248 249 250 251
              name="IISIPProt"
              rules={[
                {
                  required: true,
                  pattern: new RegExp(
                    /^(([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])\.){3}([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])(:\d*)$/,
                    'g',
                  ),
                  message: '请输入正确的IP例如:192.168.12.231:8231',
                },
              ]}
            >
252 253 254 255
              <Input
                style={{ width: '300px' }}
                placeholder="请输入IIS地址,示例:192.168.12.231:8231"
              />
256 257 258
            </Form.Item>
            <Form.Item
              style={{ marginLeft: '20px' }}
259 260
              label="EMQ地址"
              labelAlign="right"
261 262 263 264 265 266 267 268
              name="EMQIPPort"
              rules={[
                {
                  required: true,
                  pattern: new RegExp(
                    /^(([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])\.){3}([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])(:\d*)$/,
                    'g',
                  ),
269
                  message: '请输入正确的IP例如:127.0.0.1:8083',
270 271 272
                },
              ]}
            >
273 274 275 276
              <Input
                style={{ width: '300px' }}
                placeholder="请输入EMQ地址,示例:127.0.0.1:8083"
              />
277 278
            </Form.Item>
            <Form.Item>
279
              <Button type="primary" htmlType="submit" style={{ marginLeft: '103px' }}>
280 281 282 283
                保存
              </Button>
            </Form.Item>
          </Form>
284

285 286
          <div style={{ display: 'flex', alignItems: 'center', marginTop: '40px' }}>
            <img src={configuration} style={{ height: '16px' }} />
287
            <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>Nginx服务管理</span>
288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311
          </div>
          <Divider />
          <div className={styles.operate_container}>
            <div style={{ marginLeft: '35px' }}>
              服务运行
              <Switch
                checkedChildren="开启"
                unCheckedChildren="关闭"
                checked={currentConfig.IsStartNginx}
                onChange={OperateNginx}
                style={{ marginLeft: '35px' }}
              />
            </div>
            <div style={{ marginLeft: '35px', marginTop: '20px' }}>
              服务日志
              <Switch
                checkedChildren="开启"
                unCheckedChildren="关闭"
                checked={currentConfig.IsStartNginxLog}
                onChange={OperateNginxLog}
                disabled={currentConfig.IsStartNginx > 0 ? 0 : 1}
                style={{ marginLeft: '35px' }}
              />
            </div>
312
            {/* <div style={{ marginLeft: '35px', marginTop: '20px' }}>
313 314 315 316 317 318 319 320 321
              服务缓存
              <Switch
                checkedChildren="开启"
                unCheckedChildren="关闭"
                checked={currentConfig.IsStartNginxCache}
                onChange={OperateNginxCache}
                disabled={currentConfig.IsStartNginx > 0 ? 0 : 1}
                style={{ marginLeft: '35px' }}
              />
322
            </div> */}
323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340
            <div style={{ marginLeft: '35px', marginTop: '20px' }}>
              服务重载
              <Button
                type="primary"
                onClick={OperateReloadNginx}
                disabled={currentConfig.IsStartNginx > 0 ? 0 : 1}
                style={{ marginLeft: '35px' }}
              >
                重载
              </Button>
            </div>
          </div>
        </Spin>
      </Card>
    </div>
  );
};
export default ProxyConfig;