Add a new funky web front end UI.
git-svn-id: https://asterixdb.googlecode.com/svn/branches/asterix_stabilization_result_distribution@1146 eaa15691-b419-025a-1212-ee371bd00084
diff --git a/asterix-app/src/main/java/edu/uci/ics/asterix/api/http/servlet/APIServlet.java b/asterix-app/src/main/java/edu/uci/ics/asterix/api/http/servlet/APIServlet.java
index 6f1e231..1299bae 100644
--- a/asterix-app/src/main/java/edu/uci/ics/asterix/api/http/servlet/APIServlet.java
+++ b/asterix-app/src/main/java/edu/uci/ics/asterix/api/http/servlet/APIServlet.java
@@ -29,6 +29,283 @@
private static final String HYRACKS_CONNECTION_ATTR = "edu.uci.ics.asterix.HYRACKS_CONNECTION";
+ private static final String HTML_HEADER_TEMPLATE = "<!DOCTYPE html>"
+ + "<html lang=\"en\">"
+ + "<head>"
+ + "<meta name=\"description\" content=\"ASTERIX WEB PAGE\" />"
+ + "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">"
+ + "<link href='http://fonts.googleapis.com/css?family=Bitter|PT+Sans+Caption|Open+Sans' rel='stylesheet' type='text/css'>"
+ + "<script src=\"http://code.jquery.com/jquery.min.js\"></script>"
+ + "<script src=\"http://www.jacklmoore.com/autosize/jquery.autosize.js\"></script>"
+ + " "
+ + "<link href=\"http://twitter.github.com/bootstrap/assets/css/bootstrap.css\" rel=\"stylesheet\" type=\"text/css\" />"
+ + "<link href=\"http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css\" rel=\"stylesheet\">"
+ + ""
+ + " "
+ + "<script src=\"http://twitter.github.com/bootstrap/assets/js/bootstrap.js\"></script>"
+ + ""
+ + "<script type=\"text/javascript\">"
+ + "$(document).ready(function(){"
+ + " $('textarea').autosize();"
+ + "});"
+ + "</script>"
+ + ""
+ + "<meta charset=utf-8 />"
+ + "<title>ASTERIX Demo</title>"
+ + "<style id=\"jsbin-css\">"
+ + "body {"
+ + " background: none repeat scroll 0 0 white;"
+ + " color: #222222;"
+ + " font-family: 'Bitter';"
+ + " font-size: 14px;"
+ + " line-height: 17px;"
+ + " width: 100%;"
+ + "}"
+ + ""
+ + ".content {"
+ + " margin-top: 70px;"
+ + "}"
+ + ""
+ + "label.query, label.result {"
+ + " font-size: 24px;"
+ + " padding-bottom: 10px;"
+ + " font-weight: bold;"
+ + "}"
+ + ""
+ + "div.host {"
+ + " float: left;"
+ + " margin: 0 100px 0 10px;"
+ + "}"
+ + ""
+ + "div.port {"
+ + "}"
+ + ""
+ + "div.left {"
+ + " float: left;"
+ + " width: 320px;"
+ + " padding: 0 20px 0 10px;"
+ + "}"
+ + ""
+ + "div.right {"
+ + "}"
+ + ""
+ + "button.btn {"
+ + " clear: both;"
+ + " float: left;"
+ + " margin: 20px 0 0 10px;;"
+ + "}"
+ + ""
+ + "textarea.query {"
+ + " -webkit-box-sizing: border-box;"
+ + " -moz-box-sizing: border-box;"
+ + " -ms-box-sizing: border-box;"
+ + " box-sizing: border-box;"
+ + " font-size: 16px;"
+ + " line-height: 20px;"
+ + " font-family: bitter, helvetica;"
+ + " width: 100%;"
+ + " padding: 10px;"
+ + " color: #999;"
+ + " resize: none;"
+ + " border: 10px solid #eee;"
+ + "}"
+ + ""
+ + "textarea.query:focus {"
+ + " outline: none;"
+ + " color: #333;"
+ + "}"
+ + ""
+ + "label {"
+ + " padding-top: 10px;"
+ + "}"
+ + ""
+ + "input[type=text] {"
+ + " height: 20px;"
+ + "}"
+ + ""
+ + ""
+ + "div.output label.heading {"
+ + " font-size: 24px;"
+ + " margin-top: 2px;"
+ + " padding-bottom: 10px;"
+ + " font-weight: bold;"
+ + "}"
+ + ""
+ + "div.output .message {"
+ + " -webkit-box-sizing: border-box;"
+ + " -moz-box-sizing: border-box;"
+ + " -ms-box-sizing: border-box;"
+ + " box-sizing: border-box;"
+ + " -webkit-border-radius: 4px 4px 4px 4px;"
+ + " -moz-border-radius: 4px 4px 4px 4px;"
+ + " -ms-border-radius: 4px 4px 4px 4px;"
+ + " border-radius: 4px 4px 4px 4px;"
+ + " color: #000;"
+ + " resize: none;"
+ + " border: 1px solid #eee;"
+ + "}"
+ + ""
+ + "div.error label.heading {"
+ + " color: #ff2020;"
+ + " font-size: 24px;"
+ + " margin-top: 2px;"
+ + " padding-bottom: 10px;"
+ + " font-weight: bold;"
+ + "}"
+ + ""
+ + "div.error .message {"
+ + " -webkit-box-sizing: border-box;"
+ + " -moz-box-sizing: border-box;"
+ + " -ms-box-sizing: border-box;"
+ + " box-sizing: border-box;"
+ + " border-color: rgba(82, 168, 236, 0.8);"
+ + " outline: 0;"
+ + " outline: thin dotted 9;"
+ + ""
+ + " -webkit-box-shadow: inset 0 1px 1px rgba(250, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.8);"
+ + " -moz-box-shadow: inset 0 1px 1px rgba(250, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 1.0);"
+ + " box-shadow: inset 0 1px 1px rgba(250, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 1.0);"
+ + " color: #000;"
+ + " resize: none;"
+ + " border: 1px solid #eee;"
+ + " margin-top: 7px;"
+ + " padding: 20px 20px 20px 20px;"
+ + "}"
+ + ""
+ + ".footer {"
+ + " margin-top: 40px;"
+ + "}"
+ + ""
+ + ".footer .line {"
+ + " border-top: 1px solid #EEEEEE;"
+ + " bottom: 20px;"
+ + " height: 10px;"
+ + " left: 0;"
+ + " position: fixed;"
+ + " width: 100%;"
+ + "}"
+ + ""
+ + ".footer .content {"
+ + " background: none repeat scroll 0 0 #FFFFFF;"
+ + " bottom: 0;"
+ + " color: #666666;"
+ + " font-size: 12px;"
+ + " height: 25px;"
+ + " left: 0;"
+ + " padding-top: 5px;"
+ + " position: fixed;"
+ + " width: 100%;"
+ + "}"
+ + ""
+ + ".footer .content .left {"
+ + " padding-left: 20px;"
+ + " float: left;"
+ + "}"
+ + ""
+ + ".footer .content .right {"
+ + " padding-right: 20px;"
+ + " float: right;"
+ + "}</style></head>"
+ + "<body>"
+ + " <div class=\"navbar navbar-inverse navbar-fixed-top\">"
+ + " <div class=\"navbar-inner\">"
+ + " <div class=\"container\">"
+ + " <a class=\"btn btn-navbar\" data-toggle=\"collapse\" data-target=\".nav-collapse\">"
+ + " <span class=\"icon-bar\"></span>"
+ + " <span class=\"icon-bar\"></span>"
+ + " <span class=\"icon-bar\"></span>"
+ + " </a>"
+ + " <a class=\"brand\" href=\"#\">ASTERIX</a>"
+ + " <div class=\"nav-collapse collapse\">"
+ + " <ul class=\"nav\">"
+ + " <li><a href=\"#\">Open source</a></li>"
+ + " <li><a href=\"#about\">File issues</a></li>"
+ + " <li><a href=\"#contact\">Contact</a></li>"
+ + " </ul>"
+ + " </div><!--/.nav-collapse -->"
+ + " </div>"
+ + " </div>"
+ + " </div>"
+ + "";
+ private static final String HTML_FORM_CONTENT_TEMPLATE = " <div class=\"content\">"
+ + " <div class=\"container\">"
+ + " <div class=\"row-fluid\">"
+ + " <div class=\"span6\">"
+ + " <form class=\"form-horizontal\" method=\"post\">"
+ + " <div>"
+ + " <label class=\"query\">Query</label>"
+ + " <textarea rows=\"20\" name=\"query\" class=\"query\" value=\"%s\" placeholder=\"Type your AQL query ...\"></textarea>"
+ + " </div>"
+ + " <div>"
+ + " <div class=\"host\">"
+ + " <label>Host</label><input type=\"text\" name=\"hyracks-ip\" placeholder=\"IP Address or hostname\"/>"
+ + " </div>"
+ + " <div class=\"port\">"
+ + " <label>Port</label><input type=\"text\" name=\"hyracks-port\" placeholder=\"Port number\"/>"
+ + " </div>"
+ + " </div>"
+ + " <div>"
+ + " <div class=\"left\">"
+ + " <label class=\"checkbox\"><input type=\"checkbox\" name=\"print-expr-tree\" value=\"true\" /> Print parsed expressions</label>"
+ + " </div>"
+ + " <div class=\"right\">"
+ + " <label class=\"checkbox\"><input type=\"checkbox\" name=\"print-rewritten-expr-tree\" value=\"true\" /> Print rewritten expressions</label>"
+ + " </div>"
+ + " </div>"
+ + " <div>"
+ + " <div class=\"left\">"
+ + " <label class=\"checkbox\"><input type=\"checkbox\" name=\"print-logical-plan\" value=\"true\" /> Print logical plan</label>"
+ + " </div>"
+ + " <div class=\"right\">"
+ + " <label class=\"checkbox\"><input type=\"checkbox\" name=\"print-optimized-logical-plan\" value=\"true\" /> Print optimized logical plan</label>"
+ + " </div>"
+ + " </div>"
+ + " <div>"
+ + " <div class=\"left\">"
+ + " <label class=\"checkbox\"><input type=\"checkbox\" name=\"print-job\" value=\"true\" /> Print hyracks job</label>"
+ + " </div>"
+ + " <div class=\"right\">"
+ + " <label class=\"checkbox\"><input type=\"checkbox\" name=\"display-result\" value=\"true\" /> Display error/results</label>"
+ + " </div>"
+ + " </div>"
+ + " <button type=\"submit\" class=\"btn btn-danger\">Execute</button>"
+ + " </form>"
+ + " </div>";
+
+ private static final String HTML_EMPTY_OUTPUT_TEMPLATE = " <div class=\"span6\">"
+ + " <div class=\"output\">"
+ + " <label class=\"heading\">Output</label>"
+ + " <div class=\"message\">"
+ + " </div>"
+ + " </div>"
+ + " </div>";
+
+ private static final String HTML_OUTPUT_TEMPLATE = "<div class=\"span6\">"
+ + " <div class=\"output\">"
+ + " <label class=\"heading\">Output</label>"
+ + " <table class=\"table table-bordered table-striped\">"
+ + " %s"
+ + " </table>"
+ + " </div>"
+ + "</div>";
+
+ private static final String HTML_FOOTER_TEMPLATE = " </div>"
+ + " </div>"
+ + " </div>"
+ + " <div class=\"footer\">"
+ + " <section class=\"line\"><hr></section>"
+ + " <section class=\"content\">"
+ + " <section class=\"left\">"
+ + " Developed by ASTERIX group"
+ + " </section>"
+ + " <section class=\"right\">"
+ + " © Copyright 2012 University of California, Irvine"
+ + " </section>"
+ + " </section>"
+ + " </div>"
+ + "</body>"
+ + "</html>";
+
@Override
public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException {
String query = request.getParameter("query");
@@ -94,21 +371,8 @@
public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
PrintWriter out = response.getWriter();
response.setContentType("text/html");
- final String form = "<form method=\"post\">"
- + "<center><textarea cols=\"80\" rows=\"25\" name=\"query\" ></textarea><br/>"
- + "IP Address: <input type = \"text\" name = \"hyracks-ip\" size=\"15\" maxlength=\"35\" value=\"localhost\" /><br/>"
- + "Port: <input type = \"text\" name = \"hyracks-port\" size=\"5\" maxlength=\"5\" value=\"1098\" /><br/>"
- + "<input type = \"checkbox\" name = \"print-expr-tree\" value=\"true\" />print parsed expressions<P>"
- + "<input type = \"checkbox\" name = \"print-rewritten-expr-tree\" value=\"true\" />print rewritten expressions<P>"
- + "<input type = \"checkbox\" name = \"print-logical-plan\" value=\"true\" checked/>print logical plan<P>"
- + "<input type = \"checkbox\" name = \"print-optimized-logical-plan\" value=\"true\" checked/>print optimized logical plan<P>"
- + "<input type = \"checkbox\" name = \"print-job\" value=\"true\" checked/>print Hyracks job<P>"
- + "<input type = \"checkbox\" name = \"display-result\" value=\"true\" checked/>display NFS file<P>"
- // +
- // "<input type = \"checkbox\" name = \"serialize-as-xml\" value=\"true\">serialize as XML<P>"
- // +
- // "<input type = \"checkbox\" name = \"show-tuples\" value=\"true\">show the entire tuples<P>"
- + "<input type=\"submit\"/>" + "</center>" + "</form>";
+ final String form = HTML_HEADER_TEMPLATE + String.format(HTML_FORM_CONTENT_TEMPLATE, "")
+ + HTML_EMPTY_OUTPUT_TEMPLATE + HTML_FOOTER_TEMPLATE;
out.println(form);
}