gateWay.jsx 18.7 KB
Newer Older
皮倩雯's avatar
皮倩雯 committed
1
/* eslint-disable indent */
2
/* eslint-disable no-unused-expressions */
皮倩雯's avatar
皮倩雯 committed
3
/* eslint-disable no-else-return */
4
import React, { useEffect, useState } from 'react';
皮倩雯's avatar
皮倩雯 committed
5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
import {
  Card,
  Form,
  Switch,
  message,
  Divider,
  Row,
  Col,
  Spin,
  Tooltip,
  Input,
  Space,
  Button,
  Popconfirm,
  Table,
  notification,
皮倩雯's avatar
皮倩雯 committed
21
  Tag,
皮倩雯's avatar
皮倩雯 committed
22 23 24 25 26 27 28 29
} from 'antd';
import {
  EditTwoTone,
  DeleteOutlined,
  PlusOutlined,
  SyncOutlined,
  SearchOutlined,
} from '@ant-design/icons';
皮倩雯's avatar
皮倩雯 committed
30
import { useHistory } from 'react-router-dom';
31
import styles from './gateWay.less';
皮倩雯's avatar
皮倩雯 committed
32
import axios from 'axios';
皮倩雯's avatar
皮倩雯 committed
33 34 35 36
import {
  GetGateWay,
  UpdateGeteWay,
  GetReRoutes,
37
  GetReRoutesFirst,
皮倩雯's avatar
皮倩雯 committed
38
  DelRoutes,
皮倩雯's avatar
皮倩雯 committed
39 40
  DelRouteByUpUrl,
  GetWayHealthCheck,
皮倩雯's avatar
皮倩雯 committed
41
} from '@/services/hostmanager/hostmanager';
42
import { get, PUBLISH_SERVICE } from '@/services/index';
43
import configuration from '../../../../assets/images/icons/消息.svg';
44

皮倩雯's avatar
皮倩雯 committed
45
import AddModal from './AddModal';
皮倩雯's avatar
皮倩雯 committed
46
import CheckModal from './CheckModal';
皮倩雯's avatar
皮倩雯 committed
47

