page.html 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. <html>
  2. <head>
  3. <title>ngrok</title>
  4. <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  5. <link rel="stylesheet" href="http://yandex.st/highlightjs/7.3/styles/default.min.css">
  6. <script src="http://yandex.st/highlightjs/7.3/highlight.min.js"></script>
  7. <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  8. <script>hljs.initHighlightingOnLoad();</script>
  9. <script type="text/javascript">
  10. $(function() {
  11. $("ul.request.nav a").click(function() {
  12. $(this).closest("div").find(".raw, .headers, .summary").hide();
  13. $(this).closest("div").find("." + $(this).attr("target")).show();
  14. $(this).closest("ul").find("li.active").removeClass("active");
  15. $(this).parent().addClass("active");
  16. return false;
  17. });
  18. $(".replay").click(function() {
  19. $.ajax({
  20. type: "POST",
  21. url: "/http/in/replay",
  22. data: { txnid: $(this).closest(".txn").attr("txnid") }
  23. });
  24. return false;
  25. });
  26. });
  27. </script>
  28. <style type="text/css">
  29. body { margin-top: 50px; }
  30. ul.history > li { none; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #ccc; }
  31. .headers, .raw { display: none; }
  32. table.params { font-family: Courier, monospace; }
  33. </style>
  34. </head>
  35. <body>
  36. <div class="container">
  37. <div class="navbar navbar-inverse navbar-fixed-top">
  38. <div class="navbar-inner">
  39. <div class="container">
  40. <a class="brand" href="#">ngrok</a>
  41. <ul class="nav">
  42. <li class="active"><a href="#">Inbound Requests</a></li>
  43. <li><a href="#">Outbound Requests</a></li>
  44. <li><a href="#">Configuration</a></li>
  45. </ul>
  46. </div>
  47. </div>
  48. </div>
  49. <ul class="history unstyled">
  50. {{ range .HttpRequests.Slice }}
  51. <li class="txn" txnid="{{ .Id }}">
  52. <div class="row">
  53. <div class="span6">
  54. {{ with .Req }}
  55. <h3>{{ .Method }} {{ .URL.Path }}</h3>
  56. <ul class="request nav nav-pills">
  57. <li class="active"><a target="summary" href="#">Summary</a></li>
  58. <li><a href="#" target="headers">Headers</a></li>
  59. <li><a href="#" target="raw">Raw</a></li>
  60. <li class="pull-right"><button class="replay btn btn-primary">Replay</button></li>
  61. </ul>
  62. <div class="raw">
  63. {{ with $raw := dumpRequest . }}
  64. <pre><code class="http">{{ $raw }}</code></pre>
  65. {{ end }}
  66. </div>
  67. <div class="headers">
  68. {{ with .Header }}
  69. <h6>Headers</h6>
  70. <table class="table params">
  71. {{ range $key, $value := .}}
  72. <tr>
  73. <th> {{ $key }} </th>
  74. <td> {{ $value }} </td>
  75. </tr>
  76. {{ end }}
  77. </table>
  78. {{ end }}
  79. </div>
  80. <div class="summary">
  81. {{ with .URL.Query }}
  82. <h6>Query Params</h6>
  83. <table class="table params">
  84. {{ range $key, $value := .}}
  85. <tr>
  86. <th> {{ $key }} </th>
  87. <td> {{ $value }} </td>
  88. </tr>
  89. {{ end }}
  90. </table>
  91. {{ end }}
  92. {{ template "body" . }}
  93. </div>
  94. {{ end }}
  95. </div>
  96. <div class="span6">
  97. {{ with .Resp }}
  98. <h3 class="{{ classForStatus .Status }}">{{ .Status }}</h3>
  99. {{ with $raw := dumpResponse . }}
  100. <pre><code class="http">{{ $raw }}</code></pre>
  101. {{ end }}
  102. {{ end }}
  103. </div>
  104. </div>
  105. </li>
  106. {{ end }}
  107. </ul>
  108. </div>
  109. </body>
  110. </html>