X15 Enterprise UI


URL: http://x15software.com

X15 Enterprise is a scalable big data management platform that solves the complex problem of collecting, indexing, storing, and correlating large volumes of machine-generated data in real-time. It provides continuous monitoring, visualization, and deep analytics for IT, security, and business operations.

X15 UI: Introduction to X15

I led the UI team from 2014 to 2017 building this complex application with Angular, TypeScript, RxJS, and D3. The UI is a modular single-page application that includes complex components like virtualized data grids, user-configurable chart widgets, SQL editors, and file readers with validation.

X15 was acquired by FireEye in January 2018 where this product lives on as FireEye Data Explorer.

X15 UI’s first key feature is data management. User research conducted by my team discovered that our customers were excited to work with big data tools but most comfortable with traditional relational database concepts. So we chose to present the data management features in familiar terms of databases and tables. Tables and related entities like queries, views, macros, functions, and schemas are organized into databases which allow for the application of enterprise security controls and logical grouping of metadata during import/export for portability.

Data can be ingested into X15 tables in a variety of ways. In the UI, we provide robust interfaces for table creation and data upload. I worked extensively on the multistep wizard pattern that allows even novice users to quickly create and populate new data tables. During ingestion, X15 can parse and transform data using a user-defined parser specification. I implemented API interactions to validate the specification syntax and validate the provided data against the parser specification. X15 can also work with external data so I implemented a database connection interface and interfaces for defining external tables.

X15 UI: Table Manager

The most powerful and exciting feature of X15 UI is search. My team designed a multi-tabbed search view that combines data resource exploration, a SQL query editor, infinitely scrolling results, data profiling, and an interactive visualization builder. Like Microsoft Excel or Google Sheets, X15 UI supports multiple simultaneous tabs that represent stateful independent searches and results. Building and optimizing the performance of this system with Angular and ag-Grid was an incredible challenge and learning experience.

In X15 UI search, queries can be run by opening a table, writing an SQL query in the editor or visual query builder, or by interacting directly with existing search results. This last interaction mode, called contextual filtering, is another interesting feature I implemented. I also helped design and implement a visual query builder that provides a simple drag-and-drop interface for defining SQL queries. Queries can be edited and saved in the search view using a consistent modal form pattern that I reused throughout the UI.

X15 UI: Search View

Visualizations are another key feature of X15 UI. I architected and implemented a system for allowing users to create their own dashboards built on saved queries and a library of data-driven widgets. Widgets can be positioned and resized through a drag-and-drop interface and even stacked to create drill-down interactions. Many of the visualizations I built also support interaction through an event system that allows the user to apply a filter by clicking on a data point. Dashboards can be updated in real-time by refreshing continuously or on a user-defined period.

Credits

Tags