48
const GateConfig = () => {
49
  const [loading, setLoading] = useState(false); // 加载
皮倩雯's avatar
皮倩雯 committed
50
  const [allLoading, setAllLoading] = useState(false); // 加载
51
  const [form] = Form.useForm();
52

53 54
  const [flag, setFlag] = useState(1);
  const [currentConfig, setCurrentConfig] = useState();
皮倩雯's avatar
皮倩雯 committed
55 56 57 58 59
  const [tableData, setTableData] = useState([]);
  const [showSearchStyle, setShowSearchStyle] = useState(false); // 是否显示模糊查询样式
  const [searchWord, setSearchWord] = useState(''); // 关键字
  const [searchWord1, setSearchWord1] = useState(''); // 关键字
  const [addVisible, setAddVisible] = useState(false);
皮倩雯's avatar
皮倩雯 committed
60
  const [checkVisible, setCheckVisible] = useState(false);
皮倩雯's avatar
皮倩雯 committed
61 62
  const [pickItem, setPickItem] = useState('');
  const [type, setType] = useState('');
皮倩雯's avatar
皮倩雯 committed
63 64
  const history = useHistory();
  const [keepData, setKeepData] = useState([]); // 保存内置关键字
皮倩雯's avatar
皮倩雯 committed
65
  const { Search } = Input;
66

67
  const OperateNginx = checked => {
68
    localStorage.setItem('panda-publish', '');
69
    console.log(checked);
70
    if (checked) {
皮倩雯's avatar
皮倩雯 committed
71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143
      setAllLoading(true);
      // axios({
      //   method: 'get',
      //   url: `${tableData[0].url}/PandaOMS/OMS/health/get`,
      // }).then(res => {
      //   console.log(res);
      //   debugger;
      // });
      GetWayHealthCheck().then(resData => {
        setAllLoading(false);
        if (resData.code === 0) {
          UpdateGeteWay({ isUsed: checked }).then(res => {
            if (res.code === 0) {
              console.log(localStorage.getItem('token'));
              // localStorage.removeItem('token');
              window.globalConfig = {
                ...window.globalConfig,
                access_token: localStorage.getItem('token'),
                hasGateWay: true,
                apiGatewayDomain: `${window.location.origin}${'/PandaCore/GateWay'}`,
              };
              setFlag(flag + 1);
              message.success('设置成功');
              // const key = 'authrizeFail';
              // notification.warning({
              //   key,
              //   title: '提示',
              //   message: '授权失败,即将跳转到登录页',
              //   duration: 2,
              // });
              // setTimeout(() => {
              //   history.push(`/user/login`);
              // }, 2000);
              const key = 'authrizeFail';
              const btn = (
                <Button
                  type="primary"
                  size="small"
                  onClick={() => {
                    notification.close(key);
                    window.location.href = `/${process.env.PUBLIC_PATH || 'civmanage'}/user/login`;
                  }}
                >
                  确定
                </Button>
              );
              if (!/\/user\/login$/.test(window.location.pathname)) {
                notification.warning({
                  key,
                  title: '提示',
                  message: '授权失败,即将跳转到登录页',
                  duration: 2,
                  btn,
                });
                setTimeout(() => {
                  window.location.href = `/${process.env.PUBLIC_PATH || 'civmanage'}/user/login`;
                }, 2000);
              }
            } else {
              message.error('设置失败');
            }
          });
          setTimeout(() => {
            localStorage.setItem('panda-publish', 'getway');
            setLoading(true);
            GetReRoutes({
              UpstreamPathTemplate: '',
              key: '',
            }).then(res => {
              setLoading(false);
              if (res.code === 0) {
                setTableData(res.data);
              }
皮倩雯's avatar
皮倩雯 committed
144
            });
皮倩雯's avatar
皮倩雯 committed
145
          }, 0);
146
        } else {
皮倩雯's avatar
皮倩雯 committed
147 148 149 150 151 152 153 154 155 156 157
          message.warning({
            content: (
              <>
                万能模板下游服务 [<span style={{ color: '#1890ff' }}>{tableData[0].url}</span>]
                检测不通过,请修复后再开启!
              </>
            ),
            style: {
              marginTop: '10vh',
            },
          });
皮倩雯's avatar
皮倩雯 committed
158 159
        }
      });
160
    } else {
161 162
      UpdateGeteWay({ isUsed: checked }).then(res => {
        if (res.code === 0) {
163 164
          // 关闭网关清空token
          localStorage.setItem('token', '');
165
          window.globalConfig = {
166
            ...window.globalConfig,
167
            access_token: '',
168 169 170
            hasGateWay: false,
            apiGatewayDomain: `${window.location.origin}`,
          };
171 172 173 174 175 176
          setFlag(flag + 1);
          message.success('设置成功');
        } else {
          message.error('设置失败');
        }
      });
177
    }
178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195
  };
  // useEffect(() => {
  //   if (currentConfig) {
  //     localStorage.setItem('panda-publish', 'getway');
  //     GetReRoutes({
  //       UpstreamPathTemplate: '',
  //       key: '',
  //     }).then(res => {
  //       setLoading(false);
  //       if (res.code === 0) {
  //         setTableData(res.data);
  //       }
  //     });
  //   } else {
  //     console.log(123333);
  //     localStorage.setItem('panda-publish', '');
  //   }
  // }, [currentConfig]);
196

197 198 199 200 201 202 203
  useEffect(() => {
    GetGateWay().then(res => {
      if (res.code === 0) {
        setCurrentConfig(res.data);
        console.log(currentConfig);
      }
    });
皮倩雯's avatar
皮倩雯 committed
204 205 206 207 208 209 210 211 212 213 214 215 216 217 218
    // .catch(err => {
    //   setLoading(false);
    //   GetReRoutes({
    //     UpstreamPathTemplate: '',
    //     key: '',
    //   }).then(resdata => {
    //     setLoading(false);
    //     if (resdata.code === 0) {
    //       console.log(resdata.data);
    //       setTableData(resdata.data);
    //     } else {
    //       console.log(123);
    //     }
    //   });
    // });
皮倩雯's avatar
皮倩雯 committed
219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235
    // if (res.data) {
    GetReRoutes({
      UpstreamPathTemplate: '',
      key: '',
    }).then(resdata => {
      setLoading(false);
      if (resdata.code === 0) {
        console.log(resdata.data);
        let data = [];
        resdata.data.map(i => {
          data.push(i.key);
        });
        setKeepData(data);
        setTableData(resdata.data);
      }
    });
    // }
236
  }, [flag]);
237

皮倩雯's avatar
皮倩雯 committed
238
  const columns = [
皮倩雯's avatar
皮倩雯 committed
239 240 241 242 243 244 245
    {
      title: '关键字',
      dataIndex: 'key',
      key: 'key',
      align: 'center',
      width: 150,
      render: (text, record) => {
皮倩雯's avatar
皮倩雯 committed
246
        if (record.remark) {
皮倩雯's avatar
皮倩雯 committed
247 248 249
          return (
            <Tooltip placement="top" title={text}>
              <span>
皮倩雯's avatar
皮倩雯 committed
250 251
                {searchStyle1(text)}{' '}
                <Tag color="cyan" style={{ marginRight: '0px' }}>
皮倩雯's avatar
皮倩雯 committed
252
                  {record.remark}
皮倩雯's avatar
皮倩雯 committed
253
                </Tag>
皮倩雯's avatar
皮倩雯 committed
254 255 256 257 258 259 260 261 262 263 264 265 266 267
              </span>
            </Tooltip>
          );
        } else {
          return (
            <span>
              <Tooltip placement="top" title={text}>
                {searchStyle1(text)}
              </Tooltip>
            </span>
          );
        }
      },
    },
皮倩雯's avatar
皮倩雯 committed
268
    {
皮倩雯's avatar
皮倩雯 committed
269
      title: '上游服务地址',
皮倩雯's avatar
皮倩雯 committed
270 271 272
      dataIndex: 'upstreamPathTemplate',
      key: 'upstreamPathTemplate',
      align: 'center',
皮倩雯's avatar
皮倩雯 committed
273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290
      render: (text, record) => {
        let str = window.location.origin + `/PandaCore/GateWay${text}`;
        let list = str.split(':');
        list[0] = record.downstreamScheme;
        let data = record.downstreamScheme;
        list.forEach((i, j) => {
          if (j > 0) {
            data = data + ':' + i;
          }
        });
        return (
          <span>
            <Tooltip placement="top" title={`上游路由模板:${text}`}>
              {data}
            </Tooltip>
          </span>
        );
      },
皮倩雯's avatar
皮倩雯 committed
291
    },
皮倩雯's avatar
皮倩雯 committed
292 293 294 295 296 297 298 299 300 301 302 303 304 305
    // {
    //   title: '上游路由模板',
    //   dataIndex: 'upstreamPathTemplate',
    //   key: 'upstreamPathTemplate',
    //   align: 'center',
    //   ellipsis: true,
    //   render: (text, record) => (
    //     <span>
    //       <Tooltip placement="top" title={text}>
    //         {searchStyle(text)}
    //       </Tooltip>
    //     </span>
    //   ),
    // },
皮倩雯's avatar
皮倩雯 committed
306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328
    {
      title: '上游请求方式',
      dataIndex: 'methods',
      key: 'methods',
      align: 'center',
      ellipsis: true,
      width: 200,
      render: (text, record) => (
        <span>
          <Tooltip placement="top" title={text}>
            {text}
          </Tooltip>
        </span>
      ),
    },
    {
      title: '下游服务地址',
      dataIndex: 'url',
      key: 'url',
      align: 'center',
      ellipsis: true,
      render: (text, record) => (
        <span>
皮倩雯's avatar
皮倩雯 committed
329 330
          <Tooltip placement="top" title={`下游路由模板:${record.downstreamPathTemplate}`}>
            {`${text}${record.downstreamPathTemplate}`}
皮倩雯's avatar
皮倩雯 committed
331 332 333 334
          </Tooltip>
        </span>
      ),
    },
皮倩雯's avatar
皮倩雯 committed
335 336 337 338 339 340 341 342 343 344 345 346 347 348 349
    // {
    //   title: '下游路由模板',
    //   dataIndex: 'downstreamPathTemplate',
    //   key: 'downstreamPathTemplate',
    //   ellipsis: true,
    //   width: 150,
    //   align: 'center',
    //   render: (text, record) => (
    //     <span>
    //       <Tooltip placement="top" title={text}>
    //         {text}
    //       </Tooltip>
    //     </span>
    //   ),
    // },
皮倩雯's avatar
皮倩雯 committed
350 351 352 353 354 355 356 357
    {
      title: '开启身份认证',
      dataIndex: 'isAuthentication',
      key: 'isAuthentication',
      align: 'center',
      width: 120,
      render: (text, record) => {
        if (text == true) {
皮倩雯's avatar
皮倩雯 committed
358
          return <Tag color="#87d068"></Tag>;
皮倩雯's avatar
皮倩雯 committed
359
        } else {
皮倩雯's avatar
皮倩雯 committed
360
          return <Tag color="#2db7f5"></Tag>;
皮倩雯's avatar
皮倩雯 committed
361 362 363
        }
      },
    },
364 365 366 367 368
    {
      title: '优先级',
      dataIndex: 'priority',
      key: 'priority',
      align: 'center',
皮倩雯's avatar
皮倩雯 committed
369
      width: 100,
370 371 372 373 374 375 376 377 378 379 380
      render: (text, record) => {
        console.log(text);
        return (
          <span>
            <Tooltip placement="top" title={text}>
              {text}
            </Tooltip>
          </span>
        );
      },
    },
皮倩雯's avatar
皮倩雯 committed
381 382 383 384 385
    {
      title: '操作',
      key: 'action',
      width: 100,
      align: 'center',
皮倩雯's avatar
皮倩雯 committed
386
      fixed: 'right',
387
      render: record => {
皮倩雯's avatar
皮倩雯 committed
388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409
        // if (record.key != 'CityServer') {
        return (
          <Space size="middle">
            <Tooltip title="编辑">
              <EditTwoTone onClick={() => edit(record)} style={{ fontSize: '16px' }} />
            </Tooltip>
            {!record.remark && (
              <Tooltip title="删除">
                <Popconfirm
                  placement="bottomRight"
                  title={
                    <p>
                      即将删除 <span>{record.loginName}</span>
                      ,是否确认删除?
                    </p>
                  }
                  okText="确认"
                  cancelText="取消"
                  onConfirm={() => dele(record)}
                >
                  <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} />
                </Popconfirm>
410
              </Tooltip>
皮倩雯's avatar
皮倩雯 committed
411 412 413 414 415 416 417 418 419 420 421 422
            )}
          </Space>
        );
        // } else {
        //   return (
        //     <Space size="middle">
        //       <Tooltip title="查看">
        //         <SearchOutlined onClick={() => look(record)} style={{ fontSize: '16px' }} />
        //       </Tooltip>
        //     </Space>
        //   );
        // }
423
      },
皮倩雯's avatar
皮倩雯 committed
424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455
    },
  ];

  // 模糊查询匹配的样式
  const searchStyle = val => {
    let n;
    if (showSearchStyle) {
      n = val.replace(new RegExp(searchWord, 'g'), `<span style='color:red'>${searchWord}</span>`);
    } else {
      n = val;
    }
    return <div dangerouslySetInnerHTML={{ __html: n }} />;
  };

  // 模糊查询匹配的样式
  const searchStyle1 = val => {
    let n;
    if (showSearchStyle) {
      n = val.replace(
        new RegExp(searchWord1, 'g'),
        `<span style='color:red'>${searchWord1}</span>`,
      );
    } else {
      n = val;
    }
    return <div dangerouslySetInnerHTML={{ __html: n }} />;
  };

  const handleReset = () => {
    setSearchWord('');
    setSearchWord1('');
    setShowSearchStyle(false);
456 457 458 459 460 461 462 463 464 465
    setLoading(true);
    GetReRoutes({
      UpstreamPathTemplate: '',
      key: '',
    }).then(res => {
      setLoading(false);
      if (res.code === 0) {
        setTableData(res.data);
      }
    });
皮倩雯's avatar
皮倩雯 committed
466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502
  };

  const handleSearch = e => {
    setSearchWord(e.target.value);
  };

  const handleSearch1 = e => {
    setSearchWord1(e.target.value);
  };

  const submitSearch = () => {
    setLoading(true);
    GetReRoutes({ UpstreamPathTemplate: searchWord, Key: searchWord1 }).then(resnew => {
      setLoading(false);
      if (resnew.code === 0) {
        setTableData(resnew.data);
        setShowSearchStyle(true);
      } else {
        notification.error({
          message: '查询失败',
          description: resnew.msg,
        });
      }
    });
  };

  const add = () => {
    setType('add');
    setAddVisible(true);
  };

  const edit = e => {
    setType('edit');
    setPickItem(e);
    setAddVisible(true);
  };

