klesh/grpcox
1
0
Fork 0
mirror of https://github.com/gusaul/grpcox.git synced 2025-05-06 07:25:36 +00:00
Code Issues Projects Releases Wiki Activity

feat: add post script functionality

Browse Source
This commit is contained in:
i-pul 2024-03-07 13:48:44 +07:00
parent 6feae4127c
commit 17e45fe0bd
9 changed files with 405 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
core/post_script.go Normal file
View File

@ -0,0 +1,32 @@
package core
import (
"bytes"
"encoding/json"
"strings"
"github.com/tidwall/gjson"
"github.com/tidwall/sjson"
)
type PostScriptConfig struct {
Func string `json:"func"`
Src []string `json:"src"`
Dst []string `json:"dst"`
}
const (
FuncNameStringToJson string = "stringToJSON"
)
var FuncStringToJson = func(in string, src, dst []string) string {
vStr := gjson.Get(in, strings.Join(src, "."))
resStr, _ := sjson.SetRaw(in, strings.Join(dst, "."), vStr.String())
var resBuf bytes.Buffer
json.Indent(&resBuf, []byte(resStr), "", " ")
return resBuf.String()
}

68
core/resource.go
View File

@ -3,6 +3,7 @@ package core
import ( import (
"bytes" "bytes"
"context" "context"
"encoding/json"
"fmt" "fmt"
"io" "io"
"io/ioutil" "io/ioutil"
@ -34,6 +35,9 @@ type Resource struct {
protos []Proto protos []Proto
protosets []Proto protosets []Proto
postScriptsSvc map[string]bool
postScriptsMtd map[string][]PostScriptConfig
headers []string headers []string
md metadata.MD md metadata.MD
} }
@ -112,9 +116,9 @@ func (r *Resource) List(symbol string) ([]string, error) {
return result, fmt.Errorf("No Services") return result, fmt.Errorf("No Services")
} }
for _, svc := range svcs { result = append(result, svcs...)
result = append(result, fmt.Sprintf("%s\n", svc))
} r.loadPostScriptsServices()
} else { } else {
methods, err := grpcurl.ListMethods(r.descSource, symbol) methods, err := grpcurl.ListMethods(r.descSource, symbol)
if err != nil { if err != nil {
@ -124,14 +128,47 @@ func (r *Resource) List(symbol string) ([]string, error) {
return result, fmt.Errorf("No Function") // probably unlikely return result, fmt.Errorf("No Function") // probably unlikely
} }
for _, m := range methods { result = append(result, methods...)
result = append(result, fmt.Sprintf("%s\n", m))
} r.loadPostScriptsMethods(symbol)
} }
return result, nil return result, nil
} }
func (r *Resource) loadPostScriptsServices() {
pwd, _ := os.Getwd()
dir, _ := os.ReadDir(pwd + "/core/post-scripts")
r.postScriptsSvc = make(map[string]bool)
for _, v := range dir {
r.postScriptsSvc[v.Name()] = true
}
}
func (r *Resource) loadPostScriptsMethods(symbol string) {
if ok := r.postScriptsSvc[symbol]; !ok {
return
}
pwd, _ := os.Getwd()
dirName := pwd + "/core/post-scripts/" + symbol
dir, _ := os.ReadDir(dirName)
r.postScriptsMtd = make(map[string][]PostScriptConfig)
for _, v := range dir {
mtd := symbol + "." + v.Name()
f, _ := os.Open(dirName + "/" + v.Name())
defer f.Close()
cfgs := []PostScriptConfig{}
if err := json.NewDecoder(f).Decode(&cfgs); err == nil {
r.postScriptsMtd[mtd] = cfgs
}
}
}
// Describe - The "describe" verb will print the type of any symbol that the server knows about // Describe - The "describe" verb will print the type of any symbol that the server knows about
// or that is found in a given protoset file. // or that is found in a given protoset file.
// It also prints a description of that symbol, in the form of snippets of proto source. // It also prints a description of that symbol, in the form of snippets of proto source.
@ -217,7 +254,7 @@ func (r *Resource) Invoke(ctx context.Context, metadata []string, symbol string,
start := time.Now() start := time.Now()
err = grpcurl.InvokeRPC(ctx, r.descSource, r.clientConn, symbol, headers, h, rf.Next) err = grpcurl.InvokeRPC(ctx, r.descSource, r.clientConn, symbol, headers, h, rf.Next)
end := time.Now().Sub(start) / time.Millisecond end := time.Since(start)
if err != nil { if err != nil {
return "", end, err return "", end, err
} }
@ -229,6 +266,23 @@ func (r *Resource) Invoke(ctx context.Context, metadata []string, symbol string,
return resultBuffer.String(), end, nil return resultBuffer.String(), end, nil
} }
func (r *Resource) PostScript(ctx context.Context, symbol, resp string) string {
cfgs, ok := r.postScriptsMtd[symbol]
if !ok {
return ""
}
var res string = resp
for _, cfg := range cfgs {
switch cfg.Func {
case FuncNameStringToJson:
res = FuncStringToJson(res, cfg.Src, cfg.Dst)
}
}
return res
}
// Close - to close all resources that was opened before // Close - to close all resources that was opened before
func (r *Resource) Close() { func (r *Resource) Close() {
var wg sync.WaitGroup var wg sync.WaitGroup

2
go.mod
View File

@ -6,5 +6,7 @@ require (
github.com/fullstorydev/grpcurl v1.3.2 github.com/fullstorydev/grpcurl v1.3.2
github.com/gorilla/mux v1.7.0 github.com/gorilla/mux v1.7.0
github.com/jhump/protoreflect v1.5.0 github.com/jhump/protoreflect v1.5.0
github.com/tidwall/gjson v1.17.1
github.com/tidwall/sjson v1.2.5
google.golang.org/grpc v1.21.0 google.golang.org/grpc v1.21.0
) )

11
go.sum
View File

@ -12,10 +12,17 @@ github.com/golang/protobuf v1.3.1/go.mod h1:6lQm79b+lXiMfvg/cZm0SGofjICqVBUtrP5y
github.com/google/go-cmp v0.2.0/go.mod h1:oXzfMopK8JAjlY9xF4vHSVASa0yLyX7SntLO5aqRK0M= github.com/google/go-cmp v0.2.0/go.mod h1:oXzfMopK8JAjlY9xF4vHSVASa0yLyX7SntLO5aqRK0M=
github.com/gorilla/mux v1.7.0 h1:tOSd0UKHQd6urX6ApfOn4XdBMY6Sh1MfxV3kmaazO+U= github.com/gorilla/mux v1.7.0 h1:tOSd0UKHQd6urX6ApfOn4XdBMY6Sh1MfxV3kmaazO+U=
github.com/gorilla/mux v1.7.0/go.mod h1:1lud6UwP+6orDFRuTfBEV8e9/aOM/c4fVVCaMa2zaAs= github.com/gorilla/mux v1.7.0/go.mod h1:1lud6UwP+6orDFRuTfBEV8e9/aOM/c4fVVCaMa2zaAs=
github.com/gusaul/grpcox v0.0.0-20190913075147-1890be43b9f3 h1:NjksNPWX5m6TNpjioyXkq3SoRu8bemSVpts+sR6qkSQ=
github.com/gusaul/grpcox v0.0.0-20190913075147-1890be43b9f3/go.mod h1:blSZjUt+13dX6OtwGTeCrV2iW0WNDMLox0TWkdVuUXE=
github.com/jhump/protoreflect v1.5.0 h1:NgpVT+dX71c8hZnxHof2M7QDK7QtohIJ7DYycjnkyfc= github.com/jhump/protoreflect v1.5.0 h1:NgpVT+dX71c8hZnxHof2M7QDK7QtohIJ7DYycjnkyfc=
github.com/jhump/protoreflect v1.5.0/go.mod h1:eaTn3RZAmMBcV0fifFvlm6VHNz3wSkYyXYWUh7ymB74= github.com/jhump/protoreflect v1.5.0/go.mod h1:eaTn3RZAmMBcV0fifFvlm6VHNz3wSkYyXYWUh7ymB74=
github.com/tidwall/gjson v1.14.2/go.mod h1:/wbyibRr2FHMks5tjHJ5F8dMZh3AcwJEMf5vlfC0lxk=
github.com/tidwall/gjson v1.17.1 h1:wlYEnwqAHgzmhNUFfw7Xalt2JzQvsMx2Se4PcoFCT/U=
github.com/tidwall/gjson v1.17.1/go.mod h1:/wbyibRr2FHMks5tjHJ5F8dMZh3AcwJEMf5vlfC0lxk=
github.com/tidwall/match v1.1.1 h1:+Ho715JplO36QYgwN9PGYNhgZvoUSc9X2c80KVTi+GA=
github.com/tidwall/match v1.1.1/go.mod h1:eRSPERbgtNPcGhD8UCthc6PmLEQXEWd3PRB5JTxsfmM=
github.com/tidwall/pretty v1.2.0 h1:RWIZEg2iJ8/g6fDDYzMpobmaoGh5OLl4AXtGUGPcqCs=
github.com/tidwall/pretty v1.2.0/go.mod h1:ITEVvHYasfjBbM0u2Pg8T2nJnzm8xPwvNhhsoaGGjNU=
github.com/tidwall/sjson v1.2.5 h1:kLy8mja+1c9jlljvWTlSazM7cKDRfJuR/bOJhcY5NcY=
github.com/tidwall/sjson v1.2.5/go.mod h1:Fvgq9kS/6ociJEDnK0Fk1cpYF4FIW6ZF7LAe+6jwd28=
golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w= golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
golang.org/x/lint v0.0.0-20190313153728-d0100b6bd8b3/go.mod h1:6SW0HCj/g11FgYtHlgUYUwCkIfeOF89ocIRzGO/8vkc= golang.org/x/lint v0.0.0-20190313153728-d0100b6bd8b3/go.mod h1:6SW0HCj/g11FgYtHlgUYUwCkIfeOF89ocIRzGO/8vkc=
golang.org/x/net v0.0.0-20180530234432-1e491301e022/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4= golang.org/x/net v0.0.0-20180530234432-1e491301e022/go.mod h1:mL1N/T3taQHkDXs73rZJwtUhF3w3ftmwwsq0BUmARs4=

6
handler/handler.go
View File

@ -266,14 +266,20 @@ func (h *Handler) invokeFunction(w http.ResponseWriter, r *http.Request) {
return return
} }
postScriptResult := res.PostScript(context.Background(), funcName, result)
type invRes struct { type invRes struct {
Time string `json:"timer"` Time string `json:"timer"`
Result string `json:"result"` Result string `json:"result"`
PostScriptsResult string `json:"post_script_result"`
} }
h.g.Extend(host) h.g.Extend(host)
response(w, invRes{ response(w, invRes{
Time: timer.String(), Time: timer.String(),
Result: result, Result: result,
PostScriptsResult: postScriptResult,
}) })
} }

