page.html 5.4 KB

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