皮倩雯's avatar
皮倩雯 committed
503 504 505 506 507
  const look = e => {
    setPickItem(e);
    setCheckVisible(true);
  };

皮倩雯's avatar
皮倩雯 committed
508 509 510 511 512 513 514 515 516 517 518
  const dele = e => {
    setPickItem(e);
    let data = [];
    data.push(e.id);
    console.log(data);
    if (e.id == 1) {
      notification.error({
        message: '删除失败',
        description: '默认数据无法删除',
      });
    } else {
皮倩雯's avatar
皮倩雯 committed
519 520
      DelRouteByUpUrl({
        upTemplate: e.upstreamPathTemplate,
皮倩雯's avatar
皮倩雯 committed
521 522
      }).then(res => {
        if (res.code === 0) {
523 524 525 526 527 528 529 530 531
          GetReRoutes({
            UpstreamPathTemplate: '',
            key: '',
          }).then(res => {
            setLoading(false);
            if (res.code === 0) {
              setTableData(res.data);
            }
          });
皮倩雯's avatar
皮倩雯 committed
532 533 534 535 536 537 538 539 540 541 542 543 544 545 546
          notification.success({
            message: '删除成功',
            description: res.msg,
          });
        } else {
          notification.error({
            message: '删除失败',
            description: res.msg,
          });
        }
      });
    }
  };

  const onSubmit = () => {
547 548 549 550 551 552 553 554 555
    GetReRoutes({
      UpstreamPathTemplate: '',
      key: '',
    }).then(res => {
      setLoading(false);
      if (res.code === 0) {
        setTableData(res.data);
      }
    });
皮倩雯's avatar
皮倩雯 committed
556 557
  };

