Artifactory 4.0 for jFrog

Features

  • Custom UI library
  • Dynamic forms

Platform

  • Web

Technologies

  • AngularJS

Scope

4 people
28 weeks

Release

August 2015

jFrog provides world-class infrastructure for software management and distribution.

Together with jFrog, we worked to rewrite its flagship product, Artifactory, using AngularJS.

www.jfrog.com

Our people behind the project:
Idan Naim
Adam Klein
Maayan Glikser
Nir Kaufman

The product consists of dozens of screens built from a range of complex UI components, such as trees, editable tables, modals, dropdowns, buttons. It was important to not just implement these screens, but make development of new ones faster, thus cheaper. So we developed a robust and extensible component library.

Drop-down list
Two-pane selector

Our universal table component built for this project is capable of client and server-side pagination, search and sorting, row and column grouping, inline editing and custom cells rendering with links and action menus, some of which would only appear on hover.

Other features: special scrolling behavior like sticky rows or columns or independently scrollable cell content.
The tree component can have thousands of nodes at each depth, so all the contents have to be loaded on demand.
More actions for every node are available in the context menu on right click
The tree in a simple mode only shows the current directory
Quick search in the tree

Most pages consist of forms. We have built a dynamic forms system to address sync and async validation, styling, and dependent fields.

Form
Integrated code editor
If an expression is correct, it displays a human-readable time for next run
Another example of custom component is a cron expression validator and parser.

All state changes in the application are reflected in the URL. If you refresh a page, you get prefilled values in forms, same location in the tree, and correct active tab.

+1
Send
Share

More projects

Web, iOS and Android apps for Phytech React; React Native; Google Maps API; Web Workers;
Project management application for Proggio React; NodeJS; Redux; SVG; WebSockets;
Advanced analytics platform for ThetaRay AngularJS; Angular; MobX; RxJS; D3; SVG; AG Grid; HighCharts;
Moving planner for Unpakt AngularJS; Ruby on Rails; CoffeeScript;
Write us