[
https://issues.apache.org/jira/browse/NIFI-1323?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=15405913#comment-15405913
]
Matt Gilman commented on NIFI-1323:
-----------------------------------
Hey [~cbowdery], Sorry for the delay response to your comment. There are no
developer documents for the UI available at this time. This is an area that
we'll hopefully be expanding on in the future. But to address your specific
questions...
1) The main canvas is implemented with SVG using D3. D3 is also used in a
handful of other places where we have interactive visualizations (stats
history, birdseye, etc). Additionally, we utilize angular and jQuery for
various portions of the UI.
2) The main canvas is not designed to be extensible. Meaning if you wanted to
implement a new design you could fork the code base to do so. Though we are
working towards our 1.0.0 release where the entire UI was refreshed. Please
check it out! We'd love to have some feedback.
There are a number of places where we have designed UI extension points.
Specifically, UI's for custom configuration and data viewing.
Custom configuration UI are used when a processor requires richer configuration
that simple key value pairs can offer. A great example of this is the
UpdateAttribute custom UI where users can define a rule set.
Data viewer UI's are registered using a content type. So we support viewing
data that is application/json, application/xml, etc. Here developers can drop
in a new web app's that specifies the content type it supports and that is made
available to the user when NiFi encounters data of that type.
3) The technologies utilized are SVG, HTML5, JS, CSS.
4) Reporting UI's is something that's been considered. The idea here is that a
processor could report something (bins in MergeContent is a great example) that
the UI could render. This could support the idea of custom graphs that your
mentioning. We do not currently have plans to make other parts extensible but
we're certainly open to ideas.
Contributions are definitely always welcome. Feel free to reach out to us on
the dev@ list.
Thanks!
> UI visual design enhancement
> ----------------------------
>
> Key: NIFI-1323
> URL: https://issues.apache.org/jira/browse/NIFI-1323
> Project: Apache NiFi
> Issue Type: Improvement
> Components: Core UI
> Affects Versions: 1.0.0
> Reporter: Rob Moran
> Priority: Trivial
> Attachments: flowfont.zip, nifi-add-processor-dialog.png,
> nifi-component-samples.png,
> nifi-configure-processor-properties-set-value.png,
> nifi-configure-processor-properties.png,
> nifi-configure-processor-scheduling.png,
> nifi-configure-processor-settings.png, [email protected],
> [email protected], [email protected],
> nifi-global-menu.png, nifi-interaction-and-menu-samples.png,
> [email protected], [email protected],
> nifi-sample-flow.png, [email protected], [email protected]
>
>
> (I will attach mockups and supporting files as they become available)
> I am starting to work on a design to modernize the look and feel of the NiFi
> UI. The initial focus of the design is to freshen the UI (flat design, SVG
> icons, etc.). Additionally, the new design will propose usability
> improvements such as exposing more flow-related actions into collapsible
> panes, improving hierarchy of information, etc.
> Going forward, the design plan is to help lay the foundation for other UI/UX
> related issues such as those documented in NIFI-951.
> ---
> *flowfont.zip*
> Contains icon font and supporting files
> *nifi-add-processor-dialog.png*
> Dialog sample. This sample shows the 'Add Processor' dialog.
> *nifi-component-samples.png*
> To show styling for all components, as well as those components when a user
> is unauthorized to access.
> *nifi-configure-processor-properties*
> *nifi-configure-processor-properties-set-value*
> *nifi-configure-processor-scheduling*
> *nifi-configure-processor-settings*
> Configure Processor dialog. See related Comments below (in Activity section).
> *nifi-dialog-sample-@800px*
> Dialog sample in 800px wide viewport. This sample shows the the 'Details' tab
> of a provenance event.
> *nifi-drag-drop-component@2x*
> To show updated component toolbar button style and user interaction
> improvements
> *nifi-drop.svg*
> NiFi logo without 'nifi
> *nifi-global-menu*
> To show global menu
> *nifi-global-menu-pending-user@2x*
> Demonstrates a generic notification with an aggregate count that appears on
> the global menu icon. When the menu is displayed, the same notification (and
> individual count) appears in line with the corresponding item.
> *nifi-interaction-and-menu-samples.png*
> To demonstrate user interactions - hover states, tooltips, menus, etc.
> *nifi-lineage-graph-@800px*
> To show lineage graph with explicit action to get back to data provenance
> event list.
> *nifi-sample-flow-@800px*
> Shows a very useable UI down to around 800px in width. The thinking here is
> that at anything lower than this, the NiFi user experience will change to
> more of a monitoring and/or administrative type workflow. Future mockups will
> be created to illustrate this.
> *nifi-logo.svg*
> NiFi logo complete
> *nifi-sample-flow.png*
> Mockup of sample flow. Updated to show revised tool and status bars.
> Management related actions will move to a menu via mouseover (see
> _nifi-global-menu_). Added benefits here include reducing clutter and more
> user-friendly menu with text labels to reduce time spent scanning only a
> large set of icons. This also helps gain valuable viewport width in a browser
> (see _nifi-sample-flow-@800px_)
> *[email protected]*
> Search results example
> *nifi-shell-sample-@800px*
> Shell sample in 800px wide viewport. This sample shows the 'Data Provenance'
> table.
--
This message was sent by Atlassian JIRA
(v6.3.4#6332)