558 559
  return (
    <div className={styles.gateWay_container}>
皮倩雯's avatar
皮倩雯 committed
560 561 562 563 564
      <Spin spinning={allLoading} tip="loading">
        <Card style={{ width: '100%', height: 'calc(100vh - 130px)' }}>
          <div style={{ display: 'flex', alignItems: 'center', marginTop: '10px' }}>
            <img src={configuration} style={{ height: '16px' }} alt="" />
            <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>网关配置</span>
565
          </div>
皮倩雯's avatar
皮倩雯 committed
566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585
          <Divider />
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '20px' }}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <div
                style={{
                  marginLeft: '35px',
                }}
              >
                网关状态
                <Switch
                  checkedChildren="开启"
                  unCheckedChildren="关闭"
                  checked={currentConfig}
                  onChange={OperateNginx}
                  style={{ marginLeft: '35px' }}
                />
              </div>
              {console.log(currentConfig)}
            </div>
            {/* {currentConfig ? (
皮倩雯's avatar
皮倩雯 committed
586
          
皮倩雯's avatar
皮倩雯 committed
587 588
          ) : (
            <></>
皮倩雯's avatar
皮倩雯 committed
589
          )} */}
皮倩雯's avatar
皮倩雯 committed
590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627
            <div className={styles.head1}>
              <span>快速搜索上游路由模板:</span>
              <Input
                value={searchWord}
                placeholder="请输入上游路由模板"
                style={{ width: 200 }}
                onChange={handleSearch}
              />
              <span style={{ marginLeft: '20px' }}>快速搜索关键字:</span>
              <Input
                value={searchWord1}
                placeholder="请输入键值"
                style={{ width: 200 }}
                onChange={handleSearch1}
              />
              <Button
                type="primary"
                icon={<SearchOutlined />}
                onClick={submitSearch}
                style={{ marginLeft: '20px' }}
              >
                搜索
              </Button>
              <Button icon={<SyncOutlined />} onClick={handleReset} style={{ marginLeft: '20px' }}>
                重置
              </Button>
              <Button
                icon={<PlusOutlined className={styles.icon} />}
                onClick={add}
                style={{
                  verticalAlign: 'middle',
                  marginTop: '-3px',
                  marginLeft: '20px',
                }}
              >
                新增
              </Button>
            </div>
