-
Notifications
You must be signed in to change notification settings - Fork 9
Refactoring Admin console
Date | 2013-06-06 | Contacts | Francois Prunayre |
Status | Motion passed - Done | Release | 2.12 |
Resources | Available for the refactoring of the admin interface (see Overview) | ||
Source code | https://github.com/geonetwork/core-geonetwork/tree/refactor_ui | ||
Funding | Mainly supported by Metawal project |
Due to different issues (eg. Ext.JS 4 update would require a major rewrite of the widgets, OpenLayers 3 and GeoExt future, legacy UI based on XSLT hard to customize), this proposal aims to propose a major cleaning and refactoring of the GeoNetwork user interface and services.
Main goals:
- Provide one user interface easier to customize with HTML templating for most of the application (ie. probably not for the editing form)
- Reduce JS size and number of libraries used
- Clean configuration
- Simplify XSLT
- Support search engine indexing
- Provide basic functionnalities (search) if no JS available
Tasks:
- Review all services and check the one required
- Classify all services (ui, admin, search, metadata)
- Structure UI admin, search and metadata
- Remove Styling, extra-HTML (eg. tables, divs, ...) and JS from XSLTs
- Move translation to the client side (https://github.com/geonetwork/core-geonetwork/tree/refactor_ui/web-ui/src/main/resources/catalog/locales)
- Easier UI configuration (it's now easier to add settings)
This proposal focus on a complete review of the admin interface.
- Type: User interface
- App: GeoNetwork client / Admin
- CFV 2013/10/22 : results are
- +1 from PSC members: Emanuele, Jeroen, Patrizia, Simon, Francois
- +1 from Committers: Mathieu
The basic idea is like the widgets, rely on a JS client communicating with GeoNetwork services. Only the editor will remain based on services using XSL transformations.
The GeoNetwork services produce JSON output when "@json" flag is added to the service name. Jeeves takes care of the XML to JSON conversion.
- Bootstrap 3 http://getbootstrap.com/ (Apache License Version 2.0)
- AngularJS http://angularjs.org (License MIT)
- d3.js http://d3js.org/ for data visualization (License BSD)
- nvd3.js http://nvd3.org/ for charts (Apache License Version 2.0)
- Moment.js http://momentjs.com/ for date/time parsing/formatting (License MIT)
- plugins:
- File upload http://blueimp.github.io/jQuery-File-Upload/angularjs.html (License MIT)
- Closure https://developers.google.com/closure/ for JS linter, dependencies, minifify
- Less http://lesscss.org/
A demo website is available here: http://apps.titellus.net/geonetwork Test the administration by sign in using admin/admin.
Authentification
- User authentification
- Reset/Remind password
- Self registration
Administration
- Metadata and template
- Load samples & templates
- Sort template: simple implementation, could use dnd later on
- Settings
- System settings
- Logo configuration
- CSW configuration
- Virtual CSW configuration
- CSW element set name
- Users & groups management
- Classification system
- Category (Thanks Arnaud)
- Thesaurus & keywords
- Statistics & status
- Catalog status
- Search statisitcs
- catalog content statistics
- Harvesting
- protocol supported: GeoNetwork, Old GeoNetwork, OGCWxS, CSW, Thredds, GeoPREST, WFSGetFeature, OAI, ArcSDE, OAI, WebDav
- Tools
- Index
- Batch update
- Standard
- Import > link to widget app with the import form.
- i18n: English and French
- Transfert ownership
- i18n: Other languages
Administration
- Harvesting
- Z39.50 - work on it as soon as this bug is fixed https://github.com/geonetwork/core-geonetwork/issues/186 before
- Formatter - do we need admin for that ?
- Remote notification - do we need admin for that ?
- Directory admin - related to metadata editing (will be part of future proposal)
Search
- Basic search support for presenting search results.
Search UI will be part of future proposal.
Edit
Editor UI will be part of future proposal.
No changes was made in the GeoNetwork Java code (to easily merge with JPA branch). Only JSON output was added to Jeeves.
A new "web-ui" module is added.
Closure utilities needs to be installed. See https://developers.google.com/closure/utilities/docs/linter_howto for installation
Maven take care of checking JS
- jsfixstyle https://github.com/geonetwork/core-geonetwork/tree/refactor_ui/web-ui/pom.xml#L107
- gjslint https://github.com/geonetwork/core-geonetwork/tree/refactor_ui/web-ui/pom.xml#L124
- JS dependencies - Build by closure and python https://github.com/geonetwork/core-geonetwork/tree/refactor_ui/web-ui#dependency
- minify JS - Build with closure and python https://github.com/geonetwork/core-geonetwork/tree/refactor_ui/web-ui#dependency
- compile LESS files to CSS
- HTML5
Tested:
- Chrome
- Firefox
- IE8+
References:
Search engine could index Angular app - This is more important for the search app:
- https://developers.google.com/webmasters/ajax-crawling/docs/specification?hl=fr&csw=1
- http://www.yearofmoo.com/2012/11/angularjs-and-seo.html
Build depends now on closure and python.
Install closure:
cd /path/to/closure-library-parent-dir
git clone http://code.google.com/p/closure-library/
cd closure-library
wget http://closure-compiler.googlecode.com/files/compiler-latest.zip
unzip compiler-latest.zip
Build GeoNetwork:
mvn clean install -Dclosure.path=/path/to/closure-library -DskipTests -Pui
cd web
mvn jetty:run -Pui
Service configuration is defined in WEB-INF/config/config-.xml to reduce the number of config files in WEB-INF that the end-user never change.
WEB-INF/config.xml include service configuration using (https://github.com/geonetwork/core-geonetwork/tree/refactor_ui/web/src/main/webapp/WEB-INF/config.xml#L1490). Example:
<include>config/config-services-*.xml</include>
<include>config/config-ui.xml</include>
<include>config/config-ui-search.xml</include>
<include>config/config-ui-metadata.xml</include>
<include>config/config-ui-admin.xml</include>
Old services are preserved and mark as deprecated when a equivalent service is created.
<service name="virtualcsw.config.edit" deprecated="true">
A list of deprecated services and related classes will be created and removed after the UI is complete.
The user interface use JSON service using the "@json" flag after service name.
Service return JSON error using the following configuration:
<service name="admin.user.remove">
<documentation>Remove a user.</documentation>
<class name=".services.user.Remove" />
<error sheet="../xslt/error/error-json.xsl"/>
</service>
During cleaning, a documentation tag should be added to the service in order to improve service documentation. This is the opportunity to list parameters for each services. It sounds more relevant to add the documentation here than in the Javadoc as some parameters may be used only in the output XSLT (eg. using /root/request/someparameters).
Example:
<service name="statistics-search-ip">
<documentation><![CDATA[
Service statistics-search-ip
Return unique IP address with number of searches.
URL: http://localhost:8080/geonetwork/srv/eng/statistics-search-ip
Response:
<response>
<record>
<ip>127.0.0.1</ip>
<sumhit>1058</sumhit>
</record>
</response>
]]></documentation>
<class name="jeeves.services.db.Select">
During review all XSLTs are moved from the xsl folder to the xslt one (https://github.com/geonetwork/core-geonetwork/tree/refactor_ui/web/src/main/webapp/xslt).
- xslt/base-layout.xsl: The main entry point for all user interface generated from XSLT
- xslt/base-layout-cssjs-loader.xsl: Template to load CSS and Javascript
- xslt/layout-core.xsl: Rendering templates for creating HTML elements.
- xslt/common/base-variables.xsl: Global XSL variables about the catalog and user session.
- xslt/common/base-variables-metadata.xsl: Global XSL variables about the metadata record. This should be included for service dealing with one metadata record (eg. viewing, editing).
- xslt/common/base-variables-metadata-editor.xsl: Global XSL variables for metadata editing.
- xslt/common/profiles-loader*.xsl: The profile loader using the oasis-catalog to load layout/core.xsl or some other schema XSLT in each activated schema plugins. One profile loader file is created per types of output in order to not to mix all XSLT templates in one file. For example RDF and FOP templates are not used at the same time.
See https://github.com/geonetwork/core-geonetwork/tree/refactor_ui/web/src/main/webapp/xslt
That change do not affect legacy UI or widget apps and is done in parallel.
After refactoring, we should be able to safely remove :
- images/* (not harvesting, category, logo)
- loc///* (not i18n.xml)
- scripts
- WEB-INF/config-* (not config-lucene.xml, config-db.xml, config-summary.xml)
- xsl
- apps
- java dependency
- jfreechart (used by old statistic pages)
The following dev rules have been applied.
- Remove all styling, uneeded HTML and JS from XSLT
- All CSS classes MUST start with "gn-" (to avoid collision when mixed in other portal, CMS, ...)
- Icons come from http://fortawesome.github.io/Font-Awesome/
- Create & use global variables to make XSLT less redundant (https://github.com/geonetwork/core-geonetwork/tree/refactor_ui/web/src/main/webapp/xslt/common/base-variables.xsl), functions or template to make XSLT simpler.
- Formatting:
- JS: All JS files are formatted by fixjsstyle
- Overview: http://www.youtube.com/watch?v=q7ebSDMvt3M&feature=youtu.be
- Admin console:
- More screenshots: https://drive.google.com/?tab=mo&authuser=0#folders/0BwyvNKYgG4ZWUXNLUUpzX0RGQXc
- GeoNetwork prototype UI using AngularJS and Bootstrap http://www.youtube.com/watch?v=5R3XnMZFdug
- Prototyped dashboard using AngularJS and d3.js http://www.youtube.com/watch?v=UJKrbUZCSVI
- Add a no-javascript mode to GeoNetwork AngularJS prototype (some people are looking for pure HTML apps !) http://www.youtube.com/watch?v=2YfF24j7t4o
It could be relevant to address the following items in the near future:
- UI testing (experiments made using Karma and Angular scenario - to be continued)
- Category / Add icon upload (#237)
- Add map configuration (#137)
- Languages / Add language configuration page to define GUI language to keep translation page simple and list only the languages used in the current node
- Status / Manage validation status
- Privileges / Provide configuration for the privileges strategy - to be able to keep it simple by default
- Basic: Public/Private strategy
- ByGroup: Define privileges by group / which is the current one
- other ?
- Privileges / Remove interactiveMap and Featured options ? - interactiveMap could be manage at URL level using gco:nilReason withHeld.
- Add keyboard navigation
- Registration / translate email (https://github.com/geonetwork/core-geonetwork/issues/269)
- François Prunayre
- Arnaud De Groof
- Vincent Bombaerts
- Florent Gravin
This work was mainly supported by Metawal project.