mirror of
https://github.com/gusaul/grpcox.git
synced 2025-06-15 08:55:43 +00:00
Add mode input server target
This commit is contained in:
kevinsudut
parent
c83858ebfc
commit
0215c2dfa9
|
|
@ -60,7 +60,7 @@ func Test_prepareImport(t *testing.T) {
|
|||
}
|
||||
for _, tt := range tests {
|
||||
t.Run(tt.name, func(t *testing.T) {
|
||||
if got := prepareImport(tt.args.proto, ""); !reflect.DeepEqual(got, tt.want) {
|
||||
if got := prepareImport(tt.args.proto); !reflect.DeepEqual(got, tt.want) {
|
||||
t.Errorf("prepareImport() = %v, want %v",
|
||||
string(got),
|
||||
string(tt.want))
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ func Init(router *mux.Router) {
|
|||
router.PathPrefix("/js/").Handler(http.StripPrefix("/js/", http.FileServer(http.Dir(assetsPath+"/js/"))))
|
||||
router.PathPrefix("/font/").Handler(http.StripPrefix("/font/", http.FileServer(http.Dir(assetsPath+"/font/"))))
|
||||
router.PathPrefix("/img/").Handler(http.StripPrefix("/img/", http.FileServer(http.Dir(assetsPath+"/img/"))))
|
||||
router.PathPrefix("/database/").Handler(http.StripPrefix("/database/", http.FileServer(http.Dir(assetsPath+"/database/"))))
|
||||
}
|
||||
|
||||
func corsHandler(h http.HandlerFunc) http.HandlerFunc {
|
||||
|
|
|
|||
|
|
@ -1,59 +1,77 @@
|
|||
html {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.mt-10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.pt-50 {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.pb-50 {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
.mt-10 {
|
||||
margin-top:10px;
|
||||
}
|
||||
.pt-50 {
|
||||
padding-top:50px;
|
||||
}
|
||||
|
||||
.w-120 {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.custom-pretty {
|
||||
border:none!important;
|
||||
border: none!important;
|
||||
}
|
||||
|
||||
.custom-control-label:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#choose-service, #choose-function, #body-request {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.schema-body {
|
||||
height: 250px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
#response {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
/* github corner */
|
||||
.github-corner:hover .octo-arm{
|
||||
animation:octocat-wave 560ms ease-in-out
|
||||
|
||||
.github-corner:hover .octo-arm {
|
||||
animation: octocat-wave 560ms ease-in-out
|
||||
}
|
||||
@keyframes octocat-wave{
|
||||
0%,100%{
|
||||
transform:rotate(0)
|
||||
|
||||
@keyframes octocat-wave {
|
||||
0%, 100% {
|
||||
transform: rotate(0)
|
||||
}
|
||||
20%,60%{
|
||||
transform:rotate(-25deg)
|
||||
20%, 60% {
|
||||
transform: rotate(-25deg)
|
||||
}
|
||||
40%,80%{
|
||||
transform:rotate(10deg)
|
||||
40%, 80% {
|
||||
transform: rotate(10deg)
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:500px){
|
||||
.github-corner:hover .octo-arm{
|
||||
animation:none
|
||||
@media (max-width:500px) {
|
||||
.github-corner:hover .octo-arm {
|
||||
animation: none
|
||||
}
|
||||
|
||||
.github-corner .octo-arm{
|
||||
animation:octocat-wave 560ms ease-in-out
|
||||
.github-corner .octo-arm {
|
||||
animation: octocat-wave 560ms ease-in-out
|
||||
}
|
||||
}
|
||||
|
||||
/* connections */
|
||||
|
||||
.connections {
|
||||
font-weight: 100;
|
||||
background: #efefef;
|
||||
|
|
@ -62,8 +80,8 @@ body {
|
|||
position: fixed;
|
||||
top: 200px;
|
||||
z-index: 100;
|
||||
-webkit-box-shadow: -3px 0px 5px 0px rgba(0,0,0,0.2);
|
||||
box-shadow: -3px 0px 5px 0px rgba(0,0,0,0.2);
|
||||
-webkit-box-shadow: -3px 0px 5px 0px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: -3px 0px 5px 0px rgba(0, 0, 0, 0.2);
|
||||
left: -190px;
|
||||
transition: all .3s;
|
||||
-webkit-transition: all .3s;
|
||||
|
|
@ -110,7 +128,9 @@ body {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.connections .nav li a:hover { color: #aaa }
|
||||
.connections .nav li a:hover {
|
||||
color: #aaa
|
||||
}
|
||||
|
||||
.dots {
|
||||
position: absolute;
|
||||
|
|
@ -149,6 +169,7 @@ circle {
|
|||
}
|
||||
|
||||
/* loading spinner */
|
||||
|
||||
.spinner {
|
||||
margin: 10px auto;
|
||||
width: 180px;
|
||||
|
|
@ -157,12 +178,11 @@ circle {
|
|||
font-size: 80px;
|
||||
}
|
||||
|
||||
.spinner > div {
|
||||
.spinner>div {
|
||||
background-color: #59698d;
|
||||
height: 100%;
|
||||
width: 18px;
|
||||
display: inline-block;
|
||||
|
||||
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
|
||||
animation: sk-stretchdelay 1.2s infinite ease-in-out;
|
||||
}
|
||||
|
|
@ -188,15 +208,20 @@ circle {
|
|||
}
|
||||
|
||||
@-webkit-keyframes sk-stretchdelay {
|
||||
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
|
||||
20% { -webkit-transform: scaleY(1.0) }
|
||||
0%, 40%, 100% {
|
||||
-webkit-transform: scaleY(0.4)
|
||||
}
|
||||
20% {
|
||||
-webkit-transform: scaleY(1.0)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sk-stretchdelay {
|
||||
0%, 40%, 100% {
|
||||
transform: scaleY(0.4);
|
||||
-webkit-transform: scaleY(0.4);
|
||||
} 20% {
|
||||
}
|
||||
20% {
|
||||
transform: scaleY(1.0);
|
||||
-webkit-transform: scaleY(1.0);
|
||||
}
|
||||
|
|
|
|||
10
index/database/database.json
Normal file
10
index/database/database.json
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
[
|
||||
{
|
||||
"name": "Example 1",
|
||||
"ip": "localhost:8000"
|
||||
},
|
||||
{
|
||||
"name": "Example 2",
|
||||
"ip": "localhost:8585"
|
||||
}
|
||||
]
|
||||
215
index/index.html
215
index/index.html
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
|
|
@ -14,98 +15,135 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container pt-50">
|
||||
<div class="container pt-50 pb-50">
|
||||
<div class="row animated fadeIn">
|
||||
<div class="col">
|
||||
<div class="md-form input-group">
|
||||
<input type="text" class="form-control" id="server-target">
|
||||
<label for="server-target">gRPC Server Target</label>
|
||||
<div class="input-group-append">
|
||||
<button id="get-services" class="btn btn-mdb-color waves-effect m-0" type="button"><i class="fa fa-plug"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="restart-conn">
|
||||
<label class="custom-control-label" for="restart-conn">Restart Connection</label>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<label for="server-target" class="font-weight-bold">gRPC Server Target</label>
|
||||
|
||||
<ul class="nav nav-tabs" id="myTab" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" id="mode-1-tab" data-toggle="tab" href="#mode1" role="tab"
|
||||
aria-controls="mode1" aria-selected="true">Mode 1</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="mode-2-tab" data-toggle="tab" href="#mode2" role="tab" aria-controls="mode2"
|
||||
aria-selected="false">Mode 2</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content" id="myTabContent">
|
||||
<div class="tab-pane fade show active" id="mode1" role="tabpanel" aria-labelledby="mode-1-tab">
|
||||
<div class="md-form input-group">
|
||||
<select class="browser-default custom-select" id="select-server-target" style="height: 50px;">
|
||||
<option value="">-- Choose gRPC Server Target --</option>
|
||||
</select>
|
||||
<div class="input-group-append">
|
||||
<button id="select-get-services" class="btn btn-mdb-color waves-effect m-0 get-services"
|
||||
type="button"><i class="fa fa-plug"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane fade" id="mode2" role="tabpanel" aria-labelledby="mode-2-tab">
|
||||
<div class="md-form input-group">
|
||||
<input type="text" id="input-server-target" class="form-control"
|
||||
placeholder="Input gRPC Server Target">
|
||||
<div class="input-group-append">
|
||||
<button id="input-get-services" class="btn btn-mdb-color waves-effect m-0 get-services"
|
||||
type="button"><i class="fa fa-plug"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="restart-conn">
|
||||
<label class="custom-control-label" for="restart-conn">Restart Connection</label>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="local-proto">
|
||||
<label class="custom-control-label" for="local-proto">Use local proto</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-group" id="proto-input" style="display: none">
|
||||
<div class="proto-top-collection">
|
||||
<div class="input-group" id="proto-input" style="display: none">
|
||||
<div class="proto-top-collection">
|
||||
<input class="proto-uploader" type="file" id="proto-file" multiple>
|
||||
<label for="proto-file"><i class="fa fa-plus-circle"></i> proto files</label>
|
||||
|
||||
<span id="proto-collection-toggle" class="proto-toggle">Hide Proto Collection</span>
|
||||
</div>
|
||||
|
||||
<div class="proto-collection"></div>
|
||||
</div>
|
||||
|
||||
<div class="proto-collection"></div>
|
||||
</div>
|
||||
<!-- Context metadata -->
|
||||
<div class="input-group">
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="ctx-metadata-switch">
|
||||
<label class="custom-control-label" for="ctx-metadata-switch">Use request metadata</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Context metadata -->
|
||||
<div class="input-group">
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="ctx-metadata-switch">
|
||||
<label class="custom-control-label" for="ctx-metadata-switch">Use request metadata</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-group" id="ctx-metadata-input" style="display: none">
|
||||
<br>
|
||||
<div id="ctx-metadata-table" class="table-editable">
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-start" style="width: 10%"></th>
|
||||
<th class="text-start" style="width: 20%">Key</th>
|
||||
<th class="text-start" style="width: 70%">Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="input-group" id="ctx-metadata-input" style="display: none">
|
||||
<br>
|
||||
<div id="ctx-metadata-table" class="table-editable">
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-start" style="width: 10%"></th>
|
||||
<th class="text-start" style="width: 20%">Key</th>
|
||||
<th class="text-start" style="width: 70%">Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="table-remove">
|
||||
<button type="button" class="btn btn-danger btn-rounded btn-sm my-0">
|
||||
<i class="fa fa-times"></i>
|
||||
</button>
|
||||
</span>
|
||||
</td>
|
||||
<td class="ctx-metadata-input-field pt-3-half" contenteditable="true"></td>
|
||||
<td class="ctx-metadata-input-field pt-3-half" contenteditable="true"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="input-group-append">
|
||||
</td>
|
||||
<td class="ctx-metadata-input-field pt-3-half" contenteditable="true"></td>
|
||||
<td class="ctx-metadata-input-field pt-3-half" contenteditable="true"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="input-group-append">
|
||||
<span class="table-add">
|
||||
<button type="button" class="btn btn-success btn-rounded btn-sm my-0">
|
||||
<i class="fa fa-plus"></i>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Context metadata -->
|
||||
<!-- Context metadata -->
|
||||
|
||||
<div class="other-elem" id="choose-service" style="display: none">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text btn-dark w-120" for="select-service"><i class="fa fa-television"></i> Services</span>
|
||||
<div class="other-elem" id="choose-service" style="display: none">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text btn-dark w-120" for="select-service"><i
|
||||
class="fa fa-television"></i> Services</span>
|
||||
</div>
|
||||
<select class="browser-default custom-select" id="select-service"></select>
|
||||
</div>
|
||||
</div>
|
||||
<select class="browser-default custom-select" id="select-service"></select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="other-elem" id="choose-function" style="display: none">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text btn-dark w-120" for="select-function"><i class="fa fa-rocket"></i> Methods</span>
|
||||
<div class="other-elem" id="choose-function" style="display: none">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text btn-dark w-120" for="select-function"><i
|
||||
class="fa fa-rocket"></i> Methods</span>
|
||||
</div>
|
||||
<select class="browser-default custom-select" id="select-function"></select>
|
||||
</div>
|
||||
</div>
|
||||
<select class="browser-default custom-select" id="select-function"></select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -116,7 +154,6 @@
|
|||
<pre id="editor"></pre>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary waves-effect mt-10" id="invoke-func" type="button"><i class="fa fa-play"></i> Submit</button>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<div class="card">
|
||||
|
|
@ -126,6 +163,12 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-3 w-100">
|
||||
<div class="w-75 text-center m-auto">
|
||||
<button class="h-75 btn btn-primary form-control waves-effect mt-10" id="invoke-func" type="button"><i
|
||||
class="fa fa-play"></i> Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row other-elem" id="response" style="display: none">
|
||||
|
|
@ -143,35 +186,42 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="spinner" style="display: none">
|
||||
<div class="rect1"></div>
|
||||
<div class="rect2"></div>
|
||||
<div class="rect3"></div>
|
||||
<div class="rect4"></div>
|
||||
<div class="rect5"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a target="_blank" href="https://github.com/gusaul/grpcox" class="github-corner" aria-label="View source on GitHub">
|
||||
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;"
|
||||
aria-hidden="true">
|
||||
<svg width="80" height="80" viewBox="0 0 250 250"
|
||||
style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
|
||||
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
|
||||
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
|
||||
<path
|
||||
d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
|
||||
fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
|
||||
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
|
||||
<path
|
||||
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
|
||||
fill="currentColor" class="octo-body"></path>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<div class="connections">
|
||||
<div class="title">
|
||||
<svg class="dots" expanded = "true" height = "100px" width = "100px"><circle cx = "50%" cy = "50%" r = "7px"></circle><circle class = "pulse" cx = "50%" cy = "50%" r = "10px"></circle></svg>
|
||||
<span></span> Active Connection(s)
|
||||
</div>
|
||||
<div id="conn-list-template" style="display:none"><li><i class="fa fa-close" data-toggle="tooltip" title="close connection"></i> <span class="ip"></span></li></div>
|
||||
<ul class="nav">
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="spinner" style="display: none">
|
||||
<div class="rect1"></div>
|
||||
<div class="rect2"></div>
|
||||
<div class="rect3"></div>
|
||||
<div class="rect4"></div>
|
||||
<div class="rect5"></div>
|
||||
<div class="title">
|
||||
<svg class="dots" expanded="true" height="100px" width="100px">
|
||||
<circle cx="50%" cy="50%" r="7px"></circle>
|
||||
<circle class="pulse" cx="50%" cy="50%" r="10px"></circle>
|
||||
</svg>
|
||||
<span></span> Active Connection(s)
|
||||
</div>
|
||||
<div id="conn-list-template" style="display:none">
|
||||
<li><i class="fa fa-close" data-toggle="tooltip" title="close connection"></i> <span class="ip"></span></li>
|
||||
</div>
|
||||
<ul class="nav">
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
|
||||
|
|
@ -183,6 +233,7 @@
|
|||
<script type="text/javascript" src="js/style.js"></script>
|
||||
<script type="text/javascript" src="js/proto.js"></script>
|
||||
<script type="text/javascript" src="js/ctx.metadata.js"></script>
|
||||
<script type="text/javascript" src="js/load-database.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
10
index/js/load-database.js
Normal file
10
index/js/load-database.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
(function () {
|
||||
const el = $('#select-server-target');
|
||||
|
||||
$.get('database/database.json', function (response) {
|
||||
$.each(response, function (index, value) {
|
||||
el.append(`<option value='${value.ip}'>${value.name}</option>`);
|
||||
});
|
||||
});
|
||||
|
||||
})();
|
||||
|
|
@ -1,11 +1,30 @@
|
|||
var target, use_tls, editor;
|
||||
var target, use_tls, editor, targetScroll, mode;
|
||||
|
||||
$('#get-services').click(function(){
|
||||
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
|
||||
switch (e.target.innerHTML) {
|
||||
case "Mode 1":
|
||||
mode = 'select';
|
||||
break;
|
||||
case "Mode 2":
|
||||
mode = 'input';
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
$('#select-server-target').change(function () {
|
||||
if ($(this).val() == "") {
|
||||
return
|
||||
}
|
||||
|
||||
$('#select-get-services').click();
|
||||
});
|
||||
|
||||
$('.get-services').click(function () {
|
||||
var t = get_valid_target();
|
||||
|
||||
use_tls = "false";
|
||||
var restart = "0"
|
||||
if($('#restart-conn').is(":checked")) {
|
||||
if ($('#restart-conn').is(":checked")) {
|
||||
restart = "1"
|
||||
}
|
||||
|
||||
|
|
@ -21,10 +40,10 @@ $('#get-services').click(function(){
|
|||
// prepare ajax options beforehand
|
||||
// makes it easier for local proto to modify some of its properties
|
||||
const ajaxProps = {
|
||||
url: "server/"+target+"/services?restart="+restart,
|
||||
url: "server/" + target + "/services?restart=" + restart,
|
||||
global: true,
|
||||
method: "GET",
|
||||
success: function(res){
|
||||
success: function (res) {
|
||||
if (res.error) {
|
||||
target = "";
|
||||
use_tls = "";
|
||||
|
|
@ -35,18 +54,18 @@ $('#get-services').click(function(){
|
|||
$.each(res.data, (_, item) => $("#select-service").append(new Option(item, item)));
|
||||
$('#choose-service').show();
|
||||
},
|
||||
error: function(_, _, errorThrown) {
|
||||
error: function (_, _, errorThrown) {
|
||||
target = "";
|
||||
use_tls = "";
|
||||
alert(errorThrown);
|
||||
},
|
||||
beforeSend: function(xhr){
|
||||
beforeSend: function (xhr) {
|
||||
$('#choose-service').hide();
|
||||
xhr.setRequestHeader('use_tls', use_tls);
|
||||
$(this).html("Loading...");
|
||||
show_loading();
|
||||
},
|
||||
complete: function(){
|
||||
complete: function () {
|
||||
applyConnCount();
|
||||
$(this).html(button);
|
||||
hide_loading();
|
||||
|
|
@ -68,7 +87,7 @@ $('#get-services').click(function(){
|
|||
$.ajax(ajaxProps);
|
||||
});
|
||||
|
||||
$('#select-service').change(function(){
|
||||
$('#select-service').change(function () {
|
||||
var selected = $(this).val();
|
||||
if (selected == "") {
|
||||
return false;
|
||||
|
|
@ -77,31 +96,31 @@ $('#select-service').change(function(){
|
|||
$('#body-request').hide();
|
||||
$('#response').hide();
|
||||
$.ajax({
|
||||
url: "server/"+target+"/service/"+selected+"/functions",
|
||||
url: "server/" + target + "/service/" + selected + "/functions",
|
||||
global: true,
|
||||
method: "GET",
|
||||
success: function(res){
|
||||
success: function (res) {
|
||||
if (res.error) {
|
||||
alert(res.error);
|
||||
return;
|
||||
}
|
||||
$("#select-function").html(new Option("Choose Method", ""));
|
||||
$.each(res.data, (_, item) => $("#select-function").append(new Option(item.substr(selected.length) , item)));
|
||||
$.each(res.data, (_, item) => $("#select-function").append(new Option(item.substr(selected.length), item)));
|
||||
$('#choose-function').show();
|
||||
},
|
||||
error: err,
|
||||
beforeSend: function(xhr){
|
||||
beforeSend: function (xhr) {
|
||||
$('#choose-function').hide();
|
||||
xhr.setRequestHeader('use_tls', use_tls);
|
||||
show_loading();
|
||||
},
|
||||
complete: function(){
|
||||
complete: function () {
|
||||
hide_loading();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('#select-function').change(function(){
|
||||
$('#select-function').change(function () {
|
||||
var selected = $(this).val();
|
||||
if (selected == "") {
|
||||
return false;
|
||||
|
|
@ -109,10 +128,10 @@ $('#select-function').change(function(){
|
|||
|
||||
$('#response').hide();
|
||||
$.ajax({
|
||||
url: "server/"+target+"/function/"+selected+"/describe",
|
||||
url: "server/" + target + "/function/" + selected + "/describe",
|
||||
global: true,
|
||||
method: "GET",
|
||||
success: function(res){
|
||||
success: function (res) {
|
||||
if (res.error) {
|
||||
alert(res.error);
|
||||
return;
|
||||
|
|
@ -123,22 +142,22 @@ $('#select-function').change(function(){
|
|||
$('#body-request').show();
|
||||
},
|
||||
error: err,
|
||||
beforeSend: function(xhr){
|
||||
beforeSend: function (xhr) {
|
||||
$('#body-request').hide();
|
||||
xhr.setRequestHeader('use_tls', use_tls);
|
||||
show_loading();
|
||||
},
|
||||
complete: function(){
|
||||
complete: function () {
|
||||
hide_loading();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('#invoke-func').click(function(){
|
||||
$('#invoke-func').click(function () {
|
||||
|
||||
// use metadata if there is any
|
||||
ctxArr = [];
|
||||
$(".ctx-metadata-input-field").each(function(index, val){
|
||||
$(".ctx-metadata-input-field").each(function (index, val) {
|
||||
ctxArr.push($(val).text())
|
||||
});
|
||||
|
||||
|
|
@ -149,12 +168,12 @@ $('#invoke-func').click(function(){
|
|||
var body = editor.getValue();
|
||||
var button = $(this).html();
|
||||
$.ajax({
|
||||
url: "server/"+target+"/function/"+func+"/invoke",
|
||||
url: "server/" + target + "/function/" + func + "/invoke",
|
||||
global: true,
|
||||
method: "POST",
|
||||
data: body,
|
||||
dataType: "json",
|
||||
success: function(res){
|
||||
success: function (res) {
|
||||
if (res.error) {
|
||||
alert(res.error);
|
||||
return;
|
||||
|
|
@ -164,24 +183,27 @@ $('#invoke-func').click(function(){
|
|||
$('#response').show();
|
||||
},
|
||||
error: err,
|
||||
beforeSend: function(xhr){
|
||||
beforeSend: function (xhr) {
|
||||
$('#response').hide();
|
||||
xhr.setRequestHeader('use_tls', use_tls);
|
||||
if(ctxUse) {
|
||||
if (ctxUse) {
|
||||
xhr.setRequestHeader('Metadata', ctxArr);
|
||||
}
|
||||
$(this).html("Loading...");
|
||||
show_loading();
|
||||
},
|
||||
complete: function(){
|
||||
complete: function () {
|
||||
$(this).html(button);
|
||||
hide_loading();
|
||||
$('html, body').animate({
|
||||
scrollTop: targetScroll
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function generate_editor(content) {
|
||||
if(editor) {
|
||||
if (editor) {
|
||||
editor.setValue(content);
|
||||
return true;
|
||||
}
|
||||
|
|
@ -197,14 +219,16 @@ function generate_editor(content) {
|
|||
}
|
||||
|
||||
function get_valid_target() {
|
||||
t = $('#server-target').val().trim();
|
||||
el = $(`#${mode}-server-target`)
|
||||
|
||||
t = el.val().trim();
|
||||
if (t == "") {
|
||||
return target;
|
||||
}
|
||||
|
||||
ts = t.split("://");
|
||||
if (ts.length > 1) {
|
||||
$('#server-target').val(ts[1]);
|
||||
el.val(ts[1]);
|
||||
return ts[1];
|
||||
}
|
||||
return ts[0];
|
||||
|
|
@ -222,7 +246,7 @@ function hide_loading() {
|
|||
$('.spinner').hide();
|
||||
}
|
||||
|
||||
$(".connections ul").on("click", "i", function(){
|
||||
$(".connections ul").on("click", "i", function () {
|
||||
$icon = $(this);
|
||||
$parent = $(this).parent("li");
|
||||
var ip = $(this).siblings("span").text();
|
||||
|
|
@ -231,15 +255,15 @@ $(".connections ul").on("click", "i", function(){
|
|||
url: "active/close/" + ip,
|
||||
global: true,
|
||||
method: "DELETE",
|
||||
success: function(res){
|
||||
success: function (res) {
|
||||
$('[data-toggle="tooltip"]').tooltip('hide');
|
||||
if(res.data.success) {
|
||||
if (res.data.success) {
|
||||
$parent.remove();
|
||||
updateCountNum();
|
||||
}
|
||||
},
|
||||
error: err,
|
||||
beforeSend: function(xhr){
|
||||
beforeSend: function (xhr) {
|
||||
$icon.attr('class', 'fa fa-spinner');
|
||||
},
|
||||
});
|
||||
|
|
@ -256,10 +280,10 @@ function applyConnCount() {
|
|||
url: "active/get",
|
||||
global: true,
|
||||
method: "GET",
|
||||
success: function(res){
|
||||
success: function (res) {
|
||||
$(".connections .title span").html(res.data.length);
|
||||
$(".connections .nav").html("");
|
||||
res.data.forEach(function(item){
|
||||
res.data.forEach(function (item) {
|
||||
$list = $("#conn-list-template").clone();
|
||||
$list.find(".ip").html(item);
|
||||
$(".connections .nav").append($list.html());
|
||||
|
|
@ -284,6 +308,8 @@ function refreshToolTip() {
|
|||
})
|
||||
}
|
||||
|
||||
$(document).ready(function(){
|
||||
$(document).ready(function () {
|
||||
mode = 'select'
|
||||
refreshConnCount();
|
||||
targetScroll = window.innerHeight + 50;
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user