Initial commit
This commit is contained in:
dushixiang
2
web/.gitignore
vendored
Normal file
2
web/.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
# Project exclude paths
|
||||
/node_modules/
|
||||
339
web/LICENSE
Normal file
339
web/LICENSE
Normal file
@ -0,0 +1,339 @@
|
||||
GNU GENERAL PUBLIC LICENSE
|
||||
Version 2, June 1991
|
||||
|
||||
Copyright (C) 1989, 1991 Free Software Foundation, Inc.,
|
||||
51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
|
||||
Everyone is permitted to copy and distribute verbatim copies
|
||||
of this license document, but changing it is not allowed.
|
||||
|
||||
Preamble
|
||||
|
||||
The licenses for most software are designed to take away your
|
||||
freedom to share and change it. By contrast, the GNU General Public
|
||||
License is intended to guarantee your freedom to share and change free
|
||||
software--to make sure the software is free for all its users. This
|
||||
General Public License applies to most of the Free Software
|
||||
Foundation's software and to any other program whose authors commit to
|
||||
using it. (Some other Free Software Foundation software is covered by
|
||||
the GNU Lesser General Public License instead.) You can apply it to
|
||||
your programs, too.
|
||||
|
||||
When we speak of free software, we are referring to freedom, not
|
||||
price. Our General Public Licenses are designed to make sure that you
|
||||
have the freedom to distribute copies of free software (and charge for
|
||||
this service if you wish), that you receive source code or can get it
|
||||
if you want it, that you can change the software or use pieces of it
|
||||
in new free programs; and that you know you can do these things.
|
||||
|
||||
To protect your rights, we need to make restrictions that forbid
|
||||
anyone to deny you these rights or to ask you to surrender the rights.
|
||||
These restrictions translate to certain responsibilities for you if you
|
||||
distribute copies of the software, or if you modify it.
|
||||
|
||||
For example, if you distribute copies of such a program, whether
|
||||
gratis or for a fee, you must give the recipients all the rights that
|
||||
you have. You must make sure that they, too, receive or can get the
|
||||
source code. And you must show them these terms so they know their
|
||||
rights.
|
||||
|
||||
We protect your rights with two steps: (1) copyright the software, and
|
||||
(2) offer you this license which gives you legal permission to copy,
|
||||
distribute and/or modify the software.
|
||||
|
||||
Also, for each author's protection and ours, we want to make certain
|
||||
that everyone understands that there is no warranty for this free
|
||||
software. If the software is modified by someone else and passed on, we
|
||||
want its recipients to know that what they have is not the original, so
|
||||
that any problems introduced by others will not reflect on the original
|
||||
authors' reputations.
|
||||
|
||||
Finally, any free program is threatened constantly by software
|
||||
patents. We wish to avoid the danger that redistributors of a free
|
||||
program will individually obtain patent licenses, in effect making the
|
||||
program proprietary. To prevent this, we have made it clear that any
|
||||
patent must be licensed for everyone's free use or not licensed at all.
|
||||
|
||||
The precise terms and conditions for copying, distribution and
|
||||
modification follow.
|
||||
|
||||
GNU GENERAL PUBLIC LICENSE
|
||||
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
|
||||
|
||||
0. This License applies to any program or other work which contains
|
||||
a notice placed by the copyright holder saying it may be distributed
|
||||
under the terms of this General Public License. The "Program", below,
|
||||
refers to any such program or work, and a "work based on the Program"
|
||||
means either the Program or any derivative work under copyright law:
|
||||
that is to say, a work containing the Program or a portion of it,
|
||||
either verbatim or with modifications and/or translated into another
|
||||
language. (Hereinafter, translation is included without limitation in
|
||||
the term "modification".) Each licensee is addressed as "you".
|
||||
|
||||
Activities other than copying, distribution and modification are not
|
||||
covered by this License; they are outside its scope. The act of
|
||||
running the Program is not restricted, and the output from the Program
|
||||
is covered only if its contents constitute a work based on the
|
||||
Program (independent of having been made by running the Program).
|
||||
Whether that is true depends on what the Program does.
|
||||
|
||||
1. You may copy and distribute verbatim copies of the Program's
|
||||
source code as you receive it, in any medium, provided that you
|
||||
conspicuously and appropriately publish on each copy an appropriate
|
||||
copyright notice and disclaimer of warranty; keep intact all the
|
||||
notices that refer to this License and to the absence of any warranty;
|
||||
and give any other recipients of the Program a copy of this License
|
||||
along with the Program.
|
||||
|
||||
You may charge a fee for the physical act of transferring a copy, and
|
||||
you may at your option offer warranty protection in exchange for a fee.
|
||||
|
||||
2. You may modify your copy or copies of the Program or any portion
|
||||
of it, thus forming a work based on the Program, and copy and
|
||||
distribute such modifications or work under the terms of Section 1
|
||||
above, provided that you also meet all of these conditions:
|
||||
|
||||
a) You must cause the modified files to carry prominent notices
|
||||
stating that you changed the files and the date of any change.
|
||||
|
||||
b) You must cause any work that you distribute or publish, that in
|
||||
whole or in part contains or is derived from the Program or any
|
||||
part thereof, to be licensed as a whole at no charge to all third
|
||||
parties under the terms of this License.
|
||||
|
||||
c) If the modified program normally reads commands interactively
|
||||
when run, you must cause it, when started running for such
|
||||
interactive use in the most ordinary way, to print or display an
|
||||
announcement including an appropriate copyright notice and a
|
||||
notice that there is no warranty (or else, saying that you provide
|
||||
a warranty) and that users may redistribute the program under
|
||||
these conditions, and telling the user how to view a copy of this
|
||||
License. (Exception: if the Program itself is interactive but
|
||||
does not normally print such an announcement, your work based on
|
||||
the Program is not required to print an announcement.)
|
||||
|
||||
These requirements apply to the modified work as a whole. If
|
||||
identifiable sections of that work are not derived from the Program,
|
||||
and can be reasonably considered independent and separate works in
|
||||
themselves, then this License, and its terms, do not apply to those
|
||||
sections when you distribute them as separate works. But when you
|
||||
distribute the same sections as part of a whole which is a work based
|
||||
on the Program, the distribution of the whole must be on the terms of
|
||||
this License, whose permissions for other licensees extend to the
|
||||
entire whole, and thus to each and every part regardless of who wrote it.
|
||||
|
||||
Thus, it is not the intent of this section to claim rights or contest
|
||||
your rights to work written entirely by you; rather, the intent is to
|
||||
exercise the right to control the distribution of derivative or
|
||||
collective works based on the Program.
|
||||
|
||||
In addition, mere aggregation of another work not based on the Program
|
||||
with the Program (or with a work based on the Program) on a volume of
|
||||
a storage or distribution medium does not bring the other work under
|
||||
the scope of this License.
|
||||
|
||||
3. You may copy and distribute the Program (or a work based on it,
|
||||
under Section 2) in object code or executable form under the terms of
|
||||
Sections 1 and 2 above provided that you also do one of the following:
|
||||
|
||||
a) Accompany it with the complete corresponding machine-readable
|
||||
source code, which must be distributed under the terms of Sections
|
||||
1 and 2 above on a medium customarily used for software interchange; or,
|
||||
|
||||
b) Accompany it with a written offer, valid for at least three
|
||||
years, to give any third party, for a charge no more than your
|
||||
cost of physically performing source distribution, a complete
|
||||
machine-readable copy of the corresponding source code, to be
|
||||
distributed under the terms of Sections 1 and 2 above on a medium
|
||||
customarily used for software interchange; or,
|
||||
|
||||
c) Accompany it with the information you received as to the offer
|
||||
to distribute corresponding source code. (This alternative is
|
||||
allowed only for noncommercial distribution and only if you
|
||||
received the program in object code or executable form with such
|
||||
an offer, in accord with Subsection b above.)
|
||||
|
||||
The source code for a work means the preferred form of the work for
|
||||
making modifications to it. For an executable work, complete source
|
||||
code means all the source code for all modules it contains, plus any
|
||||
associated interface definition files, plus the scripts used to
|
||||
control compilation and installation of the executable. However, as a
|
||||
special exception, the source code distributed need not include
|
||||
anything that is normally distributed (in either source or binary
|
||||
form) with the major components (compiler, kernel, and so on) of the
|
||||
operating system on which the executable runs, unless that component
|
||||
itself accompanies the executable.
|
||||
|
||||
If distribution of executable or object code is made by offering
|
||||
access to copy from a designated place, then offering equivalent
|
||||
access to copy the source code from the same place counts as
|
||||
distribution of the source code, even though third parties are not
|
||||
compelled to copy the source along with the object code.
|
||||
|
||||
4. You may not copy, modify, sublicense, or distribute the Program
|
||||
except as expressly provided under this License. Any attempt
|
||||
otherwise to copy, modify, sublicense or distribute the Program is
|
||||
void, and will automatically terminate your rights under this License.
|
||||
However, parties who have received copies, or rights, from you under
|
||||
this License will not have their licenses terminated so long as such
|
||||
parties remain in full compliance.
|
||||
|
||||
5. You are not required to accept this License, since you have not
|
||||
signed it. However, nothing else grants you permission to modify or
|
||||
distribute the Program or its derivative works. These actions are
|
||||
prohibited by law if you do not accept this License. Therefore, by
|
||||
modifying or distributing the Program (or any work based on the
|
||||
Program), you indicate your acceptance of this License to do so, and
|
||||
all its terms and conditions for copying, distributing or modifying
|
||||
the Program or works based on it.
|
||||
|
||||
6. Each time you redistribute the Program (or any work based on the
|
||||
Program), the recipient automatically receives a license from the
|
||||
original licensor to copy, distribute or modify the Program subject to
|
||||
these terms and conditions. You may not impose any further
|
||||
restrictions on the recipients' exercise of the rights granted herein.
|
||||
You are not responsible for enforcing compliance by third parties to
|
||||
this License.
|
||||
|
||||
7. If, as a consequence of a court judgment or allegation of patent
|
||||
infringement or for any other reason (not limited to patent issues),
|
||||
conditions are imposed on you (whether by court order, agreement or
|
||||
otherwise) that contradict the conditions of this License, they do not
|
||||
excuse you from the conditions of this License. If you cannot
|
||||
distribute so as to satisfy simultaneously your obligations under this
|
||||
License and any other pertinent obligations, then as a consequence you
|
||||
may not distribute the Program at all. For example, if a patent
|
||||
license would not permit royalty-free redistribution of the Program by
|
||||
all those who receive copies directly or indirectly through you, then
|
||||
the only way you could satisfy both it and this License would be to
|
||||
refrain entirely from distribution of the Program.
|
||||
|
||||
If any portion of this section is held invalid or unenforceable under
|
||||
any particular circumstance, the balance of the section is intended to
|
||||
apply and the section as a whole is intended to apply in other
|
||||
circumstances.
|
||||
|
||||
It is not the purpose of this section to induce you to infringe any
|
||||
patents or other property right claims or to contest validity of any
|
||||
such claims; this section has the sole purpose of protecting the
|
||||
integrity of the free software distribution system, which is
|
||||
implemented by public license practices. Many people have made
|
||||
generous contributions to the wide range of software distributed
|
||||
through that system in reliance on consistent application of that
|
||||
system; it is up to the author/donor to decide if he or she is willing
|
||||
to distribute software through any other system and a licensee cannot
|
||||
impose that choice.
|
||||
|
||||
This section is intended to make thoroughly clear what is believed to
|
||||
be a consequence of the rest of this License.
|
||||
|
||||
8. If the distribution and/or use of the Program is restricted in
|
||||
certain countries either by patents or by copyrighted interfaces, the
|
||||
original copyright holder who places the Program under this License
|
||||
may add an explicit geographical distribution limitation excluding
|
||||
those countries, so that distribution is permitted only in or among
|
||||
countries not thus excluded. In such case, this License incorporates
|
||||
the limitation as if written in the body of this License.
|
||||
|
||||
9. The Free Software Foundation may publish revised and/or new versions
|
||||
of the General Public License from time to time. Such new versions will
|
||||
be similar in spirit to the present version, but may differ in detail to
|
||||
address new problems or concerns.
|
||||
|
||||
Each version is given a distinguishing version number. If the Program
|
||||
specifies a version number of this License which applies to it and "any
|
||||
later version", you have the option of following the terms and conditions
|
||||
either of that version or of any later version published by the Free
|
||||
Software Foundation. If the Program does not specify a version number of
|
||||
this License, you may choose any version ever published by the Free Software
|
||||
Foundation.
|
||||
|
||||
10. If you wish to incorporate parts of the Program into other free
|
||||
programs whose distribution conditions are different, write to the author
|
||||
to ask for permission. For software which is copyrighted by the Free
|
||||
Software Foundation, write to the Free Software Foundation; we sometimes
|
||||
make exceptions for this. Our decision will be guided by the two goals
|
||||
of preserving the free status of all derivatives of our free software and
|
||||
of promoting the sharing and reuse of software generally.
|
||||
|
||||
NO WARRANTY
|
||||
|
||||
11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY
|
||||
FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN
|
||||
OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES
|
||||
PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED
|
||||
OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
|
||||
MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS
|
||||
TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE
|
||||
PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING,
|
||||
REPAIR OR CORRECTION.
|
||||
|
||||
12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
|
||||
WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR
|
||||
REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING
|
||||
OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED
|
||||
TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY
|
||||
YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER
|
||||
PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
|
||||
POSSIBILITY OF SUCH DAMAGES.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
How to Apply These Terms to Your New Programs
|
||||
|
||||
If you develop a new program, and you want it to be of the greatest
|
||||
possible use to the public, the best way to achieve this is to make it
|
||||
free software which everyone can redistribute and change under these terms.
|
||||
|
||||
To do so, attach the following notices to the program. It is safest
|
||||
to attach them to the start of each source file to most effectively
|
||||
convey the exclusion of warranty; and each file should have at least
|
||||
the "copyright" line and a pointer to where the full notice is found.
|
||||
|
||||
<one line to give the program's name and a brief idea of what it does.>
|
||||
Copyright (C) <year> <name of author>
|
||||
|
||||
This program is free software; you can redistribute it and/or modify
|
||||
it under the terms of the GNU General Public License as published by
|
||||
the Free Software Foundation; either version 2 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU General Public License along
|
||||
with this program; if not, write to the Free Software Foundation, Inc.,
|
||||
51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
|
||||
|
||||
Also add information on how to contact you by electronic and paper mail.
|
||||
|
||||
If the program is interactive, make it output a short notice like this
|
||||
when it starts in an interactive mode:
|
||||
|
||||
Gnomovision version 69, Copyright (C) year name of author
|
||||
Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
|
||||
This is free software, and you are welcome to redistribute it
|
||||
under certain conditions; type `show c' for details.
|
||||
|
||||
The hypothetical commands `show w' and `show c' should show the appropriate
|
||||
parts of the General Public License. Of course, the commands you use may
|
||||
be called something other than `show w' and `show c'; they could even be
|
||||
mouse-clicks or menu items--whatever suits your program.
|
||||
|
||||
You should also get your employer (if you work as a programmer) or your
|
||||
school, if any, to sign a "copyright disclaimer" for the program, if
|
||||
necessary. Here is a sample; alter the names:
|
||||
|
||||
Yoyodyne, Inc., hereby disclaims all copyright interest in the program
|
||||
`Gnomovision' (which makes passes at compilers) written by James Hacker.
|
||||
|
||||
<signature of Ty Coon>, 1 April 1989
|
||||
Ty Coon, President of Vice
|
||||
|
||||
This General Public License does not permit incorporating your program into
|
||||
proprietary programs. If your program is a subroutine library, you may
|
||||
consider it more useful to permit linking proprietary applications with the
|
||||
library. If this is what you want to do, use the GNU Lesser General
|
||||
Public License instead of this License.
|
||||
4
web/README.md
Normal file
4
web/README.md
Normal file
@ -0,0 +1,4 @@
|
||||
# Next Terminal dashboard
|
||||
just do go dashboard
|
||||
|
||||
## 主要功能
|
||||
17686
web/package-lock.json
generated
Normal file
17686
web/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
43
web/package.json
Normal file
43
web/package.json
Normal file
@ -0,0 +1,43 @@
|
||||
{
|
||||
"name": "next-terminal",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^4.3.0",
|
||||
"antd": "^4.8.4",
|
||||
"axios": "^0.19.2",
|
||||
"guacamole-common-js": "^1.2.0",
|
||||
"http-proxy-middleware": "^1.0.6",
|
||||
"qs": "^6.9.4",
|
||||
"react": "^16.14.0",
|
||||
"react-contexify": "^4.1.1",
|
||||
"react-dom": "^16.14.0",
|
||||
"react-router": "^5.2.0",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"react-scripts": "^4.0.0",
|
||||
"typescript": "^3.9.7",
|
||||
"xterm": "^4.9.0",
|
||||
"xterm-addon-web-links": "^0.4.0"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": "react-app"
|
||||
},
|
||||
"browserslist": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not ie <= 11",
|
||||
"not op_mini all"
|
||||
],
|
||||
"homepage": ".",
|
||||
"devDependencies": {
|
||||
"umi-request": "^1.3.5",
|
||||
"xterm-addon-attach": "^0.6.0",
|
||||
"xterm-addon-fit": "^0.4.0"
|
||||
}
|
||||
}
|
||||
BIN
web/public/favicon.ico
Normal file
BIN
web/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
31
web/public/index.html
Normal file
31
web/public/index.html
Normal file
@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"/>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, shrink-to-fit=no"
|
||||
/>
|
||||
<meta name="theme-color" content="#000000"/>
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<title>Next Terminal</title>
|
||||
</head>
|
||||
<body style="background-color: darkgrey">
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
1
web/public/logo.svg
Normal file
1
web/public/logo.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1593355412276" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1259" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M272 122.24h480v157.056h96V0.448h-96L272 0c-52.8 0-96 0.448-96 0.448v278.848h96v-157.12z m403.648 603.392L896 512 675.648 298.368 608 364.48 760.128 512 608 659.52l67.648 66.112zM416 659.52L263.808 512 416 364.48l-67.712-66.112L128 512l220.288 213.632L416 659.52z m336 242.304H272v-157.12h-96V1024h672V744.704h-96v157.12z" fill="#ffffff" p-id="1260"></path></svg>
|
||||
|
After Width: | Height: | Size: 738 B |
15
web/public/manifest.json
Normal file
15
web/public/manifest.json
Normal file
@ -0,0 +1,15 @@
|
||||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
95
web/src/App.css
Normal file
95
web/src/App.css
Normal file
@ -0,0 +1,95 @@
|
||||
.trigger {
|
||||
font-size: 18px;
|
||||
line-height: 64px;
|
||||
padding: 0 24px;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.trigger:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 32px;
|
||||
margin: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo > h1 {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
line-height: 32px; /*设置line-height与父级元素的height相等*/
|
||||
text-align: center; /*设置文本水平居中*/
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.site-layout .site-layout-background {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.site-page-header-ghost-wrapper {
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
.global-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 48px;
|
||||
padding: 0 16px 0 0;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
|
||||
}
|
||||
|
||||
.page-herder {
|
||||
margin: 16px 16px 0 16px;
|
||||
}
|
||||
|
||||
.page-search {
|
||||
background-color: white;
|
||||
margin: 16px 16px 0 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.page-search label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.page-search .ant-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
margin: 16px;
|
||||
padding: 24px;
|
||||
min-height: 280px;
|
||||
}
|
||||
|
||||
.page-card {
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.user-in-menu {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin: 10px auto;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.user-in-menu>.nickname {
|
||||
margin-top: 20px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
font-weight: bold;
|
||||
padding: 2px 5px;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-color: white;
|
||||
width: fit-content;
|
||||
border-radius: 5%;
|
||||
}
|
||||
|
||||
.monitor .ant-modal-body{
|
||||
padding: 0;
|
||||
}
|
||||
241
web/src/App.js
Normal file
241
web/src/App.js
Normal file
@ -0,0 +1,241 @@
|
||||
import React, {Component} from 'react';
|
||||
import 'antd/dist/antd.css';
|
||||
import './App.css';
|
||||
import {Divider, Layout} from "antd";
|
||||
import {Switch, Route, Link} from "react-router-dom";
|
||||
import {Menu} from 'antd';
|
||||
import Dashboard from "./components/dashboard/Dashboard";
|
||||
import Asset from "./components/asset/Asset";
|
||||
import Access from "./components/access/Access";
|
||||
import User from "./components/user/User";
|
||||
import OnlineSession from "./components/session/OnlineSession";
|
||||
import OfflineSession from "./components/session/OfflineSession";
|
||||
import Login from "./components/Login";
|
||||
import DynamicCommand from "./components/command/DynamicCommand";
|
||||
import Credential from "./components/credential/Credential";
|
||||
import {
|
||||
DashboardOutlined,
|
||||
UserOutlined,
|
||||
IdcardOutlined,
|
||||
CloudServerOutlined,
|
||||
CodeOutlined,
|
||||
BlockOutlined,
|
||||
AuditOutlined,
|
||||
DesktopOutlined,
|
||||
DisconnectOutlined,
|
||||
MenuUnfoldOutlined,
|
||||
MenuFoldOutlined,
|
||||
SolutionOutlined,
|
||||
SettingOutlined, LinkOutlined
|
||||
} from '@ant-design/icons';
|
||||
import Info from "./components/user/Info";
|
||||
import request from "./common/request";
|
||||
import {message} from "antd/es";
|
||||
import Setting from "./components/setting/Setting";
|
||||
import BatchCommand from "./components/command/BatchCommand";
|
||||
|
||||
const {Footer, Sider} = Layout;
|
||||
|
||||
const {SubMenu} = Menu;
|
||||
|
||||
class App extends Component {
|
||||
|
||||
state = {
|
||||
collapsed: false,
|
||||
current: sessionStorage.getItem('current'),
|
||||
openKeys: sessionStorage.getItem('openKeys') ? JSON.parse(sessionStorage.getItem('openKeys')) : [],
|
||||
user: {
|
||||
'nickname': '未定义'
|
||||
}
|
||||
};
|
||||
|
||||
toggle = () => {
|
||||
this.setState({
|
||||
collapsed: !this.state.collapsed,
|
||||
});
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.getInfo().then(r => {
|
||||
});
|
||||
}
|
||||
|
||||
async getInfo() {
|
||||
|
||||
if ('/login' === window.location.pathname) {
|
||||
return;
|
||||
}
|
||||
|
||||
let result = await request.get('/info');
|
||||
if (result.code === 1) {
|
||||
this.setState({
|
||||
user: result.data
|
||||
})
|
||||
} else {
|
||||
message.error(result.message);
|
||||
}
|
||||
}
|
||||
|
||||
updateUser = (user) => {
|
||||
this.setState({
|
||||
user: user
|
||||
})
|
||||
}
|
||||
|
||||
setCurrent = (key) => {
|
||||
this.setState({
|
||||
current: key
|
||||
})
|
||||
sessionStorage.setItem('current', key);
|
||||
}
|
||||
|
||||
subMenuChange = (openKeys) => {
|
||||
|
||||
console.debug("current open keys");
|
||||
console.table(openKeys);
|
||||
|
||||
this.setState({
|
||||
openKeys: openKeys
|
||||
})
|
||||
sessionStorage.setItem('openKeys', JSON.stringify(openKeys));
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
|
||||
return (
|
||||
|
||||
<Switch>
|
||||
<Route path="/access" component={Access}/>
|
||||
<Route path="/login"><Login updateUser={this.updateUser}/></Route>
|
||||
|
||||
<Route path="/">
|
||||
<Layout className="layout" style={{minHeight: '100vh'}}>
|
||||
|
||||
<Sider trigger={null} collapsible collapsed={this.state.collapsed} style={{width: 256}}>
|
||||
<div className="logo">
|
||||
<img src='logo.svg' alt='logo'/>
|
||||
{
|
||||
!this.state.collapsed ?
|
||||
|
||||
<> <h1>Next Terminal</h1></> :
|
||||
null
|
||||
}
|
||||
</div>
|
||||
|
||||
<Divider/>
|
||||
|
||||
<Menu
|
||||
onClick={(e) => this.setCurrent(e.key)}
|
||||
selectedKeys={[this.state.current]}
|
||||
onOpenChange={this.subMenuChange}
|
||||
defaultOpenKeys={this.state.openKeys}
|
||||
theme="dark" mode="inline" defaultSelectedKeys={['dashboard']}
|
||||
inlineCollapsed={this.state.collapsed}
|
||||
style={{lineHeight: '64px'}}>
|
||||
|
||||
<Menu.Item key="dashboard" icon={<DashboardOutlined/>}>
|
||||
<Link to={'/dashboard'}>
|
||||
控制面板
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
|
||||
<SubMenu key='resource' title='资源管理' icon={<CloudServerOutlined/>}>
|
||||
<Menu.Item key="idcard" icon={<IdcardOutlined/>}>
|
||||
<Link to={'/credential'}>
|
||||
授权凭证
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item key="asset" icon={<DesktopOutlined/>}>
|
||||
<Link to={'/asset'}>
|
||||
资产列表
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
</SubMenu>
|
||||
|
||||
<SubMenu key='command-manage' title='指令管理' icon={<CodeOutlined/>}>
|
||||
<Menu.Item key="dynamic-command" icon={<BlockOutlined/>}>
|
||||
<Link to={'/dynamic-command'}>
|
||||
动态指令
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
{/*<Menu.Item key="silent-command" icon={<DeploymentUnitOutlined/>}>
|
||||
<Link to={'/silent-command'}>
|
||||
静默指令
|
||||
</Link>
|
||||
</Menu.Item>*/}
|
||||
</SubMenu>
|
||||
|
||||
<SubMenu key='audit' title='操作审计' icon={<AuditOutlined/>}>
|
||||
<Menu.Item key="online-session" icon={<LinkOutlined />}>
|
||||
<Link to={'/online-session'}>
|
||||
在线会话
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item key="offline-session" icon={<DisconnectOutlined/>}>
|
||||
<Link to={'/offline-session'}>
|
||||
历史会话
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
</SubMenu>
|
||||
|
||||
<Menu.Item key="user" icon={<UserOutlined/>}>
|
||||
<Link to={'/user'}>
|
||||
用户管理
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item key="info" icon={<SolutionOutlined/>}>
|
||||
<Link to={'/info'}>
|
||||
个人中心
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item key="setting" icon={<SettingOutlined/>}>
|
||||
<Link to={'/setting'}>
|
||||
系统设置
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
|
||||
<div>
|
||||
{React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
|
||||
className: 'trigger',
|
||||
onClick: this.toggle,
|
||||
})}
|
||||
</div>
|
||||
</Sider>
|
||||
|
||||
<Layout className="site-layout">
|
||||
{/*<Header className="site-layout-background"
|
||||
style={{padding: 0, height: 48, lineHeight: 48}}>
|
||||
|
||||
</Header>*/}
|
||||
|
||||
<Route path="/dashboard" component={Dashboard}/>
|
||||
<Route path="/user" component={User}/>
|
||||
<Route path="/asset" component={Asset}/>
|
||||
<Route path="/credential" component={Credential}/>
|
||||
<Route path="/dynamic-command" component={DynamicCommand}/>
|
||||
<Route path="/batch-command" component={BatchCommand}/>
|
||||
<Route path="/online-session" component={OnlineSession}/>
|
||||
<Route path="/offline-session" component={OfflineSession}/>
|
||||
<Route path="/info" component={Info}/>
|
||||
<Route path="/setting" component={Setting}/>
|
||||
|
||||
<Footer style={{textAlign: 'center'}}>
|
||||
Next Terminal ©2020 Created by 杜世翔
|
||||
</Footer>
|
||||
</Layout>
|
||||
|
||||
</Layout>
|
||||
</Route>
|
||||
</Switch>
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
||||
9
web/src/App.test.js
Normal file
9
web/src/App.test.js
Normal file
@ -0,0 +1,9 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './App';
|
||||
|
||||
it('renders without crashing', () => {
|
||||
const div = document.createElement('div');
|
||||
ReactDOM.render(<App />, div);
|
||||
ReactDOM.unmountComponentAtNode(div);
|
||||
});
|
||||
20
web/src/common/constants.js
Normal file
20
web/src/common/constants.js
Normal file
@ -0,0 +1,20 @@
|
||||
// prod
|
||||
// export const server = '';
|
||||
// export const wsServer = '';
|
||||
// export const prefix = '';
|
||||
|
||||
// dev
|
||||
export const server = '//127.0.0.1:8088';
|
||||
export const wsServer = 'ws://127.0.0.1:8088';
|
||||
export const prefix = '';
|
||||
|
||||
// export const server = '//172.16.101.32:8080';
|
||||
// export const wsServer = 'ws://172.16.101.32:8080';
|
||||
// export const prefix = '';
|
||||
|
||||
export const PROTOCOL_COLORS = {
|
||||
'rdp': 'red',
|
||||
'ssh': 'blue',
|
||||
'telnet': 'geekblue',
|
||||
'vnc': 'purple'
|
||||
}
|
||||
115
web/src/common/request.js
Normal file
115
web/src/common/request.js
Normal file
@ -0,0 +1,115 @@
|
||||
import axios from 'axios'
|
||||
import {prefix, server} from "./constants";
|
||||
import {message} from 'antd';
|
||||
import {getHeaders} from "../utils/utils";
|
||||
|
||||
// 测试地址
|
||||
// axios.defaults.baseURL = server;
|
||||
// 线上地址
|
||||
axios.defaults.baseURL = server + prefix;
|
||||
|
||||
const handleError = (error) => {
|
||||
if ("Network Error" === error.toString()) {
|
||||
message.error('网络异常');
|
||||
return;
|
||||
}
|
||||
if (error.response !== undefined && error.response.status === 403) {
|
||||
window.location.href = '#/login';
|
||||
return;
|
||||
}
|
||||
if (error.response !== undefined) {
|
||||
message.error(error.response.data.message);
|
||||
}
|
||||
};
|
||||
|
||||
const handleResult = (result) => {
|
||||
if (result['code'] === 403) {
|
||||
window.location.href = '#/login';
|
||||
}
|
||||
}
|
||||
|
||||
const request = {
|
||||
|
||||
get: function (url) {
|
||||
const headers = getHeaders();
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
axios.get(url, {headers: headers})
|
||||
.then((response) => {
|
||||
handleResult(response.data);
|
||||
resolve(response.data);
|
||||
})
|
||||
.catch((error) => {
|
||||
handleError(error);
|
||||
reject(error);
|
||||
});
|
||||
})
|
||||
},
|
||||
|
||||
post: function (url, params) {
|
||||
|
||||
const headers = getHeaders();
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
axios.post(url, params, {headers: headers})
|
||||
.then((response) => {
|
||||
handleResult(response.data);
|
||||
resolve(response.data);
|
||||
})
|
||||
.catch((error) => {
|
||||
handleError(error);
|
||||
reject(error);
|
||||
});
|
||||
})
|
||||
},
|
||||
|
||||
put: function (url, params) {
|
||||
|
||||
const headers = getHeaders();
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
axios.put(url, params, {headers: headers})
|
||||
.then((response) => {
|
||||
handleResult(response.data);
|
||||
resolve(response.data);
|
||||
})
|
||||
.catch((error) => {
|
||||
handleError(error);
|
||||
reject(error);
|
||||
});
|
||||
})
|
||||
},
|
||||
|
||||
delete: function (url) {
|
||||
const headers = getHeaders();
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
axios.delete(url, {headers: headers})
|
||||
.then((response) => {
|
||||
handleResult(response.data);
|
||||
resolve(response.data);
|
||||
})
|
||||
.catch((error) => {
|
||||
handleError(error);
|
||||
reject(error);
|
||||
});
|
||||
})
|
||||
},
|
||||
|
||||
patch: function (url, params) {
|
||||
const headers = getHeaders();
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
axios.patch(url, params, {headers: headers})
|
||||
.then((response) => {
|
||||
handleResult(response.data);
|
||||
resolve(response.data);
|
||||
})
|
||||
.catch((error) => {
|
||||
handleError(error);
|
||||
reject(error);
|
||||
});
|
||||
})
|
||||
},
|
||||
};
|
||||
export default request
|
||||
21
web/src/components/Login.css
Normal file
21
web/src/components/Login.css
Normal file
@ -0,0 +1,21 @@
|
||||
.login-form {
|
||||
max-width: 300px;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.login-form-forgot {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.login-form-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -175px;
|
||||
margin-top: -189px;
|
||||
}
|
||||
|
||||
78
web/src/components/Login.js
Normal file
78
web/src/components/Login.js
Normal file
@ -0,0 +1,78 @@
|
||||
import React, {Component} from 'react';
|
||||
import {Button, Card, Checkbox, Form, Input} from "antd";
|
||||
import './Login.css'
|
||||
import request from "../common/request";
|
||||
import {message} from "antd/es";
|
||||
import {withRouter} from "react-router-dom";
|
||||
import {
|
||||
UserOutlined, LockOutlined
|
||||
} from '@ant-design/icons';
|
||||
|
||||
class LoginForm extends Component {
|
||||
|
||||
state = {
|
||||
inLogin: false
|
||||
};
|
||||
|
||||
handleSubmit = async params => {
|
||||
this.setState({
|
||||
inLogin: true
|
||||
});
|
||||
|
||||
try {
|
||||
let result = await request.post('/login', params);
|
||||
if (result.code !== 1) {
|
||||
throw new Error(result.message);
|
||||
}
|
||||
|
||||
// 跳转登录
|
||||
sessionStorage.removeItem('current');
|
||||
sessionStorage.removeItem('openKeys');
|
||||
localStorage.setItem('X-Auth-Token', result.data);
|
||||
// this.props.history.push();
|
||||
window.location.href = "/"
|
||||
|
||||
let r = await request.get('/info');
|
||||
if (r.code === 1) {
|
||||
this.props.updateUser(r.data);
|
||||
} else {
|
||||
message.error(r.message);
|
||||
}
|
||||
} catch (e) {
|
||||
message.error(e.message);
|
||||
} finally {
|
||||
this.setState({
|
||||
inLogin: false
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
|
||||
return (
|
||||
<Card className='login-card' title="登录">
|
||||
<Form onFinish={this.handleSubmit} className="login-form">
|
||||
<Form.Item name='username' rules={[{required: true, message: '请输入登录账号！'}]}>
|
||||
<Input prefix={<UserOutlined/>} placeholder="登录账号"/>
|
||||
</Form.Item>
|
||||
<Form.Item name='password' rules={[{required: true, message: '请输入登录密码！'}]}>
|
||||
<Input.Password prefix={<LockOutlined/>} placeholder="登录密码"/>
|
||||
</Form.Item>
|
||||
<Form.Item name='remember' valuePropName='checked' initialValue={false}>
|
||||
<Checkbox>记住登录</Checkbox>
|
||||
|
||||
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit" className="login-form-button"
|
||||
loading={this.state.inLogin}>
|
||||
登录
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withRouter(LoginForm);
|
||||
3
web/src/components/access/Access.css
Normal file
3
web/src/components/access/Access.css
Normal file
@ -0,0 +1,3 @@
|
||||
.container div {
|
||||
margin: 0 auto;
|
||||
}
|
||||
889
web/src/components/access/Access.js
Normal file
889
web/src/components/access/Access.js
Normal file
@ -0,0 +1,889 @@
|
||||
import React, {Component} from 'react';
|
||||
import Guacamole from 'guacamole-common-js';
|
||||
import {
|
||||
Affix,
|
||||
Alert,
|
||||
Button,
|
||||
Card,
|
||||
Col,
|
||||
Drawer,
|
||||
Form,
|
||||
Input,
|
||||
message,
|
||||
Modal,
|
||||
Row,
|
||||
Space,
|
||||
Spin,
|
||||
Tooltip,
|
||||
Tree
|
||||
} from 'antd'
|
||||
import qs from "qs";
|
||||
import request from "../../common/request";
|
||||
import {prefix, server, wsServer} from "../../common/constants";
|
||||
import {
|
||||
CloudDownloadOutlined,
|
||||
CloudUploadOutlined,
|
||||
DeleteOutlined,
|
||||
FolderAddOutlined,
|
||||
LoadingOutlined,
|
||||
ReloadOutlined,
|
||||
UploadOutlined
|
||||
} from '@ant-design/icons';
|
||||
import CopyOutlined from "@ant-design/icons/lib/icons/CopyOutlined";
|
||||
import FolderOpenOutlined from "@ant-design/icons/lib/icons/FolderOpenOutlined";
|
||||
import Upload from "antd/es/upload";
|
||||
import {download, getToken} from "../../utils/utils";
|
||||
import './Access.css'
|
||||
|
||||
const {TextArea} = Input;
|
||||
const {DirectoryTree} = Tree;
|
||||
|
||||
const STATE_IDLE = 0;
|
||||
const STATE_CONNECTING = 1;
|
||||
const STATE_WAITING = 2;
|
||||
const STATE_CONNECTED = 3;
|
||||
const STATE_DISCONNECTING = 4;
|
||||
const STATE_DISCONNECTED = 5;
|
||||
|
||||
const antIcon = <LoadingOutlined/>;
|
||||
|
||||
const formItemLayout = {
|
||||
labelCol: {span: 6},
|
||||
wrapperCol: {span: 14},
|
||||
};
|
||||
|
||||
class Access extends Component {
|
||||
|
||||
formRef = React.createRef()
|
||||
|
||||
state = {
|
||||
sessionId: '',
|
||||
client: {},
|
||||
clipboardVisible: false,
|
||||
clipboardText: '',
|
||||
containerOverflow: 'hidden',
|
||||
containerWidth: 0,
|
||||
containerHeight: 0,
|
||||
fileSystemVisible: false,
|
||||
fileSystem: {
|
||||
loading: false,
|
||||
object: null,
|
||||
currentDirectory: '/',
|
||||
files: [],
|
||||
},
|
||||
uploadAction: '',
|
||||
uploadHeaders: {},
|
||||
keyboard: {},
|
||||
protocol: '',
|
||||
treeData: [],
|
||||
selectNode: {},
|
||||
confirmVisible: false,
|
||||
confirmLoading: false,
|
||||
uploadVisible: false,
|
||||
uploadLoading: false,
|
||||
};
|
||||
|
||||
async componentDidMount() {
|
||||
|
||||
let params = new URLSearchParams(this.props.location.search);
|
||||
let assetsId = params.get('assetsId');
|
||||
let protocol = params.get('protocol');
|
||||
let sessionId = await this.createSession(assetsId);
|
||||
|
||||
this.setState({
|
||||
sessionId: sessionId,
|
||||
protocol: protocol
|
||||
});
|
||||
|
||||
this.renderDisplay(sessionId, protocol);
|
||||
|
||||
window.addEventListener('resize', this.onWindowResize);
|
||||
window.addEventListener('onfocus', this.onWindowFocus);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.state.client) {
|
||||
this.state.client.disconnect();
|
||||
}
|
||||
|
||||
window.removeEventListener('resize', this.onWindowResize);
|
||||
document.removeEventListener("onfocus", this.onWindowFocus);
|
||||
}
|
||||
|
||||
sendClipboard(data) {
|
||||
let writer;
|
||||
|
||||
// Create stream with proper mimetype
|
||||
const stream = this.state.client.createClipboardStream(data.type);
|
||||
|
||||
// Send data as a string if it is stored as a string
|
||||
if (typeof data.data === 'string') {
|
||||
writer = new Guacamole.StringWriter(stream);
|
||||
writer.sendText(data.data);
|
||||
writer.sendEnd();
|
||||
} else {
|
||||
|
||||
// Write File/Blob asynchronously
|
||||
writer = new Guacamole.BlobWriter(stream);
|
||||
writer.oncomplete = function clipboardSent() {
|
||||
writer.sendEnd();
|
||||
};
|
||||
|
||||
// Begin sending data
|
||||
writer.sendBlob(data.data);
|
||||
}
|
||||
|
||||
this.setState({
|
||||
clipboardText: data.data
|
||||
})
|
||||
if (this.state.protocol === 'ssh') {
|
||||
message.success('您输入的内容已复制到远程服务器上，使用右键将自动粘贴。');
|
||||
} else {
|
||||
message.success('您输入的内容已复制到远程服务器上');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
onTunnelStateChange = (state) => {
|
||||
console.log('onTunnelStateChange', state);
|
||||
};
|
||||
|
||||
updateSessionStatus = async (sessionId) => {
|
||||
let result = await request.post(`/sessions/${sessionId}/content`);
|
||||
if (result.code !== 1) {
|
||||
message.error(result.message);
|
||||
}
|
||||
}
|
||||
|
||||
onClientStateChange = (state) => {
|
||||
switch (state) {
|
||||
case STATE_IDLE:
|
||||
console.log('初始化');
|
||||
message.destroy();
|
||||
message.loading('正在初始化中...', 0);
|
||||
break;
|
||||
case STATE_CONNECTING:
|
||||
console.log('正在连接...');
|
||||
message.destroy();
|
||||
message.loading('正在努力连接中...', 0);
|
||||
break;
|
||||
case STATE_WAITING:
|
||||
console.log('正在等待...');
|
||||
message.destroy();
|
||||
message.loading('正在等待服务器响应...', 0);
|
||||
break;
|
||||
case STATE_CONNECTED:
|
||||
console.log('连接成功。');
|
||||
this.onWindowResize(null);
|
||||
message.destroy();
|
||||
message.success('连接成功');
|
||||
// 向后台发送请求，更新会话的状态
|
||||
this.updateSessionStatus(this.state.sessionId).then(_ => {
|
||||
})
|
||||
break;
|
||||
case STATE_DISCONNECTING:
|
||||
console.log('连接正在关闭中...');
|
||||
message.destroy();
|
||||
message.loading('正在关闭连接...', 0);
|
||||
break;
|
||||
case STATE_DISCONNECTED:
|
||||
console.log('连接关闭。');
|
||||
message.destroy();
|
||||
message.error('连接关闭');
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
onError = (status) => {
|
||||
|
||||
console.log('通道异常。', status);
|
||||
|
||||
switch (status.code) {
|
||||
case 256:
|
||||
this.showMessage('未支持的访问');
|
||||
break;
|
||||
case 512:
|
||||
this.showMessage('远程服务异常');
|
||||
break;
|
||||
case 513:
|
||||
this.showMessage('服务器忙碌');
|
||||
break;
|
||||
case 514:
|
||||
this.showMessage('服务器连接超时');
|
||||
break;
|
||||
case 515:
|
||||
this.showMessage('远程服务异常');
|
||||
break;
|
||||
case 516:
|
||||
this.showMessage('资源未找到');
|
||||
break;
|
||||
case 517:
|
||||
this.showMessage('资源冲突');
|
||||
break;
|
||||
case 518:
|
||||
this.showMessage('资源已关闭');
|
||||
break;
|
||||
case 519:
|
||||
this.showMessage('远程服务未找到');
|
||||
break;
|
||||
case 520:
|
||||
this.showMessage('远程服务不可用');
|
||||
break;
|
||||
case 521:
|
||||
this.showMessage('会话冲突');
|
||||
break;
|
||||
case 522:
|
||||
this.showMessage('会话连接超时');
|
||||
break;
|
||||
case 523:
|
||||
this.showMessage('会话已关闭');
|
||||
break;
|
||||
case 768:
|
||||
this.showMessage('网络不可达');
|
||||
break;
|
||||
case 769:
|
||||
this.showMessage('服务器密码验证失败');
|
||||
break;
|
||||
case 771:
|
||||
this.showMessage('客户端被禁止');
|
||||
break;
|
||||
case 776:
|
||||
this.showMessage('客户端连接超时');
|
||||
break;
|
||||
case 781:
|
||||
this.showMessage('客户端异常');
|
||||
break;
|
||||
case 783:
|
||||
this.showMessage('错误的请求类型');
|
||||
break;
|
||||
case 797:
|
||||
this.showMessage('客户端连接数量过多');
|
||||
break;
|
||||
default:
|
||||
this.showMessage('未知错误。');
|
||||
}
|
||||
};
|
||||
|
||||
showMessage(message) {
|
||||
Modal.error({
|
||||
title: '提示',
|
||||
content: message,
|
||||
});
|
||||
}
|
||||
|
||||
clientClipboardReceived = (stream, mimetype) => {
|
||||
let reader;
|
||||
|
||||
// If the received data is text, read it as a simple string
|
||||
if (/^text\//.exec(mimetype)) {
|
||||
|
||||
reader = new Guacamole.StringReader(stream);
|
||||
|
||||
// Assemble received data into a single string
|
||||
let data = '';
|
||||
reader.ontext = function textReceived(text) {
|
||||
data += text;
|
||||
};
|
||||
|
||||
// Set clipboard contents once stream is finished
|
||||
reader.onend = async () => {
|
||||
|
||||
message.success('您选择的内容已复制到您的粘贴板中，在右侧的输入框中可同时查看到。');
|
||||
this.setState({
|
||||
clipboardText: data
|
||||
});
|
||||
|
||||
if (navigator.clipboard) {
|
||||
await navigator.clipboard.writeText(data);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
// Otherwise read the clipboard data as a Blob
|
||||
else {
|
||||
reader = new Guacamole.BlobReader(stream, mimetype);
|
||||
reader.onend = () => {
|
||||
this.setState({
|
||||
clipboardText: reader.getBlob()
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
uploadChange = (info) => {
|
||||
if (info.file.status !== 'uploading') {
|
||||
|
||||
}
|
||||
if (info.file.status === 'done') {
|
||||
message.success(`${info.file.name} 文件上传成功。`, 3);
|
||||
} else if (info.file.status === 'error') {
|
||||
message.error(`${info.file.name} 文件上传失败。`, 10);
|
||||
}
|
||||
}
|
||||
|
||||
onKeyDown = (keysym) => {
|
||||
if (true === this.state.clipboardVisible || true === this.state.confirmVisible) {
|
||||
return true;
|
||||
}
|
||||
|
||||
this.state.client.sendKeyEvent(1, keysym);
|
||||
if (keysym === 65288) {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
onKeyUp = (keysym) => {
|
||||
this.state.client.sendKeyEvent(0, keysym);
|
||||
};
|
||||
|
||||
showFileSystem = () => {
|
||||
this.setState({
|
||||
fileSystemVisible: true,
|
||||
});
|
||||
|
||||
this.loadDirData('/');
|
||||
};
|
||||
|
||||
hideFileSystem = () => {
|
||||
this.setState({
|
||||
fileSystemVisible: false,
|
||||
});
|
||||
};
|
||||
|
||||
showClipboard = () => {
|
||||
this.setState({
|
||||
clipboardVisible: true
|
||||
}, () => {
|
||||
let element = document.getElementById('clipboard');
|
||||
if (element) {
|
||||
element.value = this.state.clipboardText;
|
||||
}
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
hideClipboard = () => {
|
||||
this.setState({
|
||||
clipboardVisible: false
|
||||
});
|
||||
};
|
||||
|
||||
updateClipboardFormTextarea = () => {
|
||||
let clipboardText = document.getElementById('clipboard').value;
|
||||
|
||||
this.setState({
|
||||
clipboardText: clipboardText
|
||||
});
|
||||
|
||||
this.sendClipboard({
|
||||
'data': clipboardText,
|
||||
'type': 'text/plain'
|
||||
});
|
||||
};
|
||||
|
||||
async createSession(assetsId) {
|
||||
let result = await request.post(`/sessions?assetId=${assetsId}`);
|
||||
if (result.code !== 1) {
|
||||
message.error(result.message, 10);
|
||||
return;
|
||||
}
|
||||
return result.data['id'];
|
||||
}
|
||||
|
||||
async renderDisplay(sessionId, protocol) {
|
||||
|
||||
let tunnel = new Guacamole.WebSocketTunnel(wsServer + prefix + '/tunnel');
|
||||
|
||||
tunnel.onstatechange = this.onTunnelStateChange;
|
||||
// Get new client instance
|
||||
let client = new Guacamole.Client(tunnel);
|
||||
|
||||
// 设置虚拟机剪贴板内容
|
||||
client.sendClipboard = this.sendClipboard;
|
||||
|
||||
// 处理从虚拟机收到的剪贴板内容
|
||||
client.onclipboard = this.clientClipboardReceived;
|
||||
|
||||
// 处理客户端的状态变化事件
|
||||
client.onstatechange = this.onClientStateChange;
|
||||
|
||||
client.onerror = this.onError;
|
||||
|
||||
// Get display div from document
|
||||
const display = document.getElementById("display");
|
||||
|
||||
// Add client to display div
|
||||
const element = client.getDisplay().getElement();
|
||||
display.appendChild(element);
|
||||
|
||||
let width = window.innerWidth;
|
||||
let height = window.innerHeight;
|
||||
|
||||
let token = getToken();
|
||||
|
||||
let params = {
|
||||
'sessionId': sessionId,
|
||||
'width': width,
|
||||
'height': height,
|
||||
'X-Auth-Token': token
|
||||
};
|
||||
|
||||
let paramStr = qs.stringify(params);
|
||||
|
||||
// Connect
|
||||
client.connect(paramStr);
|
||||
|
||||
// Disconnect on close
|
||||
window.onunload = function () {
|
||||
client.disconnect();
|
||||
};
|
||||
|
||||
// Mouse
|
||||
const mouse = new Guacamole.Mouse(element);
|
||||
|
||||
mouse.onmousedown = mouse.onmouseup = function (mouseState) {
|
||||
client.sendMouseState(mouseState);
|
||||
};
|
||||
|
||||
mouse.onmousemove = function (mouseState) {
|
||||
if (protocol === 'ssh' || protocol === 'telnet') {
|
||||
mouseState.x = mouseState.x * 2;
|
||||
mouseState.y = mouseState.y * 2;
|
||||
client.sendMouseState(mouseState);
|
||||
} else {
|
||||
client.sendMouseState(mouseState);
|
||||
}
|
||||
};
|
||||
|
||||
// Keyboard
|
||||
const keyboard = new Guacamole.Keyboard(document);
|
||||
|
||||
keyboard.onkeydown = this.onKeyDown;
|
||||
keyboard.onkeyup = this.onKeyUp;
|
||||
this.setState({
|
||||
client: client,
|
||||
containerWidth: width,
|
||||
containerHeight: height,
|
||||
keyboard: keyboard
|
||||
});
|
||||
}
|
||||
|
||||
onWindowResize = (e) => {
|
||||
|
||||
if (this.state.client) {
|
||||
const display = this.state.client.getDisplay();
|
||||
|
||||
const width = window.innerWidth;
|
||||
const height = window.innerHeight;
|
||||
|
||||
if (this.state.protocol === 'ssh' || this.state.protocol === 'telnet') {
|
||||
let r = 2;
|
||||
display.scale(1 / r);
|
||||
this.state.client.sendSize(width * r, height * r);
|
||||
} else {
|
||||
this.state.client.sendSize(width, height);
|
||||
}
|
||||
|
||||
this.setState({
|
||||
containerWidth: width,
|
||||
containerHeight: height,
|
||||
})
|
||||
|
||||
this.resize(this.state.sessionId, width, height).then(_ => {
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
resize = async (sessionId, width, height) => {
|
||||
let result = await request.post(`/sessions/${sessionId}/resize?width=${width}&height=${height}`);
|
||||
if (result.code !== 1) {
|
||||
message.error(result.message);
|
||||
}
|
||||
}
|
||||
|
||||
onWindowFocus = (e) => {
|
||||
if (navigator.clipboard) {
|
||||
navigator.clipboard.readText().then((text) => {
|
||||
this.sendClipboard({
|
||||
'data': text,
|
||||
'type': 'text/plain'
|
||||
});
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
onPaste = (e) => {
|
||||
const cbd = e.clipboardData;
|
||||
const ua = window.navigator.userAgent;
|
||||
|
||||
// 如果是 Safari 直接 return
|
||||
if (!(e.clipboardData && e.clipboardData.items)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Mac平台下Chrome49版本以下 复制Finder中的文件的Bug Hack掉
|
||||
if (cbd.items && cbd.items.length === 2 && cbd.items[0].kind === "string" && cbd.items[1].kind === "file" &&
|
||||
cbd.types && cbd.types.length === 2 && cbd.types[0] === "text/plain" && cbd.types[1] === "Files" &&
|
||||
ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49) {
|
||||
return;
|
||||
}
|
||||
|
||||
for (let i = 0; i < cbd.items.length; i++) {
|
||||
let item = cbd.items[i];
|
||||
if (item.kind === "file") {
|
||||
let blob = item.getAsFile();
|
||||
if (blob.size === 0) {
|
||||
return;
|
||||
}
|
||||
// blob 就是从剪切板获得的文件 可以进行上传或其他操作
|
||||
} else if (item.kind === 'string') {
|
||||
item.getAsString((str) => {
|
||||
this.sendClipboard({
|
||||
'data': str,
|
||||
'type': 'text/plain'
|
||||
});
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onSelect = (keys, event) => {
|
||||
this.setState({
|
||||
selectNode: {
|
||||
key: keys[0],
|
||||
isLeaf: event.node.isLeaf
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
handleOk = async (values) => {
|
||||
let params = {
|
||||
'dir': this.state.selectNode.key + '/' + values['dir']
|
||||
}
|
||||
let paramStr = qs.stringify(params);
|
||||
|
||||
this.setState({
|
||||
confirmLoading: true
|
||||
})
|
||||
let result = await request.post(`/sessions/${this.state.sessionId}/mkdir?${paramStr}`);
|
||||
if (result.code === 1) {
|
||||
message.success('创建成功');
|
||||
let parentPath = this.state.selectNode.key;
|
||||
let items = await this.getTreeNodes(parentPath);
|
||||
this.setState({
|
||||
treeData: this.updateTreeData(this.state.treeData, parentPath, items),
|
||||
selectNode: {}
|
||||
});
|
||||
} else {
|
||||
message.error(result.message);
|
||||
}
|
||||
|
||||
this.setState({
|
||||
confirmLoading: false,
|
||||
confirmVisible: false
|
||||
})
|
||||
}
|
||||
|
||||
handleConfirmCancel = () => {
|
||||
this.setState({
|
||||
confirmVisible: false
|
||||
})
|
||||
}
|
||||
|
||||
handleUploadCancel = () => {
|
||||
this.setState({
|
||||
uploadVisible: false
|
||||
})
|
||||
}
|
||||
|
||||
mkdir = () => {
|
||||
if (!this.state.selectNode.key || this.state.selectNode.isLeaf) {
|
||||
message.warning('请选择一个目录');
|
||||
return;
|
||||
}
|
||||
this.setState({
|
||||
confirmVisible: true
|
||||
})
|
||||
}
|
||||
|
||||
upload = () => {
|
||||
if (!this.state.selectNode.key || this.state.selectNode.isLeaf) {
|
||||
message.warning('请选择一个目录进行上传');
|
||||
return;
|
||||
}
|
||||
this.setState({
|
||||
uploadVisible: true
|
||||
})
|
||||
}
|
||||
|
||||
download = () => {
|
||||
if (!this.state.selectNode.key || !this.state.selectNode.isLeaf) {
|
||||
message.warning('当前只支持下载文件');
|
||||
return;
|
||||
}
|
||||
download(`${server}${prefix}/sessions/${this.state.sessionId}/download?file=${this.state.selectNode.key}`);
|
||||
}
|
||||
|
||||
rmdir = async () => {
|
||||
if (!this.state.selectNode.key) {
|
||||
message.warning('请选择一个文件或目录');
|
||||
return;
|
||||
}
|
||||
let result;
|
||||
if (this.state.selectNode.isLeaf) {
|
||||
result = await request.delete(`/sessions/${this.state.sessionId}/rm?file=${this.state.selectNode.key}`);
|
||||
} else {
|
||||
result = await request.delete(`/sessions/${this.state.sessionId}/rmdir?dir=${this.state.selectNode.key}`);
|
||||
}
|
||||
if (result.code !== 1) {
|
||||
message.error(result.message);
|
||||
} else {
|
||||
message.success('删除成功');
|
||||
let path = this.state.selectNode.key;
|
||||
let parentPath = path.substring(0, path.lastIndexOf('/'));
|
||||
let items = await this.getTreeNodes(parentPath);
|
||||
this.setState({
|
||||
treeData: this.updateTreeData(this.state.treeData, parentPath, items),
|
||||
selectNode: {}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
refresh = async () => {
|
||||
if (!this.state.selectNode.key || this.state.selectNode.isLeaf) {
|
||||
await this.loadDirData('/');
|
||||
} else {
|
||||
let key = this.state.selectNode.key;
|
||||
let items = await this.getTreeNodes(key);
|
||||
this.setState({
|
||||
treeData: this.updateTreeData(this.state.treeData, key, items),
|
||||
});
|
||||
}
|
||||
message.success('刷新目录成功');
|
||||
}
|
||||
|
||||
onRightClick = ({event, node}) => {
|
||||
|
||||
};
|
||||
|
||||
loadDirData = async (key) => {
|
||||
let items = await this.getTreeNodes(key);
|
||||
this.setState({
|
||||
treeData: items,
|
||||
});
|
||||
}
|
||||
|
||||
getTreeNodes = async (key) => {
|
||||
const url = server + prefix + '/sessions/' + this.state.sessionId + '/ls?dir=' + key;
|
||||
|
||||
let result = await request.get(url);
|
||||
|
||||
if (result.code !== 1) {
|
||||
return [];
|
||||
}
|
||||
|
||||
let data = result.data;
|
||||
|
||||
data = data.sort(((a, b) => a.name.localeCompare(b.name)));
|
||||
|
||||
return data.map(item => {
|
||||
return {
|
||||
title: item['name'],
|
||||
key: item['path'],
|
||||
isLeaf: !item['isDir'] && !item['isLink'],
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onLoadData = ({key, children}) => {
|
||||
|
||||
return new Promise(async (resolve) => {
|
||||
if (children) {
|
||||
resolve();
|
||||
return;
|
||||
}
|
||||
|
||||
let items = await this.getTreeNodes(key);
|
||||
this.setState({
|
||||
treeData: this.updateTreeData(this.state.treeData, key, items),
|
||||
});
|
||||
|
||||
resolve();
|
||||
});
|
||||
}
|
||||
|
||||
updateTreeData = (list, key, children) => {
|
||||
return list.map((node) => {
|
||||
if (node.key === key) {
|
||||
return {...node, children};
|
||||
} else if (node.children) {
|
||||
return {...node, children: this.updateTreeData(node.children, key, children)};
|
||||
}
|
||||
|
||||
return node;
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
const title = (
|
||||
<Row>
|
||||
<Space>
|
||||
远程文件管理
|
||||
|
||||
|
||||
<Tooltip title="创建文件夹">
|
||||
<Button type="primary" size="small" icon={<FolderAddOutlined/>}
|
||||
onClick={this.mkdir} ghost/>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="上传">
|
||||
<Button type="primary" size="small" icon={<CloudUploadOutlined/>}
|
||||
onClick={this.upload} ghost/>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="下载">
|
||||
<Button type="primary" size="small" icon={<CloudDownloadOutlined/>}
|
||||
onClick={this.download} ghost/>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="删除文件">
|
||||
<Button type="dashed" size="small" icon={<DeleteOutlined/>} onClick={this.rmdir}
|
||||
danger/>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="刷新">
|
||||
<Button type="primary" size="small" icon={<ReloadOutlined/>} onClick={this.refresh}
|
||||
ghost/>
|
||||
</Tooltip>
|
||||
</Space>
|
||||
</Row>
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="container" style={{
|
||||
overflow: this.state.containerOverflow,
|
||||
width: this.state.containerWidth,
|
||||
height: this.state.containerHeight
|
||||
}}>
|
||||
|
||||
<div id="display"/>
|
||||
</div>
|
||||
|
||||
<Modal
|
||||
title="创建文件夹"
|
||||
visible={this.state.confirmVisible}
|
||||
onOk={() => {
|
||||
this.formRef.current
|
||||
.validateFields()
|
||||
.then(values => {
|
||||
this.formRef.current.resetFields();
|
||||
this.handleOk(values);
|
||||
})
|
||||
.catch(info => {
|
||||
|
||||
});
|
||||
}}
|
||||
confirmLoading={this.state.confirmLoading}
|
||||
onCancel={this.handleConfirmCancel}
|
||||
>
|
||||
<Form ref={this.formRef} {...formItemLayout}>
|
||||
|
||||
<Form.Item label="文件夹名称" name='dir' rules={[{required: true, message: '请输入文件夹名称'}]}>
|
||||
<Input autoComplete="off" placeholder="请输入文件夹名称"/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
|
||||
<Modal
|
||||
title="上传文件"
|
||||
visible={this.state.uploadVisible}
|
||||
onOk={() => {
|
||||
|
||||
}}
|
||||
confirmLoading={this.state.uploadLoading}
|
||||
onCancel={this.handleUploadCancel}
|
||||
>
|
||||
<Upload
|
||||
action={server + prefix + '/sessions/' + this.state.sessionId + '/upload?X-Auth-Token=' + getToken() + '&dir=' + this.state.selectNode.key}>
|
||||
<Button icon={<UploadOutlined/>}>上传文件</Button>
|
||||
</Upload>
|
||||
</Modal>
|
||||
|
||||
<Affix style={{position: 'absolute', top: 50, right: 100}}>
|
||||
<Button
|
||||
icon={<CopyOutlined/>}
|
||||
onClick={() => {
|
||||
this.showClipboard();
|
||||
}}
|
||||
>
|
||||
</Button>
|
||||
|
||||
</Affix>
|
||||
|
||||
<Affix style={{position: 'absolute', top: 50, right: 50}}>
|
||||
<Button
|
||||
icon={<FolderOpenOutlined/>}
|
||||
onClick={() => {
|
||||
this.showFileSystem();
|
||||
}}
|
||||
>
|
||||
</Button>
|
||||
</Affix>
|
||||
|
||||
<Drawer
|
||||
title={title}
|
||||
placement="right"
|
||||
width={window.innerWidth * 0.3}
|
||||
closable={true}
|
||||
maskClosable={false}
|
||||
onClose={this.hideFileSystem}
|
||||
visible={this.state.fileSystemVisible}
|
||||
>
|
||||
|
||||
|
||||
<Row style={{marginTop: 10}}>
|
||||
<Col span={24}>
|
||||
<Card title={this.state.fileSystem.currentDirectory} bordered={true} size="small">
|
||||
<Spin indicator={antIcon} spinning={this.state.fileSystem.loading}>
|
||||
|
||||
<DirectoryTree
|
||||
// multiple
|
||||
onSelect={this.onSelect}
|
||||
loadData={this.onLoadData}
|
||||
treeData={this.state.treeData}
|
||||
onRightClick={this.onRightClick}
|
||||
/>
|
||||
|
||||
</Spin>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</Drawer>
|
||||
|
||||
<Drawer
|
||||
title="剪贴板"
|
||||
placement="right"
|
||||
width={window.innerWidth * 0.3}
|
||||
onClose={this.hideClipboard}
|
||||
visible={this.state.clipboardVisible}
|
||||
>
|
||||
|
||||
<Alert message="复制/剪切的文本将出现在这里。对下面文本内容所作的修改将会影响远程电脑上的剪贴板。" type="info" showIcon closable/>
|
||||
|
||||
<div style={{marginTop: 10, marginBottom: 10}}>
|
||||
<TextArea id='clipboard' rows={10} onBlur={this.updateClipboardFormTextarea}/>
|
||||
</div>
|
||||
|
||||
</Drawer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Access;
|
||||
3
web/src/components/access/Console.css
Normal file
3
web/src/components/access/Console.css
Normal file
@ -0,0 +1,3 @@
|
||||
.console-card .ant-card-body {
|
||||
padding: 0;
|
||||
}
|
||||
110
web/src/components/access/Console.js
Normal file
110
web/src/components/access/Console.js
Normal file
@ -0,0 +1,110 @@
|
||||
import React, {Component} from 'react';
|
||||
import "xterm/css/xterm.css"
|
||||
import {Terminal} from "xterm";
|
||||
import {AttachAddon} from 'xterm-addon-attach';
|
||||
import qs from "qs";
|
||||
import {prefix, wsServer} from "../../common/constants";
|
||||
import "./Console.css"
|
||||
import {getToken} from "../../utils/utils";
|
||||
|
||||
|
||||
function getGeometry(width, height) {
|
||||
const cols = Math.floor(width / 9);
|
||||
const rows = Math.floor(height / 17);
|
||||
return [cols, rows];
|
||||
}
|
||||
|
||||
class Console extends Component {
|
||||
|
||||
state = {
|
||||
containerOverflow: 'hidden',
|
||||
containerWidth: 0,
|
||||
containerHeight: 0,
|
||||
term: null,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
|
||||
let command = this.props.command;
|
||||
let assetId = this.props.assetId;
|
||||
let width = this.props.width;
|
||||
let height = this.props.height;
|
||||
|
||||
// let width = Math.floor(window.innerWidth * scale);
|
||||
// let height = Math.floor(window.innerHeight * scale);
|
||||
|
||||
let params = {
|
||||
'width': width,
|
||||
'height': height,
|
||||
'assetId': assetId
|
||||
};
|
||||
|
||||
let paramStr = qs.stringify(params);
|
||||
|
||||
let [cols, rows] = getGeometry(width, height);
|
||||
let term = new Terminal({
|
||||
cols: cols,
|
||||
rows: rows,
|
||||
// screenKeys: true,
|
||||
// fontFamily: 'menlo',
|
||||
});
|
||||
|
||||
// let fitAddon = new FitAddon();
|
||||
// term.loadAddon(fitAddon);
|
||||
term.open(this.refs.terminal);
|
||||
// fitAddon.fit();
|
||||
|
||||
term.writeln('正在努力连接服务器中...');
|
||||
term.onResize(e => {
|
||||
|
||||
});
|
||||
|
||||
let token = getToken();
|
||||
|
||||
let webSocket = new WebSocket(wsServer + prefix + '/ssh?X-Auth-Token=' + token + '&' + paramStr);
|
||||
term.loadAddon(new AttachAddon(webSocket));
|
||||
this.props.appendWebsocket(webSocket);
|
||||
|
||||
webSocket.onopen = (e => {
|
||||
term.clear();
|
||||
term.focus();
|
||||
|
||||
if (command !== '') {
|
||||
webSocket.send(command + String.fromCharCode(13));
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
this.setState({
|
||||
term: term,
|
||||
containerWidth: width,
|
||||
containerHeight: height
|
||||
});
|
||||
|
||||
// window.addEventListener('resize', this.onWindowResize);
|
||||
}
|
||||
|
||||
onWindowResize = (e) => {
|
||||
let term = this.state.term;
|
||||
if (term) {
|
||||
const [cols, rows] = getGeometry(this.state.containerWidth, this.state.containerHeight);
|
||||
term.resize(cols, rows);
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div ref='terminal' style={{
|
||||
overflow: this.state.containerOverflow,
|
||||
width: this.state.containerWidth,
|
||||
height: this.state.containerHeight,
|
||||
backgroundColor: 'black'
|
||||
}}/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Console;
|
||||
237
web/src/components/access/Monitor.js
Normal file
237
web/src/components/access/Monitor.js
Normal file
@ -0,0 +1,237 @@
|
||||
import React, {Component} from 'react';
|
||||
import Guacamole from 'guacamole-common-js';
|
||||
import {message, Modal} from 'antd'
|
||||
import qs from "qs";
|
||||
import {prefix, wsServer} from "../../common/constants";
|
||||
import {LoadingOutlined} from '@ant-design/icons';
|
||||
import {getToken} from "../../utils/utils";
|
||||
import './Access.css'
|
||||
|
||||
const STATE_IDLE = 0;
|
||||
const STATE_CONNECTING = 1;
|
||||
const STATE_WAITING = 2;
|
||||
const STATE_CONNECTED = 3;
|
||||
const STATE_DISCONNECTING = 4;
|
||||
const STATE_DISCONNECTED = 5;
|
||||
|
||||
const antIcon = <LoadingOutlined/>;
|
||||
|
||||
class Access extends Component {
|
||||
|
||||
formRef = React.createRef()
|
||||
|
||||
state = {
|
||||
client: {},
|
||||
containerOverflow: 'hidden',
|
||||
containerWidth: 0,
|
||||
containerHeight: 0,
|
||||
rate: 1
|
||||
};
|
||||
|
||||
async componentDidMount() {
|
||||
const connectionId = this.props.connectionId;
|
||||
let rate = this.props.rate;
|
||||
let protocol = this.props.protocol;
|
||||
let width = this.props.width;
|
||||
let height = this.props.height;
|
||||
|
||||
if (protocol === 'ssh' || protocol === 'telnet') {
|
||||
rate = rate * 0.5;
|
||||
width = width * 2;
|
||||
height = height * 2;
|
||||
}
|
||||
this.setState({
|
||||
containerWidth: width * rate,
|
||||
containerHeight: height * rate,
|
||||
rate: rate,
|
||||
})
|
||||
this.renderDisplay(connectionId);
|
||||
|
||||
window.addEventListener('resize', this.onWindowResize);
|
||||
window.addEventListener('onfocus', this.onWindowFocus);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.state.client) {
|
||||
this.state.client.disconnect();
|
||||
}
|
||||
|
||||
window.removeEventListener('resize', this.onWindowResize);
|
||||
document.removeEventListener("onfocus", this.onWindowFocus);
|
||||
}
|
||||
|
||||
onTunnelStateChange = (state) => {
|
||||
console.log('onTunnelStateChange', state);
|
||||
};
|
||||
|
||||
onClientStateChange = (state) => {
|
||||
switch (state) {
|
||||
case STATE_IDLE:
|
||||
console.log('初始化');
|
||||
message.destroy();
|
||||
message.loading('正在初始化中...', 0);
|
||||
break;
|
||||
case STATE_CONNECTING:
|
||||
console.log('正在连接...');
|
||||
message.destroy();
|
||||
message.loading('正在努力连接中...', 0);
|
||||
break;
|
||||
case STATE_WAITING:
|
||||
console.log('正在等待...');
|
||||
message.destroy();
|
||||
message.loading('正在等待服务器响应...', 0);
|
||||
break;
|
||||
case STATE_CONNECTED:
|
||||
console.log('连接成功。');
|
||||
message.destroy();
|
||||
message.success('连接成功');
|
||||
if (this.state.client) {
|
||||
this.state.client.getDisplay().scale(this.state.rate);
|
||||
}
|
||||
break;
|
||||
case STATE_DISCONNECTING:
|
||||
console.log('连接正在关闭中...');
|
||||
message.destroy();
|
||||
break;
|
||||
case STATE_DISCONNECTED:
|
||||
console.log('连接关闭。');
|
||||
message.destroy();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
onError = (status) => {
|
||||
|
||||
console.log('通道异常。', status);
|
||||
|
||||
switch (status.code) {
|
||||
case 256:
|
||||
this.showMessage('未支持的访问');
|
||||
break;
|
||||
case 512:
|
||||
this.showMessage('远程服务异常');
|
||||
break;
|
||||
case 513:
|
||||
this.showMessage('服务器忙碌');
|
||||
break;
|
||||
case 514:
|
||||
this.showMessage('服务器连接超时');
|
||||
break;
|
||||
case 515:
|
||||
this.showMessage('远程服务异常');
|
||||
break;
|
||||
case 516:
|
||||
this.showMessage('资源未找到');
|
||||
break;
|
||||
case 517:
|
||||
this.showMessage('资源冲突');
|
||||
break;
|
||||
case 518:
|
||||
this.showMessage('资源已关闭');
|
||||
break;
|
||||
case 519:
|
||||
this.showMessage('远程服务未找到');
|
||||
break;
|
||||
case 520:
|
||||
this.showMessage('远程服务不可用');
|
||||
break;
|
||||
case 521:
|
||||
this.showMessage('会话冲突');
|
||||
break;
|
||||
case 522:
|
||||
this.showMessage('会话连接超时');
|
||||
break;
|
||||
case 523:
|
||||
this.showMessage('会话已关闭');
|
||||
break;
|
||||
case 768:
|
||||
this.showMessage('网络不可达');
|
||||
break;
|
||||
case 769:
|
||||
this.showMessage('服务器密码验证失败');
|
||||
break;
|
||||
case 771:
|
||||
this.showMessage('客户端被禁止');
|
||||
break;
|
||||
case 776:
|
||||
this.showMessage('客户端连接超时');
|
||||
break;
|
||||
case 781:
|
||||
this.showMessage('客户端异常');
|
||||
break;
|
||||
case 783:
|
||||
this.showMessage('错误的请求类型');
|
||||
break;
|
||||
case 797:
|
||||
this.showMessage('客户端连接数量过多');
|
||||
break;
|
||||
default:
|
||||
this.showMessage('未知错误。');
|
||||
}
|
||||
};
|
||||
|
||||
showMessage(message) {
|
||||
Modal.error({
|
||||
title: '提示',
|
||||
content: message,
|
||||
});
|
||||
}
|
||||
|
||||
async renderDisplay(connectionId, protocol) {
|
||||
|
||||
let tunnel = new Guacamole.WebSocketTunnel(wsServer + prefix + '/tunnel');
|
||||
|
||||
tunnel.onstatechange = this.onTunnelStateChange;
|
||||
let client = new Guacamole.Client(tunnel);
|
||||
|
||||
// 处理客户端的状态变化事件
|
||||
client.onstatechange = this.onClientStateChange;
|
||||
client.onerror = this.onError;
|
||||
const display = document.getElementById("display");
|
||||
|
||||
// Add client to display div
|
||||
const element = client.getDisplay().getElement();
|
||||
display.appendChild(element);
|
||||
|
||||
let token = getToken();
|
||||
|
||||
let params = {
|
||||
'connectionId': connectionId,
|
||||
'X-Auth-Token': token
|
||||
};
|
||||
|
||||
let paramStr = qs.stringify(params);
|
||||
|
||||
// Connect
|
||||
client.connect(paramStr);
|
||||
|
||||
// Disconnect on close
|
||||
window.onunload = function () {
|
||||
client.disconnect();
|
||||
};
|
||||
|
||||
this.setState({
|
||||
client: client
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="container" style={{
|
||||
overflow: this.state.containerOverflow,
|
||||
width: this.state.containerWidth,
|
||||
height: this.state.containerHeight
|
||||
}}>
|
||||
|
||||
<div id="display"/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Access;
|
||||
512
web/src/components/asset/Asset.js
Normal file
512
web/src/components/asset/Asset.js
Normal file
@ -0,0 +1,512 @@
|
||||
import React, {Component} from 'react';
|
||||
import "video-react/dist/video-react.css";
|
||||
|
||||
import {
|
||||
Badge,
|
||||
Button,
|
||||
Col,
|
||||
Divider,
|
||||
Input,
|
||||
Layout,
|
||||
Modal,
|
||||
PageHeader,
|
||||
Row,
|
||||
Select,
|
||||
Space,
|
||||
Table,
|
||||
Tag,
|
||||
Tooltip,
|
||||
Typography
|
||||
} from "antd";
|
||||
import qs from "qs";
|
||||
import AssetModal from "./AssetModal";
|
||||
import request from "../../common/request";
|
||||
import {message} from "antd/es";
|
||||
|
||||
|
||||
import {
|
||||
CodeTwoTone,
|
||||
CopyTwoTone,
|
||||
DeleteOutlined,
|
||||
DeleteTwoTone,
|
||||
EditTwoTone,
|
||||
ExclamationCircleOutlined,
|
||||
PlusOutlined,
|
||||
SyncOutlined,
|
||||
UndoOutlined
|
||||
} from '@ant-design/icons';
|
||||
import {itemRender} from "../../utils/utils";
|
||||
import {PROTOCOL_COLORS} from "../../common/constants";
|
||||
|
||||
const confirm = Modal.confirm;
|
||||
const {Search} = Input;
|
||||
const {Content} = Layout;
|
||||
const {Title, Text} = Typography;
|
||||
const routes = [
|
||||
{
|
||||
path: '',
|
||||
breadcrumbName: '首页',
|
||||
},
|
||||
{
|
||||
path: 'assets',
|
||||
breadcrumbName: '资产管理',
|
||||
}
|
||||
];
|
||||
|
||||
class Asset extends Component {
|
||||
|
||||
inputRefOfName = React.createRef();
|
||||
|
||||
state = {
|
||||
items: [],
|
||||
total: 0,
|
||||
queryParams: {
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
protocol: ''
|
||||
},
|
||||
loading: false,
|
||||
modalVisible: false,
|
||||
modalTitle: '',
|
||||
modalConfirmLoading: false,
|
||||
credentials: [],
|
||||
model: {},
|
||||
selectedRowKeys: [],
|
||||
delBtnLoading: false,
|
||||
};
|
||||
|
||||
async componentDidMount() {
|
||||
await this.loadTableData();
|
||||
}
|
||||
|
||||
async delete(id) {
|
||||
const result = await request.delete('/assets/' + id);
|
||||
if (result['code'] === 1) {
|
||||
message.success('删除成功');
|
||||
await this.loadTableData(this.state.queryParams);
|
||||
} else {
|
||||
message.error('删除失败 :( ' + result.message, 10);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
async loadTableData(queryParams) {
|
||||
this.setState({
|
||||
loading: true
|
||||
});
|
||||
|
||||
queryParams = queryParams || this.state.queryParams;
|
||||
|
||||
// queryParams
|
||||
let paramsStr = qs.stringify(queryParams);
|
||||
|
||||
let data = {
|
||||
items: [],
|
||||
total: 0
|
||||
};
|
||||
|
||||
try {
|
||||
let result = await request.get('/assets/paging?' + paramsStr);
|
||||
if (result['code'] === 1) {
|
||||
data = result['data'];
|
||||
} else {
|
||||
message.error(result['message']);
|
||||
}
|
||||
} catch (e) {
|
||||
|
||||
} finally {
|
||||
const items = data.items.map(item => {
|
||||
return {'key': item['id'], ...item}
|
||||
})
|
||||
this.setState({
|
||||
items: items,
|
||||
total: data.total,
|
||||
queryParams: queryParams,
|
||||
loading: false
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
handleChangPage = async (pageIndex, pageSize) => {
|
||||
let queryParams = this.state.queryParams;
|
||||
queryParams.pageIndex = pageIndex;
|
||||
queryParams.pageSize = pageSize;
|
||||
|
||||
this.setState({
|
||||
queryParams: queryParams
|
||||
});
|
||||
|
||||
await this.loadTableData(queryParams)
|
||||
};
|
||||
|
||||
handleSearchByName = name => {
|
||||
let query = {
|
||||
...this.state.queryParams,
|
||||
'pageIndex': 1,
|
||||
'pageSize': this.state.queryParams.pageSize,
|
||||
'name': name,
|
||||
}
|
||||
|
||||
this.loadTableData(query);
|
||||
};
|
||||
|
||||
handleSearchByProtocol = protocol => {
|
||||
let query = {
|
||||
...this.state.queryParams,
|
||||
'pageIndex': 1,
|
||||
'pageSize': this.state.queryParams.pageSize,
|
||||
'protocol': protocol,
|
||||
}
|
||||
this.loadTableData(query);
|
||||
}
|
||||
|
||||
showDeleteConfirm(id, content) {
|
||||
let self = this;
|
||||
confirm({
|
||||
title: '您确定要删除此资产吗?',
|
||||
content: content,
|
||||
okText: '确定',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
onOk() {
|
||||
self.delete(id);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
async update(id) {
|
||||
let result = await request.get(`/assets/${id}`);
|
||||
if (result.code !== 1) {
|
||||
message.error(result.message, 10);
|
||||
return;
|
||||
}
|
||||
await this.showModal('更新资产', result.data);
|
||||
}
|
||||
|
||||
async copy(id) {
|
||||
let result = await request.get(`/assets/${id}`);
|
||||
if (result.code !== 1) {
|
||||
message.error(result.message, 10);
|
||||
return;
|
||||
}
|
||||
result.data['id'] = undefined;
|
||||
await this.showModal('复制资产', result.data);
|
||||
}
|
||||
|
||||
async showModal(title, assets = {}) {
|
||||
let result = await request.get('/credentials');
|
||||
let credentials = [];
|
||||
if (result.code === 1) {
|
||||
credentials = result.data;
|
||||
}
|
||||
this.setState({
|
||||
modalTitle: title,
|
||||
modalVisible: true,
|
||||
credentials: credentials,
|
||||
model: assets
|
||||
});
|
||||
};
|
||||
|
||||
handleCancelModal = e => {
|
||||
this.setState({
|
||||
modalTitle: '',
|
||||
modalVisible: false
|
||||
});
|
||||
};
|
||||
|
||||
handleOk = async (formData) => {
|
||||
// 弹窗 form 传来的数据
|
||||
this.setState({
|
||||
modalConfirmLoading: true
|
||||
});
|
||||
|
||||
if (formData.id) {
|
||||
// 向后台提交数据
|
||||
const result = await request.put('/assets/' + formData.id, formData);
|
||||
if (result.code === 1) {
|
||||
message.success('操作成功', 3);
|
||||
|
||||
this.setState({
|
||||
modalVisible: false
|
||||
});
|
||||
await this.loadTableData(this.state.queryParams);
|
||||
} else {
|
||||
message.error('操作失败 :( ' + result.message, 10);
|
||||
}
|
||||
} else {
|
||||
// 向后台提交数据
|
||||
const result = await request.post('/assets', formData);
|
||||
if (result.code === 1) {
|
||||
message.success('操作成功', 3);
|
||||
|
||||
this.setState({
|
||||
modalVisible: false
|
||||
});
|
||||
await this.loadTableData(this.state.queryParams);
|
||||
} else {
|
||||
message.error('操作失败 :( ' + result.message, 10);
|
||||
}
|
||||
}
|
||||
|
||||
this.setState({
|
||||
modalConfirmLoading: false
|
||||
});
|
||||
};
|
||||
|
||||
access = async (id, protocol) => {
|
||||
message.loading({content: '正在检测资产是否在线...', key: id});
|
||||
let result = await request.post(`/assets/${id}/tcping`);
|
||||
if (result.code === 1) {
|
||||
if (result.data === true) {
|
||||
message.success({content: '检测完成，您访问的资产在线，即将打开窗口进行访问。', key: id, duration: 3});
|
||||
window.open(`#/access?assetsId=${id}&protocol=${protocol}`);
|
||||
} else {
|
||||
message.warn('您访问的资产未在线，请确认网络状态。', 10);
|
||||
}
|
||||
} else {
|
||||
message.error('操作失败 :( ' + result.message, 10);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
batchDelete = async () => {
|
||||
this.setState({
|
||||
delBtnLoading: true
|
||||
})
|
||||
try {
|
||||
let result = await request.delete('/assets/' + this.state.selectedRowKeys.join(','));
|
||||
if (result.code === 1) {
|
||||
message.success('操作成功', 3);
|
||||
this.setState({
|
||||
selectedRowKeys: []
|
||||
})
|
||||
await this.loadTableData(this.state.queryParams);
|
||||
} else {
|
||||
message.error('删除失败 :( ' + result.message, 10);
|
||||
}
|
||||
} finally {
|
||||
this.setState({
|
||||
delBtnLoading: false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
const columns = [{
|
||||
title: '序号',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
render: (id, record, index) => {
|
||||
return index + 1;
|
||||
}
|
||||
}, {
|
||||
title: '资产名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
render: (name, record) => {
|
||||
if (name && name.length > 20) {
|
||||
name = name.substring(0, 20) + "...";
|
||||
}
|
||||
|
||||
return (
|
||||
<Tooltip placement="topLeft" title={name}>
|
||||
{name}
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
}, {
|
||||
title: 'IP',
|
||||
dataIndex: 'ip',
|
||||
key: 'ip',
|
||||
}, {
|
||||
title: '端口',
|
||||
dataIndex: 'port',
|
||||
key: 'port',
|
||||
}, {
|
||||
title: '连接协议',
|
||||
dataIndex: 'protocol',
|
||||
key: 'protocol',
|
||||
render: (text, record) => {
|
||||
|
||||
return (<Tag color={PROTOCOL_COLORS[text]}>{text}</Tag>);
|
||||
}
|
||||
}, {
|
||||
title: '状态',
|
||||
dataIndex: 'active',
|
||||
key: 'active',
|
||||
render: text => {
|
||||
if (text) {
|
||||
return (<Badge status="processing" text="运行中"/>);
|
||||
} else {
|
||||
return (<Badge status="error" text="不可用"/>);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
title: '创建日期',
|
||||
dataIndex: 'created',
|
||||
key: 'created'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
render: (text, record) => {
|
||||
return (
|
||||
<div>
|
||||
<Button type="link" size='small' icon={<CodeTwoTone/>}
|
||||
onClick={() => this.access(record.id, record.protocol)}>接入</Button>
|
||||
<Button type="link" size='small' icon={<EditTwoTone/>}
|
||||
onClick={() => this.update(record.id)}>编辑</Button>
|
||||
<Button type="link" size='small' icon={<CopyTwoTone/>}
|
||||
onClick={() => this.copy(record.id)}>复制</Button>
|
||||
<Button type="link" size='small' icon={<DeleteTwoTone/>}
|
||||
onClick={() => this.showDeleteConfirm(record.id, record.name)}>删除</Button>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
];
|
||||
|
||||
const selectedRowKeys = this.state.selectedRowKeys;
|
||||
const rowSelection = {
|
||||
selectedRowKeys: this.state.selectedRowKeys,
|
||||
onChange: (selectedRowKeys, selectedRows) => {
|
||||
this.setState({selectedRowKeys});
|
||||
},
|
||||
};
|
||||
const hasSelected = selectedRowKeys.length > 0;
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
className="site-page-header-ghost-wrapper page-herder"
|
||||
title="资产管理"
|
||||
breadcrumb={{
|
||||
routes: routes,
|
||||
itemRender: itemRender
|
||||
}}
|
||||
subTitle="资产"
|
||||
>
|
||||
</PageHeader>
|
||||
|
||||
<Content key='page-content' className="site-layout-background page-content">
|
||||
<div style={{marginBottom: 20}}>
|
||||
<Row justify="space-around" align="middle" gutter={24}>
|
||||
<Col span={12} key={1}>
|
||||
<Title level={3}>资产列表</Title>
|
||||
</Col>
|
||||
<Col span={12} key={2} style={{textAlign: 'right'}}>
|
||||
<Space>
|
||||
|
||||
<Search
|
||||
ref={this.inputRefOfName}
|
||||
placeholder="资产名称"
|
||||
allowClear
|
||||
onSearch={this.handleSearchByName}
|
||||
/>
|
||||
|
||||
<Select onChange={this.handleSearchByProtocol}
|
||||
value={this.state.queryParams.protocol ? this.state.queryParams.protocol : ''}
|
||||
style={{width: 100}}>
|
||||
<Select.Option value="">全部协议</Select.Option>
|
||||
<Select.Option value="rdp">rdp</Select.Option>
|
||||
<Select.Option value="ssh">ssh</Select.Option>
|
||||
<Select.Option value="vnc">vnc</Select.Option>
|
||||
<Select.Option value="telnet">telnet</Select.Option>
|
||||
</Select>
|
||||
|
||||
<Tooltip title='重置查询'>
|
||||
|
||||
<Button icon={<UndoOutlined/>} onClick={() => {
|
||||
this.inputRefOfName.current.setValue('');
|
||||
this.loadTableData({pageIndex: 1, pageSize: 10, protocol: ''})
|
||||
}}>
|
||||
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
<Divider type="vertical"/>
|
||||
|
||||
<Tooltip title="新增">
|
||||
<Button type="dashed" icon={<PlusOutlined/>}
|
||||
onClick={() => this.showModal('新增资产', {})}>
|
||||
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
|
||||
<Tooltip title="刷新列表">
|
||||
<Button icon={<SyncOutlined/>} onClick={() => {
|
||||
this.loadTableData(this.state.queryParams)
|
||||
}}>
|
||||
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="批量删除">
|
||||
<Button type="primary" danger disabled={!hasSelected} icon={<DeleteOutlined/>}
|
||||
loading={this.state.delBtnLoading}
|
||||
onClick={() => {
|
||||
const content = <div>
|
||||
您确定要删除选中的<Text style={{color: '#1890FF'}}
|
||||
strong>{this.state.selectedRowKeys.length}</Text>条记录吗？
|
||||
</div>;
|
||||
confirm({
|
||||
icon: <ExclamationCircleOutlined/>,
|
||||
content: content,
|
||||
onOk: () => {
|
||||
this.batchDelete()
|
||||
},
|
||||
onCancel() {
|
||||
|
||||
},
|
||||
});
|
||||
}}>
|
||||
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
</Space>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
<Table key='assets-table'
|
||||
rowSelection={rowSelection}
|
||||
dataSource={this.state.items}
|
||||
columns={columns}
|
||||
position={'both'}
|
||||
pagination={{
|
||||
showSizeChanger: true,
|
||||
current: this.state.queryParams.pageIndex,
|
||||
pageSize: this.state.queryParams.pageSize,
|
||||
onChange: this.handleChangPage,
|
||||
onShowSizeChange: this.handleChangPage,
|
||||
total: this.state.total,
|
||||
showTotal: total => `总计 ${total} 条`
|
||||
}}
|
||||
loading={this.state.loading}
|
||||
/>
|
||||
|
||||
{
|
||||
this.state.modalVisible ?
|
||||
<AssetModal
|
||||
modalFormRef={this.modalFormRef}
|
||||
visible={this.state.modalVisible}
|
||||
title={this.state.modalTitle}
|
||||
handleOk={this.handleOk}
|
||||
handleCancel={this.handleCancelModal}
|
||||
confirmLoading={this.state.modalConfirmLoading}
|
||||
credentials={this.state.credentials}
|
||||
model={this.state.model}
|
||||
/>
|
||||
: null
|
||||
}
|
||||
|
||||
</Content>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Asset;
|
||||
157
web/src/components/asset/AssetModal.js
Normal file
157
web/src/components/asset/AssetModal.js
Normal file
@ -0,0 +1,157 @@
|
||||
import React, {useEffect, useState} from 'react';
|
||||
import {Form, Input, InputNumber, Modal, Radio, Select, Tooltip} from "antd/lib/index";
|
||||
|
||||
const {TextArea} = Input;
|
||||
const {Option} = Select;
|
||||
|
||||
// 子级页面
|
||||
// Ant form create 表单内置方法
|
||||
|
||||
const AssetModal = function ({title, visible, handleOk, handleCancel, confirmLoading, credentials, model}) {
|
||||
|
||||
const [form] = Form.useForm();
|
||||
|
||||
let [accountType, setAccountType] = useState(model.accountType);
|
||||
|
||||
useEffect(() => {
|
||||
setAccountType(model.accountType);
|
||||
});
|
||||
|
||||
const formItemLayout = {
|
||||
labelCol: {span: 6},
|
||||
wrapperCol: {span: 14},
|
||||
};
|
||||
|
||||
const handleProtocolChange = e => {
|
||||
let port;
|
||||
switch (e.target.value) {
|
||||
case 'ssh':
|
||||
port = 22;
|
||||
break;
|
||||
case 'rdp':
|
||||
port = 3389;
|
||||
break;
|
||||
case 'vnc':
|
||||
port = 5901;
|
||||
form.setFieldsValue({
|
||||
accountType: 'custom',
|
||||
});
|
||||
break;
|
||||
case 'telnet':
|
||||
port = 23;
|
||||
break;
|
||||
default:
|
||||
port = 65535;
|
||||
}
|
||||
|
||||
form.setFieldsValue({
|
||||
port: port,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
<Modal
|
||||
title={title}
|
||||
visible={visible}
|
||||
maskClosable={true}
|
||||
onOk={() => {
|
||||
form
|
||||
.validateFields()
|
||||
.then(values => {
|
||||
form.resetFields();
|
||||
handleOk(values);
|
||||
})
|
||||
.catch(info => {});
|
||||
}}
|
||||
onCancel={handleCancel}
|
||||
confirmLoading={confirmLoading}
|
||||
okText='确定'
|
||||
cancelText='取消'
|
||||
>
|
||||
|
||||
<Form form={form} {...formItemLayout} initialValues={model}>
|
||||
<Form.Item name='id' noStyle>
|
||||
<Input hidden={true}/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="资产名称" name='name' rules={[{required: true, message: "请输入资产名称"}]}>
|
||||
<Input placeholder="请输入资产名称"/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="IP" name='ip' rules={[{required: true, message: '请输入资产IP'}]}>
|
||||
<Input placeholder="请输入资产IP"/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="接入协议" name='protocol' rules={[{required: true, message: '请选择接入协议'}]}>
|
||||
<Radio.Group onChange={handleProtocolChange}>
|
||||
<Radio value="rdp">rdp</Radio>
|
||||
<Radio value="ssh">ssh</Radio>
|
||||
<Radio value="vnc">vnc</Radio>
|
||||
<Radio value="telnet">telnet</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="端口" name='port' rules={[{required: true, message: '请输入资产端口'}]}>
|
||||
<InputNumber min={1} max={65535}/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="账户类型" name='accountType' rules={[{required: true, message: '请选择接账户类型'}]}>
|
||||
<Select onChange={(v) => {
|
||||
setAccountType(v);
|
||||
model.accountType = v;
|
||||
}}>
|
||||
<Option value="custom">自定义</Option>
|
||||
<Option value="credential">授权凭证</Option>
|
||||
<Option value="secret-key">密钥</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
|
||||
{
|
||||
accountType === 'credential' ?
|
||||
<Form.Item label="授权凭证" name='credentialId' rules={[{required: true, message: '请选择授权凭证'}]}>
|
||||
<Select onChange={() => null}>
|
||||
{credentials.map(item => {
|
||||
return (
|
||||
<Option key={item.id} value={item.id}>
|
||||
<Tooltip placement="topLeft" title={item.name}>
|
||||
{item.name}
|
||||
</Tooltip>
|
||||
</Option>
|
||||
);
|
||||
})}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
: null
|
||||
}
|
||||
|
||||
{
|
||||
accountType === 'custom' ?
|
||||
<>
|
||||
<Form.Item label="授权账户" name='username' rules={[{required: true, message: '请输入授权账户'}]}
|
||||
noStyle={!(accountType === 'custom')}>
|
||||
<Input placeholder="输入授权账户"/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="授权密码" name='password' rules={[{required: true, message: '请输入授权密码'}]}
|
||||
noStyle={!(accountType === 'custom')}>
|
||||
<Input placeholder="输入授权密码"/>
|
||||
</Form.Item>
|
||||
</>
|
||||
: null
|
||||
}
|
||||
|
||||
{
|
||||
accountType === 'secret-key' ?
|
||||
<Form.Item label="私钥" name='passphrase' rules={[{required: true, message: '请输入私钥'}]}>
|
||||
<TextArea rows={4}/>
|
||||
</Form.Item>
|
||||
: null
|
||||
}
|
||||
</Form>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
export default AssetModal;
|
||||
92
web/src/components/command/BatchCommand.js
Normal file
92
web/src/components/command/BatchCommand.js
Normal file
@ -0,0 +1,92 @@
|
||||
import React, {Component} from 'react';
|
||||
import {List, Card, Input, PageHeader} from "antd";
|
||||
import Console from "../access/Console";
|
||||
import {itemRender} from "../../utils/utils";
|
||||
const {Search} = Input;
|
||||
const routes = [
|
||||
{
|
||||
path: '',
|
||||
breadcrumbName: '首页',
|
||||
},
|
||||
{
|
||||
path: '/dynamic-command',
|
||||
breadcrumbName: '动态指令',
|
||||
},
|
||||
{
|
||||
path: '/batch-command',
|
||||
breadcrumbName: '批量执行命令',
|
||||
}
|
||||
];
|
||||
|
||||
class BatchCommand extends Component {
|
||||
|
||||
commandRef = React.createRef();
|
||||
|
||||
state = {
|
||||
webSockets: [],
|
||||
assets: []
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
let params = new URLSearchParams(this.props.location.search);
|
||||
let command = params.get('command');
|
||||
let assets = JSON.parse(params.get('assets'));
|
||||
this.setState({
|
||||
command: command,
|
||||
assets: assets
|
||||
})
|
||||
}
|
||||
|
||||
onPaneChange = activeKey => {
|
||||
this.setState({activeKey});
|
||||
};
|
||||
|
||||
appendWebsocket = (webSocket) => {
|
||||
this.state.webSockets.push(webSocket);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
className="site-page-header-ghost-wrapper page-herder"
|
||||
title="批量执行命令"
|
||||
breadcrumb={{
|
||||
routes: routes,
|
||||
itemRender: itemRender
|
||||
}}
|
||||
subTitle="动态指令"
|
||||
>
|
||||
</PageHeader>
|
||||
|
||||
<div className="page-search">
|
||||
<Search ref={this.commandRef} placeholder="请输入指令" onSearch={value => {
|
||||
for (let i = 0; i < this.state.webSockets.length; i++) {
|
||||
this.state.webSockets[i].send(value + String.fromCharCode(13))
|
||||
}
|
||||
this.commandRef.current.setValue('');
|
||||
}} enterButton='执行'/>
|
||||
</div>
|
||||
|
||||
<div className="page-card">
|
||||
<List
|
||||
grid={{gutter: 16, column: 2}}
|
||||
dataSource={this.state.assets}
|
||||
renderItem={item => (
|
||||
<List.Item>
|
||||
<Card title={item.name}>
|
||||
<Console assetId={item.id} command={this.state.command}
|
||||
width={(window.innerWidth - 350) / 2}
|
||||
height={400}
|
||||
appendWebsocket={this.appendWebsocket}/>
|
||||
</Card>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default BatchCommand;
|
||||
501
web/src/components/command/DynamicCommand.js
Normal file
501
web/src/components/command/DynamicCommand.js
Normal file
@ -0,0 +1,501 @@
|
||||
import React, {Component} from 'react';
|
||||
|
||||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
Col,
|
||||
Divider,
|
||||
Input,
|
||||
Layout,
|
||||
Modal,
|
||||
PageHeader,
|
||||
Row,
|
||||
Space,
|
||||
Table,
|
||||
Tooltip,
|
||||
Typography
|
||||
} from "antd";
|
||||
import qs from "qs";
|
||||
import request from "../../common/request";
|
||||
import {message} from "antd/es";
|
||||
import DynamicCommandModal from "./DynamicCommandModal";
|
||||
import {
|
||||
CodeTwoTone,
|
||||
DeleteOutlined,
|
||||
DeleteTwoTone,
|
||||
EditTwoTone,
|
||||
ExclamationCircleOutlined,
|
||||
PlusOutlined,
|
||||
SyncOutlined,
|
||||
UndoOutlined
|
||||
} from '@ant-design/icons';
|
||||
import {itemRender} from "../../utils/utils";
|
||||
|
||||
const confirm = Modal.confirm;
|
||||
const {Content} = Layout;
|
||||
const {Title, Text} = Typography;
|
||||
const {Search} = Input;
|
||||
const routes = [
|
||||
{
|
||||
path: '',
|
||||
breadcrumbName: '首页',
|
||||
},
|
||||
{
|
||||
path: 'command',
|
||||
breadcrumbName: '动态指令',
|
||||
}
|
||||
];
|
||||
|
||||
class DynamicCommand extends Component {
|
||||
|
||||
inputRefOfName = React.createRef();
|
||||
inputRefOfContent = React.createRef();
|
||||
|
||||
state = {
|
||||
items: [],
|
||||
total: 0,
|
||||
queryParams: {
|
||||
pageIndex: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
loading: false,
|
||||
modalVisible: false,
|
||||
modalTitle: '',
|
||||
modalConfirmLoading: false,
|
||||
assetsVisible: false,
|
||||
assets: [],
|
||||
checkedAssets: [],
|
||||
command: '',
|
||||
model: null,
|
||||
selectedRowKeys: [],
|
||||
delBtnLoading: false,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.loadTableData();
|
||||
}
|
||||
|
||||
async delete(id) {
|
||||
const result = await request.delete('/commands/' + id);
|
||||
if (result.code === 1) {
|
||||
message.success('删除成功');
|
||||
this.loadTableData(this.state.queryParams);
|
||||
} else {
|
||||
message.error('删除失败 :( ' + result.message, 10);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
async loadTableData(queryParams) {
|
||||
this.setState({
|
||||
loading: true
|
||||
});
|
||||
|
||||
queryParams = queryParams || this.state.queryParams;
|
||||
|
||||
// queryParams
|
||||
let paramsStr = qs.stringify(queryParams);
|
||||
|
||||
let data = {
|
||||
items: [],
|
||||
total: 0
|
||||
};
|
||||
|
||||
try {
|
||||
let result = await request.get('/commands/paging?' + paramsStr);
|
||||
if (result.code === 1) {
|
||||
data = result.data;
|
||||
} else {
|
||||
message.error(result.message);
|
||||
}
|
||||
} catch (e) {
|
||||
|
||||
} finally {
|
||||
const items = data.items.map(item => {
|
||||
return {'key': item['id'], ...item}
|
||||
})
|
||||
this.setState({
|
||||
items: items,
|
||||
total: data.total,
|
||||
queryParams: queryParams,
|
||||
loading: false
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
handleChangPage = async (pageIndex, pageSize) => {
|
||||
let queryParams = this.state.queryParams;
|
||||
queryParams.pageIndex = pageIndex;
|
||||
queryParams.pageSize = pageSize;
|
||||
|
||||
this.setState({
|
||||
queryParams: queryParams
|
||||
});
|
||||
|
||||
await this.loadTableData(queryParams)
|
||||
};
|
||||
|
||||
handleSearchByName = name => {
|
||||
let query = {
|
||||
...this.state.queryParams,
|
||||
'pageIndex': 1,
|
||||
'pageSize': this.state.queryParams.pageSize,
|
||||
'name': name,
|
||||
}
|
||||
this.loadTableData(query);
|
||||
};
|
||||
|
||||
handleSearchByContent = content => {
|
||||
let query = {
|
||||
...this.state.queryParams,
|
||||
'pageIndex': 1,
|
||||
'pageSize': this.state.queryParams.pageSize,
|
||||
'content': content,
|
||||
}
|
||||
this.loadTableData(query);
|
||||
};
|
||||
|
||||
showDeleteConfirm(id, content) {
|
||||
let self = this;
|
||||
confirm({
|
||||
title: '您确定要删除此指令吗?',
|
||||
content: content,
|
||||
okText: '确定',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
onOk() {
|
||||
self.delete(id);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
showModal(title, assets = null) {
|
||||
this.setState({
|
||||
modalTitle: title,
|
||||
modalVisible: true,
|
||||
model: assets
|
||||
});
|
||||
};
|
||||
|
||||
handleCancelModal = e => {
|
||||
this.setState({
|
||||
modalTitle: '',
|
||||
modalVisible: false
|
||||
});
|
||||
};
|
||||
|
||||
handleChecked = e => {
|
||||
let checkedAssets = this.state.checkedAssets;
|
||||
if (e.target.checked) {
|
||||
checkedAssets.push(e.target.value);
|
||||
} else {
|
||||
for (let i = 0; i < checkedAssets.length; i++) {
|
||||
if (checkedAssets[i].id === e.target.value.id) {
|
||||
checkedAssets.splice(i, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.setState({
|
||||
checkedAssets: checkedAssets
|
||||
});
|
||||
};
|
||||
|
||||
executeCommand = e => {
|
||||
let checkedAssets = this.state.checkedAssets;
|
||||
if (checkedAssets.length === 0) {
|
||||
message.warning('请至少选择一个资产');
|
||||
return;
|
||||
}
|
||||
|
||||
let assets = checkedAssets.map(item => {
|
||||
return {
|
||||
id: item.id,
|
||||
name: item.name
|
||||
}
|
||||
});
|
||||
|
||||
window.location.href = '#/batch-command?command=' + this.state.command + '&assets=' + JSON.stringify(assets);
|
||||
};
|
||||
|
||||
handleOk = async (formData) => {
|
||||
// 弹窗 form 传来的数据
|
||||
this.setState({
|
||||
modalConfirmLoading: true
|
||||
});
|
||||
|
||||
if (formData.id) {
|
||||
// 向后台提交数据
|
||||
const result = await request.put('/commands/' + formData.id, formData);
|
||||
if (result.code === 1) {
|
||||
message.success('更新成功');
|
||||
|
||||
this.setState({
|
||||
modalVisible: false
|
||||
});
|
||||
this.loadTableData(this.state.queryParams);
|
||||
} else {
|
||||
message.error('更新失败 :( ' + result.message, 10);
|
||||
}
|
||||
} else {
|
||||
// 向后台提交数据
|
||||
const result = await request.post('/commands', formData);
|
||||
if (result.code === 1) {
|
||||
message.success('新增成功');
|
||||
|
||||
this.setState({
|
||||
modalVisible: false
|
||||
});
|
||||
this.loadTableData(this.state.queryParams);
|
||||
} else {
|
||||
message.error('新增失败 :( ' + result.message, 10);
|
||||
}
|
||||
}
|
||||
|
||||
this.setState({
|
||||
modalConfirmLoading: false
|
||||
});
|
||||
};
|
||||
|
||||
batchDelete = async () => {
|
||||
this.setState({
|
||||
delBtnLoading: true
|
||||
})
|
||||
try {
|
||||
let result = await request.delete('/commands/' + this.state.selectedRowKeys.join(','));
|
||||
if (result.code === 1) {
|
||||
message.success('操作成功', 3);
|
||||
this.setState({
|
||||
selectedRowKeys: []
|
||||
})
|
||||
await this.loadTableData(this.state.queryParams);
|
||||
} else {
|
||||
message.error('删除失败 :( ' + result.message, 10);
|
||||
}
|
||||
} finally {
|
||||
this.setState({
|
||||
delBtnLoading: false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
const columns = [{
|
||||
title: '序号',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
render: (id, record, index) => {
|
||||
return index + 1;
|
||||
}
|
||||
}, {
|
||||
title: '指令名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
render: (name, record) => {
|
||||
if (name && name.length > 20) {
|
||||
name = name.substring(0, 20) + "...";
|
||||
}
|
||||
|
||||
return (
|
||||
<Tooltip placement="topLeft" title={name}>
|
||||
{name}
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
}, {
|
||||
title: '指令内容',
|
||||
dataIndex: 'content',
|
||||
key: 'content',
|
||||
}, {
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
render: (text, record) => {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Button type="link" size='small' icon={<EditTwoTone/>}
|
||||
onClick={() => this.showModal('更新指令', record)}>编辑</Button>
|
||||
<Button type="link" size='small' icon={<DeleteTwoTone/>}
|
||||
onClick={() => this.showDeleteConfirm(record.id, record.name)}>删除</Button>
|
||||
<Button type="link" size='small' icon={<CodeTwoTone/>} onClick={async () => {
|
||||
|
||||
this.setState({
|
||||
assetsVisible: true,
|
||||
command: record.content
|
||||
});
|
||||
|
||||
let result = await request.get('/assets?protocol=ssh');
|
||||
if (result.code === 1) {
|
||||
this.setState({
|
||||
assets: result.data
|
||||
});
|
||||
} else {
|
||||
message.error(result.message);
|
||||
}
|
||||
}}>执行</Button>
|
||||
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
];
|
||||
|
||||
const selectedRowKeys = this.state.selectedRowKeys;
|
||||
const rowSelection = {
|
||||
selectedRowKeys: this.state.selectedRowKeys,
|
||||
onChange: (selectedRowKeys, selectedRows) => {
|
||||
this.setState({selectedRowKeys});
|
||||
},
|
||||
};
|
||||
const hasSelected = selectedRowKeys.length > 0;
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
className="site-page-header-ghost-wrapper page-herder"
|
||||
title="动态指令"
|
||||
breadcrumb={{
|
||||
routes: routes,
|
||||
itemRender: itemRender
|
||||
}}
|
||||
subTitle="批量动态指令执行"
|
||||
>
|
||||
</PageHeader>
|
||||
|
||||
<Content className="site-layout-background page-content">
|
||||
|
||||
<div style={{marginBottom: 20}}>
|
||||
<Row justify="space-around" align="middle" gutter={24}>
|
||||
<Col span={12} key={1}>
|
||||
<Title level={3}>指令列表</Title>
|
||||
</Col>
|
||||
<Col span={12} key={2} style={{textAlign: 'right'}}>
|
||||
<Space>
|
||||
<Search
|
||||
ref={this.inputRefOfName}
|
||||
placeholder="指令名称"
|
||||
allowClear
|
||||
onSearch={this.handleSearchByName}
|
||||
/>
|
||||
|
||||
<Search
|
||||
ref={this.inputRefOfContent}
|
||||
placeholder="指令内容"
|
||||
allowClear
|
||||
onSearch={this.handleSearchByContent}
|
||||
/>
|
||||
|
||||
<Tooltip title='重置查询'>
|
||||
|
||||
<Button icon={<UndoOutlined/>} onClick={() => {
|
||||
this.inputRefOfName.current.setValue('');
|
||||
this.inputRefOfContent.current.setValue('');
|
||||
this.loadTableData({pageIndex: 1, pageSize: 10, name: '', content: ''})
|
||||
}}>
|
||||
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
<Divider type="vertical"/>
|
||||
|
||||
<Tooltip title="新增">
|
||||
<Button type="dashed" icon={<PlusOutlined/>}
|
||||
onClick={() => this.showModal('新增指令', {})}>
|
||||
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
|
||||
<Tooltip title="刷新列表">
|
||||
<Button icon={<SyncOutlined/>} onClick={() => {
|
||||
this.loadTableData(this.state.queryParams)
|
||||
}}>
|
||||
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
|
||||
<Tooltip title="批量删除">
|
||||
<Button type="primary" danger disabled={!hasSelected} icon={<DeleteOutlined/>}
|
||||
loading={this.state.delBtnLoading}
|
||||
onClick={() => {
|
||||
const content = <div>
|
||||
您确定要删除选中的<Text style={{color: '#1890FF'}}
|
||||
strong>{this.state.selectedRowKeys.length}</Text>条记录吗？
|
||||
</div>;
|
||||
confirm({
|
||||
icon: <ExclamationCircleOutlined/>,
|
||||
content: content,
|
||||
onOk: () => {
|
||||
this.batchDelete()
|
||||
},
|
||||
onCancel() {
|
||||
|
||||
},
|
||||
});
|
||||
}}>
|
||||
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
</Space>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
<Table
|
||||
rowSelection={rowSelection}
|
||||
dataSource={this.state.items}
|
||||
columns={columns}
|
||||
position={'both'}
|
||||
pagination={{
|
||||
showSizeChanger: true,
|
||||
current: this.state.queryParams.pageIndex,
|
||||
pageSize: this.state.queryParams.pageSize,
|
||||
onChange: this.handleChangPage,
|
||||
onShowSizeChange: this.handleChangPage,
|
||||
total: this.state.total,
|
||||
showTotal: total => `总计 ${total} 条`
|
||||
}}
|
||||
loading={this.state.loading}
|
||||
/>
|
||||
|
||||
{
|
||||
this.state.modalVisible ?
|
||||
<DynamicCommandModal
|
||||
visible={this.state.modalVisible}
|
||||
title={this.state.modalTitle}
|
||||
handleOk={this.handleOk}
|
||||
handleCancel={this.handleCancelModal}
|
||||
confirmLoading={this.state.modalConfirmLoading}
|
||||
model={this.state.model}
|
||||
>
|
||||
|
||||
</DynamicCommandModal>
|
||||
: null
|
||||
}
|
||||
|
||||
<Modal
|
||||
title="选择资产"
|
||||
visible={this.state.assetsVisible}
|
||||
onOk={this.executeCommand}
|
||||
onCancel={() => {
|
||||
this.setState({
|
||||
assetsVisible: false
|
||||
});
|
||||
}}
|
||||
>
|
||||
{this.state.assets.map(item => {
|
||||
return (<Checkbox key={item.id} value={item}
|
||||
onChange={this.handleChecked}>{item.name}</Checkbox>);
|
||||
})}
|
||||
</Modal>
|
||||
|
||||
</Content>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default DynamicCommand;
|
||||
59
web/src/components/command/DynamicCommandModal.js
Normal file
59
web/src/components/command/DynamicCommandModal.js
Normal file
@ -0,0 +1,59 @@
|
||||
import React from 'react';
|
||||
import {Form, Input, Modal} from "antd/lib/index";
|
||||
|
||||
const {TextArea} = Input;
|
||||
|
||||
// 子级页面
|
||||
// Ant form create 表单内置方法
|
||||
|
||||
const DynamicCommandModal = ({title, visible, handleOk, handleCancel, confirmLoading, model}) => {
|
||||
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const formItemLayout = {
|
||||
labelCol: {span: 6},
|
||||
wrapperCol: {span: 18},
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
<Modal
|
||||
title={title}
|
||||
visible={visible}
|
||||
maskClosable={false}
|
||||
onOk={() => {
|
||||
form
|
||||
.validateFields()
|
||||
.then(values => {
|
||||
form.resetFields();
|
||||
handleOk(values);
|
||||
})
|
||||
.catch(info => {
|
||||
|
||||
});
|
||||
}}
|
||||
onCancel={handleCancel}
|
||||
confirmLoading={confirmLoading}
|
||||
okText='确定'
|
||||
cancelText='取消'
|
||||
>
|
||||
|
||||
<Form form={form} {...formItemLayout} initialValues={model}>
|
||||
<Form.Item name='id' noStyle>
|
||||
<Input hidden={true}/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="指令名称" name='name' rules={[{required: true, message: '请输入指令名称'}]}>
|
||||
<Input placeholder="请输入指令内容"/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="指令内容" name='content' rules={[{required: true, message: '请输入指令内容'}]}>
|
||||
<TextArea autoSize={{ minRows: 5, maxRows: 10 }} placeholder="一行一个命令"/>
|
||||
</Form.Item>
|
||||
|
||||
</Form>
|
||||
</Modal>
|
||||
)
|
||||
};
|
||||
|
||||
export default DynamicCommandModal;
|
||||
400
web/src/components/credential/Credential.js
Normal file
400
web/src/components/credential/Credential.js
Normal file
@ -0,0 +1,400 @@
|
||||
import React, {Component} from 'react';
|
||||
import "video-react/dist/video-react.css";
|
||||
|
||||
import {Button, Col, Divider, Input, Layout, Modal, PageHeader, Row, Space, Table, Tooltip, Typography} from "antd";
|
||||
import qs from "qs";
|
||||
import CredentialModal from "./CredentialModal";
|
||||
import request from "../../common/request";
|
||||
import {message} from "antd/es";
|
||||
import {
|
||||
DeleteOutlined, DeleteTwoTone,
|
||||
EditTwoTone,
|
||||
ExclamationCircleOutlined,
|
||||
PlusOutlined,
|
||||
SyncOutlined,
|
||||
UndoOutlined
|
||||
} from '@ant-design/icons';
|
||||
import {itemRender} from "../../utils/utils";
|
||||
|
||||
const confirm = Modal.confirm;
|
||||
const {Search} = Input;
|
||||
const {Title, Text} = Typography;
|
||||
const {Content} = Layout;
|
||||
const routes = [
|
||||
{
|
||||
path: '',
|
||||
breadcrumbName: '首页',
|
||||
},
|
||||
{
|
||||
path: 'credentials',
|
||||
breadcrumbName: '授权凭证',
|
||||
}
|
||||
];
|
||||
|
||||
class Credential extends Component {
|
||||
|
||||
inputRefOfName = React.createRef();
|
||||
|
||||
state = {
|
||||
items: [],
|
||||
total: 0,
|
||||
queryParams: {
|
||||
pageIndex: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
loading: false,
|
||||
modalVisible: false,
|
||||
modalTitle: '',
|
||||
modalConfirmLoading: false,
|
||||
model: null,
|
||||
selectedRowKeys: [],
|
||||
delBtnLoading: false,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.loadTableData();
|
||||
}
|
||||
|
||||
async delete(id) {
|
||||
const result = await request.delete('/credentials/' + id);
|
||||
if (result.code === 1) {
|
||||
message.success('删除成功');
|
||||
await this.loadTableData(this.state.queryParams);
|
||||
} else {
|
||||
message.error('删除失败 :( ' + result.message, 10);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
async loadTableData(queryParams) {
|
||||
this.setState({
|
||||
loading: true
|
||||
});
|
||||
|
||||
queryParams = queryParams || this.state.queryParams;
|
||||
|
||||
// queryParams
|
||||
let paramsStr = qs.stringify(queryParams);
|
||||
|
||||
let data = {
|
||||
items: [],
|
||||
total: 0
|
||||
};
|
||||
|
||||
try {
|
||||
let result = await request.get('/credentials/paging?' + paramsStr);
|
||||
if (result.code === 1) {
|
||||
data = result.data;
|
||||
} else {
|
||||
message.error(result.message);
|
||||
}
|
||||
} catch (e) {
|
||||
|
||||
} finally {
|
||||
const items = data.items.map(item => {
|
||||
return {'key': item['id'], ...item}
|
||||
})
|
||||
this.setState({
|
||||
items: items,
|
||||
total: data.total,
|
||||
queryParams: queryParams,
|
||||
loading: false
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
handleChangPage = (pageIndex, pageSize) => {
|
||||
let queryParams = this.state.queryParams;
|
||||
queryParams.pageIndex = pageIndex;
|
||||
queryParams.pageSize = pageSize;
|
||||
|
||||
this.setState({
|
||||
queryParams: queryParams
|
||||
});
|
||||
|
||||
this.loadTableData(queryParams)
|
||||
};
|
||||
|
||||
handleSearchByName = name => {
|
||||
let query = {
|
||||
...this.state.queryParams,
|
||||
'pageIndex': 1,
|
||||
'pageSize': this.state.queryParams.pageSize,
|
||||
'name': name,
|
||||
}
|
||||
|
||||
this.loadTableData(query);
|
||||
};
|
||||
|
||||
showDeleteConfirm(id, content) {
|
||||
let self = this;
|
||||
confirm({
|
||||
title: '您确定要删除此记录吗?',
|
||||
content: content,
|
||||
okText: '确定',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
onOk() {
|
||||
self.delete(id).then(r => {});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
showModal(title, idcard = null) {
|
||||
this.setState({
|
||||
modalTitle: title,
|
||||
modalVisible: true,
|
||||
model: idcard
|
||||
});
|
||||
};
|
||||
|
||||
handleCancelModal = e => {
|
||||
this.setState({
|
||||
modalTitle: '',
|
||||
modalVisible: false
|
||||
});
|
||||
};
|
||||
|
||||
handleOk = async (formData) => {
|
||||
// 弹窗 form 传来的数据
|
||||
this.setState({
|
||||
modalConfirmLoading: true
|
||||
});
|
||||
|
||||
if (formData.id) {
|
||||
// 向后台提交数据
|
||||
const result = await request.put('/credentials/' + formData.id, formData);
|
||||
if (result.code === 1) {
|
||||
message.success('操作成功', 3);
|
||||
|
||||
this.setState({
|
||||
modalVisible: false
|
||||
});
|
||||
await this.loadTableData(this.state.queryParams);
|
||||
} else {
|
||||
message.error('操作失败 :( ' + result.message, 10);
|
||||
}
|
||||
} else {
|
||||
// 向后台提交数据
|
||||
const result = await request.post('/credentials', formData);
|
||||
if (result.code === 1) {
|
||||
message.success('操作成功', 3);
|
||||
|
||||
this.setState({
|
||||
modalVisible: false
|
||||
});
|
||||
await this.loadTableData(this.state.queryParams);
|
||||
} else {
|
||||
message.error('操作失败 :( ' + result.message, 10);
|
||||
}
|
||||
}
|
||||
|
||||
this.setState({
|
||||
modalConfirmLoading: false
|
||||
});
|
||||
};
|
||||
|
||||
batchDelete = async () => {
|
||||
this.setState({
|
||||
delBtnLoading: true
|
||||
})
|
||||
try {
|
||||
let result = await request.delete('/credentials/' + this.state.selectedRowKeys.join(','));
|
||||
if (result.code === 1) {
|
||||
message.success('操作成功', 3);
|
||||
this.setState({
|
||||
selectedRowKeys: []
|
||||
})
|
||||
await this.loadTableData(this.state.queryParams);
|
||||
} else {
|
||||
message.error('删除失败 :( ' + result.message, 10);
|
||||
}
|
||||
} finally {
|
||||
this.setState({
|
||||
delBtnLoading: false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
const columns = [{
|
||||
title: '序号',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
render: (id, record, index) => {
|
||||
return index + 1;
|
||||
}
|
||||
}, {
|
||||
title: '凭证名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
render: (name, record) => {
|
||||
if (name && name.length > 20) {
|
||||
name = name.substring(0, 20) + "...";
|
||||
}
|
||||
return (
|
||||
<Tooltip placement="topLeft" title={name}>
|
||||
{name}
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
}, {
|
||||
title: '授权账户',
|
||||
dataIndex: 'username',
|
||||
key: 'username',
|
||||
}, {
|
||||
title: '授权密码',
|
||||
dataIndex: 'password',
|
||||
key: 'password',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
render: (text, record) => {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Button type="link" size='small' icon={<EditTwoTone/>} onClick={() => this.showModal('更新凭证', record)}>编辑</Button>
|
||||
<Button type="link" size='small' icon={<DeleteTwoTone />} onClick={() => this.showDeleteConfirm(record.id, record.name)}>删除</Button>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
];
|
||||
|
||||
const selectedRowKeys = this.state.selectedRowKeys;
|
||||
const rowSelection = {
|
||||
selectedRowKeys: this.state.selectedRowKeys,
|
||||
onChange: (selectedRowKeys, selectedRows) => {
|
||||
this.setState({selectedRowKeys});
|
||||
},
|
||||
};
|
||||
const hasSelected = selectedRowKeys.length > 0;
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
className="site-page-header-ghost-wrapper page-herder"
|
||||
title="授权凭证"
|
||||
breadcrumb={{
|
||||
routes: routes,
|
||||
itemRender: itemRender
|
||||
}}
|
||||
subTitle="访问资产的账户、密钥等"
|
||||
>
|
||||
</PageHeader>
|
||||
|
||||
<Content className="site-layout-background page-content">
|
||||
|
||||
<div style={{marginBottom: 20}}>
|
||||
|
||||
<Row justify="space-around" align="middle" gutter={24}>
|
||||
<Col span={12} key={1}>
|
||||
<Title level={3}>授权凭证列表</Title>
|
||||
</Col>
|
||||
<Col span={12} key={2} style={{textAlign: 'right'}}>
|
||||
<Space>
|
||||
<Search
|
||||
ref={this.inputRefOfName}
|
||||
placeholder="凭证名称"
|
||||
allowClear
|
||||
onSearch={this.handleSearchByName}
|
||||
/>
|
||||
|
||||
<Tooltip title='重置查询'>
|
||||
|
||||
<Button icon={<UndoOutlined/>} onClick={() => {
|
||||
this.inputRefOfName.current.setValue('');
|
||||
this.loadTableData({pageIndex: 1, pageSize: 10, name: ''})
|
||||
}}>
|
||||
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
<Divider type="vertical"/>
|
||||
|
||||
<Tooltip title="新增">
|
||||
<Button type="dashed" icon={<PlusOutlined/>}
|
||||
onClick={() => this.showModal('新增凭证', null)}>
|
||||
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
|
||||
<Tooltip title="刷新列表">
|
||||
<Button icon={<SyncOutlined/>} onClick={() => {
|
||||
this.loadTableData(this.state.queryParams)
|
||||
}}>
|
||||
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="批量删除">
|
||||
<Button type="primary" danger disabled={!hasSelected} icon={<DeleteOutlined/>}
|
||||
loading={this.state.delBtnLoading}
|
||||
onClick={() => {
|
||||
const content = <div>
|
||||
您确定要删除选中的<Text style={{color: '#1890FF'}}
|
||||
strong>{this.state.selectedRowKeys.length}</Text>条记录吗？
|
||||
</div>;
|
||||
confirm({
|
||||
icon: <ExclamationCircleOutlined/>,
|
||||
content: content,
|
||||
onOk: () => {
|
||||
this.batchDelete()
|
||||
},
|
||||
onCancel() {
|
||||
|
||||
},
|
||||
});
|
||||
}}>
|
||||
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
</Space>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
<Table
|
||||
rowSelection={rowSelection}
|
||||
rowKey='id'
|
||||
dataSource={this.state.items}
|
||||
columns={columns}
|
||||
position={'both'}
|
||||
pagination={{
|
||||
showSizeChanger: true,
|
||||
current: this.state.queryParams.pageIndex,
|
||||
pageSize: this.state.queryParams.pageSize,
|
||||
onChange: this.handleChangPage,
|
||||
onShowSizeChange: this.handleChangPage,
|
||||
total: this.state.total,
|
||||
showTotal: total => `总计 ${total} 条`
|
||||
}}
|
||||
loading={this.state.loading}
|
||||
/>
|
||||
|
||||
{
|
||||
this.state.modalVisible ?
|
||||
<CredentialModal
|
||||
visible={this.state.modalVisible}
|
||||
title={this.state.modalTitle}
|
||||
handleOk={this.handleOk}
|
||||
handleCancel={this.handleCancelModal}
|
||||
confirmLoading={this.state.modalConfirmLoading}
|
||||
model={this.state.model}
|
||||
>
|
||||
|
||||
</CredentialModal>
|
||||
: null
|
||||
}
|
||||
|
||||
</Content>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Credential;
|
||||
59
web/src/components/credential/CredentialModal.js
Normal file
59
web/src/components/credential/CredentialModal.js
Normal file
@ -0,0 +1,59 @@
|
||||
import React from 'react';
|
||||
import {Form, Input, Modal} from "antd/lib/index";
|
||||
|
||||
const CredentialModal = ({title, visible, handleOk, handleCancel, confirmLoading,model}) => {
|
||||
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const formItemLayout = {
|
||||
labelCol: {span: 6},
|
||||
wrapperCol: {span: 14},
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
<Modal
|
||||
title={title}
|
||||
visible={visible}
|
||||
maskClosable={false}
|
||||
|
||||
onOk={() => {
|
||||
form
|
||||
.validateFields()
|
||||
.then(values => {
|
||||
form.resetFields();
|
||||
handleOk(values);
|
||||
})
|
||||
.catch(info => {
|
||||
|
||||
});
|
||||
}}
|
||||
onCancel={handleCancel}
|
||||
confirmLoading={confirmLoading}
|
||||
okText='确定'
|
||||
cancelText='取消'
|
||||
>
|
||||
|
||||
<Form form={form} {...formItemLayout} initialValues={model}>
|
||||
<Form.Item name='id' noStyle>
|
||||
<Input hidden={true}/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="凭证名称" name='name' rules={[{required: true, message: '请输入凭证名称'}]}>
|
||||
<Input placeholder="请输入凭证名称"/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="授权账户" name='username' rules={[{required: true, message: '请输入授权账户'}]}>
|
||||
<Input placeholder="输入授权账户"/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="授权密码" name='password' rules={[{required: true, message: '请输入授权密码',}]}>
|
||||
<Input placeholder="输入授权密码"/>
|
||||
</Form.Item>
|
||||
|
||||
</Form>
|
||||
</Modal>
|
||||
)
|
||||
};
|
||||
|
||||
export default CredentialModal;
|
||||
4
web/src/components/dashboard/Dashboard.css
Normal file
4
web/src/components/dashboard/Dashboard.css
Normal file
@ -0,0 +1,4 @@
|
||||
.text-center{
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
196
web/src/components/dashboard/Dashboard.js
Normal file
196
web/src/components/dashboard/Dashboard.js
Normal file
@ -0,0 +1,196 @@
|
||||
import React, {Component} from 'react';
|
||||
import {Layout, PageHeader, Card, Row, Col, Progress, Typography, Popover, Statistic} from "antd";
|
||||
import {DesktopOutlined, IdcardOutlined, LikeOutlined, LinkOutlined, UserOutlined} from '@ant-design/icons';
|
||||
import {itemRender} from '../../utils/utils'
|
||||
import request from "../../common/request";
|
||||
import './Dashboard.css'
|
||||
import {Link} from "react-router-dom";
|
||||
|
||||
const {Content} = Layout;
|
||||
const {Title, Paragraph} = Typography;
|
||||
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '',
|
||||
breadcrumbName: '首页',
|
||||
},
|
||||
{
|
||||
path: 'dashboard',
|
||||
breadcrumbName: '仪表盘',
|
||||
}
|
||||
];
|
||||
|
||||
class Dashboard extends Component {
|
||||
|
||||
state = {
|
||||
status: {
|
||||
load: {
|
||||
load1: 0,
|
||||
load5: 0,
|
||||
load15: 0,
|
||||
},
|
||||
cpu: {
|
||||
percent: 0,
|
||||
logicalCount: 0,
|
||||
physicalCount: 0
|
||||
},
|
||||
memory: {
|
||||
usedPercent: 0,
|
||||
available: 0,
|
||||
total: 0,
|
||||
used: 0
|
||||
}
|
||||
},
|
||||
interval: null,
|
||||
counter: {}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.getCounter();
|
||||
this.getStatus();
|
||||
|
||||
this.setState({
|
||||
interval: setInterval(() => this.getStatus(), 5000)
|
||||
})
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.state.interval != null) {
|
||||
clearInterval(this.state.interval);
|
||||
}
|
||||
}
|
||||
|
||||
getStatus = async () => {
|
||||
let result = await request.get('/overview/status');
|
||||
if (result.code === 1) {
|
||||
this.setState({
|
||||
status: result.data
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
getCounter = async () => {
|
||||
let result = await request.get('/overview/counter');
|
||||
if (result.code === 1) {
|
||||
this.setState({
|
||||
counter: result.data
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
const loadContent = (
|
||||
<div>
|
||||
<p>最近1分钟负载：{this.state.status.load['load1'].toFixed(1)}</p>
|
||||
<p>最近5分钟负载：{this.state.status.load['load5'].toFixed(1)}</p>
|
||||
<p>最近15分钟负载：{this.state.status.load['load15'].toFixed(1)}</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
const cpuContent = (
|
||||
<div>
|
||||
<p>CPU型号：{this.state.status.cpu['modelName']}</p>
|
||||
<p>物理核心：{this.state.status.cpu['physicalCount']}</p>
|
||||
<p>逻辑核心：{this.state.status.cpu['logicalCount']}</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
className="site-page-header-ghost-wrapper page-herder"
|
||||
title="dashboard"
|
||||
breadcrumb={{
|
||||
routes: routes,
|
||||
itemRender: itemRender
|
||||
}}
|
||||
subTitle="仪表盘"
|
||||
>
|
||||
</PageHeader>
|
||||
|
||||
<div className="page-card">
|
||||
|
||||
<Row gutter={16}>
|
||||
<Col span={6}>
|
||||
<Card bordered={true}>
|
||||
<Link to={'/user'}>
|
||||
<Statistic title="在线用户" value={this.state.counter['user']}
|
||||
prefix={<UserOutlined/>}/>
|
||||
</Link>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Card bordered={true}>
|
||||
<Link to={'/asset'}>
|
||||
<Statistic title="存活资产" value={this.state.counter['asset']}
|
||||
prefix={<DesktopOutlined/>}/>
|
||||
</Link>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Card bordered={true}>
|
||||
<Link to={'/credential'}>
|
||||
<Statistic title="授权凭证" value={this.state.counter['credential']}
|
||||
prefix={<IdcardOutlined/>}/>
|
||||
</Link>
|
||||
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Card bordered={true}>
|
||||
<Link to={'/online-session'}>
|
||||
<Statistic title="在线会话" value={this.state.counter['onlineSession']}
|
||||
prefix={<LinkOutlined/>}/>
|
||||
</Link>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
<div className="page-card">
|
||||
<Card title="状态" bordered={true}>
|
||||
<Row>
|
||||
<Col span={4}>
|
||||
<Title level={5} className="text-center">负载状态</Title>
|
||||
<Popover placement="topLeft" title={"负载详情"} content={loadContent}>
|
||||
<Progress type="circle" width={100}
|
||||
percent={this.state.status.load['load1'].toFixed(1)}/>
|
||||
</Popover>
|
||||
|
||||
<Paragraph className="text-center">运行流畅</Paragraph>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Title level={5} className="text-center">CPU使用率</Title>
|
||||
<Popover placement="topLeft" title={"CPU详情"} content={cpuContent}>
|
||||
<Progress type="circle" width={100}
|
||||
percent={this.state.status.cpu['percent'].toFixed(1)}/>
|
||||
</Popover>
|
||||
<Paragraph className="text-center">{this.state.status.cpu['logicalCount']}核心</Paragraph>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Title level={5} className="text-center">内存使用率</Title>
|
||||
<Progress type="circle" width={100}
|
||||
percent={this.state.status.memory['usedPercent'].toFixed(1)}/>
|
||||
|
||||
<Paragraph className="text-center">
|
||||
{Math.floor(this.state.status.memory['used'] / 1024 / 1024)}
|
||||
/
|
||||
{Math.floor(this.state.status.memory['total'] / 1024 / 1024)}
|
||||
(MB)
|
||||
</Paragraph>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Dashboard;
|
||||
499
web/src/components/session/OfflineSession.js
Normal file
499
web/src/components/session/OfflineSession.js
Normal file
@ -0,0 +1,499 @@
|
||||
import React, {Component} from 'react';
|
||||
import "video-react/dist/video-react.css";
|
||||
|
||||
import {
|
||||
Button,
|
||||
Col,
|
||||
Divider,
|
||||
Input,
|
||||
Layout,
|
||||
Modal,
|
||||
notification,
|
||||
PageHeader,
|
||||
Row,
|
||||
Select,
|
||||
Space,
|
||||
Table,
|
||||
Tag,
|
||||
Tooltip,
|
||||
Typography
|
||||
} from "antd";
|
||||
import qs from "qs";
|
||||
import request from "../../common/request";
|
||||
import {differTime, formatDate, itemRender} from "../../utils/utils";
|
||||
import Playback from "./Playback";
|
||||
import {message} from "antd/es";
|
||||
import {
|
||||
DeleteOutlined, DeleteTwoTone,
|
||||
ExclamationCircleOutlined,
|
||||
PlaySquareTwoTone,
|
||||
SyncOutlined,
|
||||
UndoOutlined
|
||||
} from "@ant-design/icons";
|
||||
import {PROTOCOL_COLORS} from "../../common/constants";
|
||||
|
||||
const confirm = Modal.confirm;
|
||||
const {Content} = Layout;
|
||||
const {Search} = Input;
|
||||
const {Title, Text} = Typography;
|
||||
const routes = [
|
||||
{
|
||||
path: '',
|
||||
breadcrumbName: '首页',
|
||||
},
|
||||
{
|
||||
path: 'offlineSession',
|
||||
breadcrumbName: '离线会话',
|
||||
}
|
||||
];
|
||||
|
||||
class OfflineSession extends Component {
|
||||
|
||||
inputRefOfClientIp = React.createRef();
|
||||
|
||||
state = {
|
||||
items: [],
|
||||
total: 0,
|
||||
queryParams: {
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
protocol: '',
|
||||
userId: undefined,
|
||||
assetId: undefined
|
||||
},
|
||||
loading: false,
|
||||
playbackVisible: false,
|
||||
playbackSessionId: null,
|
||||
videoPlayerVisible: false,
|
||||
videoPlayerSource: null,
|
||||
selectedRowKeys: [],
|
||||
delBtnLoading: false,
|
||||
users: [],
|
||||
assets: [],
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.loadTableData();
|
||||
this.handleSearchByNickname('');
|
||||
this.handleSearchByAssetName('');
|
||||
}
|
||||
|
||||
async loadTableData(queryParams) {
|
||||
queryParams = queryParams || this.state.queryParams;
|
||||
queryParams['status'] = 'disconnected';
|
||||
|
||||
this.setState({
|
||||
queryParams: queryParams,
|
||||
loading: true
|
||||
});
|
||||
|
||||
// queryParams
|
||||
let paramsStr = qs.stringify(queryParams);
|
||||
|
||||
let data = {
|
||||
items: [],
|
||||
total: 0
|
||||
};
|
||||
|
||||
try {
|
||||
let result = await request.get('/sessions/paging?' + paramsStr);
|
||||
if (result.code === 1) {
|
||||
data = result.data;
|
||||
} else {
|
||||
message.error(result.message);
|
||||
}
|
||||
} catch (e) {
|
||||
|
||||
} finally {
|
||||
const items = data.items.map(item => {
|
||||
return {'key': item['id'], ...item}
|
||||
})
|
||||
this.setState({
|
||||
items: items,
|
||||
total: data.total,
|
||||
queryParams: queryParams,
|
||||
loading: false
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
handleChangPage = (pageIndex, pageSize) => {
|
||||
let queryParams = this.state.queryParams;
|
||||
queryParams.pageIndex = pageIndex;
|
||||
queryParams.pageSize = pageSize;
|
||||
|
||||
this.setState({
|
||||
queryParams: queryParams
|
||||
});
|
||||
|
||||
this.loadTableData(queryParams)
|
||||
};
|
||||
|
||||
showPlayback = (sessionId) => {
|
||||
this.setState({
|
||||
playbackVisible: true,
|
||||
playbackSessionId: sessionId
|
||||
});
|
||||
};
|
||||
|
||||
hidePlayback = () => {
|
||||
this.setState({
|
||||
playbackVisible: false,
|
||||
playbackSessionId: null
|
||||
});
|
||||
};
|
||||
|
||||
handleSearchByClientIp = clientIp => {
|
||||
let query = {
|
||||
...this.state.queryParams,
|
||||
'pageIndex': 1,
|
||||
'pageSize': this.state.queryParams.pageSize,
|
||||
'clientIp': clientIp,
|
||||
}
|
||||
this.loadTableData(query);
|
||||
}
|
||||
|
||||
handleChangeByProtocol = protocol => {
|
||||
let query = {
|
||||
...this.state.queryParams,
|
||||
'pageIndex': 1,
|
||||
'pageSize': this.state.queryParams.pageSize,
|
||||
'protocol': protocol,
|
||||
}
|
||||
this.loadTableData(query);
|
||||
}
|
||||
|
||||
handleSearchByNickname = async nickname => {
|
||||
const result = await request.get(`/users/paging?pageIndex=1&pageSize=100&nickname=${nickname}`);
|
||||
if (result.code !== 1) {
|
||||
message.error(result.message, 10);
|
||||
return;
|
||||
}
|
||||
|
||||
this.setState({
|
||||
users: result.data.items
|
||||
})
|
||||
}
|
||||
|
||||
handleChangeByUserId = userId => {
|
||||
let query = {
|
||||
...this.state.queryParams,
|
||||
'pageIndex': 1,
|
||||
'pageSize': this.state.queryParams.pageSize,
|
||||
'userId': userId,
|
||||
}
|
||||
this.loadTableData(query);
|
||||
}
|
||||
|
||||
handleSearchByAssetName = async assetName => {
|
||||
const result = await request.get(`/assets/paging?pageIndex=1&pageSize=100&name=${assetName}`);
|
||||
if (result.code !== 1) {
|
||||
message.error(result.message, 10);
|
||||
return;
|
||||
}
|
||||
|
||||
this.setState({
|
||||
assets: result.data.items
|
||||
})
|
||||
}
|
||||
|
||||
handleChangeByAssetId = (assetId, options) => {
|
||||
let query = {
|
||||
...this.state.queryParams,
|
||||
'pageIndex': 1,
|
||||
'pageSize': this.state.queryParams.pageSize,
|
||||
'assetId': assetId,
|
||||
}
|
||||
this.loadTableData(query);
|
||||
}
|
||||
|
||||
batchDelete = async () => {
|
||||
this.setState({
|
||||
delBtnLoading: true
|
||||
})
|
||||
try {
|
||||
let result = await request.delete('/sessions/' + this.state.selectedRowKeys.join(','));
|
||||
if (result.code === 1) {
|
||||
message.success('操作成功', 3);
|
||||
this.setState({
|
||||
selectedRowKeys: []
|
||||
})
|
||||
await this.loadTableData(this.state.queryParams);
|
||||
} else {
|
||||
message.error('删除失败 :( ' + result.message, 10);
|
||||
}
|
||||
} finally {
|
||||
this.setState({
|
||||
delBtnLoading: false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
const columns = [{
|
||||
title: '序号',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
render: (id, record, index) => {
|
||||
return index + 1;
|
||||
}
|
||||
}, {
|
||||
title: '用户昵称',
|
||||
dataIndex: 'creatorName',
|
||||
key: 'creatorName'
|
||||
}, {
|
||||
title: '来源IP',
|
||||
dataIndex: 'clientIp',
|
||||
key: 'clientIp'
|
||||
}, {
|
||||
title: '资产名称',
|
||||
dataIndex: 'assetName',
|
||||
key: 'assetName'
|
||||
}, {
|
||||
title: '远程连接',
|
||||
dataIndex: 'access',
|
||||
key: 'access',
|
||||
render: (text, record) => {
|
||||
|
||||
return `${record.username}@${record.ip}:${record.port}`;
|
||||
}
|
||||
}, {
|
||||
title: '屏幕大小',
|
||||
dataIndex: 'screen',
|
||||
key: 'screen',
|
||||
render: (text, record) => {
|
||||
|
||||
return `${record.width}x${record.height}`;
|
||||
}
|
||||
}, {
|
||||
title: '连接协议',
|
||||
dataIndex: 'protocol',
|
||||
key: 'protocol',
|
||||
render: (text, record) => {
|
||||
|
||||
return (<Tag color={PROTOCOL_COLORS[text]}>{text}</Tag>);
|
||||
}
|
||||
}, {
|
||||
title: '接入时间',
|
||||
dataIndex: 'connectedTime',
|
||||
key: 'connectedTime',
|
||||
render: (text, record) => {
|
||||
|
||||
return formatDate(text, 'yyyy-MM-dd hh:mm:ss');
|
||||
}
|
||||
}, {
|
||||
title: '接入时长',
|
||||
dataIndex: 'connectedTime',
|
||||
key: 'connectedTime',
|
||||
render: (text, record) => {
|
||||
return differTime(new Date(record['connectedTime']), new Date(record['disconnectedTime']));
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
render: (text, record) => {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Button type="link" size='small' icon={<PlaySquareTwoTone />} onClick={() => this.showPlayback(record.id)}>回放</Button>
|
||||
<Button type="link" size='small' icon={<DeleteTwoTone />} onClick={() => {
|
||||
confirm({
|
||||
title: '您确定要删除此会话吗?',
|
||||
content: '',
|
||||
okText: '确定',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
onOk() {
|
||||
del(record.id)
|
||||
}
|
||||
});
|
||||
|
||||
const del = async (id) => {
|
||||
const result = await request.delete(`/sessions/${id}`);
|
||||
if (result.code === 1) {
|
||||
notification['success']({
|
||||
message: '提示',
|
||||
description: '删除成功',
|
||||
});
|
||||
this.loadTableData();
|
||||
} else {
|
||||
notification['error']({
|
||||
message: '提示',
|
||||
description: '删除失败 :( ' + result.message,
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
}}>删除</Button>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
];
|
||||
|
||||
const selectedRowKeys = this.state.selectedRowKeys;
|
||||
const rowSelection = {
|
||||
selectedRowKeys: this.state.selectedRowKeys,
|
||||
onChange: (selectedRowKeys, selectedRows) => {
|
||||
this.setState({selectedRowKeys});
|
||||
},
|
||||
};
|
||||
const hasSelected = selectedRowKeys.length > 0;
|
||||
|
||||
const userOptions = this.state.users.map(d => <Select.Option key={d.id}
|
||||
value={d.id}>{d.nickname}</Select.Option>);
|
||||
const assetOptions = this.state.assets.map(d => <Select.Option key={d.id}
|
||||
value={d.id}>{d.name}</Select.Option>);
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
className="site-page-header-ghost-wrapper page-herder"
|
||||
title="离线会话"
|
||||
breadcrumb={{
|
||||
routes: routes,
|
||||
itemRender: itemRender
|
||||
}}
|
||||
subTitle="离线会话管理"
|
||||
>
|
||||
</PageHeader>
|
||||
|
||||
<Content className="site-layout-background page-content">
|
||||
<div style={{marginBottom: 20}}>
|
||||
<Row justify="space-around" align="middle" gutter={24}>
|
||||
<Col span={8} key={1}>
|
||||
<Title level={3}>离线会话列表</Title>
|
||||
</Col>
|
||||
<Col span={16} key={2} style={{textAlign: 'right'}}>
|
||||
<Space>
|
||||
|
||||
<Select
|
||||
style={{width: 200}}
|
||||
showSearch
|
||||
value={this.state.queryParams.userId}
|
||||
placeholder='用户昵称'
|
||||
onSearch={this.handleSearchByNickname}
|
||||
onChange={this.handleChangeByUserId}
|
||||
filterOption={false}
|
||||
>
|
||||
{userOptions}
|
||||
</Select>
|
||||
|
||||
<Search
|
||||
ref={this.inputRefOfClientIp}
|
||||
placeholder="来源IP"
|
||||
allowClear
|
||||
onSearch={this.handleSearchByClientIp}
|
||||
/>
|
||||
|
||||
<Select
|
||||
style={{width: 200}}
|
||||
showSearch
|
||||
value={this.state.queryParams.assetId}
|
||||
placeholder='资产名称'
|
||||
onSearch={this.handleSearchByAssetName}
|
||||
onChange={this.handleChangeByAssetId}
|
||||
filterOption={false}
|
||||
>
|
||||
{assetOptions}
|
||||
</Select>
|
||||
|
||||
<Select onChange={this.handleChangeByProtocol}
|
||||
value={this.state.queryParams.protocol ? this.state.queryParams.protocol : ''}
|
||||
style={{width: 100}}>
|
||||
<Select.Option value="">全部协议</Select.Option>
|
||||
<Select.Option value="rdp">rdp</Select.Option>
|
||||
<Select.Option value="ssh">ssh</Select.Option>
|
||||
<Select.Option value="vnc">vnc</Select.Option>
|
||||
<Select.Option value="telnet">telnet</Select.Option>
|
||||
</Select>
|
||||
|
||||
<Tooltip title='重置查询'>
|
||||
|
||||
<Button icon={<UndoOutlined/>} onClick={() => {
|
||||
this.inputRefOfClientIp.current.setValue('');
|
||||
this.loadTableData({
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
protocol: '',
|
||||
userId: undefined,
|
||||
assetId: undefined
|
||||
})
|
||||
}}>
|
||||
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
<Divider type="vertical"/>
|
||||
|
||||
<Tooltip title="刷新列表">
|
||||
<Button icon={<SyncOutlined/>} onClick={() => {
|
||||
this.loadTableData(this.state.queryParams)
|
||||
}}>
|
||||
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="批量删除">
|
||||
<Button type="primary" danger disabled={!hasSelected} icon={<DeleteOutlined/>}
|
||||
loading={this.state.delBtnLoading}
|
||||
onClick={() => {
|
||||
const content = <div>
|
||||
您确定要删除选中的<Text style={{color: '#1890FF'}}
|
||||
strong>{this.state.selectedRowKeys.length}</Text>条记录吗？
|
||||
</div>;
|
||||
confirm({
|
||||
icon: <ExclamationCircleOutlined/>,
|
||||
content: content,
|
||||
onOk: () => {
|
||||
this.batchDelete()
|
||||
},
|
||||
onCancel() {
|
||||
|
||||
},
|
||||
});
|
||||
}}>
|
||||
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
</Space>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
<Table rowSelection={rowSelection}
|
||||
dataSource={this.state.items}
|
||||
columns={columns}
|
||||
position={'both'}
|
||||
pagination={{
|
||||
showSizeChanger: true,
|
||||
current: this.state.queryParams.pageIndex,
|
||||
pageSize: this.state.queryParams.pageSize,
|
||||
onChange: this.handleChangPage,
|
||||
total: this.state.total,
|
||||
showTotal: total => `总计 ${total} 条`
|
||||
}}
|
||||
loading={this.state.loading}
|
||||
/>
|
||||
|
||||
<Modal
|
||||
title="会话回放"
|
||||
visible={this.state.playbackVisible}
|
||||
onCancel={this.hidePlayback}
|
||||
|
||||
width={window.innerWidth * 0.8}
|
||||
footer={null}
|
||||
destroyOnClose
|
||||
>
|
||||
<Playback sessionId={this.state.playbackSessionId}/>
|
||||
</Modal>
|
||||
</Content>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default OfflineSession;
|
||||
511
web/src/components/session/OnlineSession.js
Normal file
511
web/src/components/session/OnlineSession.js
Normal file
@ -0,0 +1,511 @@
|
||||
import React, {Component} from 'react';
|
||||
import "video-react/dist/video-react.css";
|
||||
|
||||
import {
|
||||
Button,
|
||||
Col,
|
||||
Divider,
|
||||
Input,
|
||||
Layout,
|
||||
Modal,
|
||||
notification,
|
||||
PageHeader,
|
||||
Row,
|
||||
Select,
|
||||
Space,
|
||||
Table,
|
||||
Tag,
|
||||
Tooltip,
|
||||
Typography
|
||||
} from "antd";
|
||||
import qs from "qs";
|
||||
import request from "../../common/request";
|
||||
import {differTime, formatDate, itemRender} from "../../utils/utils";
|
||||
import {message} from "antd/es";
|
||||
import {PROTOCOL_COLORS} from "../../common/constants";
|
||||
import {
|
||||
ApiTwoTone,
|
||||
DisconnectOutlined,
|
||||
ExclamationCircleOutlined,
|
||||
EyeTwoTone,
|
||||
SyncOutlined,
|
||||
UndoOutlined
|
||||
} from "@ant-design/icons";
|
||||
import Monitor from "../access/Monitor";
|
||||
|
||||
const confirm = Modal.confirm;
|
||||
const {Content} = Layout;
|
||||
const {Search} = Input;
|
||||
const {Title, Text} = Typography;
|
||||
const routes = [
|
||||
{
|
||||
path: '',
|
||||
breadcrumbName: '首页',
|
||||
},
|
||||
{
|
||||
path: 'onlineSession',
|
||||
breadcrumbName: '在线会话',
|
||||
}
|
||||
];
|
||||
|
||||
class OnlineSession extends Component {
|
||||
|
||||
inputRefOfClientIp = React.createRef();
|
||||
|
||||
state = {
|
||||
items: [],
|
||||
total: 0,
|
||||
queryParams: {
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
protocol: '',
|
||||
userId: undefined,
|
||||
assetId: undefined
|
||||
},
|
||||
loading: false,
|
||||
selectedRowKeys: [],
|
||||
delBtnLoading: false,
|
||||
users: [],
|
||||
assets: [],
|
||||
accessVisible: false,
|
||||
sessionWidth: 1024,
|
||||
sessionHeight: 768,
|
||||
sessionProtocol: ''
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.loadTableData();
|
||||
this.handleSearchByNickname('');
|
||||
this.handleSearchByAssetName('');
|
||||
}
|
||||
|
||||
async loadTableData(queryParams) {
|
||||
this.setState({
|
||||
loading: true
|
||||
});
|
||||
|
||||
queryParams = queryParams || this.state.queryParams;
|
||||
queryParams['status'] = 'connected';
|
||||
|
||||
// queryParams
|
||||
let paramsStr = qs.stringify(queryParams);
|
||||
|
||||
let data = {
|
||||
items: [],
|
||||
total: 0
|
||||
};
|
||||
|
||||
try {
|
||||
let result = await request.get('/sessions/paging?' + paramsStr);
|
||||
if (result.code === 1) {
|
||||
data = result.data;
|
||||
} else {
|
||||
message.error(result.message);
|
||||
}
|
||||
} catch (e) {
|
||||
|
||||
} finally {
|
||||
const items = data.items.map(item => {
|
||||
return {'key': item['id'], ...item}
|
||||
})
|
||||
this.setState({
|
||||
items: items,
|
||||
total: data.total,
|
||||
queryParams: queryParams,
|
||||
loading: false
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
handleChangPage = (pageIndex, pageSize) => {
|
||||
let queryParams = this.state.queryParams;
|
||||
queryParams.pageIndex = pageIndex;
|
||||
queryParams.pageSize = pageSize;
|
||||
|
||||
this.setState({
|
||||
queryParams: queryParams
|
||||
});
|
||||
|
||||
this.loadTableData(queryParams)
|
||||
};
|
||||
|
||||
handleSearchByClientIp = clientIp => {
|
||||
let query = {
|
||||
...this.state.queryParams,
|
||||
'pageIndex': 1,
|
||||
'pageSize': this.state.queryParams.pageSize,
|
||||
'clientIp': clientIp,
|
||||
}
|
||||
this.loadTableData(query);
|
||||
}
|
||||
|
||||
handleChangeByProtocol = protocol => {
|
||||
let query = {
|
||||
...this.state.queryParams,
|
||||
'pageIndex': 1,
|
||||
'pageSize': this.state.queryParams.pageSize,
|
||||
'protocol': protocol,
|
||||
}
|
||||
this.loadTableData(query);
|
||||
}
|
||||
|
||||
handleSearchByNickname = async nickname => {
|
||||
const result = await request.get(`/users/paging?pageIndex=1&pageSize=100&nickname=${nickname}`);
|
||||
if (result.code !== 1) {
|
||||
message.error(result.message, 10);
|
||||
return;
|
||||
}
|
||||
|
||||
this.setState({
|
||||
users: result.data.items
|
||||
})
|
||||
}
|
||||
|
||||
handleChangeByUserId = userId => {
|
||||
let query = {
|
||||
...this.state.queryParams,
|
||||
'pageIndex': 1,
|
||||
'pageSize': this.state.queryParams.pageSize,
|
||||
'userId': userId,
|
||||
}
|
||||
this.loadTableData(query);
|
||||
}
|
||||
|
||||
handleSearchByAssetName = async assetName => {
|
||||
const result = await request.get(`/assets/paging?pageIndex=1&pageSize=100&name=${assetName}`);
|
||||
if (result.code !== 1) {
|
||||
message.error(result.message, 10);
|
||||
return;
|
||||
}
|
||||
|
||||
this.setState({
|
||||
assets: result.data.items
|
||||
})
|
||||
}
|
||||
|
||||
handleChangeByAssetId = (assetId, options) => {
|
||||
let query = {
|
||||
...this.state.queryParams,
|
||||
'pageIndex': 1,
|
||||
'pageSize': this.state.queryParams.pageSize,
|
||||
'assetId': assetId,
|
||||
}
|
||||
this.loadTableData(query);
|
||||
}
|
||||
|
||||
batchDis = async () => {
|
||||
this.setState({
|
||||
delBtnLoading: true
|
||||
})
|
||||
try {
|
||||
let result = await request.post('/sessions/' + this.state.selectedRowKeys.join(',') + '/discontent');
|
||||
if (result.code === 1) {
|
||||
message.success('操作成功', 3);
|
||||
this.setState({
|
||||
selectedRowKeys: []
|
||||
})
|
||||
await this.loadTableData(this.state.queryParams);
|
||||
} else {
|
||||
message.error('删除失败 :( ' + result.message, 10);
|
||||
}
|
||||
} finally {
|
||||
this.setState({
|
||||
delBtnLoading: false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
showMonitor = (record) => {
|
||||
|
||||
this.setState({
|
||||
connectionId: record.connectionId,
|
||||
sessionProtocol: record.protocol,
|
||||
accessVisible: true,
|
||||
sessionWidth: record.width,
|
||||
sessionHeight: record.height,
|
||||
sessionTitle: `${record.username}@${record.ip}:${record.port} ${record.width}x${record.height}`
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
const columns = [{
|
||||
title: '序号',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
render: (id, record, index) => {
|
||||
return index + 1;
|
||||
}
|
||||
}, {
|
||||
title: '用户昵称',
|
||||
dataIndex: 'creatorName',
|
||||
key: 'creatorName'
|
||||
}, {
|
||||
title: '来源IP',
|
||||
dataIndex: 'clientIp',
|
||||
key: 'clientIp'
|
||||
}, {
|
||||
title: '资产名称',
|
||||
dataIndex: 'assetName',
|
||||
key: 'assetName'
|
||||
}, {
|
||||
title: '远程连接',
|
||||
dataIndex: 'access',
|
||||
key: 'access',
|
||||
render: (text, record) => {
|
||||
|
||||
return `${record.username}@${record.ip}:${record.port}`;
|
||||
}
|
||||
}, {
|
||||
title: '屏幕大小',
|
||||
dataIndex: 'screen',
|
||||
key: 'screen',
|
||||
render: (text, record) => {
|
||||
|
||||
return `${record.width}x${record.height}`;
|
||||
}
|
||||
}, {
|
||||
title: '连接协议',
|
||||
dataIndex: 'protocol',
|
||||
key: 'protocol',
|
||||
render: (text, record) => {
|
||||
|
||||
return (<Tag color={PROTOCOL_COLORS[text]}>{text}</Tag>);
|
||||
}
|
||||
}, {
|
||||
title: '接入时间',
|
||||
dataIndex: 'connectedTime',
|
||||
key: 'connectedTime',
|
||||
render: (text, record) => {
|
||||
|
||||
return formatDate(text, 'yyyy-MM-dd hh:mm:ss');
|
||||
}
|
||||
}, {
|
||||
title: '接入时长',
|
||||
dataIndex: 'connectedTime',
|
||||
key: 'connectedTime',
|
||||
render: (text, record) => {
|
||||
return differTime(new Date(record['connectedTime']), new Date());
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
render: (text, record) => {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Button type="link" size='small' icon={<EyeTwoTone/>} onClick={() => {
|
||||
this.showMonitor(record)
|
||||
}}>监控</Button>
|
||||
<Button type="link" size='small' icon={<ApiTwoTone/>} onClick={async () => {
|
||||
|
||||
confirm({
|
||||
title: '您确定要断开此会话吗?',
|
||||
content: '',
|
||||
okText: '确定',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
onOk() {
|
||||
dis(record.id)
|
||||
}
|
||||
});
|
||||
|
||||
const dis = async (id) => {
|
||||
const result = await request.post(`/sessions/${id}/discontent`);
|
||||
if (result.code === 1) {
|
||||
notification['success']({
|
||||
message: '提示',
|
||||
description: '断开成功',
|
||||
});
|
||||
this.loadTableData();
|
||||
} else {
|
||||
notification['success']({
|
||||
message: '提示',
|
||||
description: '断开失败 :( ' + result.message,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
}}>断开</Button>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
];
|
||||
|
||||
const selectedRowKeys = this.state.selectedRowKeys;
|
||||
const rowSelection = {
|
||||
selectedRowKeys: selectedRowKeys,
|
||||
onChange: (selectedRowKeys, selectedRows) => {
|
||||
this.setState({selectedRowKeys});
|
||||
},
|
||||
};
|
||||
const hasSelected = selectedRowKeys.length > 0;
|
||||
|
||||
const userOptions = this.state.users.map(d => <Select.Option key={d.id}
|
||||
value={d.id}>{d.nickname}</Select.Option>);
|
||||
const assetOptions = this.state.assets.map(d => <Select.Option key={d.id}
|
||||
value={d.id}>{d.name}</Select.Option>);
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
className="site-page-header-ghost-wrapper page-herder"
|
||||
title="在线会话"
|
||||
breadcrumb={{
|
||||
routes: routes,
|
||||
itemRender: itemRender
|
||||
}}
|
||||
subTitle="查询实时在线会话"
|
||||
>
|
||||
</PageHeader>
|
||||
|
||||
<Content className="site-layout-background page-content">
|
||||
|
||||
<div style={{marginBottom: 20}}>
|
||||
<Row justify="space-around" align="middle" gutter={24}>
|
||||
<Col span={8} key={1}>
|
||||
<Title level={3}>在线会话列表</Title>
|
||||
</Col>
|
||||
<Col span={16} key={2} style={{textAlign: 'right'}}>
|
||||
<Space>
|
||||
|
||||
<Select
|
||||
style={{width: 200}}
|
||||
showSearch
|
||||
value={this.state.queryParams.userId}
|
||||
placeholder='用户昵称'
|
||||
onSearch={this.handleSearchByNickname}
|
||||
onChange={this.handleChangeByUserId}
|
||||
filterOption={false}
|
||||
>
|
||||
{userOptions}
|
||||
</Select>
|
||||
|
||||
<Search
|
||||
ref={this.inputRefOfClientIp}
|
||||
placeholder="来源IP"
|
||||
allowClear
|
||||
onSearch={this.handleSearchByClientIp}
|
||||
/>
|
||||
|
||||
<Select
|
||||
style={{width: 200}}
|
||||
showSearch
|
||||
value={this.state.queryParams.assetId}
|
||||
placeholder='资产名称'
|
||||
onSearch={this.handleSearchByAssetName}
|
||||
onChange={this.handleChangeByAssetId}
|
||||
filterOption={false}
|
||||
>
|
||||
{assetOptions}
|
||||
</Select>
|
||||
|
||||
<Select onChange={this.handleChangeByProtocol}
|
||||
value={this.state.queryParams.protocol ? this.state.queryParams.protocol : ''}
|
||||
style={{width: 100}}>
|
||||
<Select.Option value="">全部协议</Select.Option>
|
||||
<Select.Option value="rdp">rdp</Select.Option>
|
||||
<Select.Option value="ssh">ssh</Select.Option>
|
||||
<Select.Option value="vnc">vnc</Select.Option>
|
||||
<Select.Option value="telnet">telnet</Select.Option>
|
||||
</Select>
|
||||
|
||||
<Tooltip title='重置查询'>
|
||||
|
||||
<Button icon={<UndoOutlined/>} onClick={() => {
|
||||
this.inputRefOfClientIp.current.setValue('');
|
||||
this.loadTableData({
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
protocol: '',
|
||||
userId: undefined,
|
||||
assetId: undefined
|
||||
})
|
||||
}}>
|
||||
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
<Divider type="vertical"/>
|
||||
|
||||
<Tooltip title="刷新列表">
|
||||
<Button icon={<SyncOutlined/>} onClick={() => {
|
||||
this.loadTableData(this.state.queryParams)
|
||||
}}>
|
||||
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="批量断开">
|
||||
<Button type="primary" danger disabled={!hasSelected}
|
||||
icon={<DisconnectOutlined/>}
|
||||
loading={this.state.delBtnLoading}
|
||||
onClick={() => {
|
||||
const content = <div>
|
||||
您确定要断开选中的<Text style={{color: '#1890FF'}}
|
||||
strong>{this.state.selectedRowKeys.length}</Text>个会话吗？
|
||||
</div>;
|
||||
confirm({
|
||||
icon: <ExclamationCircleOutlined/>,
|
||||
content: content,
|
||||
onOk: () => {
|
||||
this.batchDis()
|
||||
},
|
||||
onCancel() {
|
||||
|
||||
},
|
||||
});
|
||||
}}>
|
||||
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
</Space>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
<Table rowSelection={rowSelection}
|
||||
dataSource={this.state.items}
|
||||
columns={columns}
|
||||
position={'both'}
|
||||
pagination={{
|
||||
showSizeChanger: true,
|
||||
current: this.state.queryParams.pageIndex,
|
||||
pageSize: this.state.queryParams.pageSize,
|
||||
onChange: this.handleChangPage,
|
||||
total: this.state.total,
|
||||
showTotal: total => `总计 ${total} 条`
|
||||
}}
|
||||
loading={this.state.loading}
|
||||
/>
|
||||
|
||||
<Modal
|
||||
className='monitor'
|
||||
title={this.state.sessionTitle}
|
||||
centered
|
||||
visible={this.state.accessVisible}
|
||||
footer={null}
|
||||
width={window.innerWidth * 0.8}
|
||||
height={window.innerWidth * 0.8 / this.state.sessionWidth * this.state.sessionHeight}
|
||||
onCancel={() => {
|
||||
this.setState({accessVisible: false})
|
||||
}}
|
||||
>
|
||||
<Monitor connectionId={this.state.connectionId}
|
||||
width={this.state.sessionWidth}
|
||||
height={this.state.sessionHeight}
|
||||
protocol={this.state.sessionProtocol}
|
||||
rate={window.innerWidth * 0.8 / this.state.sessionWidth}>
|
||||
|
||||
</Monitor>
|
||||
</Modal>
|
||||
</Content>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default OnlineSession;
|
||||
173
web/src/components/session/Playback.js
Normal file
173
web/src/components/session/Playback.js
Normal file
@ -0,0 +1,173 @@
|
||||
import React, {Component} from 'react';
|
||||
import Guacamole from "guacamole-common-js";
|
||||
|
||||
class Playback extends Component {
|
||||
|
||||
componentDidMount() {
|
||||
let sessionId = this.props.sessionId;
|
||||
this.initPlayer(sessionId);
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
|
||||
}
|
||||
|
||||
initPlayer(sessionId) {
|
||||
var RECORDING_URL = '/recording/' + sessionId + '.guac';
|
||||
|
||||
var player = document.getElementById('player');
|
||||
var display = document.getElementById('display');
|
||||
var playPause = document.getElementById('play-pause');
|
||||
var position = document.getElementById('position');
|
||||
var positionSlider = document.getElementById('position-slider');
|
||||
var duration = document.getElementById('duration');
|
||||
|
||||
var tunnel = new Guacamole.StaticHTTPTunnel(RECORDING_URL);
|
||||
var recording = new Guacamole.SessionRecording(tunnel);
|
||||
|
||||
var recordingDisplay = recording.getDisplay();
|
||||
|
||||
/**
|
||||
* Converts the given number to a string, adding leading zeroes as necessary
|
||||
* to reach a specific minimum length.
|
||||
*
|
||||
* @param {Numer} num
|
||||
* The number to convert to a string.
|
||||
*
|
||||
* @param {Number} minLength
|
||||
* The minimum length of the resulting string, in characters.
|
||||
*
|
||||
* @returns {String}
|
||||
* A string representation of the given number, with leading zeroes
|
||||
* added as necessary to reach the specified minimum length.
|
||||
*/
|
||||
var zeroPad = function zeroPad(num, minLength) {
|
||||
|
||||
// Convert provided number to string
|
||||
var str = num.toString();
|
||||
|
||||
// Add leading zeroes until string is long enough
|
||||
while (str.length < minLength)
|
||||
str = '0' + str;
|
||||
|
||||
return str;
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Converts the given millisecond timestamp into a human-readable string in
|
||||
* MM:SS format.
|
||||
*
|
||||
* @param {Number} millis
|
||||
* An arbitrary timestamp, in milliseconds.
|
||||
*
|
||||
* @returns {String}
|
||||
* A human-readable string representation of the given timestamp, in
|
||||
* MM:SS format.
|
||||
*/
|
||||
var formatTime = function formatTime(millis) {
|
||||
|
||||
// Calculate total number of whole seconds
|
||||
var totalSeconds = Math.floor(millis / 1000);
|
||||
|
||||
// Split into seconds and minutes
|
||||
var seconds = totalSeconds % 60;
|
||||
var minutes = Math.floor(totalSeconds / 60);
|
||||
|
||||
// Format seconds and minutes as MM:SS
|
||||
return zeroPad(minutes, 2) + ':' + zeroPad(seconds, 2);
|
||||
|
||||
};
|
||||
|
||||
// Add playback display to DOM
|
||||
display.appendChild(recordingDisplay.getElement());
|
||||
|
||||
// Begin downloading the recording
|
||||
recording.connect();
|
||||
|
||||
// If playing, the play/pause button should read "Pause"
|
||||
recording.onplay = function () {
|
||||
playPause.textContent = 'Pause';
|
||||
};
|
||||
|
||||
// If paused, the play/pause button should read "Play"
|
||||
recording.onpause = function () {
|
||||
playPause.textContent = 'Play';
|
||||
};
|
||||
|
||||
// Toggle play/pause when display or button are clicked
|
||||
display.onclick = playPause.onclick = function () {
|
||||
if (!recording.isPlaying())
|
||||
recording.play();
|
||||
else
|
||||
recording.pause();
|
||||
};
|
||||
|
||||
// Fit display within containing div
|
||||
recordingDisplay.onresize = function displayResized(width, height) {
|
||||
|
||||
// Do not scale if display has no width
|
||||
if (!width)
|
||||
return;
|
||||
|
||||
// Scale display to fit width of container
|
||||
recordingDisplay.scale(display.offsetWidth / width);
|
||||
|
||||
};
|
||||
|
||||
// Update slider and status when playback position changes
|
||||
recording.onseek = function positionChanged(millis) {
|
||||
position.textContent = formatTime(millis);
|
||||
positionSlider.value = millis;
|
||||
};
|
||||
|
||||
// Update slider and status when duration changes
|
||||
recording.onprogress = function durationChanged(millis) {
|
||||
duration.textContent = formatTime(millis);
|
||||
positionSlider.max = millis;
|
||||
};
|
||||
|
||||
// Seek within recording if slider is moved
|
||||
positionSlider.onchange = function sliderPositionChanged() {
|
||||
|
||||
// Request seek
|
||||
recording.seek(positionSlider.value, function seekComplete() {
|
||||
|
||||
// Seek has completed
|
||||
player.className = '';
|
||||
|
||||
});
|
||||
|
||||
// Seek is in progress
|
||||
player.className = 'seeking';
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div id="player">
|
||||
|
||||
<div id="display">
|
||||
<div className="notification-container">
|
||||
<div className="seek-notification">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="controls">
|
||||
<button id="play-pause">Play</button>
|
||||
<input id="position-slider" type="range"/>
|
||||
<span id="position">00:00</span>
|
||||
<span>/</span>
|
||||
<span id="duration">00:00</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Playback;
|
||||
315
web/src/components/setting/Setting.js
Normal file
315
web/src/components/setting/Setting.js
Normal file
@ -0,0 +1,315 @@
|
||||
import React, {Component} from 'react';
|
||||
import {Layout, PageHeader, Switch, Select} from "antd";
|
||||
import {itemRender} from '../../utils/utils'
|
||||
import {Form, Input, Button, Checkbox} from "antd";
|
||||
import request from "../../common/request";
|
||||
import {message} from "antd/es";
|
||||
|
||||
const {Content} = Layout;
|
||||
const {Option} = Select;
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '',
|
||||
breadcrumbName: '首页',
|
||||
},
|
||||
{
|
||||
path: 'setting',
|
||||
breadcrumbName: '系统设置',
|
||||
}
|
||||
];
|
||||
|
||||
const formItemLayout = {
|
||||
labelCol: {span: 3},
|
||||
wrapperCol: {span: 9},
|
||||
};
|
||||
|
||||
const formTailLayout = {
|
||||
labelCol: {span: 3},
|
||||
wrapperCol: {span: 9, offset: 3},
|
||||
};
|
||||
|
||||
class Setting extends Component {
|
||||
|
||||
state = {}
|
||||
|
||||
settingFormRef = React.createRef();
|
||||
|
||||
componentDidMount() {
|
||||
this.getProperties();
|
||||
}
|
||||
|
||||
changeProperties = async (values) => {
|
||||
let result = await request.put('/properties', values);
|
||||
if (result.code === 1) {
|
||||
message.success('修改成功');
|
||||
} else {
|
||||
message.error(result.message);
|
||||
}
|
||||
}
|
||||
|
||||
getProperties = async () => {
|
||||
|
||||
// eslint-disable-next-line no-extend-native
|
||||
String.prototype.bool = function() {
|
||||
return (/^true$/i).test(this);
|
||||
};
|
||||
|
||||
let result = await request.get('/properties');
|
||||
if (result.code === 1) {
|
||||
let properties = {}
|
||||
|
||||
for (let i = 0; i < result.data.length; i++) {
|
||||
let item = result.data[i];
|
||||
if (item['name'].startsWith('enable') ||
|
||||
item['name'].startsWith('disable')) {
|
||||
properties[item['name']] = item['value'].bool()
|
||||
}else {
|
||||
properties[item['name']] = item['value']
|
||||
}
|
||||
}
|
||||
this.settingFormRef.current.setFieldsValue(properties)
|
||||
|
||||
} else {
|
||||
message.error(result.message);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
className="site-page-header-ghost-wrapper page-herder"
|
||||
title="系统设置"
|
||||
breadcrumb={{
|
||||
routes: routes,
|
||||
itemRender: itemRender
|
||||
}}
|
||||
subTitle="系统设置"
|
||||
>
|
||||
</PageHeader>
|
||||
|
||||
<Content className="site-layout-background page-content">
|
||||
|
||||
<Form ref={this.settingFormRef} name="password" onFinish={this.changeProperties}>
|
||||
<h3>Guacd 服务配置</h3>
|
||||
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="host"
|
||||
label="监听地址"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '监听地址',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input type='text' placeholder="请输入监听地址"/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="port"
|
||||
label="监听端口"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '监听端口',
|
||||
min: 1,
|
||||
max: 65535
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input type='number' placeholder="请输入监听端口"/>
|
||||
</Form.Item>
|
||||
|
||||
|
||||
<h3>远程桌面（RDP）配置</h3>
|
||||
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="enable-drive"
|
||||
label="启用设备映射"
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch checkedChildren="开启" unCheckedChildren="关闭"/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="drive-name"
|
||||
label="设备名称"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入设备名称',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input type='text' placeholder="请输入设备名称"/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="drive-path"
|
||||
label="设备路径"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入设备路径',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input type='text' placeholder="请输入设备路径"/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="enable-wallpaper"
|
||||
label="启用桌面墙纸"
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch checkedChildren="开启" unCheckedChildren="关闭"/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="enable-theming"
|
||||
label="启用桌面主题"
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch checkedChildren="开启" unCheckedChildren="关闭"/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="enable-font-smoothing"
|
||||
label="启用字体平滑（ClearType）"
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch checkedChildren="开启" unCheckedChildren="关闭"/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="enable-full-window-drag"
|
||||
label="启用全窗口拖拽"
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch checkedChildren="开启" unCheckedChildren="关闭"/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="enable-desktop-composition"
|
||||
label="启用桌面合成效果（Aero）"
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch checkedChildren="开启" unCheckedChildren="关闭"/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="enable-menu-animations"
|
||||
label="启用菜单动画"
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch checkedChildren="开启" unCheckedChildren="关闭"/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="disable-bitmap-caching"
|
||||
label="禁用位图缓存"
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch checkedChildren="开启" unCheckedChildren="关闭"/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="disable-offscreen-caching"
|
||||
label="禁用离屏缓存"
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch checkedChildren="开启" unCheckedChildren="关闭"/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="disable-glyph-caching"
|
||||
label="禁用字形缓存"
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch checkedChildren="开启" unCheckedChildren="关闭"/>
|
||||
</Form.Item>
|
||||
|
||||
<h3>SSH配置</h3>
|
||||
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="font-name"
|
||||
label="字体名称"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '字体名称',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input type='text' placeholder="请输入字体名称"/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="font-size"
|
||||
label="字体大小"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '字体大小',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input type='number' placeholder="请输入字体大小"/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="color-scheme"
|
||||
label="颜色主题"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '颜色主题',
|
||||
},
|
||||
]}
|
||||
initialValue="gray-black"
|
||||
>
|
||||
<Select style={{width: 120}} onChange={null}>
|
||||
<Option value="gray-black">黑底灰字</Option>
|
||||
<Option value="green-black">黑底绿字</Option>
|
||||
<Option value="white-black">黑底白字</Option>
|
||||
<Option value="black-white">白底黑字</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="enable-sftp"
|
||||
label="启用SFTP"
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch checkedChildren="开启" unCheckedChildren="关闭"/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item {...formTailLayout}>
|
||||
<Button type="primary" htmlType="submit">
|
||||
提交
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
</Content>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Setting;
|
||||
144
web/src/components/user/Info.js
Normal file
144
web/src/components/user/Info.js
Normal file
@ -0,0 +1,144 @@
|
||||
import React, {Component} from 'react';
|
||||
import {Layout, PageHeader} from "antd";
|
||||
import {itemRender} from '../../utils/utils'
|
||||
import {Form, Input, Button, Checkbox} from "antd";
|
||||
import request from "../../common/request";
|
||||
import {message} from "antd/es";
|
||||
|
||||
const {Content} = Layout;
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '',
|
||||
breadcrumbName: '首页',
|
||||
},
|
||||
{
|
||||
path: 'info',
|
||||
breadcrumbName: '个人中心',
|
||||
}
|
||||
];
|
||||
|
||||
const formItemLayout = {
|
||||
labelCol: {span: 3},
|
||||
wrapperCol: {span: 6},
|
||||
};
|
||||
const formTailLayout = {
|
||||
labelCol: {span: 3},
|
||||
wrapperCol: {span: 6, offset: 3},
|
||||
};
|
||||
|
||||
class Info extends Component {
|
||||
|
||||
state = {}
|
||||
|
||||
passwordFormRef = React.createRef();
|
||||
|
||||
onNewPasswordChange(value) {
|
||||
this.setState({
|
||||
'newPassword': value.target.value
|
||||
})
|
||||
}
|
||||
|
||||
onNewPassword2Change = (value) => {
|
||||
this.setState({
|
||||
...this.validateNewPassword(value.target.value),
|
||||
'newPassword2': value.target.value
|
||||
})
|
||||
}
|
||||
|
||||
validateNewPassword = (newPassword2) => {
|
||||
if (newPassword2 === this.state.newPassword) {
|
||||
return {
|
||||
validateStatus: 'success',
|
||||
errorMsg: null,
|
||||
};
|
||||
}
|
||||
return {
|
||||
validateStatus: 'error',
|
||||
errorMsg: '两次输入的密码不一致',
|
||||
};
|
||||
}
|
||||
|
||||
changePassword = async (values) => {
|
||||
let result = await request.post('/change-password', values);
|
||||
if (result.code === 1) {
|
||||
message.success('密码修改成功');
|
||||
} else {
|
||||
message.error(result.message);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
className="site-page-header-ghost-wrapper page-herder"
|
||||
title="个人中心"
|
||||
breadcrumb={{
|
||||
routes: routes,
|
||||
itemRender: itemRender
|
||||
}}
|
||||
subTitle="个人中心"
|
||||
>
|
||||
</PageHeader>
|
||||
|
||||
<Content className="site-layout-background page-content">
|
||||
|
||||
<h1>修改密码</h1>
|
||||
<Form ref={this.passwordFormRef} name="password" onFinish={this.changePassword}>
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="oldPassword"
|
||||
label="原始密码"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '原始密码',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input type='password' placeholder="请输入原始密码"/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="newPassword"
|
||||
label="新的密码"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入新的密码',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input type='password' placeholder="新的密码" onChange={(value) => this.onNewPasswordChange(value)}/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
{...formItemLayout}
|
||||
name="newPassword2"
|
||||
label="确认密码"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '请和上面输入新的密码保持一致',
|
||||
},
|
||||
]}
|
||||
validateStatus={this.state.validateStatus}
|
||||
help={this.state.errorMsg || ''}
|
||||
>
|
||||
<Input type='password' placeholder="请和上面输入新的密码保持一致" onChange={(value) => this.onNewPassword2Change(value)}/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item {...formTailLayout}>
|
||||
<Button type="primary" htmlType="submit">
|
||||
提交
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Content>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Info;
|
||||
431
web/src/components/user/User.js
Normal file
431
web/src/components/user/User.js
Normal file
@ -0,0 +1,431 @@
|
||||
import React, {Component} from 'react';
|
||||
import {itemRender} from '../../utils/utils'
|
||||
|
||||
import {
|
||||
Badge,
|
||||
Button,
|
||||
Col,
|
||||
Divider,
|
||||
Input,
|
||||
Layout,
|
||||
Modal,
|
||||
PageHeader,
|
||||
Row,
|
||||
Space,
|
||||
Table,
|
||||
Tooltip,
|
||||
Typography,
|
||||
} from "antd";
|
||||
import qs from "qs";
|
||||
import UserModal from "./UserModal";
|
||||
import request from "../../common/request";
|
||||
import {message} from "antd/es";
|
||||
import {
|
||||
DeleteOutlined, DeleteTwoTone,
|
||||
EditTwoTone,
|
||||
ExclamationCircleOutlined,
|
||||
PlusOutlined,
|
||||
SyncOutlined,
|
||||
UndoOutlined
|
||||
} from '@ant-design/icons';
|
||||
|
||||
const confirm = Modal.confirm;
|
||||
const {Search} = Input;
|
||||
const {Title, Text} = Typography;
|
||||
const {Content} = Layout;
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '',
|
||||
breadcrumbName: '首页',
|
||||
},
|
||||
{
|
||||
path: 'user',
|
||||
breadcrumbName: '用户',
|
||||
}
|
||||
];
|
||||
|
||||
class User extends Component {
|
||||
|
||||
inputRefOfNickname = React.createRef();
|
||||
inputRefOfUsername = React.createRef();
|
||||
|
||||
state = {
|
||||
items: [],
|
||||
total: 0,
|
||||
queryParams: {
|
||||
pageIndex: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
loading: false,
|
||||
modalVisible: false,
|
||||
modalTitle: '',
|
||||
modalConfirmLoading: false,
|
||||
model: null,
|
||||
selectedRowKeys: [],
|
||||
delBtnLoading: false,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.loadTableData();
|
||||
}
|
||||
|
||||
async delete(id) {
|
||||
let result = await request.delete('/users/' + id);
|
||||
if (result.code === 1) {
|
||||
message.success('操作成功', 3);
|
||||
await this.loadTableData(this.state.queryParams);
|
||||
} else {
|
||||
message.error('删除失败 :( ' + result.message, 10);
|
||||
}
|
||||
}
|
||||
|
||||
async loadTableData(queryParams) {
|
||||
this.setState({
|
||||
loading: true
|
||||
});
|
||||
|
||||
queryParams = queryParams || this.state.queryParams;
|
||||
|
||||
let paramsStr = qs.stringify(queryParams);
|
||||
|
||||
let data = {
|
||||
items: [],
|
||||
total: 0
|
||||
};
|
||||
|
||||
try {
|
||||
let result = await request.get('/users/paging?' + paramsStr);
|
||||
if (result.code === 1) {
|
||||
data = result.data;
|
||||
} else {
|
||||
message.error(result.message, 10);
|
||||
}
|
||||
} catch (e) {
|
||||
|
||||
} finally {
|
||||
const items = data.items.map(item => {
|
||||
return {'key': item['id'], ...item}
|
||||
})
|
||||
this.setState({
|
||||
items: items,
|
||||
total: data.total,
|
||||
queryParams: queryParams,
|
||||
loading: false
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
handleChangPage = (pageIndex, pageSize) => {
|
||||
let queryParams = this.state.queryParams;
|
||||
queryParams.pageIndex = pageIndex;
|
||||
queryParams.pageSize = pageSize;
|
||||
|
||||
this.setState({
|
||||
queryParams: queryParams
|
||||
});
|
||||
|
||||
this.loadTableData(queryParams).then(r => {})
|
||||
};
|
||||
|
||||
showDeleteConfirm(id, content) {
|
||||
let self = this;
|
||||
confirm({
|
||||
title: '您确定要删除此用户吗?',
|
||||
content: content,
|
||||
okText: '确定',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
onOk() {
|
||||
self.delete(id);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
showModal(title, user = {}) {
|
||||
this.setState({
|
||||
model: user,
|
||||
modalVisible: true,
|
||||
modalTitle: title
|
||||
});
|
||||
};
|
||||
|
||||
handleCancelModal = e => {
|
||||
this.setState({
|
||||
modalVisible: false,
|
||||
modalTitle: ''
|
||||
});
|
||||
};
|
||||
|
||||
handleOk = async (formData) => {
|
||||
// 弹窗 form 传来的数据
|
||||
this.setState({
|
||||
modalConfirmLoading: true
|
||||
});
|
||||
|
||||
if (formData.id) {
|
||||
// 向后台提交数据
|
||||
const result = await request.put('/users/' + formData.id, formData);
|
||||
if (result.code === 1) {
|
||||
message.success('操作成功', 3);
|
||||
|
||||
this.setState({
|
||||
modalVisible: false
|
||||
});
|
||||
await this.loadTableData(this.state.queryParams);
|
||||
} else {
|
||||
message.error('操作失败 :( ' + result.message, 10);
|
||||
}
|
||||
} else {
|
||||
// 向后台提交数据
|
||||
const result = await request.post('/users', formData);
|
||||
if (result.code === 1) {
|
||||
message.success('操作成功', 3);
|
||||
|
||||
this.setState({
|
||||
modalVisible: false
|
||||
});
|
||||
await this.loadTableData(this.state.queryParams);
|
||||
} else {
|
||||
message.error('操作失败 :( ' + result.message, 10);
|
||||
}
|
||||
}
|
||||
|
||||
this.setState({
|
||||
modalConfirmLoading: false
|
||||
});
|
||||
};
|
||||
|
||||
handleSearchByUsername = username => {
|
||||
let query = {
|
||||
...this.state.queryParams,
|
||||
'pageIndex': 1,
|
||||
'pageSize': this.state.queryParams.pageSize,
|
||||
'username': username,
|
||||
}
|
||||
|
||||
this.loadTableData(query);
|
||||
};
|
||||
|
||||
handleSearchByNickname = nickname => {
|
||||
let query = {
|
||||
...this.state.queryParams,
|
||||
'pageIndex': 1,
|
||||
'pageSize': this.state.queryParams.pageSize,
|
||||
'nickname': nickname,
|
||||
}
|
||||
|
||||
this.loadTableData(query);
|
||||
};
|
||||
|
||||
batchDelete = async () => {
|
||||
this.setState({
|
||||
delBtnLoading: true
|
||||
})
|
||||
try {
|
||||
let result = await request.delete('/users/' + this.state.selectedRowKeys.join(','));
|
||||
if (result.code === 1) {
|
||||
message.success('操作成功', 3);
|
||||
this.setState({
|
||||
selectedRowKeys: []
|
||||
})
|
||||
await this.loadTableData(this.state.queryParams);
|
||||
} else {
|
||||
message.error('删除失败 :( ' + result.message, 10);
|
||||
}
|
||||
} finally {
|
||||
this.setState({
|
||||
delBtnLoading: false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
const columns = [{
|
||||
title: '序号',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
render: (id, record, index) => {
|
||||
return index + 1;
|
||||
}
|
||||
}, {
|
||||
title: '登录账号',
|
||||
dataIndex: 'username',
|
||||
key: 'username',
|
||||
}, {
|
||||
title: '用户昵称',
|
||||
dataIndex: 'nickname',
|
||||
key: 'nickname',
|
||||
}, {
|
||||
title: '在线状态',
|
||||
dataIndex: 'online',
|
||||
key: 'online',
|
||||
render: text => {
|
||||
if (text) {
|
||||
return (<Badge status="success" text="在线"/>);
|
||||
} else {
|
||||
return (<Badge status="default" text="离线"/>);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
title: '创建日期',
|
||||
dataIndex: 'created',
|
||||
key: 'created'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
render: (text, record) => {
|
||||
return (
|
||||
<div>
|
||||
<Button type="link" size='small' icon={<EditTwoTone/>}
|
||||
onClick={() => this.showModal('更新用户', record)}>编辑</Button>
|
||||
<Button type="link" size='small' icon={<DeleteTwoTone/>}
|
||||
onClick={() => this.showDeleteConfirm(record.id, record.name)}>删除</Button>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
];
|
||||
|
||||
const selectedRowKeys = this.state.selectedRowKeys;
|
||||
const rowSelection = {
|
||||
selectedRowKeys: this.state.selectedRowKeys,
|
||||
onChange: (selectedRowKeys, selectedRows) => {
|
||||
this.setState({selectedRowKeys});
|
||||
},
|
||||
};
|
||||
const hasSelected = selectedRowKeys.length > 0;
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
className="site-page-header-ghost-wrapper page-herder"
|
||||
title="用户管理"
|
||||
breadcrumb={{
|
||||
routes: routes,
|
||||
itemRender: itemRender
|
||||
}}
|
||||
subTitle="平台用户管理"
|
||||
>
|
||||
</PageHeader>
|
||||
|
||||
<Content className="site-layout-background page-content">
|
||||
<div style={{marginBottom: 20}}>
|
||||
<Row justify="space-around" align="middle" gutter={24}>
|
||||
<Col span={8} key={1}>
|
||||
<Title level={3}>用户列表</Title>
|
||||
</Col>
|
||||
<Col span={16} key={2} style={{textAlign: 'right'}}>
|
||||
<Space>
|
||||
|
||||
<Search
|
||||
ref={this.inputRefOfNickname}
|
||||
placeholder="用户昵称"
|
||||
allowClear
|
||||
onSearch={this.handleSearchByNickname}
|
||||
/>
|
||||
|
||||
<Search
|
||||
ref={this.inputRefOfUsername}
|
||||
placeholder="登录账号"
|
||||
allowClear
|
||||
onSearch={this.handleSearchByUsername}
|
||||
/>
|
||||
|
||||
<Tooltip title='重置查询'>
|
||||
|
||||
<Button icon={<UndoOutlined/>} onClick={() => {
|
||||
this.inputRefOfUsername.current.setValue('');
|
||||
this.inputRefOfNickname.current.setValue('');
|
||||
this.loadTableData({pageIndex: 1, pageSize: 10, protocol: ''})
|
||||
}}>
|
||||
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
<Divider type="vertical"/>
|
||||
|
||||
<Tooltip title="新增">
|
||||
<Button type="dashed" icon={<PlusOutlined/>}
|
||||
onClick={() => this.showModal('新增用户', {})}>
|
||||
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="刷新列表">
|
||||
<Button icon={<SyncOutlined/>} onClick={() => {
|
||||
this.loadTableData(this.state.queryParams)
|
||||
}}>
|
||||
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="批量删除">
|
||||
<Button type="primary" danger disabled={!hasSelected} icon={<DeleteOutlined/>}
|
||||
loading={this.state.delBtnLoading}
|
||||
onClick={() => {
|
||||
const content = <div>
|
||||
您确定要删除选中的<Text style={{color: '#1890FF'}}
|
||||
strong>{this.state.selectedRowKeys.length}</Text>条记录吗？
|
||||
</div>;
|
||||
confirm({
|
||||
icon: <ExclamationCircleOutlined/>,
|
||||
content: content,
|
||||
onOk: () => {
|
||||
this.batchDelete()
|
||||
},
|
||||
onCancel() {
|
||||
|
||||
},
|
||||
});
|
||||
}}>
|
||||
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
</Space>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
<Table rowSelection={rowSelection}
|
||||
dataSource={this.state.items}
|
||||
columns={columns}
|
||||
position={'both'}
|
||||
pagination={{
|
||||
showSizeChanger: true,
|
||||
current: this.state.queryParams.pageIndex,
|
||||
pageSize: this.state.queryParams.pageSize,
|
||||
onChange: this.handleChangPage,
|
||||
onShowSizeChange: this.handleChangPage,
|
||||
total: this.state.total,
|
||||
showTotal: total => `总计 ${total} 条`
|
||||
}}
|
||||
loading={this.state.loading}
|
||||
/>
|
||||
|
||||
{
|
||||
this.state.modalVisible ?
|
||||
<UserModal
|
||||
visible={this.state.modalVisible}
|
||||
title={this.state.modalTitle}
|
||||
handleOk={this.handleOk}
|
||||
handleCancel={this.handleCancelModal}
|
||||
confirmLoading={this.state.modalConfirmLoading}
|
||||
model={this.state.model}
|
||||
>
|
||||
</UserModal>
|
||||
: null
|
||||
}
|
||||
|
||||
|
||||
</Content>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default User;
|
||||
58
web/src/components/user/UserModal.js
Normal file
58
web/src/components/user/UserModal.js
Normal file
@ -0,0 +1,58 @@
|
||||
import React from 'react';
|
||||
import {Form, Input, Modal, Radio} from "antd/lib/index";
|
||||
|
||||
const UserModal = ({title, visible, handleOk, handleCancel, confirmLoading, model}) => {
|
||||
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const formItemLayout = {
|
||||
labelCol: {span: 6},
|
||||
wrapperCol: {span: 14},
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={title}
|
||||
visible={visible}
|
||||
maskClosable={false}
|
||||
onOk={() => {
|
||||
form
|
||||
.validateFields()
|
||||
.then(values => {
|
||||
form.resetFields();
|
||||
handleOk(values);
|
||||
})
|
||||
.catch(info => {});
|
||||
}}
|
||||
onCancel={handleCancel}
|
||||
confirmLoading={confirmLoading}
|
||||
okText='确定'
|
||||
cancelText='取消'
|
||||
>
|
||||
|
||||
<Form form={form} {...formItemLayout} initialValues={model}>
|
||||
<Form.Item name='id' noStyle>
|
||||
<Input hidden={true}/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="登录账户" name='username' rules={[{required: true, message: '请输入登录账户'}]}>
|
||||
<Input autoComplete="off" placeholder="请输入登录账户"/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="用户昵称" name='nickname' rules={[{required: true, message: '请输入用户昵称'}]}>
|
||||
<Input placeholder="请输入用户昵称"/>
|
||||
</Form.Item>
|
||||
|
||||
{
|
||||
title.indexOf('新增') > -1 ?
|
||||
(<Form.Item label="登录密码" name='password' rules={[{required: true, message: '请输入登录密码'}]}>
|
||||
<Input type="password" autoComplete="new-password" placeholder="输入登录密码"/>
|
||||
</Form.Item>) : null
|
||||
}
|
||||
|
||||
</Form>
|
||||
</Modal>
|
||||
)
|
||||
};
|
||||
|
||||
export default UserModal;
|
||||
BIN
web/src/fonts/Menlo/Menlo-Italic-4.ttf
Normal file
BIN
web/src/fonts/Menlo/Menlo-Italic-4.ttf
Normal file
Binary file not shown.
14
web/src/index.css
Normal file
14
web/src/index.css
Normal file
@ -0,0 +1,14 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
|
||||
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
|
||||
monospace;
|
||||
}
|
||||
23
web/src/index.js
Normal file
23
web/src/index.js
Normal file
@ -0,0 +1,23 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import * as serviceWorker from './serviceWorker';
|
||||
import zhCN from 'antd/es/locale-provider/zh_CN';
|
||||
import {ConfigProvider} from 'antd';
|
||||
import {HashRouter as Router} from "react-router-dom";
|
||||
|
||||
ReactDOM.render(
|
||||
<ConfigProvider locale={zhCN}>
|
||||
<Router>
|
||||
<App/>
|
||||
</Router>
|
||||
</ConfigProvider>,
|
||||
document.getElementById('root')
|
||||
);
|
||||
|
||||
// If you want your app to work offline and load faster, you can change
|
||||
// unregister() to register() below. Note this comes with some pitfalls.
|
||||
// Learn more about service workers: https://bit.ly/CRA-PWA
|
||||
serviceWorker.unregister();
|
||||
|
||||
7
web/src/logo.svg
Normal file
7
web/src/logo.svg
Normal file
@ -0,0 +1,7 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
|
||||
<g fill="#61DAFB">
|
||||
<path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
|
||||
<circle cx="420.9" cy="296.5" r="45.7"/>
|
||||
<path d="M520.5 78.1z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
7
web/src/service/TreeNodeService.js
Normal file
7
web/src/service/TreeNodeService.js
Normal file
@ -0,0 +1,7 @@
|
||||
import request from "../common/request";
|
||||
|
||||
const treeNodeService = {
|
||||
|
||||
|
||||
};
|
||||
export default treeNodeService;
|
||||
135
web/src/serviceWorker.js
Normal file
135
web/src/serviceWorker.js
Normal file
@ -0,0 +1,135 @@
|
||||
// This optional code is used to register a service worker.
|
||||
// register() is not called by default.
|
||||
|
||||
// This lets the app load faster on subsequent visits in production, and gives
|
||||
// it offline capabilities. However, it also means that developers (and users)
|
||||
// will only see deployed updates on subsequent visits to a page, after all the
|
||||
// existing tabs open on the page have been closed, since previously cached
|
||||
// resources are updated in the background.
|
||||
|
||||
// To learn more about the benefits of this model and instructions on how to
|
||||
// opt-in, read https://bit.ly/CRA-PWA
|
||||
|
||||
const isLocalhost = Boolean(
|
||||
window.location.hostname === 'localhost' ||
|
||||
// [::1] is the IPv6 localhost address.
|
||||
window.location.hostname === '[::1]' ||
|
||||
// 127.0.0.1/8 is considered localhost for IPv4.
|
||||
window.location.hostname.match(
|
||||
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
|
||||
)
|
||||
);
|
||||
|
||||
export function register(config) {
|
||||
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
|
||||
// The URL constructor is available in all browsers that support SW.
|
||||
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
|
||||
if (publicUrl.origin !== window.location.origin) {
|
||||
// Our service worker won't work if PUBLIC_URL is on a different origin
|
||||
// from what our page is served on. This might happen if a CDN is used to
|
||||
// serve asset; see https://github.com/facebook/create-react-app/issues/2374
|
||||
return;
|
||||
}
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
|
||||
|
||||
if (isLocalhost) {
|
||||
// This is running on localhost. Let's check if a service worker still exists or not.
|
||||
checkValidServiceWorker(swUrl, config);
|
||||
|
||||
// Add some additional logging to localhost, pointing developers to the
|
||||
// service worker/PWA documentation.
|
||||
navigator.serviceWorker.ready.then(() => {
|
||||
console.log(
|
||||
'This web app is being served cache-first by a service ' +
|
||||
'worker. To learn more, visit https://bit.ly/CRA-PWA'
|
||||
);
|
||||
});
|
||||
} else {
|
||||
// Is not localhost. Just register service worker
|
||||
registerValidSW(swUrl, config);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function registerValidSW(swUrl, config) {
|
||||
navigator.serviceWorker
|
||||
.register(swUrl)
|
||||
.then(registration => {
|
||||
registration.onupdatefound = () => {
|
||||
const installingWorker = registration.installing;
|
||||
if (installingWorker == null) {
|
||||
return;
|
||||
}
|
||||
installingWorker.onStateChange = () => {
|
||||
if (installingWorker.state === 'installed') {
|
||||
if (navigator.serviceWorker.controller) {
|
||||
// At this point, the updated precached content has been fetched,
|
||||
// but the previous service worker will still serve the older
|
||||
// content until all client tabs are closed.
|
||||
console.log(
|
||||
'New content is available and will be used when all ' +
|
||||
'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
|
||||
);
|
||||
|
||||
// Execute callback
|
||||
if (config && config.onUpdate) {
|
||||
config.onUpdate(registration);
|
||||
}
|
||||
} else {
|
||||
// At this point, everything has been precached.
|
||||
// It's the perfect time to display a
|
||||
// "Content is cached for offline use." message.
|
||||
console.log('Content is cached for offline use.');
|
||||
|
||||
// Execute callback
|
||||
if (config && config.onSuccess) {
|
||||
config.onSuccess(registration);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error during service worker registration:', error);
|
||||
});
|
||||
}
|
||||
|
||||
function checkValidServiceWorker(swUrl, config) {
|
||||
// Check if the service worker can be found. If it can't reload the page.
|
||||
fetch(swUrl)
|
||||
.then(response => {
|
||||
// Ensure service worker exists, and that we really are getting a JS file.
|
||||
const contentType = response.headers.get('content-type');
|
||||
if (
|
||||
response.status === 404 ||
|
||||
(contentType != null && contentType.indexOf('javascript') === -1)
|
||||
) {
|
||||
// No service worker found. Probably a different app. Reload the page.
|
||||
navigator.serviceWorker.ready.then(registration => {
|
||||
registration.unregister().then(() => {
|
||||
window.location.reload();
|
||||
});
|
||||
});
|
||||
} else {
|
||||
// Service worker found. Proceed as normal.
|
||||
registerValidSW(swUrl, config);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
console.log(
|
||||
'No internet connection found. App is running in offline mode.'
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
export function unregister() {
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.ready.then(registration => {
|
||||
registration.unregister();
|
||||
});
|
||||
}
|
||||
}
|
||||
145
web/src/utils/utils.js
Normal file
145
web/src/utils/utils.js
Normal file
@ -0,0 +1,145 @@
|
||||
import React from "react";
|
||||
import {Link} from "react-router-dom";
|
||||
|
||||
export const sleep = function (ms) {
|
||||
return new Promise(resolve => setTimeout(resolve, ms))
|
||||
}
|
||||
|
||||
export const getToken = function () {
|
||||
return localStorage.getItem('X-Auth-Token');
|
||||
}
|
||||
|
||||
export const getHeaders = function () {
|
||||
return {'X-Auth-Token': getToken()};
|
||||
}
|
||||
|
||||
export const itemRender = function (route, params, routes, paths) {
|
||||
const last = routes.indexOf(route) === routes.length - 1;
|
||||
return last ? (
|
||||
<span>{route.breadcrumbName}</span>
|
||||
) : (
|
||||
<Link to={paths.join('/')}>{route.breadcrumbName}</Link>
|
||||
);
|
||||
}
|
||||
|
||||
export const formatDate = function (time, format) {
|
||||
let date = new Date(time);
|
||||
let o = {
|
||||
"M+": date.getMonth() + 1,
|
||||
"d+": date.getDate(),
|
||||
"h+": date.getHours(),
|
||||
"m+": date.getMinutes(),
|
||||
"s+": date.getSeconds(),
|
||||
"q+": Math.floor((date.getMonth() + 3) / 3), //quarter
|
||||
"S": date.getMilliseconds() //millisecond
|
||||
};
|
||||
if (/(y+)/.test(format)) {
|
||||
format = format.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
|
||||
}
|
||||
for (let k in o) {
|
||||
if (new RegExp("(" + k + ")").test(format)) {
|
||||
format = format.replace(RegExp.$1, RegExp.$1.length === 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
|
||||
}
|
||||
}
|
||||
return format;
|
||||
};
|
||||
|
||||
export const isLeapYear = function (year) {
|
||||
return (year % 4 === 0 && year % 100 !== 0) || (year % 100 === 0 && year % 400 === 0);
|
||||
};
|
||||
|
||||
export const groupBy = (list, fn) => {
|
||||
const groups = {};
|
||||
|
||||
list.forEach(x => {
|
||||
let groupKey = fn(x).toString();
|
||||
groups[groupKey] = groups[groupKey] || [];
|
||||
groups[groupKey].push(x);
|
||||
});
|
||||
|
||||
return groups;
|
||||
};
|
||||
|
||||
export const cloneObj = (obj, ignoreFields) => {
|
||||
let str, newObj = obj.constructor === Array ? [] : {};
|
||||
if (typeof obj !== 'object') {
|
||||
return;
|
||||
} else if (window.JSON) {
|
||||
str = JSON.stringify(obj);
|
||||
newObj = JSON.parse(str);
|
||||
} else {
|
||||
for (const i in obj) {
|
||||
newObj[i] = typeof obj[i] === 'object' ? cloneObj(obj[i]) : obj[i];
|
||||
}
|
||||
}
|
||||
return newObj;
|
||||
};
|
||||
|
||||
export function download(url) {
|
||||
let aElement = document.createElement('a');
|
||||
aElement.setAttribute('download', '');
|
||||
aElement.setAttribute('target', '_blank');
|
||||
aElement.setAttribute('href', url);
|
||||
aElement.click();
|
||||
}
|
||||
|
||||
export function differTime(start, end) {
|
||||
//总秒数
|
||||
let millisecond = Math.floor((end.getTime() - start.getTime()) / 1000);
|
||||
|
||||
//总天数
|
||||
let allDay = Math.floor(millisecond / (24 * 60 * 60));
|
||||
|
||||
//注意同getYear的区别
|
||||
let startYear = start.getFullYear();
|
||||
let currentYear = end.getFullYear();
|
||||
|
||||
//闰年个数
|
||||
let leapYear = 0;
|
||||
for (let i = startYear; i < currentYear; i++) {
|
||||
if (isLeapYear(i)) {
|
||||
leapYear++;
|
||||
}
|
||||
}
|
||||
|
||||
//年数
|
||||
const year = Math.floor((allDay - leapYear * 366) / 365 + leapYear);
|
||||
|
||||
//天数
|
||||
let day;
|
||||
if (allDay > 366) {
|
||||
day = (allDay - leapYear * 366) % 365;
|
||||
} else {
|
||||
day = allDay;
|
||||
}
|
||||
//取余数(秒)
|
||||
const remainder = millisecond % (24 * 60 * 60);
|
||||
//小时数
|
||||
const hour = Math.floor(remainder / (60 * 60));
|
||||
//分钟数
|
||||
const minute = Math.floor(remainder % (60 * 60) / 60);
|
||||
//秒数
|
||||
const second = remainder - hour * 60 * 60 - minute * 60;
|
||||
|
||||
let show = '';
|
||||
if (year > 0) {
|
||||
show += year + '年';
|
||||
}
|
||||
|
||||
if (day > 0) {
|
||||
show += day + '天';
|
||||
}
|
||||
|
||||
if (hour > 0) {
|
||||
show += hour + '小时';
|
||||
}
|
||||
|
||||
if (minute > 0) {
|
||||
show += minute + '分钟';
|
||||
}
|
||||
|
||||
if (second > 0) {
|
||||
show += second + '秒';
|
||||
}
|
||||
return show;
|
||||
}
|
||||
Reference in New Issue
Block a user