autostudio.tex 3.24 KB
Newer Older
Omran Saleh's avatar
Omran Saleh committed
1
To provide a higher abstraction level, we have developed a Web application called \textbf{AutoStudio} as shown in Fig. \ref{fig:auto}. It is a user friendly and easy to use browser-based application to run cross-platform using HTML5, Draw2D touch\footnote{\url{http://www.draw2d.org/draw2d/index.html}}, and node.js\footnote{\url{http://www.nodejs.org}}. AutoStudio has several functionalities:
Omran Saleh's avatar
Omran Saleh committed
2
\begin{itemize}
Omran Saleh's avatar
Omran Saleh committed
3
\item It enables users to leverage the emerging \PipeFlow language graphically via a collection of operators (represented by icons) which could be simply ``dragged and dropped'' onto a drawing canvas. The user can assemble the operators in order to create a dataflow graph in a logical way and visually show how they are related, and from this graph, equivalent \PipeFlow script can be generated. By clicking on the operator icon, a pop-up window appears to let the user specify the parameters of \PipeFlow operators, which are required. Moreover, the user can display the help contents for each operator.
Omran Saleh's avatar
Omran Saleh committed
4
\item Contacting the \PipeFlow system to generate the right program (e.g., Storm, Spark Streaming, or PipeFabric programs) based upon the user's selection of engine from the dashboard page. This makes the user to be not aware of any of stream-processing language syntax and their constructs including \PipeFlow. By this application, the user can trigger the execution of the script through the \PipeFlow system via calling the respective engine. Moreover, it handles real-time stats including execution and performance results sent by the \PipeFlow system when the program is in execution. When the execution is complete, the application can send an email to the user.
Omran Saleh's avatar
Omran Saleh committed
5
\item It provides the options of saving the generated scripts or flow-designs for future reference, loading the saved script and executing it whenever required. 
Omran Saleh's avatar
Omran Saleh committed
6
\item An evaluation tool for the generated scripts where the user is interested in comparing as well as evaluating the performance of stream- processing systems in terms of throughput, latency, and resource consumption such as CPU and memory. The evaluation can be performed online using dynamic figures or offline using static figures.
Omran Saleh's avatar
Omran Saleh committed
7
\end{itemize}
Omran Saleh's avatar
Omran Saleh committed
8
AutoStudio prominently uses open source softwares and frameworks. The client side, including HTML5, JavaScript, Cascading Style Sheets (CSS), jQuery (and helping libraries), twitter bootstrap, and hogan.js, is used for building the graphical user interface, performing Ajax requests, file uploading and downloading, etc. AutoStudio extensively uses pre-compiled hogan templates where the data returned from the server is simply passed to these templates for quick rendering. In addition, Draw2D touch is used to enable creation of diagram applications in a browser by creating and manipulating operators and connections. Highcharts\footnote{\url{http://www.highcharts.com}} library is utilized to create interactive charts for our application. In the server side, we used a web server suitable for data-intensive real-time applications. Therefore, node.js and its supporting modules such as nodemailer and socket.io were employed.
Omran Saleh's avatar
Omran Saleh committed
9

Omran Saleh's avatar
Omran Saleh committed
10
11
\begin{figure}[hb]
  \centering
Omran Saleh's avatar
Omran Saleh committed
12
  \includegraphics[width=3.5in, height = 2in]{autostudio.eps}
Omran Saleh's avatar
Omran Saleh committed
13
  \caption
Omran Saleh's avatar
Omran Saleh committed
14
15
   {AutoStudio: the \PipeFlow web application}
   \label{fig:auto}
Omran Saleh's avatar
Omran Saleh committed
16
\end{figure}
Omran Saleh's avatar
Omran Saleh committed
17