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,36 +1,54 @@
|
|||
body {
|
||||
padding-bottom: 50px;
|
||||
html {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.mt-10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.pt-50 {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.pb-50 {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.w-120 {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.custom-pretty {
|
||||
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
|
||||
}
|
||||
|
||||
@keyframes octocat-wave {
|
||||
0%, 100% {
|
||||
transform: rotate(0)
|
||||
|
|
@ -47,13 +65,13 @@ body {
|
|||
.github-corner:hover .octo-arm {
|
||||
animation: none
|
||||
}
|
||||
|
||||
.github-corner .octo-arm {
|
||||
animation: octocat-wave 560ms ease-in-out
|
||||
}
|
||||
}
|
||||
|
||||
/* connections */
|
||||
|
||||
.connections {
|
||||
font-weight: 100;
|
||||
background: #efefef;
|
||||
|
|
@ -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;
|
||||
|
|
@ -162,7 +183,6 @@ circle {
|
|||
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"
|
||||
}
|
||||
]
|
||||
109
index/index.html
109
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,16 +15,49 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container pt-50">
|
||||
<div class="container pt-50 pb-50">
|
||||
<div class="row animated fadeIn">
|
||||
<div class="col">
|
||||
<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">
|
||||
<input type="text" class="form-control" id="server-target">
|
||||
<label for="server-target">gRPC Server Target</label>
|
||||
<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="get-services" class="btn btn-mdb-color waves-effect m-0" type="button"><i class="fa fa-plug"></i></button>
|
||||
<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="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>
|
||||
|
|
@ -94,7 +128,8 @@
|
|||
<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>
|
||||
<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>
|
||||
|
|
@ -103,11 +138,14 @@
|
|||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row other-elem" id="body-request" style="display: none">
|
||||
<div class="col-md-7">
|
||||
|
|
@ -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,28 +186,6 @@
|
|||
</div>
|
||||
</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">
|
||||
<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"
|
||||
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"
|
||||
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>
|
||||
|
|
@ -173,6 +194,35 @@
|
|||
<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">
|
||||
<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"
|
||||
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"
|
||||
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>
|
||||
|
||||
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
|
||||
<script type="text/javascript" src="js/popper.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,6 +1,25 @@
|
|||
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";
|
||||
|
|
@ -176,6 +195,9 @@ $('#invoke-func').click(function(){
|
|||
complete: function () {
|
||||
$(this).html(button);
|
||||
hide_loading();
|
||||
$('html, body').animate({
|
||||
scrollTop: targetScroll
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -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];
|
||||
|
|
@ -285,5 +309,7 @@ function refreshToolTip() {
|
|||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
mode = 'select'
|
||||
refreshConnCount();
|
||||
targetScroll = window.innerHeight + 50;
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user