皮倩雯's avatar
皮倩雯 committed
628
          </div>
皮倩雯's avatar
皮倩雯 committed
629
          {/* {currentConfig ? (
皮倩雯's avatar
皮倩雯 committed
630
        
皮倩雯's avatar
皮倩雯 committed
631 632
        ) : (
          <></>
皮倩雯's avatar
皮倩雯 committed
633
        )} */}
皮倩雯's avatar
皮倩雯 committed
634 635 636 637 638 639 640 641 642 643 644 645 646 647 648
          <Spin spinning={loading} tip="loading">
            <div className={styles.table}>
              <Table
                size="small"
                bordered
                rowKey={record => record.Id}
                columns={columns}
                dataSource={tableData}
                scroll={{ y: 'calc(100vh - 380px)', x: 'max-content' }}
                onRow={record => ({
                  onDoubleClick: event => {
                    event.stopPropagation();
                    // if (record.key == 'CityServer') {
                    //   look(record);
                    // } else {
649
                    edit(record);
皮倩雯's avatar
皮倩雯 committed
650 651 652 653 654 655 656 657 658 659 660 661 662
                    // }
                  }, // 双击
                })}
                pagination={{
                  showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
                  pageSizeOptions: [10, 20, 50, 100],
                  defaultPageSize: 20,
                  showQuickJumper: true,
                  showSizeChanger: true,
                }}
              />
            </div>
          </Spin>
皮倩雯's avatar
皮倩雯 committed
663

皮倩雯's avatar
皮倩雯 committed
664 665 666 667 668 669 670 671 672 673 674 675 676 677 678
          <AddModal
            visible={addVisible}
            pickItem={pickItem}
            keepData={keepData}
            onCancel={() => setAddVisible(false)}
            type={type}
            callBackSubmit={onSubmit}
          />
          <CheckModal
            visible={checkVisible}
            pickItem={pickItem}
            onCancel={() => setCheckVisible(false)}
          />
        </Card>
      </Spin>
679 680 681 682
    </div>
  );
};
export default GateConfig;