163
index/css/style.css
View File

@ -1,55 +1,72 @@
body { body {
padding-bottom: 50px; padding-bottom: 50px;
} }
.mt-10 { .mt-10 {
margin-top:10px; margin-top: 10px;
} }
.pt-50 { .pt-50 {
padding-top:50px; 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 {
#resp-tab {
margin-top: 30px; margin-top: 30px;
} }
/* github corner */ /* github corner */
.github-corner:hover .octo-arm{ .github-corner:hover .octo-arm {
animation:octocat-wave 560ms ease-in-out 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%{
transform:rotate(-25deg) 20%,
60% {
transform: rotate(-25deg)
} }
40%,80%{
transform:rotate(10deg) 40%,
80% {
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
} }
} }
@ -62,15 +79,16 @@ 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;
color: #222; color: #222;
} }
.connections:hover, .connections:focus { .connections:hover,
.connections:focus {
transform: translate3d(190px, 0, 0); transform: translate3d(190px, 0, 0);
animation-timing-function: 1s ease-in animation-timing-function: 1s ease-in
} }
@ -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;
@ -141,6 +161,7 @@ circle {
stroke-opacity: 1; stroke-opacity: 1;
transform: scale(0.3); transform: scale(0.3);
} }
to { to {
stroke-width: 0; stroke-width: 0;
stroke-opacity: 0; stroke-opacity: 0;
@ -157,7 +178,7 @@ 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;
@ -188,15 +209,28 @@ circle {
} }
@-webkit-keyframes sk-stretchdelay { @-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 { @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);
} }
@ -215,13 +249,14 @@ circle {
margin-bottom: 0; margin-bottom: 0;
margin-left: 5px; margin-left: 5px;
max-width: 100%; max-width: 100%;
white-space:nowrap; white-space: nowrap;
overflow:hidden; overflow: hidden;
text-overflow:ellipsis; text-overflow: ellipsis;
} }
.one-long-line:hover { .one-long-line:hover {
cursor: pointer; cursor: pointer;
overflow:visible; overflow: visible;
} }
.column-row-left { .column-row-left {
@ -230,7 +265,7 @@ circle {
margin-top: 8px; margin-top: 8px;
} }
.column-row-left .md-form{ .column-row-left .md-form {
margin-bottom: 0; margin-bottom: 0;
} }
@ -248,5 +283,65 @@ circle {
} }
.request-list.selected { .request-list.selected {
background: #dadfe3;; background: #dadfe3;
;
}
/* Style the tab */
.tab {
overflow: hidden;
/* border: 1px solid #ccc; */
/* background-color: #f1f1f1; */
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
/* display: none; */
padding: 6px 12px;
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s;
}
/* Fade in tabs */
@-webkit-keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
} }

