[
https://issues.apache.org/jira/browse/AMBARI-26650?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Himanshu Maurya updated AMBARI-26650:
-------------------------------------
Description:
h2. Summary
The React "Modern UI" service metrics page had no way to create custom widgets
— the "Create Widget" menu item was a dead placeholder ({{{}onClick=\{() =>
{}}{}}}), and the "Browse Widgets" flow only let users add pre-existing widgets
from the library. The classic Ember UI has always supported building a custom
GAUGE/NUMBER/GRAPH/TEMPLATE widget from an arbitrary metric expression via a
3-step wizard. This gap forced users back to the classic UI whenever they
needed a widget that didn't already exist in the shared library.
h2. Changes
* Added a new 3-step *Create Widget* wizard
({{{}screens/CreateWidgetWizard/{}}}), built on the existing {{StepWizard}}
framework (the same one used by Add Service/Add Host):
** {*}Step 1 — Select Type{*}: choose GAUGE, NUMBER, GRAPH, or TEMPLATE.
** {*}Step 2 — Metrics and Expression{*}: build one or more metric expressions
using a cascading Service → Component → Metric/Aggregation picker, operators,
and numeric constants; configure type-specific properties (thresholds, display
unit, graph type); live preview updates as the expression is built.
** {*}Step 3 — Name and Description{*}: name/description validation, User vs.
Cluster sharing scope (with a confirmation prompt when sharing), and save.
* The wizard loads the stack's {{metrics_descriptor}} artifact once per
session and normalizes it into a per-component metric catalog, including HDFS
NameNode HA / federation and YARN ResourceManager HA host-component criteria,
and YARN capacity-scheduler queue metric substitution.
* On save, the widget is POSTed and automatically attached to the correct
widget layout for the service (resolving the active layout, falling back to the
service's default layout by convention name), including attaching to both the
nameservice-specific and {{_nameservice_all}} layouts for HDFS federation
setups.
* Added a live widget preview (in the wizard's sidebar) that fetches real
point-in-time (or time-series, for GRAPH) metric values and renders them
through the existing {{{}GaugeWidgetView{}}}/{{{}GraphWidgetView{}}}/new
{{NumberWidgetView}} components, matching what the widget will look like once
saved.
* Wired the "Create Widget" entry points that previously did nothing or didn't
exist:
** Service Metrics page "ACTIONS → Create Widget" menu item and the new "Add
Widget" tile (shown both in the empty-widgets state and appended to the
populated widget grid).
** Cluster Dashboard "ACTIONS → Create Widget" menu item, shown when the
cluster has at least one widget-capable service (HDFS, YARN, HBASE,
AMBARI_METRICS).
** Browse Widgets modal's "CREATE WIDGET" button.
* Added route {{{}services/:serviceName/widget/create/:stepNumber{}}},
rendered as a modal via the existing {{AddWizardUrlMapping}} router-driven
modal pattern, with a cancel-confirmation prompt so in-progress widget data
isn't lost accidentally.
* {{GaugeWidgetView}} was upgraded to handle out-of-range (overflow) and
unavailable/NaN metric values with dedicated visual states, instead of
rendering {{"Error"}} as the percentage text.
* Added {{Dashboard/models/WidgetType.ts}} defining the 4 widget type tiles
(icon, description, applicable properties) shown in step 1, reusing image
assets already bundled in the app.
h2. Impact
Users can now create custom metric widgets directly from the React UI's service
metrics or cluster dashboard pages, without needing to fall back to the classic
Ember UI. Existing widget rendering (Gauge/Graph/Number views used elsewhere)
also gets more robust handling of missing or out-of-range metric data.
was:
h2. Summary
The {{capacity-scheduler.xml}} properties on the YARN Advanced Configs tab were
rendered as one input field per property, which does not match the classic
Ember UI's dedicated combined-textarea editor and made bulk edits
(adding/removing queues, editing multiple properties at once) awkward and
error-prone. Saving a {{capacity-scheduler.xml}} change also silently skipped
the "Refresh YARN Queues" prompt that the classic UI shows, so the new
configuration was not actually applied to the running ResourceManager until a
manual refresh.
h2. Changes
* {{capacity-scheduler.xml}} properties are now edited as a single combined
{{{}key=value{}}}-per-line textarea, folded into the existing
"CapacityScheduler" section (displayed as "Scheduler") instead of being
rendered as their own separate accordion item with one field per property. This
matches the classic Ember UI's {{App.CapacitySceduler}} widget.
* Editing the textarea parses each {{key=value}} line back into the individual
property map: existing properties are updated in place, new lines add new
properties (cloned from an existing property's metadata), and removed lines
delete the corresponding property.
* After successfully saving configs, if any of the saved changes touched
{{{}capacity-scheduler.xml{}}}, a confirmation popup now prompts the user to
"Refresh YARN Queues." Accepting submits a YARN {{REFRESHQUEUES}} action
against all hosts running the ResourceManager component, matching the classic
UI's {{ComponentActionsByConfigs#showPopup}} behavior.
h2. Impact
Capacity Scheduler queue configuration can now be edited in bulk via a single
textarea (matching the classic UI's editing experience), and saved changes are
properly propagated to the running ResourceManager via the Refresh YARN Queues
prompt instead of requiring a manual follow-up action.
> Ambari Web React: Add Create Widget wizard for service metrics dashboards
> -------------------------------------------------------------------------
>
> Key: AMBARI-26650
> URL: https://issues.apache.org/jira/browse/AMBARI-26650
> Project: Ambari
> Issue Type: Story
> Reporter: Himanshu Maurya
> Assignee: Himanshu Maurya
> Priority: Major
> Fix For: 3.1.0
>
>
> h2. Summary
> The React "Modern UI" service metrics page had no way to create custom
> widgets — the "Create Widget" menu item was a dead placeholder
> ({{{}onClick=\{() => {}}{}}}), and the "Browse Widgets" flow only let users
> add pre-existing widgets from the library. The classic Ember UI has always
> supported building a custom GAUGE/NUMBER/GRAPH/TEMPLATE widget from an
> arbitrary metric expression via a 3-step wizard. This gap forced users back
> to the classic UI whenever they needed a widget that didn't already exist in
> the shared library.
> h2. Changes
> * Added a new 3-step *Create Widget* wizard
> ({{{}screens/CreateWidgetWizard/{}}}), built on the existing {{StepWizard}}
> framework (the same one used by Add Service/Add Host):
> ** {*}Step 1 — Select Type{*}: choose GAUGE, NUMBER, GRAPH, or TEMPLATE.
> ** {*}Step 2 — Metrics and Expression{*}: build one or more metric
> expressions using a cascading Service → Component → Metric/Aggregation
> picker, operators, and numeric constants; configure type-specific properties
> (thresholds, display unit, graph type); live preview updates as the
> expression is built.
> ** {*}Step 3 — Name and Description{*}: name/description validation, User
> vs. Cluster sharing scope (with a confirmation prompt when sharing), and save.
> * The wizard loads the stack's {{metrics_descriptor}} artifact once per
> session and normalizes it into a per-component metric catalog, including HDFS
> NameNode HA / federation and YARN ResourceManager HA host-component criteria,
> and YARN capacity-scheduler queue metric substitution.
> * On save, the widget is POSTed and automatically attached to the correct
> widget layout for the service (resolving the active layout, falling back to
> the service's default layout by convention name), including attaching to both
> the nameservice-specific and {{_nameservice_all}} layouts for HDFS federation
> setups.
> * Added a live widget preview (in the wizard's sidebar) that fetches real
> point-in-time (or time-series, for GRAPH) metric values and renders them
> through the existing {{{}GaugeWidgetView{}}}/{{{}GraphWidgetView{}}}/new
> {{NumberWidgetView}} components, matching what the widget will look like once
> saved.
> * Wired the "Create Widget" entry points that previously did nothing or
> didn't exist:
> ** Service Metrics page "ACTIONS → Create Widget" menu item and the new "Add
> Widget" tile (shown both in the empty-widgets state and appended to the
> populated widget grid).
> ** Cluster Dashboard "ACTIONS → Create Widget" menu item, shown when the
> cluster has at least one widget-capable service (HDFS, YARN, HBASE,
> AMBARI_METRICS).
> ** Browse Widgets modal's "CREATE WIDGET" button.
> * Added route {{{}services/:serviceName/widget/create/:stepNumber{}}},
> rendered as a modal via the existing {{AddWizardUrlMapping}} router-driven
> modal pattern, with a cancel-confirmation prompt so in-progress widget data
> isn't lost accidentally.
> * {{GaugeWidgetView}} was upgraded to handle out-of-range (overflow) and
> unavailable/NaN metric values with dedicated visual states, instead of
> rendering {{"Error"}} as the percentage text.
> * Added {{Dashboard/models/WidgetType.ts}} defining the 4 widget type tiles
> (icon, description, applicable properties) shown in step 1, reusing image
> assets already bundled in the app.
> h2. Impact
> Users can now create custom metric widgets directly from the React UI's
> service metrics or cluster dashboard pages, without needing to fall back to
> the classic Ember UI. Existing widget rendering (Gauge/Graph/Number views
> used elsewhere) also gets more robust handling of missing or out-of-range
> metric data.
--
This message was sent by Atlassian Jira
(v8.20.10#820010)
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
