| 160 | |
| 161 | {{{#!comment |
| 162 | = New web interface |
| 163 | |
| 164 | In addition to the console UIs, we also maintain a browser based (remote, via HTTP) interface to the tool, which provides an even more convenient way for code grokking. The main features of the web interface are: |
| 165 | |
| 166 | * Running and exploring semantic queries (both normal and context-sensitive queries) |
| 167 | * Query construct assistant (auto-complete) |
| 168 | * Persistent queries |
| 169 | * Management of (possibly multiple) running queries |
| 170 | * Database operations |
| 171 | * Ability to mark files with error forms |
| 172 | * Dependency examinations |
| 173 | * Marking expressions as dynamic function references |
| 174 | |
| 175 | ''Note that !JavaScript must be enabled in the browser to be able to use this interface.'' |
| 176 | |
| 177 | == Installation |
| 178 | Actually, this interface is only a limited prototype, thus it has some extra restrictions, which are related to the used web browser. Due to the usage of web sockets, neither Internet Explorer nor Firefox are not supported. We only support Google Chrome and Safari. |
| 179 | |
| 180 | === Yaws === |
| 181 | The web based UI is built upon the [http://yaws.hyber.org/ Yaws] web server. To be able to start this interface you need a Yaws web server installed. Installation help: http://yaws.hyber.org/yaws.pdf (see Chapter 2). |
| 182 | |
| 183 | * Required version: 1.95 |
| 184 | |
| 185 | If you prefer using a different version of Yaws, please, use [wiki:WebInterface the old web based interface] of the tool. |
| 186 | |
| 187 | '''If Erlang/OTP-R16B01 or a newer version is used''', then none of the Yaws versions will be compiled from source. The problem is that every Erlang source of Yaws is compiled with the {{{-Werror}}} flag which causes build error when used with at least Erlang/OTP-R16B01 to compile Yaws. |
| 188 | |
| 189 | To fix this error, you should use this modified Makefile. Put [attachment:Makefile:wiki:WebInterface this Makefile] under the {{{src}}} directory of the downloaded sources of Yaws, then execute {{{make clean}}}. After the execution, the standard build procedure should be followed which is shown in LocalInstallLinux page. |
| 190 | |
| 191 | If Windows is used, then other opportunity exists. Use the installer binaries of different Yaws versions (Yaws-1.92 - Yaws-1.96) instead of compiling them from source. |
| 192 | |
| 193 | For a step-by-step installation tutorial, which is including the installation guide of Yaws, please see LocalInstallLinux. |
| 194 | |
| 195 | == Starting up |
| 196 | |
| 197 | We can start the server either with the {{{referl}}} script using the {{{-web2}}} option, or from a running !RefactorErl shell. Both cases provide a default configuration: server name {{{localhost}}}, port {{{8001}}}, and address {{{127.0.0.1.}}}, which can be overridden. |
| 198 | |
| 199 | Possible options: |
| 200 | |
| 201 | * {{{yaws_path YPATH}}} |
| 202 | |
| 203 | The absolute location of your Yaws ebin directory. |
| 204 | |
| 205 | * {{{yaws_listen YLISTEN}}} |
| 206 | |
| 207 | Valid IP address, which Yaws will listen to. |
| 208 | |
| 209 | * {{{yaws_name YNAME}}} |
| 210 | |
| 211 | Valid domain name, which Yaws will be bound to. |
| 212 | |
| 213 | * {{{yaws_port YPORT}}} |
| 214 | |
| 215 | Valid port number, which Yaws will be bound to. |
| 216 | |
| 217 | * {{{browser_root BROOT}}} |
| 218 | |
| 219 | The web interface allows database operations. The root directory for those operations can be set with this parameter. |
| 220 | (This option can be used multiple times if you wish to add more than one directories.) |
| 221 | |
| 222 | * {{{images_dir IDIR}}} |
| 223 | |
| 224 | Path of the directory where the generated images (visualisation of dependency examinations) will be placed. |
| 225 | |
| 226 | * {{{restricted_mode ENABLED}}} |
| 227 | |
| 228 | A boolean value determining whether the web interface will be started in restricted mode. |
| 229 | |
| 230 | === Startup: referl script |
| 231 | |
| 232 | You can pass any of the above options via command-line arguments (note that {{{-web2}}} is mandatory). |
| 233 | Example: |
| 234 | {{{ |
| 235 | bin/referl -web2 |
| 236 | -yaws_path /Users/V/yaws-1.95/ebin |
| 237 | -yaws_listen 127.0.0.1 |
| 238 | -yaws_port 8000 |
| 239 | -yaws_name localhost |
| 240 | -browser_root /Users/V/erlang |
| 241 | -browser_root /Users/V/project |
| 242 | -images_dir /Users/V/graph_images |
| 243 | -restricted_mode true |
| 244 | }}} |
| 245 | |
| 246 | === Startup: !RefactorErl shell |
| 247 | |
| 248 | We have two functions for starting the interface : {{{ri:start_web2/0}}} and {{{ri:start_web2/1}}}. Without passing any parameters the web server starts up with the default configuration. The 1-arity function allows the interface to be configured using an [http://www.erlang.org/doc/man/proplists.html Erlang proplist]. Example: |
| 249 | {{{ |
| 250 | #!erlang |
| 251 | |
| 252 | ri:start_web2([ |
| 253 | {yaws_path,"/Users/V/yaws-1.95/ebin"}, |
| 254 | {yaws_listen,"127.0.0.1"}, |
| 255 | {yaws_name, localhost}, |
| 256 | {yaws_port,"8000"}, |
| 257 | {browser_root,"/Users/V/erlang"}, |
| 258 | {images_dir,"/Users/V/graph_images"}, |
| 259 | {restricted_mode, true}]). |
| 260 | }}} |
| 261 | |
| 262 | To specify multiple locations as root directories for database operations, you can pass a list of those locations with the {{{browser_root}}} property. Example: |
| 263 | {{{ |
| 264 | #!erlang |
| 265 | |
| 266 | ri:start_web2([ |
| 267 | {browser_root, ["/Users/V/erlang", "/Users/V/project"]}]). |
| 268 | }}} |
| 269 | |
| 270 | |
| 271 | == Shutting down |
| 272 | |
| 273 | You are advised to always log out before shutting down the web server, because the log-out process deletes temporary, dynamically generated components of web pages. If the server has been started from the !RefactorErl shell, then {{{ri:stop_web2()}}} should be called in order to shut down the service. |
| 274 | |
| 275 | |
| 276 | == Logging in & Restricted mode |
| 277 | |
| 278 | In your browser, navigate to the server address defined by the configuration (the default is {{{http://localhost:8001}}}) after the web server has been successfully started. Services are allowed only to authorized people, so first you have to log in with a username. After a succesful login the browser will be redirected to the ''queries'' page. |
| 279 | |
| 280 | If the interface has been started with restricted mode enabled standard users can not acces the Database and Errors pages or any database modifying functions. The administrator can still acces these functions but for that you have to set up and use a password. |
| 281 | |
| 282 | For setting up the password you have to use a !RefactorErl shell: |
| 283 | {{{ |
| 284 | #!erlang |
| 285 | |
| 286 | referl_ui_web2:set_web2_pass("admin", "*Password*"). |
| 287 | }}} |
| 288 | |
| 289 | After the password has been set the administrator can log in with the "admin" username and the set password and access the restricted functions. |
| 290 | |
| 291 | == Global notifications |
| 292 | |
| 293 | When someone starts/finishes a modification of the database (e.g. adding files), a notification will appear stating what process has been started/finished. |
| 294 | During any modification process most functions on the web interface will not be available. This restriction is global for the whole system. |
| 295 | For further information, see: [wiki:ConfigurableJobServer Configurable Jobserver] |
| 296 | |
| 297 | == Stateful pages |
| 298 | |
| 299 | The interface has stateful pages meaning one can share any visible states with a teammate by copying the url from the address bar and sending it. |
| 300 | Also you can easily navigate between previous states of the interface with your browser's back, forward and history functions. |
| 301 | |
| 302 | == Database operations |
| 303 | |
| 304 | This service is available under the "Database" tab. The file browser panel is located at the left side of the page. You can either browse files which are located on the server ("Browse server"), or which had been loaded into the database ("Browse loaded files"). You can switch between these two options by clicking the button in the top right corner of the file browser box. |
| 305 | |
| 306 | === Browsing files on the server |
| 307 | |
| 308 | The root directory of the browser is an optional configuration parameter. Possible values are: |
| 309 | |
| 310 | * When the {{{browser_root}}} parameter has been set during start up, the given value or values are the root element(s). |
| 311 | * When the {{{browser_root}}} parameter has not been set during start up: |
| 312 | * If the database had contained files before start up, the root elements are the directories of these files. |
| 313 | * If the database had not contained files before start up, then !RefactorErl’s lib directory will be the root. |
| 314 | |
| 315 | In this mode, directories can be listed, the contents of files can be shown, and a selected directory or file can be added to the database. The selected directory or file is highlighted by a blue background. Database operations are indicated by a progress bar. |
| 316 | |
| 317 | Searching is possible in both file system files, and loaded files. |
| 318 | |
| 319 | === Browsing loaded files |
| 320 | |
| 321 | In this mode, directories' and files' contents can be listed, a selected file or directory can be reloaded to the database, dropped from the database, or can be pre-generated for the source code viewer. Status messages are displayed during the reloading/dropping/generating process, and also after the process has finished. |
| 322 | The file browser displays the last directory that contains all the loaded files. |
| 323 | Under the file browser box, there is a separate box for the function quicklist. In this box, the function definitions of the displayed file are listed if the file is added to the database. You can jump to the chosen function in the file by clicking on. |
| 324 | If file is not displayed correctly, you can try to "repair" it by clicking the Refresh button in the upper right corner of the function quicklist window. |
| 325 | |
| 326 | ''Dropping a file from the database does not imply removal from the file system.'' |
| 327 | |
| 328 | == Downloading files from the server |
| 329 | |
| 330 | When browsing the database or filesystem contents on the "Queries" or "Database" pages you can right-click on the selected file and download it to your local machine by selecting "Download file" from the appearing context menu. |
| 331 | |
| 332 | == Running semantic queries |
| 333 | |
| 334 | See [wiki:Web2/RunningSemanticQueries Running semantic queries]. |
| 335 | |
| 336 | == Errors |
| 337 | |
| 338 | This service is available under the "Errors" tab. |
| 339 | |
| 340 | If the database contains file(s) with error form(s), the list of errors will be displayed in a table. Each row in the table shows an error. Clicking the file name shows the file and highlights the position of the error. |
| 341 | |
| 342 | If the database does not contain any files with error forms, a "No error" message is displayed. |
| 343 | |
| 344 | == Dependency examination |
| 345 | |
| 346 | See [wiki:Web2/DependencyExaminations Dependency examinations]. |
| 347 | {{{#!comment |
| 348 | == Code duplicates |
| 349 | |
| 350 | See [wiki:WebInterface/CodeDuplicates Code duplicates]. |
| 351 | }}} |
| 352 | |
| 353 | == Reporting dynamic function references |
| 354 | |
| 355 | While browsing the contents of a file in the database, any expression can be reported as a dynamic function reference candidate by right-clicking and selecting Send "{{{expression}}}" as dynfun from the context menu. See [wiki:DynamicCallAnalysis#User-definedfunctionreferences User-defined function references]. |
| 356 | |
| 357 | The reported candidates can later be reviewed at the server via a !RefactorErl shell: |
| 358 | {{{ |
| 359 | #!erlang |
| 360 | |
| 361 | referl_ui_web2:show_dynfuns([{out, stdio}, {filter, valid}, {filter, new}, {filter, {file, "name"}}]). |
| 362 | referl_ui_web2:delete_dynfuns(). |
| 363 | }}} |
| 364 | |
| 365 | Possible options for {{{show_dynfuns/1}}}: |
| 366 | * ''none'': |
| 367 | Returns the reported references as erlang terms. |
| 368 | * {{{ {out, stdio} | {out, stdout} }}}: |
| 369 | Formats and prints the references to the standard output. |
| 370 | * {{{ {out, {file, "name.ext"}} }}}: |
| 371 | Prints the output to the given filename. |
| 372 | * {{{ {filter, {seen, true}} | {filter, seen} }}}: |
| 373 | Only outputs the previously seen references. |
| 374 | * {{{ {filter, {seen, false}} | {filter, new} }}}: |
| 375 | Only outputs newly reported expressions. |
| 376 | * {{{ {filter, valid} }}}: |
| 377 | Outputs the references where the database was the same as now at the time of reporting. |
| 378 | * {{{ {filter, {file, "regexp"}} }}}: |
| 379 | Only gives outputs where "regexp" matches to the file-path of the expression. |
| 380 | |
| 381 | |
| 382 | == Logging out |
| 383 | |
| 384 | You can log out by clicking the "Log out {{{username}}}" button. During the logout process the interface clears the users' session, deletes the dynamically generated images belonging to the user, and redirects the browser to the login page. The interface does not delete the queries executed by the user, nor their results, and also keeps the state of the database. |
| 385 | |
| 386 | }}} |