157
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">
@ -35,10 +36,12 @@
<input type="text" class="form-control" id="server-target"> <input type="text" class="form-control" id="server-target">
<label for="server-target">gRPC Server Target</label> <label for="server-target">gRPC Server Target</label>
<div class="input-group-append"> <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="get-services" class="btn btn-mdb-color waves-effect m-0" type="button">
<i class="fa fa-plug"></i>
</button>
<div class="dropdown"> <div class="dropdown">
<button type="button" class="btn btn-mdb-color waves-effect m-0 dropdown-toggle save-button-dropdown" data-toggle="dropdown" <button type="button" class="btn btn-mdb-color waves-effect m-0 dropdown-toggle save-button-dropdown"
aria-haspopup="true" aria-expanded="true"> data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
</button> </button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="btnGroupDrop1"> <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-request">Save</a>
@ -58,21 +61,20 @@
</div> </div>
<div class="input-group"> <div class="input-group">
<div class="custom-control custom-checkbox"> <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>
</div>
<span id="proto-collection-toggle" class="proto-toggle">Hide Proto Collection</span> <div class="proto-collection"></div>
</div>
<div class="proto-collection"></div>
</div> </div>
<!-- Context metadata --> <!-- Context metadata -->
@ -97,11 +99,11 @@
<tbody> <tbody>
<tr> <tr>
<td> <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>
@ -109,11 +111,11 @@
</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> </div>
@ -122,7 +124,9 @@
<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> </div>
<select class="browser-default custom-select" id="select-service"></select> <select class="browser-default custom-select" id="select-service"></select>
</div> </div>
@ -131,7 +135,9 @@
<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> </div>
<select class="browser-default custom-select" id="select-function"></select> <select class="browser-default custom-select" id="select-function"></select>
</div> </div>
@ -144,27 +150,53 @@
<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> <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">
<div class="card-body schema-body"> <div class="card-body schema-body">
<h4 class="card-title"><a>Schema Input</a></h4> <h4 class="card-title">
<a>Schema Input</a>
</h4>
<pre class="prettyprint custom-pretty" id="schema-proto"></pre> <pre class="prettyprint custom-pretty" id="schema-proto"></pre>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="row other-elem" id="response" style="display: none"> <!-- Tab links -->
<div class="col"> <div class="other-elem" id="resp-tab" style="display: none">
<div class="card"> <div class="tab">
<div class="card-body"> <button class="tablinks active" id="original">Response</button>
<small class="pull-right" id="timer-resp">Time : <span></span></small> <button class="tablinks" id="post-script">Post Script Response</button>
<h4 class="card-title"><a>Response:</a></h4> <small class="pull-right" id="timer-resp">
<p class="card-text"> Time : <span></span>
<pre class="prettyprint custom-pretty" id="json-response"></pre> </small>
</p> </div>
<!-- Tab content -->
<div id="resp-original" class="tabcontent" style="display: none">
<div class="row" id="response">
<div class="col">
<div class="card">
<div class="card-body">
<pre class="prettyprint custom-pretty" id="json-response"></pre>
</div>
</div>
</div>
</div>
</div>
<div id="resp-post-script" class="tabcontent" style="display: none">
<div class="row" id="resp-post">
<div class="col">
<div class="card">
<div class="card-body">
<pre class="prettyprint custom-pretty" id="json-resp-post"></pre>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -174,24 +206,34 @@
</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 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>
<div class="spinner" style="display: none"> <div class="spinner" style="display: none">
@ -203,16 +245,21 @@
</div> </div>
<!-- Modal Save request--> <!-- Modal Save request-->
<div class="modal fade" id="saveRequest" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <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-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Input the name for the request</h5> <h5 class="modal-title" id="exampleModalLabel">
Input the name for the request
</h5>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<form> <form>
<div class="form-group row"> <div class="form-group row">
<label for="input-request-name" class="col-sm-2 col-form-label">Name</label> <label for="input-request-name" class="col-sm-2 col-form-label">
Name
</label>
<div class="col-sm-10"> <div class="col-sm-10">
<input type="text" class="form-control" id="input-request-name"> <input type="text" class="form-control" id="input-request-name">
</div> </div>
@ -220,8 +267,12 @@
</form> </form>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">
<button id="save-request" type="button" class="btn btn-primary">Save</button> Cancel
</button>
<button id="save-request" type="button" class="btn btn-primary">
Save
</button>
</div> </div>
</div> </div>
</div> </div>

