Brno University of Technology Dialog Editor In
Total Page:16
File Type:pdf, Size:1020Kb
View metadata, citation and similar papers at core.ac.uk brought to you by CORE provided by Digital library of Brno University of Technology BRNO UNIVERSITY OF TECHNOLOGY VYSOKÉ UČENÍ TECHNICKÉ V BRNĚ FACULTY OF INFORMATION TECHNOLOGY DEPARTMENT OF INTELLIGENT SYSTEMS FAKULTA INFORMAČNÍCH TECHNOLOGIÍ ÚSTAV INTELIGENTNÍCH SYSTÉMŮ DIALOG EDITOR IN ANGULARJS FOR MANAGEIQ EDITOR DIALOGŮ V ANGULARJS PRO MANAGEIQ BACHELOR’S THESIS BAKALÁŘSKÁ PRÁCE AUTHOR ROMAN BLANCO AUTOR PRÁCE SUPERVISOR Prof. Ing. VOJNAR TOMÁŠ, Ph.D. VEDOUCÍ PRÁCE BRNO 2016 Abstract The main goal of this bachelor thesis is to design and implement a new solution for a Dialog Editor for the ManageIQ application. The new editor is supposed to be created as a single-page application implemented by using JavaScript library AngularJS and drag&drop technique. The solution should bring more comfortable interface for end users than the current editor does. Abstrakt Hlavním cílem této bakalárské práce je návrh a implementace řešení pro editor dialogů pro aplikaci ManageIQ. Nový editor by měl být vytvořený jako jedno-stránová aplikace vytvořená pomocí JavaScriptové knihovny AngularJS a drag&drop techniky. Řešení mělo poskytnout komfortnější rozhraní koncovým uživatelůn, než nabízí současná implementace. Keywords ManageIQ, AngularJS, JavaScript, HTML, user interface. Klíčová slova ManageIQ, AngularJS, JavaScript, HTML, uživatelská rozhraní. Reference BLANCO, Roman. Dialog Editor in AngularJS for ManageIQ. Brno, 2016. Bachelor’s thesis. Brno University of Technology, Faculty of Information Technology. Supervisor Vojnar Tomáš. Dialog Editor in AngularJS for ManageIQ Declaration Hereby I declare that this bachelor’s thesis was prepared as an original author’s work under the supervision of prof. Ing. Tomáš Vojnar, Ph.D. and consultant Mgr. Martin Povolný. All the relevant information sources, which were used during preparation of this thesis, are properly cited and included in the list of references. ....................... Roman Blanco May 18, 2016 Acknowledgements I would first like to thank my thesis supervisor prof. Ing. Tomáš Vojnar, Ph.D.and consultant Mgr. Martin Povolný for leading my bachelor thesis. I would also like to thank the members of the Red Hat CloudForms and the Red Hat UX Design teams for their advice and help. Finally I would like to thank my family for all the support throughout my years of study. c Roman Blanco, 2016. This thesis was created as a school work at the Brno University of Technology, Faculty of Information Technology. The thesis is protected by copyright law and its use without author’s explicit consent is illegal, except for cases defined by law. Contents 1 Introduction3 1.1 Motivation....................................3 1.2 Outline......................................3 2 ManageIQ4 3 Analysis of the current status5 3.1 Service Dialog...................................5 4 Design 8 5 Used technologies 11 5.1 AngularJS..................................... 11 5.1.1 AngularJS version............................ 11 5.1.2 Transition to AngularJS 2.0....................... 12 5.2 External libraries................................. 12 5.2.1 angular-dragdrop............................. 12 5.2.2 ui-sortable................................. 12 5.2.3 angular-bootstrap-switch........................ 13 6 Implementation 14 6.1 Dialog Editor................................... 14 6.1.1 Dynamic Tabs.............................. 14 6.1.2 Dialog Edit service............................ 16 6.1.3 Dialog Dashboard............................ 16 6.1.4 Dialog Field................................ 16 6.1.5 Dialog Edit modal............................ 17 6.1.6 Draggable components.......................... 18 6.1.7 Drag&Drop and sorting......................... 18 7 Effectivity and Users comfort 19 8 Conclusion 22 8.1 Ideas for a future development......................... 22 Bibliography 24 Appendices 25 List of Appendices................................... 26 1 A Content of the CD 27 B Manual 28 C Figures 29 2 Chapter 1 Introduction 1.1 Motivation This bachelor thesis contributes to the community-driven project ManageIQ, a tool for cloud and virtualization services. The main goal is to provide a new implementation for the outdated Dialog Editor in the ManageIQ Admin and Operations User Interface while keeping in touch with modern web 2.0 righ client interfaces. Its current implementation is done in the interpreted programming language Ruby and requires evaluation on the server, that is generally time consuming, because of the need to exchange the data between user and server after almost every user’s interaction with the editor, and this forces the user to spend an uncomfortably long amount of time in the editor. The work on this bachelor thesis is done in collaboration with the Red Hat company, specificaly with the CloudForms and the UX Design team. The goal was reached by using the AngularJS JavaScript framework and several light- weight JavaScript libraries that will be described later in the document and the Patternfly UI framework, developed by Red Hat UX Design team. 1.2 Outline In this thesis there will be an analysis of the implementation and familiarization with every part related to the implementation itself. The ManageIQ project will be described at the beginning of this document in Chapter2. In Chapter3 there will be an analysis of the current status of the Dialog Editor. In Chapter4 I will describe how I designed the new version of the Dialog Editor. Used technologies for the implementation will be described in Chapter5. Explanation of the new Dialog Editor implementation will be in the Chapter6 and its effectivity and the users comfort will be presented in Chapter7. The results of the work will be summarized in Chapter8. 3 Chapter 2 ManageIQ ManageIQ is a management and automation platform that gives administrators the possi- bility to simplify control of their virtual, private, and hybrid cloud infrastructures. Many cloud based projects, like Openstack, Amazon EC2, Google Compute Engine or Microsoft Azure are supported by ManageIQ and that allows administrators to manage the diverse environments by one tool. It can automatically discover these environments wherever they are running and bring them all under one management roof. [3] ManageIQ is an open source community-driven project implemented in Ruby on Rails. It is developed since 2006, when ManageIQ, Inc. was founded as a startup. In late 2012 ManageIQ was acquired by Red Hat to be used as the basis for the Red Hat CloudForms hybrid cloud management platform, and has been open-sourced in June 2014 [7]. At the time of open-sourcing ManageIQ, the dual-license GPL and Apache License had to be used, but all the time the intention was to be single-licensed under the Apache License exclusively. This step was finaly achieved in March 2016 and was announced with an explanation ofthe choice on the ManageIQ project site 1 [1]. All the future plans of the ManageIQ community are described in the collaborative organization tool Trello 2 and can be discussed in many ways, mostly through IRC or discussion forums. A part of ManageIQ is a standalone interface called the Self Service User Interface that was introduced in Red Hat CloudForms 4.0 in December 2015 3. It is a portal allowing end users to manage their own services in a simpler interface than ManageIQ itself [2]. In the ManageIQ Admin and Operations User Interface the user can specify a service dialog that is used at the moment of the ordering of a service. Also another possible usage of the service dialog is for service automation. For such dialogs we need to have a Dialog Editor in ManageIQ Self Service User Interface, comfortable and easy to use for end users. Development of the ManageIQ Self Service User Interface is taking place in its own repository, because the whole interface is a 100% REST API driven JavaScript application. The source code for the ManageIQ Self Service User Interface can be found on the web-based Git repository hosting service GitHub 4. The reason for mentioning the Self Service User Interface in this thesis is that this standalone interface is where the new Dialog Editor will be used. 1https://manageiq.org/ 2https://trello.com 3http://cloudformsblog.redhat.com/2015/11/08/red-hat-cloudforms-4-0-public-beta-2/ 4https://github.com/ManageIQ/manageiq-ui-self_service 4 Chapter 3 Analysis of the current status The initial step to implementation was an investigation of the current implementation. There was a need to find answers for some major questions related to the implementation, such as: “What is the Service Dialog?”, “What does the Service Dialog consist of?” or “What are the required preferences for the Dialog?”. 3.1 Service Dialog In the ManageIQ interface, Service Dialogs can be found under the Automate ! Customiza- tion tab, and there under accordion with the label Service Dialogs. Service Dialogs can be used in several situations. The most common, when user wants to provision 1 a service. The dialog in its final form is basically an HTML form that is used to take input fromthe user. This input is then passed to Automation methods. Creating a new dialog can be divided into eight basic steps: 1. Navigate to the previously mentioned tab Automate ! Customization. 2. Select the accordion with the label Service Dialog. 3. From the toolbar select the Configuration ! Add a new Dialog option. 4. Fill in the information for the Dialog. 5. Fill in the information for a Tab (or more Tabs). 6. Fill in the information for a Box (or more Boxes). 7. Add and configure Elements in the Boxes. 8. Save the dialog. Every dialog has at least one tab that has been assigned a Description and a Label. The user can also choose whether the form should have a Submit and Cancel button, as you can see in Figure 3.1. After adding and filling in all the required information for a new tab, the user canadd a box that will be included under the tab. The same information needs to be provided for the box. 1obtain cloud service ordered from a cloud service catalog 5 A part of ManageIQ database scheme that de- scribes tables where the dialog content is stored can be seen in Figure 3.2.