Development of a New Web Portal for the Database on Demand Service

Size: px

Start display at page:

Download "Development of a New Web Portal for the Database on Demand Service"

Emily O’Neal’
5 years ago
Views:

1 EUROPEAN ORGANIZATION FOR NUCLEAR RESEARCH Development of a New Web Portal for the Database on Demand Service by Can Yilmaz ALTINIGNE Istanbul Technical University, Turkey supervised by Ignacio Coterillo COZ The final project report for CERN Summer Student Programme 2017 IT Department Database On Demand Group Geneva, Switzerland August 2017

2 Table of Contents 1 Introduction Overview of Technologies Used Front End Framework Package Manager Testing Continuous Integration Front End Design Testing & Continuous Integration Results & Conclusion References... 6 i

3 1 1 Introduction The Database on Demand service allows members of CERN communities to provision and manage database instances of different flavours (MySQL, Oracle, PostgreSQL and InfluxDB). Users can create and edit these instances using the web interface of DB On Demand. This web front end is currently on Java technologies and the ZK web framework, for which is generally difficult to find experienced developers and which has gotten to lack behind more modern web stacks in capabilities and usability. 2 Overview of Technologies Used 2.1 Front End Framework Front end design of the new web portal is based on Angular web framework. Angular is TypeScript based web application framework. It is open source and supported by Google. Angular ensures manipulation of DOM objects automatically and separates client side and server side of the web application to improve reusability and to make testing easier. 2.2 Package Manager As a package manager NPM was used. It is NodeJS s default package manager and it provides thousands of free JavaScript libraries for NodeJS based projects. 2.3 Testing Karma and Jasmine are used for unit testing. Karma is a test runner and it loads JavaScript codes and executes tests. Jasmine is a test framework for JavaScript and it is widely used by Angular community. It provides a lot of functions for testing. 2.4 Continuous Integration Travis CI is used as a continuous integration service,. When a commit or a pull request is submitted to GitHub repository of the project, Travis CI builds the project and runs unit tests. Also, the results of the unit tests are sent to Coveralls. Code coverage for unit tests can be observed in the Coveralls web page.

4 2 3 Front End Design Front end design of the project is built on Akveo s ng2-admin template [1]. At the start of the development process, the unnecessary components for Database on Demand service were removed from the template. After removing the components, the Home view is added and external links enabling users to submit a request or report an incident are inserted into the menu bar. Following CERN Guidelines, there must be a toolbar on top. To ensure this, the CERN Toolbar component was added. Figure 1: Home View with Instances and Jobs Since the project is not connected to API yet, a mocked API had to be used for fetching details for interface elements and data sources. A JSON file which contains mocked instance details and a service file which uses HTTP GET request to a local JSON file are created. To show the instance details to the user, the ng2-smart-table component is used with pagination feature enabled [2]. The user can sort instances by clicking column titles thanks to ng2-smart-table. In the old version of the web portal for Database on Demand service, there is a search bar for every column of the table. During the development process, these search bars are consolidated in just one search bar which can make a search for every column. Also, the state of a database instance is denoted using a colored round object in old version of the service. In the new version, colored badges which have state written inside of them are created to make observation easily. The user can click instance name to reach instance details page. In this page, the most important features of the instance are shown on top. The user can click info and edit the

5 3 Figure 2: Instance Details View current value if that is allowed. There is a tab panel component below the information table. Jobs, Backup, Recovery, File Editor and Metadata Editor functions are shown in the tab panel component. Figure 3: File Editor

Figure 4: Metadata Editor In the file editor tab, the user can select the file and

6 4 Jobs related to the instance are present in the jobs tab panel. Data for jobs are fetched from a Mocked API via job service. Figure 4: Metadata Editor In the file editor tab, the user can select the file and edit configurations files for her instances. The Metadata Editor allows admins to edit the objects of the instance. Figure 5: Help View

7 5 While creating metadata editor, JSON Editor component is used for showing a nice edit view for the user and making metadata observation easier [3]. The user can switch between code view and tree view in the metadata editor. Backup and Recovery tabs have not been populated yet. In addition to Home and External Links, Help component is added to menu bar. The user can click and navigate to help page for Database on Demand service implemented with GitBook and integrated in an iframe. 4 Testing & Continuous Integration After front end design of the project, unit tests for components were written. The components were tested in terms of getting data from service properly and initializing component variables correctly. Also, navigation between pages is tested. For testing, functions from Jasmine framework are used and the tests are run on Karma. Additionally, Karma provides integration between Jasmine and Travis CI. describe ( INSTANCES : Functional Specs, () => { }); it( should set the source data via instance service, fakeasync (() => { })); const service = fixture. debugelement. injector. get ( InstanceService ); spyon ( service, getinstances ). and. returnvalue ( Observable. of( instances )); fixture. detectchanges (); tick (); expect ( component. source. count ()). tobe ( instances. length ); Figure 6: Example Spec for Instance Service After writing the unit tests, Travis CI is activated by adding.travis.yml file to the repository. After every commit and pull request, the project is built and tests become automated. Test results are sent to Coveralls to observe which parts of the code is covered and coverage rate of the project. 5 Results & Conclusion Home View, Help View and Instance Detail View are added to the template. In addition, unit tests for components and instance service were created throughout the intership. There is still some work to do such as authentication, views for admins, the extension

8 6 of job service and deployment improvements. Since my task was front end design of the web portal, I have not contributed to back end part of the project. In conclusion, I improved my Angular skills using some advanced techniques such as routing and HTTP Requests. Before this internship, I did not write unit tests for JavaScript projects. During the internship, I had experience with JavaScript unit testing using Karma and Jasmine. Also, since the project is developed on GitHub, I learned new techniques about how to use GitHub in a team environment. Finally, I have not used a continuous integration tool before but throughout the development process, I had a chance to automate builds and tests using Travis CI. I would like to thank Ignacio Coterillo Coz and Jose Andres Cordero Benitez for their support and help during the internship. 6 References [1] [2] [3] [4] GitHub Repository, [5] Travis page, [6] Code Coverage, [7] Current web portal,

Ten interesting features of Google s Angular Project

Ten interesting features of Google s Angular Project - 1 Ten interesting features of Google s Angular Project Copyright Clipcode Ltd 2018 All rights reserved Ten interesting features of Google s Angular