feat: add post script functionality

core/post_script.go

@@ -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()
+}

core/resource.go

@@ -3,6 +3,7 @@ package core
 import (
 	"bytes"
 	"context"
+	"encoding/json"
 	"fmt"
 	"io"
 	"io/ioutil"
@@ -34,6 +35,9 @@ type Resource struct {
 	protos     []Proto
 	protosets  []Proto
 
+	postScriptsSvc map[string]bool
+	postScriptsMtd map[string][]PostScriptConfig
+
 	headers []string
 	md      metadata.MD
 }
@@ -112,9 +116,9 @@ func (r *Resource) List(symbol string) ([]string, error) {
 			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 {
 		methods, err := grpcurl.ListMethods(r.descSource, symbol)
 		if err != nil {
@@ -124,14 +128,47 @@ func (r *Resource) List(symbol string) ([]string, error) {
 			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
 }
 
+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
 // 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.
@@ -217,7 +254,7 @@ func (r *Resource) Invoke(ctx context.Context, metadata []string, symbol string,
 
 	start := time.Now()
 	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 {
 		return "", end, err
 	}
@@ -229,6 +266,23 @@ func (r *Resource) Invoke(ctx context.Context, metadata []string, symbol string,
 	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
 func (r *Resource) Close() {
 	var wg sync.WaitGroup

go.mod

@@ -6,5 +6,7 @@ require (
 	github.com/fullstorydev/grpcurl v1.3.2
 	github.com/gorilla/mux v1.7.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
 )

go.sum

@@ -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/gorilla/mux v1.7.0 h1:tOSd0UKHQd6urX6ApfOn4XdBMY6Sh1MfxV3kmaazO+U=
 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/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/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=

handler/handler.go

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

index/css/style.css

@@ -1,55 +1,72 @@
 body {
     padding-bottom: 50px;
 }
+
 .mt-10 {
-    margin-top:10px;
+    margin-top: 10px;
 }
+
 .pt-50 {
-    padding-top:50px;
+    padding-top: 50px;
 }
+
 .w-120 {
     width: 120px;
 }
+
 .custom-pretty {
-    border:none!important;
+    border: none !important;
 }
+
 .custom-control-label:hover {
     cursor: pointer;
 }
-#choose-service, #choose-function, #body-request {
+
+#choose-service,
+#choose-function,
+#body-request {
     margin-top: 40px;
 }
+
 .schema-body {
     height: 250px;
     overflow-y: scroll;
 }
-#response {
+
+#resp-tab {
     margin-top: 30px;
 }
 
 /* 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;
     top: 200px;
     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;
     transition: all .3s;
     -webkit-transition: all .3s;
     color: #222;
 }
 
-.connections:hover, .connections:focus {
+.connections:hover,
+.connections:focus {
     transform: translate3d(190px, 0, 0);
     animation-timing-function: 1s ease-in
 }
@@ -110,7 +128,9 @@ body {
     cursor: pointer;
 }
 
-.connections .nav li a:hover { color: #aaa }
+.connections .nav li a:hover {
+    color: #aaa
+}
 
 .dots {
     position: absolute;
@@ -141,6 +161,7 @@ circle {
         stroke-opacity: 1;
         transform: scale(0.3);
     }
+
     to {
         stroke-width: 0;
         stroke-opacity: 0;
@@ -157,7 +178,7 @@ circle {
     font-size: 80px;
 }
 
-.spinner > div {
+.spinner>div {
     background-color: #59698d;
     height: 100%;
     width: 18px;
@@ -188,15 +209,28 @@ 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% {
+
+    0%,
+    40%,
+    100% {
         transform: scaleY(0.4);
         -webkit-transform: scaleY(0.4);
-    }  20% {
+    }
+
+    20% {
         transform: scaleY(1.0);
         -webkit-transform: scaleY(1.0);
     }
@@ -215,13 +249,14 @@ circle {
     margin-bottom: 0;
     margin-left: 5px;
     max-width: 100%;
-    white-space:nowrap;
+    white-space: nowrap;
-    overflow:hidden;
+    overflow: hidden;
-    text-overflow:ellipsis;
+    text-overflow: ellipsis;
 }
+
 .one-long-line:hover {
     cursor: pointer;
-    overflow:visible;
+    overflow: visible;
 }
 
 .column-row-left {
@@ -230,7 +265,7 @@ circle {
     margin-top: 8px;
 }
 
-.column-row-left .md-form{
+.column-row-left .md-form {
     margin-bottom: 0;
 }
 
@@ -248,5 +283,65 @@ circle {
 }
 
 .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;
+    }
 }

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">
@@ -35,10 +36,12 @@
           <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>
+            <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"
+              <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>
               <div class="dropdown-menu dropdown-menu-right" aria-labelledby="btnGroupDrop1">
                 <a class="dropdown-item" id="show-modal-save-request">Save</a>
@@ -68,7 +71,6 @@
           <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>
 
@@ -122,7 +124,9 @@
         <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>&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>
@@ -131,7 +135,9 @@
         <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>&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>
@@ -144,27 +150,53 @@
                 <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>&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 class="col-md-5">
             <div class="card">
               <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>
               </div>
             </div>
           </div>
         </div>
 
-        <div class="row other-elem" id="response" style="display: none">
+        <!-- Tab links -->
+        <div class="other-elem" id="resp-tab" style="display: none">
+          <div class="tab">
+            <button class="tablinks active" id="original">Response</button>
+            <button class="tablinks" id="post-script">Post Script Response</button>
+            <small class="pull-right" id="timer-resp">
+              Time : <span></span>
+            </small>
+          </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">
-                <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 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>
@@ -174,22 +206,32 @@
   </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;"
+    <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="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>
-      <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>
     </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>
+      <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>
+    <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>
@@ -203,16 +245,21 @@
   </div>
 
   <!-- 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-content">
         <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 class="modal-body">
           <form>
             <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">
                 <input type="text" class="form-control" id="input-request-name">
               </div>
@@ -220,8 +267,12 @@
           </form>
         </div>
         <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>

index/js/request.list.js

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

index/js/style.js

@@ -1,6 +1,6 @@
 var target, use_tls, editor;
 
-$('#get-services').click(function(){
+$('#get-services').click(function () {
 
     // reset all selected list
     resetReqResData()
@@ -10,16 +10,16 @@ $('#get-services').click(function(){
 
     use_tls = "false";
     var restart = "0"
-    if($('#restart-conn').is(":checked")) {
+    if ($('#restart-conn').is(":checked")) {
         restart = "1"
     }
-    if($('#use-tls').is(":checked")) {
+    if ($('#use-tls').is(":checked")) {
         use_tls = "true"
     }
 
     // use metadata if there is any
     ctxArr = [];
-    $(".ctx-metadata-input-field").each(function(index, val){
+    $(".ctx-metadata-input-field").each(function (index, val) {
         ctxArr.push($(val).text())
     });
 
@@ -35,10 +35,10 @@ $('#get-services').click(function(){
     // prepare ajax options beforehand
     // makes it easier for local proto to modify some of its properties
     const ajaxProps = {
-        url: "server/"+target+"/services?restart="+restart,
+        url: "server/" + target + "/services?restart=" + restart,
         global: true,
         method: "GET",
-        success: function(res){
+        success: function (res) {
             if (res.error) {
                 target = "";
                 use_tls = "";
@@ -49,21 +49,21 @@ $('#get-services').click(function(){
             $.each(res.data, (_, item) => $("#select-service").append(new Option(item, item)));
             $('#choose-service').show();
         },
-        error: function(_, _, errorThrown) {
+        error: function (_, _, errorThrown) {
             target = "";
             use_tls = "";
             alert(errorThrown);
         },
-        beforeSend: function(xhr){
+        beforeSend: function (xhr) {
             $('#choose-service').hide();
             xhr.setRequestHeader('use_tls', use_tls);
-            if(ctxUse) {
+            if (ctxUse) {
                 xhr.setRequestHeader('Metadata', ctxArr);
             }
             $(this).html("Loading...");
             show_loading();
         },
-        complete: function(){
+        complete: function () {
             applyConnCount();
             $(this).html(button);
             hide_loading();
@@ -85,51 +85,51 @@ $('#get-services').click(function(){
     $.ajax(ajaxProps);
 });
 
-$('#select-service').change(function(){
+$('#select-service').change(function () {
     var selected = $(this).val();
     if (selected == "") {
         return false;
     }
 
     $('#body-request').hide();
-    $('#response').hide();
+    $('#resp-tab').hide();
     $.ajax({
-        url: "server/"+target+"/service/"+selected+"/functions",
+        url: "server/" + target + "/service/" + selected + "/functions",
         global: true,
         method: "GET",
-        success: function(res){
+        success: function (res) {
             if (res.error) {
                 alert(res.error);
                 return;
             }
             $("#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();
         },
         error: err,
-        beforeSend: function(xhr){
+        beforeSend: function (xhr) {
             $('#choose-function').hide();
             xhr.setRequestHeader('use_tls', use_tls);
             show_loading();
         },
-        complete: function(){
+        complete: function () {
             hide_loading();
         }
     });
 });
 
-$('#select-function').change(function(){
+$('#select-function').change(function () {
     var selected = $(this).val();
     if (selected == "") {
         return false;
     }
 
-    $('#response').hide();
+    $('#resp-tab').hide();
     $.ajax({
-        url: "server/"+target+"/function/"+selected+"/describe",
+        url: "server/" + target + "/function/" + selected + "/describe",
         global: true,
         method: "GET",
-        success: function(res){
+        success: function (res) {
             if (res.error) {
                 alert(res.error);
                 return;
@@ -140,22 +140,22 @@ $('#select-function').change(function(){
             $('#body-request').show();
         },
         error: err,
-        beforeSend: function(xhr){
+        beforeSend: function (xhr) {
             $('#body-request').hide();
             xhr.setRequestHeader('use_tls', use_tls);
             show_loading();
         },
-        complete: function(){
+        complete: function () {
             hide_loading();
         }
     });
 });
 
-$('#invoke-func').click(function(){
+$('#invoke-func').click(function () {
 
     // use metadata if there is any
     ctxArr = [];
-    $(".ctx-metadata-input-field").each(function(index, val){
+    $(".ctx-metadata-input-field").each(function (index, val) {
         ctxArr.push($(val).text())
     });
 
@@ -166,39 +166,58 @@ $('#invoke-func').click(function(){
     var body = editor.getValue();
     var button = $(this).html();
     $.ajax({
-        url: "server/"+target+"/function/"+func+"/invoke",
+        url: "server/" + target + "/function/" + func + "/invoke",
         global: true,
         method: "POST",
         data: body,
         dataType: "json",
-        success: function(res){
+        success: function (res) {
             if (res.error) {
                 alert(res.error);
                 return;
             }
             $("#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);
-            $('#response').show();
+            $('#resp-tab').show();
+            if (res.data.post_script_result == "") {
+                $('#post-script').hide();
+            } else {
+                $('#post-script').show();
+            }
+            $('#resp-original').show();
         },
         error: err,
-        beforeSend: function(xhr){
+        beforeSend: function (xhr) {
-            $('#response').hide();
+            $('#resp-tab').hide();
             xhr.setRequestHeader('use_tls', use_tls);
-            if(ctxUse) {
+            if (ctxUse) {
                 xhr.setRequestHeader('Metadata', ctxArr);
             }
             $(this).html("Loading...");
             show_loading();
         },
-        complete: function(){
+        complete: function () {
             $(this).html(button);
             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) {
-    if(editor) {
+    if (editor) {
         editor.setValue(content);
         return true;
     }
@@ -239,7 +258,7 @@ function hide_loading() {
     $('.spinner').hide();
 }
 
-$(".connections ul").on("click", "i", function(){
+$(".connections ul").on("click", "i", function () {
     $icon = $(this);
     $parent = $(this).parent("li");
     var ip = $(this).siblings("span").text();
@@ -248,15 +267,15 @@ $(".connections ul").on("click", "i", function(){
         url: "active/close/" + ip,
         global: true,
         method: "DELETE",
-        success: function(res){
+        success: function (res) {
             $('[data-toggle="tooltip"]').tooltip('hide');
-            if(res.data.success) {
+            if (res.data.success) {
                 $parent.remove();
                 updateCountNum();
             }
         },
         error: err,
-        beforeSend: function(xhr){
+        beforeSend: function (xhr) {
             $icon.attr('class', 'fa fa-spinner');
         },
     });
@@ -273,10 +292,10 @@ function applyConnCount() {
         url: "active/get",
         global: true,
         method: "GET",
-        success: function(res){
+        success: function (res) {
             $(".connections .title span").html(res.data.length);
             $(".connections .nav").html("");
-            res.data.forEach(function(item){
+            res.data.forEach(function (item) {
                 $list = $("#conn-list-template").clone();
                 $list.find(".ip").html(item);
                 $(".connections .nav").append($list.html());
@@ -301,6 +320,6 @@ function refreshToolTip() {
     })
 }
 
-$(document).ready(function(){
+$(document).ready(function () {
     refreshConnCount();
 });