4
index/js/request.list.js
View File

@ -65,7 +65,7 @@ function setReqResData(data) {
$('#body-request').show(); $('#body-request').show();
$('#schema-proto').html(data.schema_proto_html); $('#schema-proto').html(data.schema_proto_html);
$('#json-response').html(data.response_html); $('#json-response').html(data.response_html);
$('#response').show(); $('#resp-tab').show();
} }
function resetReqResData() { function resetReqResData() {
@ -73,7 +73,7 @@ function resetReqResData() {
$('#choose-service').hide(); $('#choose-service').hide();
$('#choose-function').hide(); $('#choose-function').hide();
$('#body-request').hide(); $('#body-request').hide();
$('#response').hide(); $('#resp-tab').hide();
} }
async function renderRequestList() { async function renderRequestList() {

99
index/js/style.js
View File

@ -1,6 +1,6 @@
var target, use_tls, editor; var target, use_tls, editor;
$('#get-services').click(function(){ $('#get-services').click(function () {
// reset all selected list // reset all selected list
resetReqResData() resetReqResData()
@ -10,16 +10,16 @@ $('#get-services').click(function(){
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"
} }
if($('#use-tls').is(":checked")) { if ($('#use-tls').is(":checked")) {
use_tls = "true" use_tls = "true"
} }
// 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())
}); });
@ -35,10 +35,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 = "";
@ -49,21 +49,21 @@ $('#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);
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 () {
applyConnCount(); applyConnCount();
$(this).html(button); $(this).html(button);
hide_loading(); hide_loading();
@ -85,51 +85,51 @@ $('#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;
} }
$('#body-request').hide(); $('#body-request').hide();
$('#response').hide(); $('#resp-tab').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 + 1), 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;
} }
$('#response').hide(); $('#resp-tab').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;
@ -140,22 +140,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())
}); });
@ -166,39 +166,58 @@ $('#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;
} }
$("#json-response").html(PR.prettyPrintOne(res.data.result)); $("#json-response").html(PR.prettyPrintOne(res.data.result));
$("#json-resp-post").html(PR.prettyPrintOne(res.data.post_script_result));
$("#timer-resp span").html(res.data.timer); $("#timer-resp span").html(res.data.timer);
$('#response').show(); $('#resp-tab').show();
if (res.data.post_script_result == "") {
$('#post-script').hide();
} else {
$('#post-script').show();
}
$('#resp-original').show();
}, },
error: err, error: err,
beforeSend: function(xhr){ beforeSend: function (xhr) {
$('#response').hide(); $('#resp-tab').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();
} }
}); });
}); });
$("#resp-tab div button").click(function () {
const id = $(this).attr('id');
console.log(id);
if (!$(this).hasClass('active')) {
$("#resp-tab div button").removeClass('active');
$(this).addClass('active');
$('.tabcontent').hide();
$(`#resp-${id}`).show();
}
});
function generate_editor(content) { function generate_editor(content) {
if(editor) { if (editor) {
editor.setValue(content); editor.setValue(content);
return true; return true;
} }
@ -239,7 +258,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();
@ -248,15 +267,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');
}, },
}); });
@ -273,10 +292,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());
@ -301,6 +320,6 @@ function refreshToolTip() {
}) })
} }
$(document).ready(function(){ $(document).ready(function () {
refreshConnCount(); refreshConnCount();
}); });