mirror of
https://github.com/gusaul/grpcox.git
synced 2025-01-26 22:35:10 +00:00
464de07064
by using this request list, user doesn't need to memorise the endpoint & the request anymore, they can store the request and come again if they need it. at the moment the data is store in IndexDB (browser), hence it doesn't need backend effort.
239 lines
11 KiB
HTML
239 lines
11 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-fluid pt-50">
|
|
<div class="row animated fadeIn justify-content-md-center">
|
|
<div class="col-3">
|
|
<div class="row">
|
|
<div class="col" style="padding-left: 70px;">
|
|
<div class="row column-row-left">
|
|
<div class="md-form input-group">
|
|
<input type="text" class="form-control search" id="search-request" onkeyup="search(this)">
|
|
<label for="search-request" class="">Search Request</label>
|
|
</div>
|
|
<ul class="list-group list-group-flush list" id="request-list"></ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-7">
|
|
<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 class="dropdown">
|
|
<button type="button" class="btn btn-mdb-color waves-effect m-0 dropdown-toggle save-button-dropdown" data-toggle="dropdown"
|
|
aria-haspopup="true" aria-expanded="true">
|
|
</button>
|
|
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="btnGroupDrop1">
|
|
<a class="dropdown-item" id="show-modal-save-request">Save</a>
|
|
<a class="dropdown-item" id="show-modal-save-as-request">Save As</a>
|
|
</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>
|
|
</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>
|
|
|
|
<!-- 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>
|
|
<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">
|
|
<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>
|
|
<!-- 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>
|
|
<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>
|
|
|
|
<!-- Modal Save request-->
|
|
<div class="modal fade" id="saveRequest" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalLabel">Input the name for the request</h5>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form>
|
|
<div class="form-group row">
|
|
<label for="input-request-name" class="col-sm-2 col-form-label">Name</label>
|
|
<div class="col-sm-10">
|
|
<input type="text" class="form-control" id="input-request-name">
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
|
|
<button id="save-request" type="button" class="btn btn-primary">Save</button>
|
|
</div>
|
|
</div>
|
|
</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/db.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/ctx.metadata.js"></script>
|
|
<script type="text/javascript" src="js/request.list.js"></script>
|
|
</body>
|
|
|
|
</html>
|