klesh/grpcox
1
0
Fork 0
mirror of https://github.com/gusaul/grpcox.git synced 2025-06-15 08:55:43 +00:00
Code Issues Projects Releases Wiki Activity

Add mode input server target

Browse Source
This commit is contained in:
kevinsudut 2021-09-28 23:48:56 +07:00
parent c83858ebfc
commit 0215c2dfa9
7 changed files with 274 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
core/resource_test.go
View File

@ -60,7 +60,7 @@ func Test_prepareImport(t *testing.T) {
} }
for _, tt := range tests { for _, tt := range tests {
t.Run(tt.name, func(t *testing.T) { 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", t.Errorf("prepareImport() = %v, want %v",
string(got), string(got),
string(tt.want)) string(tt.want))

1
handler/routes.go
View File

@ -29,6 +29,7 @@ func Init(router *mux.Router) {
router.PathPrefix("/js/").Handler(http.StripPrefix("/js/", http.FileServer(http.Dir(assetsPath+"/js/")))) 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("/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("/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 { func corsHandler(h http.HandlerFunc) http.HandlerFunc {

85
index/css/style.css
View File

@ -1,59 +1,77 @@
html {
min-height: 100%;
}
body { body {
min-height: 100%;
}
.mt-10 {
margin-top: 10px;
}
.pt-50 {
padding-top: 50px;
}
.pb-50 {
padding-bottom: 50px; padding-bottom: 50px;
} }
.mt-10 {
margin-top:10px;
}
.pt-50 {
padding-top:50px;
}
.w-120 { .w-120 {
width: 120px; width: 120px;
} }
.custom-pretty { .custom-pretty {
border:none!important; border: none!important;
} }
.custom-control-label:hover { .custom-control-label:hover {
cursor: pointer; cursor: pointer;
} }
#choose-service, #choose-function, #body-request { #choose-service, #choose-function, #body-request {
margin-top: 40px; margin-top: 40px;
} }
.schema-body { .schema-body {
height: 250px; height: 250px;
overflow-y: scroll; overflow-y: scroll;
} }
#response { #response {
margin-top: 30px; margin-top: 30px;
} }
/* github corner */ /* 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%{ @keyframes octocat-wave {
transform:rotate(0) 0%, 100% {
transform: rotate(0)
} }
20%,60%{ 20%, 60% {
transform:rotate(-25deg) transform: rotate(-25deg)
} }
40%,80%{ 40%, 80% {
transform:rotate(10deg) transform: rotate(10deg)
} }
} }
@media (max-width:500px){ @media (max-width:500px) {
.github-corner:hover .octo-arm{ .github-corner:hover .octo-arm {
animation:none animation: none
} }
.github-corner .octo-arm {
.github-corner .octo-arm{ animation: octocat-wave 560ms ease-in-out
animation:octocat-wave 560ms ease-in-out
} }
} }
/* connections */ /* connections */
.connections { .connections {
font-weight: 100; font-weight: 100;
background: #efefef; background: #efefef;
@ -62,8 +80,8 @@ body {
position: fixed; position: fixed;
top: 200px; top: 200px;
z-index: 100; z-index: 100;
-webkit-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); box-shadow: -3px 0px 5px 0px rgba(0, 0, 0, 0.2);
left: -190px; left: -190px;
transition: all .3s; transition: all .3s;
-webkit-transition: all .3s; -webkit-transition: all .3s;
@ -110,7 +128,9 @@ body {
cursor: pointer; cursor: pointer;
} }
.connections .nav li a:hover { color: #aaa } .connections .nav li a:hover {
color: #aaa
}
.dots { .dots {
position: absolute; position: absolute;
@ -149,6 +169,7 @@ circle {
} }
/* loading spinner */ /* loading spinner */
.spinner { .spinner {
margin: 10px auto; margin: 10px auto;
width: 180px; width: 180px;
@ -157,12 +178,11 @@ circle {
font-size: 80px; font-size: 80px;
} }
.spinner > div { .spinner>div {
background-color: #59698d; background-color: #59698d;
height: 100%; height: 100%;
width: 18px; width: 18px;
display: inline-block; display: inline-block;
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
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 { @-webkit-keyframes sk-stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 0%, 40%, 100% {
20% { -webkit-transform: scaleY(1.0) } -webkit-transform: scaleY(0.4)
}
20% {
-webkit-transform: scaleY(1.0)
}
} }
@keyframes sk-stretchdelay { @keyframes sk-stretchdelay {
0%, 40%, 100% { 0%, 40%, 100% {
transform: scaleY(0.4); transform: scaleY(0.4);
-webkit-transform: scaleY(0.4); -webkit-transform: scaleY(0.4);
} 20% { }
20% {
transform: scaleY(1.0); transform: scaleY(1.0);
-webkit-transform: scaleY(1.0); -webkit-transform: scaleY(1.0);
} }

10
index/database/database.json Normal file
View File

@ -0,0 +1,10 @@
[
{
"name": "Example 1",
"ip": "localhost:8000"
},
{
"name": "Example 2",
"ip": "localhost:8585"
}
]

217
index/index.html
View File

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
@ -14,98 +15,135 @@
</head> </head>
<body> <body>
<div class="container pt-50"> <div class="container pt-50 pb-50">
<div class="row animated fadeIn"> <div class="row animated fadeIn">
<div class="col"> <div class="col">
<div class="md-form input-group"> <div class="card">
<input type="text" class="form-control" id="server-target"> <div class="card-body">
<label for="server-target">gRPC Server Target</label> <label for="server-target" class="font-weight-bold">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> <ul class="nav nav-tabs" id="myTab" role="tablist">
</div> <li class="nav-item">
</div> <a class="nav-link active" id="mode-1-tab" data-toggle="tab" href="#mode1" role="tab"
<div class="custom-control custom-checkbox"> aria-controls="mode1" aria-selected="true">Mode 1</a>
<input type="checkbox" class="custom-control-input" id="restart-conn"> </li>
<label class="custom-control-label" for="restart-conn">Restart Connection</label> <li class="nav-item">
</div> <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"> <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"> <input type="checkbox" class="custom-control-input" id="local-proto">
<label class="custom-control-label" for="local-proto">Use local proto</label> <label class="custom-control-label" for="local-proto">Use local proto</label>
</div>
</div> </div>
</div>
<div class="input-group" id="proto-input" style="display: none"> <div class="input-group" id="proto-input" style="display: none">
<div class="proto-top-collection"> <div class="proto-top-collection">
<input class="proto-uploader" type="file" id="proto-file" multiple> <input class="proto-uploader" type="file" id="proto-file" multiple>
<label for="proto-file"><i class="fa fa-plus-circle"></i> proto files</label> <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> <span id="proto-collection-toggle" class="proto-toggle">Hide Proto Collection</span>
</div>
<div class="proto-collection"></div>
</div> </div>
<div class="proto-collection"></div> <!-- Context metadata -->
</div> <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" id="ctx-metadata-input" style="display: none">
<div class="input-group"> <br>
<div class="custom-control custom-checkbox"> <div id="ctx-metadata-table" class="table-editable">
<input type="checkbox" class="custom-control-input" id="ctx-metadata-switch"> <table class="table table-bordered">
<label class="custom-control-label" for="ctx-metadata-switch">Use request metadata</label> <thead>
</div> <tr>
</div> <th class="text-start" style="width: 10%"></th>
<th class="text-start" style="width: 20%">Key</th>
<div class="input-group" id="ctx-metadata-input" style="display: none"> <th class="text-start" style="width: 70%">Value</th>
<br> </tr>
<div id="ctx-metadata-table" class="table-editable"> </thead>
<table class="table table-bordered"> <tbody>
<thead> <tr>
<tr> <td>
<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"> <span class="table-remove">
<button type="button" class="btn btn-danger btn-rounded btn-sm my-0"> <button type="button" class="btn btn-danger btn-rounded btn-sm my-0">
<i class="fa fa-times"></i> <i class="fa fa-times"></i>
</button> </button>
</span> </span>
</td> </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>
<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> </tr>
</tbody> </tbody>
</table> </table>
<div class="input-group-append"> <div class="input-group-append">
<span class="table-add"> <span class="table-add">
<button type="button" class="btn btn-success btn-rounded btn-sm my-0"> <button type="button" class="btn btn-success btn-rounded btn-sm my-0">
<i class="fa fa-plus"></i> <i class="fa fa-plus"></i>
</button> </button>
</span> </span>
</div>
</div>
</div> </div>
</div> <!-- Context metadata -->
</div>
<!-- Context metadata -->
<div class="other-elem" id="choose-service" style="display: none"> <div class="other-elem" id="choose-service" style="display: none">
<div class="input-group"> <div class="input-group">
<div class="input-group-prepend"> <div class="input-group-prepend">
<span class="input-group-text btn-dark w-120" for="select-service"><i class="fa fa-television"></i>&nbsp;&nbsp;Services</span> <span class="input-group-text btn-dark w-120" for="select-service"><i
class="fa fa-television"></i>&nbsp;&nbsp;Services</span>
</div>
<select class="browser-default custom-select" id="select-service"></select>
</div>
</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="other-elem" id="choose-function" style="display: none">
<div class="input-group"> <div class="input-group">
<div class="input-group-prepend"> <div class="input-group-prepend">
<span class="input-group-text btn-dark w-120" for="select-function"><i class="fa fa-rocket"></i>&nbsp;&nbsp;Methods</span> <span class="input-group-text btn-dark w-120" for="select-function"><i
class="fa fa-rocket"></i>&nbsp;&nbsp;Methods</span>
</div>
<select class="browser-default custom-select" id="select-function"></select>
</div>
</div> </div>
<select class="browser-default custom-select" id="select-function"></select>
</div> </div>
</div> </div>
@ -116,7 +154,6 @@
<pre id="editor"></pre> <pre id="editor"></pre>
</div> </div>
</div> </div>
<button class="btn btn-primary waves-effect mt-10" id="invoke-func" type="button"><i class="fa fa-play"></i>&nbsp;&nbsp;Submit</button>
</div> </div>
<div class="col-md-5"> <div class="col-md-5">
<div class="card"> <div class="card">
@ -126,6 +163,12 @@
</div> </div>
</div> </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>&nbsp;&nbsp;Submit</button>
</div>
</div>
</div> </div>
<div class="row other-elem" id="response" style="display: none"> <div class="row other-elem" id="response" style="display: none">
@ -143,35 +186,42 @@
</div> </div>
</div> </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> </div>
<a target="_blank" href="https://github.com/gusaul/grpcox" class="github-corner" aria-label="View source on GitHub"> <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;" <svg width="80" height="80" viewBox="0 0 250 250"
aria-hidden="true"> 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="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> 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> fill="currentColor" class="octo-body"></path>
</svg> </svg>
</a> </a>
<div class="connections"> <div class="connections">
<div class="title"> <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> <svg class="dots" expanded="true" height="100px" width="100px">
<span></span> Active Connection(s) <circle cx="50%" cy="50%" r="7px"></circle>
</div> <circle class="pulse" cx="50%" cy="50%" r="10px"></circle>
<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> </svg>
<ul class="nav"> <span></span> Active Connection(s)
</ul> </div>
</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 class="spinner" style="display: none"> </div>
<div class="rect1"></div> <ul class="nav">
<div class="rect2"></div> </ul>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div> </div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <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/style.js"></script>
<script type="text/javascript" src="js/proto.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/ctx.metadata.js"></script>
<script type="text/javascript" src="js/load-database.js"></script>
</body> </body>
</html> </html>

10
index/js/load-database.js Normal file
View 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>`);
});
});
})();

100
index/js/style.js
View File

@ -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(); var t = get_valid_target();
use_tls = "false"; use_tls = "false";
var restart = "0" var restart = "0"
if($('#restart-conn').is(":checked")) { if ($('#restart-conn').is(":checked")) {
restart = "1" restart = "1"
} }
@ -21,10 +40,10 @@ $('#get-services').click(function(){
// prepare ajax options beforehand // prepare ajax options beforehand
// makes it easier for local proto to modify some of its properties // makes it easier for local proto to modify some of its properties
const ajaxProps = { const ajaxProps = {
url: "server/"+target+"/services?restart="+restart, url: "server/" + target + "/services?restart=" + restart,
global: true, global: true,
method: "GET", method: "GET",
success: function(res){ success: function (res) {
if (res.error) { if (res.error) {
target = ""; target = "";
use_tls = ""; use_tls = "";
@ -35,18 +54,18 @@ $('#get-services').click(function(){
$.each(res.data, (_, item) => $("#select-service").append(new Option(item, item))); $.each(res.data, (_, item) => $("#select-service").append(new Option(item, item)));
$('#choose-service').show(); $('#choose-service').show();
}, },
error: function(_, _, errorThrown) { error: function (_, _, errorThrown) {
target = ""; target = "";
use_tls = ""; use_tls = "";
alert(errorThrown); alert(errorThrown);
}, },
beforeSend: function(xhr){ beforeSend: function (xhr) {
$('#choose-service').hide(); $('#choose-service').hide();
xhr.setRequestHeader('use_tls', use_tls); xhr.setRequestHeader('use_tls', use_tls);
$(this).html("Loading..."); $(this).html("Loading...");
show_loading(); show_loading();
}, },
complete: function(){ complete: function () {
applyConnCount(); applyConnCount();
$(this).html(button); $(this).html(button);
hide_loading(); hide_loading();
@ -68,7 +87,7 @@ $('#get-services').click(function(){
$.ajax(ajaxProps); $.ajax(ajaxProps);
}); });
$('#select-service').change(function(){ $('#select-service').change(function () {
var selected = $(this).val(); var selected = $(this).val();
if (selected == "") { if (selected == "") {
return false; return false;
@ -77,31 +96,31 @@ $('#select-service').change(function(){
$('#body-request').hide(); $('#body-request').hide();
$('#response').hide(); $('#response').hide();
$.ajax({ $.ajax({
url: "server/"+target+"/service/"+selected+"/functions", url: "server/" + target + "/service/" + selected + "/functions",
global: true, global: true,
method: "GET", method: "GET",
success: function(res){ success: function (res) {
if (res.error) { if (res.error) {
alert(res.error); alert(res.error);
return; return;
} }
$("#select-function").html(new Option("Choose Method", "")); $("#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(); $('#choose-function').show();
}, },
error: err, error: err,
beforeSend: function(xhr){ beforeSend: function (xhr) {
$('#choose-function').hide(); $('#choose-function').hide();
xhr.setRequestHeader('use_tls', use_tls); xhr.setRequestHeader('use_tls', use_tls);
show_loading(); show_loading();
}, },
complete: function(){ complete: function () {
hide_loading(); hide_loading();
} }
}); });
}); });
$('#select-function').change(function(){ $('#select-function').change(function () {
var selected = $(this).val(); var selected = $(this).val();
if (selected == "") { if (selected == "") {
return false; return false;
@ -109,10 +128,10 @@ $('#select-function').change(function(){
$('#response').hide(); $('#response').hide();
$.ajax({ $.ajax({
url: "server/"+target+"/function/"+selected+"/describe", url: "server/" + target + "/function/" + selected + "/describe",
global: true, global: true,
method: "GET", method: "GET",
success: function(res){ success: function (res) {
if (res.error) { if (res.error) {
alert(res.error); alert(res.error);
return; return;
@ -123,22 +142,22 @@ $('#select-function').change(function(){
$('#body-request').show(); $('#body-request').show();
}, },
error: err, error: err,
beforeSend: function(xhr){ beforeSend: function (xhr) {
$('#body-request').hide(); $('#body-request').hide();
xhr.setRequestHeader('use_tls', use_tls); xhr.setRequestHeader('use_tls', use_tls);
show_loading(); show_loading();
}, },
complete: function(){ complete: function () {
hide_loading(); hide_loading();
} }
}); });
}); });
$('#invoke-func').click(function(){ $('#invoke-func').click(function () {
// use metadata if there is any // use metadata if there is any
ctxArr = []; ctxArr = [];
$(".ctx-metadata-input-field").each(function(index, val){ $(".ctx-metadata-input-field").each(function (index, val) {
ctxArr.push($(val).text()) ctxArr.push($(val).text())
}); });
@ -149,12 +168,12 @@ $('#invoke-func').click(function(){
var body = editor.getValue(); var body = editor.getValue();
var button = $(this).html(); var button = $(this).html();
$.ajax({ $.ajax({
url: "server/"+target+"/function/"+func+"/invoke", url: "server/" + target + "/function/" + func + "/invoke",
global: true, global: true,
method: "POST", method: "POST",
data: body, data: body,
dataType: "json", dataType: "json",
success: function(res){ success: function (res) {
if (res.error) { if (res.error) {
alert(res.error); alert(res.error);
return; return;
@ -164,24 +183,27 @@ $('#invoke-func').click(function(){
$('#response').show(); $('#response').show();
}, },
error: err, error: err,
beforeSend: function(xhr){ beforeSend: function (xhr) {
$('#response').hide(); $('#response').hide();
xhr.setRequestHeader('use_tls', use_tls); xhr.setRequestHeader('use_tls', use_tls);
if(ctxUse) { if (ctxUse) {
xhr.setRequestHeader('Metadata', ctxArr); xhr.setRequestHeader('Metadata', ctxArr);
} }
$(this).html("Loading..."); $(this).html("Loading...");
show_loading(); show_loading();
}, },
complete: function(){ complete: function () {
$(this).html(button); $(this).html(button);
hide_loading(); hide_loading();
$('html, body').animate({
scrollTop: targetScroll
}, 500);
} }
}); });
}); });
function generate_editor(content) { function generate_editor(content) {
if(editor) { if (editor) {
editor.setValue(content); editor.setValue(content);
return true; return true;
} }
@ -197,14 +219,16 @@ function generate_editor(content) {
} }
function get_valid_target() { function get_valid_target() {
t = $('#server-target').val().trim(); el = $(`#${mode}-server-target`)
t = el.val().trim();
if (t == "") { if (t == "") {
return target; return target;
} }
ts = t.split("://"); ts = t.split("://");
if (ts.length > 1) { if (ts.length > 1) {
$('#server-target').val(ts[1]); el.val(ts[1]);
return ts[1]; return ts[1];
} }
return ts[0]; return ts[0];
@ -222,7 +246,7 @@ function hide_loading() {
$('.spinner').hide(); $('.spinner').hide();
} }
$(".connections ul").on("click", "i", function(){ $(".connections ul").on("click", "i", function () {
$icon = $(this); $icon = $(this);
$parent = $(this).parent("li"); $parent = $(this).parent("li");
var ip = $(this).siblings("span").text(); var ip = $(this).siblings("span").text();
@ -231,15 +255,15 @@ $(".connections ul").on("click", "i", function(){
url: "active/close/" + ip, url: "active/close/" + ip,
global: true, global: true,
method: "DELETE", method: "DELETE",
success: function(res){ success: function (res) {
$('[data-toggle="tooltip"]').tooltip('hide'); $('[data-toggle="tooltip"]').tooltip('hide');
if(res.data.success) { if (res.data.success) {
$parent.remove(); $parent.remove();
updateCountNum(); updateCountNum();
} }
}, },
error: err, error: err,
beforeSend: function(xhr){ beforeSend: function (xhr) {
$icon.attr('class', 'fa fa-spinner'); $icon.attr('class', 'fa fa-spinner');
}, },
}); });
@ -256,10 +280,10 @@ function applyConnCount() {
url: "active/get", url: "active/get",
global: true, global: true,
method: "GET", method: "GET",
success: function(res){ success: function (res) {
$(".connections .title span").html(res.data.length); $(".connections .title span").html(res.data.length);
$(".connections .nav").html(""); $(".connections .nav").html("");
res.data.forEach(function(item){ res.data.forEach(function (item) {
$list = $("#conn-list-template").clone(); $list = $("#conn-list-template").clone();
$list.find(".ip").html(item); $list.find(".ip").html(item);
$(".connections .nav").append($list.html()); $(".connections .nav").append($list.html());
@ -284,6 +308,8 @@ function refreshToolTip() {
}) })
} }
$(document).ready(function(){ $(document).ready(function () {
mode = 'select'
refreshConnCount(); refreshConnCount();
}); targetScroll = window.innerHeight + 50;
});