mirror of
https://github.com/gusaul/grpcox.git
synced 2024-12-26 10:50:11 +00:00
293bb364c0
Currently, grpcox depends on server reflection to get proto descriptor. It has a significant drawback, since not every grpc server support [server reflection](https://github.com/grpc/grpc/blob/master/doc/server-reflection.md#known-implementations). Using local proto files is more feasible, as every grpc server certainly have one. Even though using protofile should be simple enough, there's still a problem regarding this. Some protofile use extra plugins for their proto. i.e. gogoprotobuf is a project that does just that. The problems with plugins are most of them require explicit import to the plugin inside of the protofile. It will break grpcurl proto descriptor extraction. Thus, the plugin proto must be uploaded alongside the protofile. Also, the protofile should be modified automatically to change their import to local import. Given that, I proposed a way for the user to upload multiple protofile to grpcox. Then, use that to get the descriptor. Changelog: - Add `use local proto` checkbox in HTML client. On checked it will show upload button and list of selected proto. - `get-service` ajax will use POST when `use local proto` is checked. The uploaded protofile will be the payload for the ajax request. - Add a new route to handle POST "get-service". It will persist the uploaded protofile to `/tmp/` directory and add protos field in the resource. - Modify `openDescriptor` to use local proto if protos field in the resource is available. - Modify `openDescriptor` to return an error, as opening descriptor from local proto may fail. - Modify the main server so it can be shut down gracefully. This is necessary as grpcox need to remove persisted proto right after the server is turned off. This Pull Request will resolve #16
144 lines
6.8 KiB
HTML
144 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
<title>gRPCox - gRPC Testing Environment</title>
|
|
<link rel="icon" href="img/favicon.png" type="image/x-icon" />
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
<link href="css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="css/mdb.min.css" rel="stylesheet">
|
|
<link href="css/style.css" rel="stylesheet">
|
|
<link href="css/proto.css" rel="stylesheet">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container pt-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="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 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="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>
|
|
|
|
<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>
|
|
|
|
<div class="row other-elem" id="body-request" style="display: none">
|
|
<div class="col-md-7">
|
|
<div class="card">
|
|
<div class="card-body schema-body">
|
|
<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">
|
|
<div class="card-body schema-body">
|
|
<h4 class="card-title"><a>Schema Input</a></h4>
|
|
<pre class="prettyprint custom-pretty" id="schema-proto"></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row other-elem" id="response" style="display: none">
|
|
<div class="col">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<small class="pull-right" id="timer-resp">Time : <span></span></small>
|
|
<h4 class="card-title"><a>Response:</a></h4>
|
|
<p class="card-text">
|
|
<pre class="prettyprint custom-pretty" id="json-response"></pre>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
<div class="rect2"></div>
|
|
<div class="rect3"></div>
|
|
<div class="rect4"></div>
|
|
<div class="rect5"></div>
|
|
</div>
|
|
|
|
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
|
|
<script type="text/javascript" src="js/popper.min.js"></script>
|
|
<script type="text/javascript" src="js/bootstrap.min.js"></script>
|
|
<script type="text/javascript" src="js/mdb.min.js"></script>
|
|
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/ace.js"></script>
|
|
<script type="text/javascript" src="js/style.js"></script>
|
|
<script type="text/javascript" src="js/proto.js"></script>
|
|
</body>
|
|
|
|
</html>
|