You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@pinot.apache.org by GitBox <gi...@apache.org> on 2021/01/16 01:01:02 UTC
[GitHub] [incubator-pinot] JoeFuentes-WebDev opened a new pull request #6448: Refactor alert details template
JoeFuentes-WebDev opened a new pull request #6448:
URL: https://github.com/apache/incubator-pinot/pull/6448
## Description
Refactor alert details template to reduce duplication of code
- `Display Window <dropdown>` was repeated 3 times
- `Stats Cards` is only 1 code block for both Edit and Create
- fixed indentation and alignment
This PR is separate from the TBD functional refactoring effort to separate `Edit->preview` and `Create-preview` from this component
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@pinot.apache.org
For additional commands, e-mail: commits-help@pinot.apache.org
[GitHub] [incubator-pinot] zhangloo333 commented on a change in pull request #6448: Refactor alert details template
Posted by GitBox <gi...@apache.org>.
zhangloo333 commented on a change in pull request #6448:
URL: https://github.com/apache/incubator-pinot/pull/6448#discussion_r560568339
##########
File path: thirdeye/thirdeye-frontend/app/pods/components/alert-details/template.hbs
##########
@@ -40,102 +29,88 @@
<p>Click "Rerun Preview" to get the preview for your updated configuration</p>
{{/if}}
</div>
- {{/if}}
- {{#if dataIsCurrent}}
- <div class="col-xs-12 preview">
- <div class="col-xs-2 no-padding">
- <label class="te-label te-label--display">Display Window
- <span>
- <i class="glyphicon glyphicon-question-sign"></i>
- {{#tooltip-on-element class="te-tooltip"}}
- This is the maximum display period in days. You can zoom into the chart further using the mouse wheel.
- {{/tooltip-on-element}}
- </span>
- </label>
- </div>
- <div class="col-xs-4 no-padding">
- {{date-range-picker
- class="te-range-picker"
- alwaysShowCalendars=true
- timePicker=true
- timePicker24Hour=true
- timePickerIncrement=pill.timePickerIncrement
- start=pill.activeRangeStart
- end=pill.activeRangeEnd
- ranges=pill.predefinedRanges
- showCustomRangeLabel=false
- format=pill.uiDateFormat
- serverFormat="YYYY-MM-DD HH:mm"
- applyAction=(action "onRangeSelection")
- }}
- </div>
- </div>
-
- {{#if alertId}}
-
- <div class="te-content-block__performance-health-wrapper">
- <!-- Anomalies, Response Rate, Precision, Recall -->
- <div class="te-horizontal-cards te-content-block__alert-performance">
- <h4 class="te-self-serve__block-title">
- <label for="select-dimension" class="control-label te-label">
- Alert Performance
- <span>
- <i class="glyphicon glyphicon-question-sign"></i>
- {{#tooltip-on-element class="te-tooltip"}}
- All estimated performance numbers are based on reviewed anomalies.
- {{/tooltip-on-element}}
- </span>
- </label>
- </h4>
- {{!-- Alert anomaly stats cards --}}
- {{#if performanceStatsTaskInstance.isRunning }}
- <div class="spinner-wrapper spinner-wrapper--card">
- {{ember-spinner lines=30 radius=20 length=0 width=10 opacity=0 trail=75 color='blue'}}
- </div>
- {{else}}
- {{stats-cards
- stats=computedStats
- areTwoSetsOfAnomalies=areTwoSetsOfAnomalies
- isEditMode=isEditMode
- }}
- {{/if}}
- </div>
+ {{#if showDetails}}
+ {{#unless dataIsCurrent}}
+ <div class="detection-yaml-msg">Alert configuration has changed.</div>
Review comment:
There is an indent issue for `div` tag
##########
File path: thirdeye/thirdeye-frontend/app/pods/components/alert-details/template.hbs
##########
@@ -40,102 +29,88 @@
<p>Click "Rerun Preview" to get the preview for your updated configuration</p>
{{/if}}
</div>
- {{/if}}
- {{#if dataIsCurrent}}
- <div class="col-xs-12 preview">
- <div class="col-xs-2 no-padding">
- <label class="te-label te-label--display">Display Window
- <span>
- <i class="glyphicon glyphicon-question-sign"></i>
- {{#tooltip-on-element class="te-tooltip"}}
- This is the maximum display period in days. You can zoom into the chart further using the mouse wheel.
- {{/tooltip-on-element}}
- </span>
- </label>
- </div>
- <div class="col-xs-4 no-padding">
- {{date-range-picker
- class="te-range-picker"
- alwaysShowCalendars=true
- timePicker=true
- timePicker24Hour=true
- timePickerIncrement=pill.timePickerIncrement
- start=pill.activeRangeStart
- end=pill.activeRangeEnd
- ranges=pill.predefinedRanges
- showCustomRangeLabel=false
- format=pill.uiDateFormat
- serverFormat="YYYY-MM-DD HH:mm"
- applyAction=(action "onRangeSelection")
- }}
- </div>
- </div>
-
- {{#if alertId}}
-
- <div class="te-content-block__performance-health-wrapper">
- <!-- Anomalies, Response Rate, Precision, Recall -->
- <div class="te-horizontal-cards te-content-block__alert-performance">
- <h4 class="te-self-serve__block-title">
- <label for="select-dimension" class="control-label te-label">
- Alert Performance
- <span>
- <i class="glyphicon glyphicon-question-sign"></i>
- {{#tooltip-on-element class="te-tooltip"}}
- All estimated performance numbers are based on reviewed anomalies.
- {{/tooltip-on-element}}
- </span>
- </label>
- </h4>
- {{!-- Alert anomaly stats cards --}}
- {{#if performanceStatsTaskInstance.isRunning }}
- <div class="spinner-wrapper spinner-wrapper--card">
- {{ember-spinner lines=30 radius=20 length=0 width=10 opacity=0 trail=75 color='blue'}}
- </div>
- {{else}}
- {{stats-cards
- stats=computedStats
- areTwoSetsOfAnomalies=areTwoSetsOfAnomalies
- isEditMode=isEditMode
- }}
- {{/if}}
- </div>
+ {{#if showDetails}}
+ {{#unless dataIsCurrent}}
+ <div class="detection-yaml-msg">Alert configuration has changed.</div>
+ {{/unless}}
+ {{/if}}
- {{detection-health
- health=detectionHealth
- selectedRule=selectedRule
- }}
- </div>
- {{else}}
- <!-- Anomalies, Response Rate, Precision, Recall -->
- <div class="te-horizontal-cards te-content-block">
- <h4 class="te-self-serve__block-title">
- <label for="select-dimension" class="control-label te-label">
- Alert Performance
- <span>
- <i class="glyphicon glyphicon-question-sign"></i>
- {{#tooltip-on-element class="te-tooltip"}}
- All estimated performance numbers are based on reviewed anomalies.
- {{/tooltip-on-element}}
- </span>
- </label>
- </h4>
- {{!-- Alert anomaly stats cards --}}
- {{#if performanceStatsTaskInstance.isRunning }}
- <div class="spinner-wrapper spinner-wrapper--card">
- {{ember-spinner lines=30 radius=20 length=0 width=10 opacity=0 trail=75 color='blue'}}
- </div>
- {{else}}
- {{stats-cards
- stats=computedStats
- areTwoSetsOfAnomalies=areTwoSetsOfAnomalies
- isEditMode=isEditMode
+ {{/if}}
+ {{/if}}
+ {{/if}}
+ {{!-- display window + Dropdown --}}
+ {{#unless isPreviewLoading}}
+ {{#unless disablePreviewButton}}
+ <div class="col-xs-12 preview">
+ <div class="col-xs-2 no-padding">
+ <label class="te-label te-label--display">Display Window
+ <span>
+ <i class="glyphicon glyphicon-question-sign"></i>
+ {{#tooltip-on-element class="te-tooltip"}}
+ This is the maximum display period in days. You can zoom into the chart further using the mouse wheel.
+ {{/tooltip-on-element}}
+ </span>
+ </label>
+ </div>
+ <div class="col-xs-4 no-padding">
+ {{date-range-picker
+ class="te-range-picker"
+ alwaysShowCalendars=true
+ timePicker=true
+ timePicker24Hour=true
+ timePickerIncrement=pill.timePickerIncrement
+ start=pill.activeRangeStart
+ end=pill.activeRangeEnd
+ ranges=pill.predefinedRanges
+ showCustomRangeLabel=false
+ format=pill.uiDateFormat
+ serverFormat="YYYY-MM-DD HH:mm"
+ applyAction=(action "onRangeSelection")
+ }}
+ </div>
Review comment:
ditto, an indent issue. I suggest having one space more
##########
File path: thirdeye/thirdeye-frontend/app/pods/components/alert-details/template.hbs
##########
@@ -40,102 +29,88 @@
<p>Click "Rerun Preview" to get the preview for your updated configuration</p>
{{/if}}
</div>
- {{/if}}
- {{#if dataIsCurrent}}
- <div class="col-xs-12 preview">
- <div class="col-xs-2 no-padding">
- <label class="te-label te-label--display">Display Window
- <span>
- <i class="glyphicon glyphicon-question-sign"></i>
- {{#tooltip-on-element class="te-tooltip"}}
- This is the maximum display period in days. You can zoom into the chart further using the mouse wheel.
- {{/tooltip-on-element}}
- </span>
- </label>
- </div>
- <div class="col-xs-4 no-padding">
- {{date-range-picker
- class="te-range-picker"
- alwaysShowCalendars=true
- timePicker=true
- timePicker24Hour=true
- timePickerIncrement=pill.timePickerIncrement
- start=pill.activeRangeStart
- end=pill.activeRangeEnd
- ranges=pill.predefinedRanges
- showCustomRangeLabel=false
- format=pill.uiDateFormat
- serverFormat="YYYY-MM-DD HH:mm"
- applyAction=(action "onRangeSelection")
- }}
- </div>
- </div>
-
- {{#if alertId}}
-
- <div class="te-content-block__performance-health-wrapper">
- <!-- Anomalies, Response Rate, Precision, Recall -->
- <div class="te-horizontal-cards te-content-block__alert-performance">
- <h4 class="te-self-serve__block-title">
- <label for="select-dimension" class="control-label te-label">
- Alert Performance
- <span>
- <i class="glyphicon glyphicon-question-sign"></i>
- {{#tooltip-on-element class="te-tooltip"}}
- All estimated performance numbers are based on reviewed anomalies.
- {{/tooltip-on-element}}
- </span>
- </label>
- </h4>
- {{!-- Alert anomaly stats cards --}}
- {{#if performanceStatsTaskInstance.isRunning }}
- <div class="spinner-wrapper spinner-wrapper--card">
- {{ember-spinner lines=30 radius=20 length=0 width=10 opacity=0 trail=75 color='blue'}}
- </div>
- {{else}}
- {{stats-cards
- stats=computedStats
- areTwoSetsOfAnomalies=areTwoSetsOfAnomalies
- isEditMode=isEditMode
- }}
- {{/if}}
- </div>
+ {{#if showDetails}}
+ {{#unless dataIsCurrent}}
+ <div class="detection-yaml-msg">Alert configuration has changed.</div>
+ {{/unless}}
+ {{/if}}
- {{detection-health
- health=detectionHealth
- selectedRule=selectedRule
- }}
- </div>
- {{else}}
- <!-- Anomalies, Response Rate, Precision, Recall -->
- <div class="te-horizontal-cards te-content-block">
- <h4 class="te-self-serve__block-title">
- <label for="select-dimension" class="control-label te-label">
- Alert Performance
- <span>
- <i class="glyphicon glyphicon-question-sign"></i>
- {{#tooltip-on-element class="te-tooltip"}}
- All estimated performance numbers are based on reviewed anomalies.
- {{/tooltip-on-element}}
- </span>
- </label>
- </h4>
- {{!-- Alert anomaly stats cards --}}
- {{#if performanceStatsTaskInstance.isRunning }}
- <div class="spinner-wrapper spinner-wrapper--card">
- {{ember-spinner lines=30 radius=20 length=0 width=10 opacity=0 trail=75 color='blue'}}
- </div>
- {{else}}
- {{stats-cards
- stats=computedStats
- areTwoSetsOfAnomalies=areTwoSetsOfAnomalies
- isEditMode=isEditMode
+ {{/if}}
+ {{/if}}
+ {{/if}}
+ {{!-- display window + Dropdown --}}
+ {{#unless isPreviewLoading}}
+ {{#unless disablePreviewButton}}
+ <div class="col-xs-12 preview">
+ <div class="col-xs-2 no-padding">
+ <label class="te-label te-label--display">Display Window
+ <span>
+ <i class="glyphicon glyphicon-question-sign"></i>
+ {{#tooltip-on-element class="te-tooltip"}}
+ This is the maximum display period in days. You can zoom into the chart further using the mouse wheel.
+ {{/tooltip-on-element}}
+ </span>
+ </label>
+ </div>
+ <div class="col-xs-4 no-padding">
+ {{date-range-picker
+ class="te-range-picker"
+ alwaysShowCalendars=true
+ timePicker=true
+ timePicker24Hour=true
Review comment:
If the name is isTimePicker, it would be more intuitive for the type.
##########
File path: thirdeye/thirdeye-frontend/app/pods/components/alert-details/template.hbs
##########
@@ -147,285 +122,228 @@
<strong>Error:</strong> Failed to save reported anomaly.
{{/bs-alert}}
{{/if}}
-
- <div class="te-content-block">
- {{#if showRules}}
- <h4 class="te-self-serve__block-title">{{selectedRule.name}} {{#if alertHasDimensions}}/ {{selectedDimension}}{{/if}} anomalies over time ({{numFilteredAnomalies}})</h4>
- {{else}}
- {{#if isComposite}}
- <h4 class="te-self-serve__block-title">Composite Anomalies</h4>
+ {{!-- Sub Headers --}}
+
+ <div class="te-content-block">
+ {{#if showRules}}
+ <h4 class="te-self-serve__block-title">{{selectedRule.name}} {{#if alertHasDimensions}}/ {{selectedDimension}}{{/if}} anomalies over time ({{numFilteredAnomalies}})</h4>
{{else}}
- <h4 class="te-self-serve__block-title">{{#if alertHasDimensions}}{{selectedDimension}} a{{else}}A{{/if}}nomalies over time ({{numFilteredAnomalies}})</h4>
+ {{#if isComposite}}
+ <h4 class="te-self-serve__block-title">Composite Anomalies</h4>
+ {{else}}
+ <h4 class="te-self-serve__block-title">{{#if alertHasDimensions}}{{selectedDimension}} a{{else}}A{{/if}}nomalies over time ({{numFilteredAnomalies}})</h4>
+ {{/if}}
{{/if}}
- {{/if}}
- {{#unless isPreviewMode}}
- <a class="te-self-serve__side-link te-self-serve__side-link--high" {{action "onClickReportAnomaly" this}}>Report missing anomaly</a>
- {{/unless}}
+ {{#unless isPreviewMode}}
+ <a class="te-self-serve__side-link te-self-serve__side-link--high" {{action "onClickReportAnomaly" this}}>Report missing anomaly</a>
+ {{/unless}}
- <div class="te-form__select te-form__select--same-line col-md-3">
- {{!-- Rule selector --}}
- {{#if showRules}}
- {{#power-select
- triggerId="select-rule"
- triggerClass="te-form__select"
- options=ruleOptions
- searchEnabled=true
- searchPlaceholder="Type to filter..."
- matchTriggerWidth=false
- matchContentWidth=true
- selected=selectedRule
- searchField="name"
- onchange=(action "onSelectRule")
- as |rule|
- }}
- {{rule.name}}
- {{/power-select}}
+ <div class="te-form__select te-form__select--same-line col-md-3">
+ {{!-- Rule selector --}}
+ {{#if showRules}}
+ {{#power-select
+ triggerId="select-rule"
+ triggerClass="te-form__select"
+ options=ruleOptions
+ searchEnabled=true
+ searchPlaceholder="Type to filter..."
+ matchTriggerWidth=false
+ matchContentWidth=true
+ selected=selectedRule
+ searchField="name"
+ onchange=(action "onSelectRule")
+ as |rule|
+ }}
+ {{rule.name}}
+ {{/power-select}}
- {{!-- Dimension selector --}}
- {{#if alertHasDimensions}}
- <div class="te-form__select te-form__select--margin-left">
- {{#power-select
- triggerId="select-dimension"
- triggerClass="te-form__select"
- options=dimensionOptions
- searchEnabled=true
- searchPlaceholder="Type to filter..."
- matchTriggerWidth=false
- matchContentWidth=true
- selected=selectedDimension
- onchange=(action "onSelectDimension")
- as |dimension|
- }}
- {{dimension}}
- {{/power-select}}
- </div>
- {{/if}}
- {{else}}
- {{#unless isComposite}}
{{!-- Dimension selector --}}
{{#if alertHasDimensions}}
- {{#power-select
- triggerId="select-dimension"
- triggerClass="te-form__select"
- options=dimensionOptions
- searchEnabled=true
- searchPlaceholder="Type to filter..."
- matchTriggerWidth=false
- matchContentWidth=true
- selected=selectedDimension
- onchange=(action "onSelectDimension")
- as |dimension|
- }}
- {{dimension}}
- {{/power-select}}
+ <div class="te-form__select te-form__select--margin-left">
+ {{#power-select
+ triggerId="select-dimension"
+ triggerClass="te-form__select"
+ options=dimensionOptions
+ searchEnabled=true
+ searchPlaceholder="Type to filter..."
+ matchTriggerWidth=false
+ matchContentWidth=true
+ selected=selectedDimension
+ onchange=(action "onSelectDimension")
+ as |dimension|
+ }}
+ {{dimension}}
+ {{/power-select}}
+ </div>
{{/if}}
- {{/unless}}
- {{/if}}
- </div>
-
- {{#if isTrainingDisplayed}}
- <div class="col-xs-12 no-padding">
- <div class="alert-details-msg-forecast">
- <p>{{material-design-icon
- name='error-outline'
- }} {{trainingMessage}}
- <span>
- <i class="glyphicon glyphicon-question-sign"></i>
- {{#tooltip-on-element side='right' class="te-tooltip te-tooltip--large te-tooltip--cover" as |popover|}}
- <div class="te-tooltip__header">
- <span class="te-tooltip__title">Train Period</span>
- </div>
+ {{else}}
+ {{#unless isComposite}}
+ {{!-- Dimension selector --}}
+ {{#if alertHasDimensions}}
+ {{#power-select
+ triggerId="select-dimension"
+ triggerClass="te-form__select"
+ options=dimensionOptions
+ searchEnabled=true
+ searchPlaceholder="Type to filter..."
+ matchTriggerWidth=false
+ matchContentWidth=true
+ selected=selectedDimension
+ onchange=(action "onSelectDimension")
+ as |dimension|
+ }}
+ {{dimension}}
+ {{/power-select}}
+ {{/if}}
+ {{/unless}}
+ {{/if}}
+ </div>
- <div class="te-horizontal-forecast__fit-container">
- <ul class="te-horizontal-forecast__label-column">
- <li class="te-horizontal-forecast__title">Fit Start</li>
- <li class="te-horizontal-forecast__title">Fit End</li>
- </ul>
+ {{#if isTrainingDisplayed}}
+ <div class="col-xs-12 no-padding">
+ <div class="alert-details-msg-forecast">
+ <p>{{material-design-icon
+ name='error-outline'
+ }} {{trainingMessage}}
+ <span>
+ <i class="glyphicon glyphicon-question-sign"></i>
+ {{#tooltip-on-element side='right' class="te-tooltip te-tooltip--large te-tooltip--cover" as |popover|}}
+ <div class="te-tooltip__header">
+ <span class="te-tooltip__title">Train Period</span>
+ </div>
- <ul class="te-horizontal-forecast__fit-value">
- <li class="te-horizontal-forecast__date">{{trainingTooltipDateTimes.fitStart}}</li>
- <li class="te-horizontal-forecast__date">{{trainingTooltipDateTimes.fitEnd}}</li>
- </ul>
- </div>
+ <div class="te-horizontal-forecast__fit-container">
Review comment:
indent issues
##########
File path: thirdeye/thirdeye-frontend/app/pods/components/alert-details/template.hbs
##########
@@ -147,285 +122,228 @@
<strong>Error:</strong> Failed to save reported anomaly.
{{/bs-alert}}
{{/if}}
-
- <div class="te-content-block">
- {{#if showRules}}
- <h4 class="te-self-serve__block-title">{{selectedRule.name}} {{#if alertHasDimensions}}/ {{selectedDimension}}{{/if}} anomalies over time ({{numFilteredAnomalies}})</h4>
- {{else}}
- {{#if isComposite}}
- <h4 class="te-self-serve__block-title">Composite Anomalies</h4>
+ {{!-- Sub Headers --}}
+
+ <div class="te-content-block">
+ {{#if showRules}}
+ <h4 class="te-self-serve__block-title">{{selectedRule.name}} {{#if alertHasDimensions}}/ {{selectedDimension}}{{/if}} anomalies over time ({{numFilteredAnomalies}})</h4>
{{else}}
- <h4 class="te-self-serve__block-title">{{#if alertHasDimensions}}{{selectedDimension}} a{{else}}A{{/if}}nomalies over time ({{numFilteredAnomalies}})</h4>
+ {{#if isComposite}}
+ <h4 class="te-self-serve__block-title">Composite Anomalies</h4>
+ {{else}}
+ <h4 class="te-self-serve__block-title">{{#if alertHasDimensions}}{{selectedDimension}} a{{else}}A{{/if}}nomalies over time ({{numFilteredAnomalies}})</h4>
+ {{/if}}
{{/if}}
- {{/if}}
- {{#unless isPreviewMode}}
- <a class="te-self-serve__side-link te-self-serve__side-link--high" {{action "onClickReportAnomaly" this}}>Report missing anomaly</a>
- {{/unless}}
+ {{#unless isPreviewMode}}
+ <a class="te-self-serve__side-link te-self-serve__side-link--high" {{action "onClickReportAnomaly" this}}>Report missing anomaly</a>
+ {{/unless}}
- <div class="te-form__select te-form__select--same-line col-md-3">
- {{!-- Rule selector --}}
- {{#if showRules}}
- {{#power-select
- triggerId="select-rule"
- triggerClass="te-form__select"
- options=ruleOptions
- searchEnabled=true
- searchPlaceholder="Type to filter..."
- matchTriggerWidth=false
- matchContentWidth=true
- selected=selectedRule
- searchField="name"
- onchange=(action "onSelectRule")
- as |rule|
- }}
- {{rule.name}}
- {{/power-select}}
+ <div class="te-form__select te-form__select--same-line col-md-3">
+ {{!-- Rule selector --}}
+ {{#if showRules}}
+ {{#power-select
+ triggerId="select-rule"
+ triggerClass="te-form__select"
+ options=ruleOptions
+ searchEnabled=true
+ searchPlaceholder="Type to filter..."
+ matchTriggerWidth=false
+ matchContentWidth=true
+ selected=selectedRule
+ searchField="name"
+ onchange=(action "onSelectRule")
+ as |rule|
+ }}
+ {{rule.name}}
+ {{/power-select}}
Review comment:
Ditto, idents issue.
##########
File path: thirdeye/thirdeye-frontend/app/pods/components/alert-details/template.hbs
##########
@@ -40,102 +29,88 @@
<p>Click "Rerun Preview" to get the preview for your updated configuration</p>
{{/if}}
</div>
- {{/if}}
- {{#if dataIsCurrent}}
- <div class="col-xs-12 preview">
- <div class="col-xs-2 no-padding">
- <label class="te-label te-label--display">Display Window
- <span>
- <i class="glyphicon glyphicon-question-sign"></i>
- {{#tooltip-on-element class="te-tooltip"}}
- This is the maximum display period in days. You can zoom into the chart further using the mouse wheel.
- {{/tooltip-on-element}}
- </span>
- </label>
- </div>
- <div class="col-xs-4 no-padding">
- {{date-range-picker
- class="te-range-picker"
- alwaysShowCalendars=true
- timePicker=true
- timePicker24Hour=true
- timePickerIncrement=pill.timePickerIncrement
- start=pill.activeRangeStart
- end=pill.activeRangeEnd
- ranges=pill.predefinedRanges
- showCustomRangeLabel=false
- format=pill.uiDateFormat
- serverFormat="YYYY-MM-DD HH:mm"
- applyAction=(action "onRangeSelection")
- }}
- </div>
- </div>
-
- {{#if alertId}}
-
- <div class="te-content-block__performance-health-wrapper">
- <!-- Anomalies, Response Rate, Precision, Recall -->
- <div class="te-horizontal-cards te-content-block__alert-performance">
- <h4 class="te-self-serve__block-title">
- <label for="select-dimension" class="control-label te-label">
- Alert Performance
- <span>
- <i class="glyphicon glyphicon-question-sign"></i>
- {{#tooltip-on-element class="te-tooltip"}}
- All estimated performance numbers are based on reviewed anomalies.
- {{/tooltip-on-element}}
- </span>
- </label>
- </h4>
- {{!-- Alert anomaly stats cards --}}
- {{#if performanceStatsTaskInstance.isRunning }}
- <div class="spinner-wrapper spinner-wrapper--card">
- {{ember-spinner lines=30 radius=20 length=0 width=10 opacity=0 trail=75 color='blue'}}
- </div>
- {{else}}
- {{stats-cards
- stats=computedStats
- areTwoSetsOfAnomalies=areTwoSetsOfAnomalies
- isEditMode=isEditMode
- }}
- {{/if}}
- </div>
+ {{#if showDetails}}
+ {{#unless dataIsCurrent}}
+ <div class="detection-yaml-msg">Alert configuration has changed.</div>
+ {{/unless}}
+ {{/if}}
- {{detection-health
- health=detectionHealth
- selectedRule=selectedRule
- }}
- </div>
- {{else}}
- <!-- Anomalies, Response Rate, Precision, Recall -->
- <div class="te-horizontal-cards te-content-block">
- <h4 class="te-self-serve__block-title">
- <label for="select-dimension" class="control-label te-label">
- Alert Performance
- <span>
- <i class="glyphicon glyphicon-question-sign"></i>
- {{#tooltip-on-element class="te-tooltip"}}
- All estimated performance numbers are based on reviewed anomalies.
- {{/tooltip-on-element}}
- </span>
- </label>
- </h4>
- {{!-- Alert anomaly stats cards --}}
- {{#if performanceStatsTaskInstance.isRunning }}
- <div class="spinner-wrapper spinner-wrapper--card">
- {{ember-spinner lines=30 radius=20 length=0 width=10 opacity=0 trail=75 color='blue'}}
- </div>
- {{else}}
- {{stats-cards
- stats=computedStats
- areTwoSetsOfAnomalies=areTwoSetsOfAnomalies
- isEditMode=isEditMode
+ {{/if}}
+ {{/if}}
+ {{/if}}
+ {{!-- display window + Dropdown --}}
+ {{#unless isPreviewLoading}}
+ {{#unless disablePreviewButton}}
+ <div class="col-xs-12 preview">
+ <div class="col-xs-2 no-padding">
+ <label class="te-label te-label--display">Display Window
+ <span>
+ <i class="glyphicon glyphicon-question-sign"></i>
+ {{#tooltip-on-element class="te-tooltip"}}
+ This is the maximum display period in days. You can zoom into the chart further using the mouse wheel.
+ {{/tooltip-on-element}}
+ </span>
+ </label>
+ </div>
+ <div class="col-xs-4 no-padding">
+ {{date-range-picker
+ class="te-range-picker"
+ alwaysShowCalendars=true
+ timePicker=true
+ timePicker24Hour=true
+ timePickerIncrement=pill.timePickerIncrement
+ start=pill.activeRangeStart
+ end=pill.activeRangeEnd
+ ranges=pill.predefinedRanges
+ showCustomRangeLabel=false
+ format=pill.uiDateFormat
+ serverFormat="YYYY-MM-DD HH:mm"
+ applyAction=(action "onRangeSelection")
+ }}
+ </div>
+ </div>
+ {{/unless}}
+ {{/unless}}
+ {{!-- draw chart & table--}}
+ {{#if showDetails}}
+ {{#if dataIsCurrent}}
+ {{#unless isPreviewLoading}}
+ {{!-- Stats Cards --}}
+ <div class="te-content-block__performance-health-wrapper">
+ <!-- Anomalies, Response Rate, Precision, Recall -->
+ <div class="te-horizontal-cards te-content-block{{if alertId '__alert-performance'}}" >
+ <h4 class="te-self-serve__block-title">
+ <label for="select-dimension" class="control-label te-label">
+ Alert Performance
+ <span>
+ <i class="glyphicon glyphicon-question-sign"></i>
+ {{#tooltip-on-element class="te-tooltip"}}
+ All estimated performance numbers are based on reviewed anomalies.
+ {{/tooltip-on-element}}
+ </span>
+ </label>
+ </h4>
+ {{!-- Alert anomaly stats cards --}}
+ {{#if performanceStatsTaskInstance.isRunning }}
+ <div class="spinner-wrapper spinner-wrapper--card">
+ {{ember-spinner lines=30 radius=20 length=0 width=10 opacity=0 trail=75 color='blue'}}
+ </div>
+ {{else}}
+ {{stats-cards
+ stats=computedStats
+ areTwoSetsOfAnomalies=areTwoSetsOfAnomalies
+ isEditMode=isEditMode
+ }}
+ {{/if}}
+ </div>
+ {{#if alertId}}
+ {{detection-health
+ health=detectionHealth
+ selectedRule=selectedRule
}}
{{/if}}
Review comment:
Too many nested if statements, we could consider reorganizing the logic.
##########
File path: thirdeye/thirdeye-frontend/app/pods/components/alert-details/template.hbs
##########
@@ -147,285 +122,228 @@
<strong>Error:</strong> Failed to save reported anomaly.
{{/bs-alert}}
{{/if}}
-
- <div class="te-content-block">
- {{#if showRules}}
- <h4 class="te-self-serve__block-title">{{selectedRule.name}} {{#if alertHasDimensions}}/ {{selectedDimension}}{{/if}} anomalies over time ({{numFilteredAnomalies}})</h4>
- {{else}}
- {{#if isComposite}}
- <h4 class="te-self-serve__block-title">Composite Anomalies</h4>
+ {{!-- Sub Headers --}}
+
+ <div class="te-content-block">
+ {{#if showRules}}
+ <h4 class="te-self-serve__block-title">{{selectedRule.name}} {{#if alertHasDimensions}}/ {{selectedDimension}}{{/if}} anomalies over time ({{numFilteredAnomalies}})</h4>
{{else}}
- <h4 class="te-self-serve__block-title">{{#if alertHasDimensions}}{{selectedDimension}} a{{else}}A{{/if}}nomalies over time ({{numFilteredAnomalies}})</h4>
+ {{#if isComposite}}
+ <h4 class="te-self-serve__block-title">Composite Anomalies</h4>
+ {{else}}
+ <h4 class="te-self-serve__block-title">{{#if alertHasDimensions}}{{selectedDimension}} a{{else}}A{{/if}}nomalies over time ({{numFilteredAnomalies}})</h4>
+ {{/if}}
{{/if}}
- {{/if}}
- {{#unless isPreviewMode}}
- <a class="te-self-serve__side-link te-self-serve__side-link--high" {{action "onClickReportAnomaly" this}}>Report missing anomaly</a>
- {{/unless}}
+ {{#unless isPreviewMode}}
+ <a class="te-self-serve__side-link te-self-serve__side-link--high" {{action "onClickReportAnomaly" this}}>Report missing anomaly</a>
+ {{/unless}}
- <div class="te-form__select te-form__select--same-line col-md-3">
- {{!-- Rule selector --}}
- {{#if showRules}}
- {{#power-select
- triggerId="select-rule"
- triggerClass="te-form__select"
- options=ruleOptions
- searchEnabled=true
- searchPlaceholder="Type to filter..."
- matchTriggerWidth=false
- matchContentWidth=true
- selected=selectedRule
- searchField="name"
- onchange=(action "onSelectRule")
- as |rule|
- }}
- {{rule.name}}
- {{/power-select}}
+ <div class="te-form__select te-form__select--same-line col-md-3">
+ {{!-- Rule selector --}}
+ {{#if showRules}}
+ {{#power-select
+ triggerId="select-rule"
+ triggerClass="te-form__select"
+ options=ruleOptions
+ searchEnabled=true
+ searchPlaceholder="Type to filter..."
+ matchTriggerWidth=false
+ matchContentWidth=true
+ selected=selectedRule
+ searchField="name"
+ onchange=(action "onSelectRule")
+ as |rule|
+ }}
+ {{rule.name}}
+ {{/power-select}}
- {{!-- Dimension selector --}}
- {{#if alertHasDimensions}}
- <div class="te-form__select te-form__select--margin-left">
- {{#power-select
- triggerId="select-dimension"
- triggerClass="te-form__select"
- options=dimensionOptions
- searchEnabled=true
- searchPlaceholder="Type to filter..."
- matchTriggerWidth=false
- matchContentWidth=true
- selected=selectedDimension
- onchange=(action "onSelectDimension")
- as |dimension|
- }}
- {{dimension}}
- {{/power-select}}
- </div>
- {{/if}}
- {{else}}
- {{#unless isComposite}}
{{!-- Dimension selector --}}
{{#if alertHasDimensions}}
- {{#power-select
- triggerId="select-dimension"
- triggerClass="te-form__select"
- options=dimensionOptions
- searchEnabled=true
- searchPlaceholder="Type to filter..."
- matchTriggerWidth=false
- matchContentWidth=true
- selected=selectedDimension
- onchange=(action "onSelectDimension")
- as |dimension|
- }}
- {{dimension}}
- {{/power-select}}
+ <div class="te-form__select te-form__select--margin-left">
+ {{#power-select
+ triggerId="select-dimension"
+ triggerClass="te-form__select"
+ options=dimensionOptions
+ searchEnabled=true
+ searchPlaceholder="Type to filter..."
+ matchTriggerWidth=false
+ matchContentWidth=true
+ selected=selectedDimension
+ onchange=(action "onSelectDimension")
+ as |dimension|
+ }}
+ {{dimension}}
+ {{/power-select}}
+ </div>
{{/if}}
- {{/unless}}
- {{/if}}
- </div>
-
- {{#if isTrainingDisplayed}}
- <div class="col-xs-12 no-padding">
- <div class="alert-details-msg-forecast">
- <p>{{material-design-icon
- name='error-outline'
- }} {{trainingMessage}}
- <span>
- <i class="glyphicon glyphicon-question-sign"></i>
- {{#tooltip-on-element side='right' class="te-tooltip te-tooltip--large te-tooltip--cover" as |popover|}}
- <div class="te-tooltip__header">
- <span class="te-tooltip__title">Train Period</span>
- </div>
+ {{else}}
+ {{#unless isComposite}}
+ {{!-- Dimension selector --}}
+ {{#if alertHasDimensions}}
+ {{#power-select
+ triggerId="select-dimension"
+ triggerClass="te-form__select"
+ options=dimensionOptions
+ searchEnabled=true
+ searchPlaceholder="Type to filter..."
+ matchTriggerWidth=false
+ matchContentWidth=true
+ selected=selectedDimension
+ onchange=(action "onSelectDimension")
+ as |dimension|
+ }}
+ {{dimension}}
+ {{/power-select}}
+ {{/if}}
+ {{/unless}}
+ {{/if}}
+ </div>
- <div class="te-horizontal-forecast__fit-container">
- <ul class="te-horizontal-forecast__label-column">
- <li class="te-horizontal-forecast__title">Fit Start</li>
- <li class="te-horizontal-forecast__title">Fit End</li>
- </ul>
+ {{#if isTrainingDisplayed}}
+ <div class="col-xs-12 no-padding">
+ <div class="alert-details-msg-forecast">
+ <p>{{material-design-icon
+ name='error-outline'
+ }} {{trainingMessage}}
+ <span>
+ <i class="glyphicon glyphicon-question-sign"></i>
+ {{#tooltip-on-element side='right' class="te-tooltip te-tooltip--large te-tooltip--cover" as |popover|}}
+ <div class="te-tooltip__header">
+ <span class="te-tooltip__title">Train Period</span>
+ </div>
- <ul class="te-horizontal-forecast__fit-value">
- <li class="te-horizontal-forecast__date">{{trainingTooltipDateTimes.fitStart}}</li>
- <li class="te-horizontal-forecast__date">{{trainingTooltipDateTimes.fitEnd}}</li>
- </ul>
- </div>
+ <div class="te-horizontal-forecast__fit-container">
+ <ul class="te-horizontal-forecast__label-column">
+ <li class="te-horizontal-forecast__title">Fit Start</li>
+ <li class="te-horizontal-forecast__title">Fit End</li>
+ </ul>
- <div class="te-horizontal-forecast__container">
- <ul class="te-horizontal-forecast__label-column">
- <li class="te-horizontal-forecast__title">Forecast Start</li>
- <li class="te-horizontal-forecast__title">Forecast End</li>
- </ul>
+ <ul class="te-horizontal-forecast__fit-value">
+ <li class="te-horizontal-forecast__date">{{trainingTooltipDateTimes.fitStart}}</li>
+ <li class="te-horizontal-forecast__date">{{trainingTooltipDateTimes.fitEnd}}</li>
+ </ul>
+ </div>
- <ul class="te-horizontal-forecast__forecast-value">
- <li class="te-horizontal-forecast__date">{{trainingTooltipDateTimes.forecastStart}}</li>
- <li class="te-horizontal-forecast__date">{{trainingTooltipDateTimes.forecastEnd}}</li>
- </ul>
- </div>
+ <div class="te-horizontal-forecast__container">
+ <ul class="te-horizontal-forecast__label-column">
+ <li class="te-horizontal-forecast__title">Forecast Start</li>
+ <li class="te-horizontal-forecast__title">Forecast End</li>
+ </ul>
- {{/tooltip-on-element}}
- </span>
- </p>
- </div>
- </div>
- {{/if}}
+ <ul class="te-horizontal-forecast__forecast-value">
+ <li class="te-horizontal-forecast__date">{{trainingTooltipDateTimes.forecastStart}}</li>
+ <li class="te-horizontal-forecast__date">{{trainingTooltipDateTimes.forecastEnd}}</li>
+ </ul>
+ </div>
- {{!-- Missing anomaly modal --}}
- {{#te-modal
- cancelButtonText="Cancel"
- submitButtonText="Report"
- submitAction=(action "onSave")
- cancelAction=(action "onCancel")
- isShowingModal=openReportModal
- headerText="Report Undetected Anomaly"
- }}
- {{#if renderModalContent}}
- {{alert-report-modal
- series=series
- colorMapping=colorMapping
- axis=axis
- zoom=zoom
- legend=legend
- point=point
- metricName=alertData.metric
- alertName=alertData.detectionName
- predefinedRanges=predefinedRanges
- dimensionOptions=dimensionOptions
- selectedDimension=selectedDimension
- alertHasDimensions=alertHasDimensions
- isMetricDataLoading=isMetricDataLoading
- isMetricDataInvalid=isMetricDataInvalid
- inputAction=(action "onInputMissingAnomaly")
- isReportFailure=isReportFailure
- }}
- {{else}}
- {{ember-spinner}}
+ {{/tooltip-on-element}}
+ </span>
+ </p>
+ </div>
+ </div>
{{/if}}
- {{/te-modal}}
- <div class="col-xs-12 te-graph-container">
- {{#if isDataLoading}}
- {{rootcause-placeholder
- message=blobMessage
- iconClass="glyphicon glyphicon-equalizer"}}
- {{#unless getAnomaliesError}}
- <div class="spinner-wrapper spinner-wrapper--card">
- {{ember-spinner lines=30 radius=20 length=0 width=10 opacity=0 trail=75 color='blue'}}
- </div>
- {{/unless}}
- {{else}}
- {{#if getAnomaliesError}}
+ {{!-- Missing anomaly modal --}}
+ {{#te-modal
+ cancelButtonText="Cancel"
+ submitButtonText="Report"
+ submitAction=(action "onSave")
+ cancelAction=(action "onCancel")
+ isShowingModal=openReportModal
+ headerText="Report Undetected Anomaly"
+ }}
+ {{#if renderModalContent}}
+ {{alert-report-modal
+ series=series
+ colorMapping=colorMapping
+ axis=axis
+ zoom=zoom
+ legend=legend
+ point=point
+ metricName=alertData.metric
+ alertName=alertData.detectionName
+ predefinedRanges=predefinedRanges
+ dimensionOptions=dimensionOptions
+ selectedDimension=selectedDimension
+ alertHasDimensions=alertHasDimensions
+ isMetricDataLoading=isMetricDataLoading
+ isMetricDataInvalid=isMetricDataInvalid
+ inputAction=(action "onInputMissingAnomaly")
+ isReportFailure=isReportFailure
+ }}
+ {{else}}
+ {{ember-spinner}}
+ {{/if}}
+ {{/te-modal}}
+
+ <div class="col-xs-12 te-graph-container">
+ {{#if isDataLoading}}
{{rootcause-placeholder
message=blobMessage
iconClass="glyphicon glyphicon-equalizer"}}
+ {{#unless getAnomaliesError}}
+ <div class="spinner-wrapper spinner-wrapper--card">
+ {{ember-spinner lines=30 radius=20 length=0 width=10 opacity=0 trail=75 color='blue'}}
+ </div>
+ {{/unless}}
{{else}}
+ {{#if getAnomaliesError}}
+ {{rootcause-placeholder
+ message=blobMessage
+ iconClass="glyphicon glyphicon-equalizer"}}
+ {{else}}
+ {{#unless isComposite}}
+ {{timeseries-chart
+ series=series
+ colorMapping=colorMapping
+ axis=axis
+ zoom=zoom
+ legend=legend
+ point=point
+ order=order
+ }}
+ {{/unless}}
+ {{/if}}
+ {{/if}}
+ {{#unless isPreviewMode}}
{{#unless isComposite}}
- {{timeseries-chart
- series=series
- colorMapping=colorMapping
- axis=axis
- zoom=zoom
- legend=legend
- point=point
- order=order
- }}
+ <div class="te-form__note">
+ NOTE: If you find the metric shown above is inconsistent, please email <a class="thirdeye-link-secondary" target="_blank" href="{{graphMailtoLink}}">ask_thirdeye</a>.
+ </div>
+ <div class="te-form__note">
+ {{partial 'partials/si-note'}}
+ </div>
{{/unless}}
- {{/if}}
- {{/if}}
- {{#unless isPreviewMode}}
- {{#unless isComposite}}
- <div class="te-form__note">
- NOTE: If you find the metric shown above is inconsistent, please email <a class="thirdeye-link-secondary" target="_blank" href="{{graphMailtoLink}}">ask_thirdeye</a>.
- </div>
- <div class="te-form__note">
- {{partial 'partials/si-note'}}
- </div>
{{/unless}}
+ </div>
+
+ {{#unless isComposite}}
+ {{!-- Baseline type selector --}}
+ {{range-pill-selectors
+ title="Baseline"
+ timeRangeOptions=baselineOptions
+ selectAction=(action "onBaselineOptionClick")
+ }}
{{/unless}}
- </div>
- {{#unless isComposite}}
- {{!-- Baseline type selector --}}
- {{range-pill-selectors
- title="Baseline"
- timeRangeOptions=baselineOptions
- selectAction=(action "onBaselineOptionClick")
- }}
- {{/unless}}
- {{#if anomaliesAny}}
- {{models-table
- data=tableAnomalies
- columns=columns
- columnsDropdownTemplate="dropdown"
- customMessages=customMessages
- customClasses=customClasses
- }}
- {{/if}}
- </div>
- {{else}}
- <div class="detection-yaml-msg">Alert configuration has changed.</div>
- <div class="col-xs-12 preview">
- <div class="col-xs-2 no-padding">
- <label class="te-label te-label--display">Display Window
- <span>
- <i class="glyphicon glyphicon-question-sign"></i>
- {{#tooltip-on-element class="te-tooltip"}}
- This is the maximum display period in days. You can zoom into the chart further using the mouse wheel.
- {{/tooltip-on-element}}
- </span>
- </label>
- </div>
- <div class="col-xs-4 no-padding">
- {{date-range-picker
- class="te-range-picker"
- alwaysShowCalendars=true
- timePicker=true
- timePicker24Hour=true
- timePickerIncrement=pill.timePickerIncrement
- start=pill.activeRangeStart
- end=pill.activeRangeEnd
- ranges=pill.predefinedRanges
- showCustomRangeLabel=false
- format=pill.uiDateFormat
- serverFormat="YYYY-MM-DD HH:mm"
- applyAction=(action "onRangeSelection")
- }}
- </div>
- </div>
- {{/if}}
- {{/if}}
+ {{#if anomaliesAny}}
+ {{models-table
+ data=tableAnomalies
+ columns=columns
+ columnsDropdownTemplate="dropdown"
+ customMessages=customMessages
+ customClasses=customClasses
+ }}
+ {{/if}}
+ </div>
+ {{/unless}}
+ {{/if}}
{{else}}
{{#if disablePreviewButton}}
- <p>Enter YAML configuration to enable preview.</p>
- {{else}}
- <div class="col-xs-12 preview">
- <div class="col-xs-2 no-padding">
- <label class="te-label te-label--display">Display Window
- <span>
- <i class="glyphicon glyphicon-question-sign"></i>
- {{#tooltip-on-element class="te-tooltip"}}
- This is the maximum display period in days. You can zoom into the chart further using the mouse wheel.
- {{/tooltip-on-element}}
- </span>
- </label>
- </div>
- <div class="col-xs-4 no-padding">
- {{date-range-picker
- class="te-range-picker"
- alwaysShowCalendars=true
- timePicker=true
- timePicker24Hour=true
- timePickerIncrement=pill.timePickerIncrement
- start=pill.activeRangeStart
- end=pill.activeRangeEnd
- ranges=pill.predefinedRanges
- showCustomRangeLabel=false
- format=pill.uiDateFormat
- serverFormat="YYYY-MM-DD HH:mm"
- applyAction=(action "onRangeSelection")
- }}
- </div>
- </div>
+ <p>Enter YAML configuration to enable preview.</p>
{{/if}}
{{/if}}
{{/unless}}
- <p>{{errorAnomalies}}</p>
+ <p>{{errorAnomalies}}</p>
Review comment:
indent issue.
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@pinot.apache.org
For additional commands, e-mail: commits-help@pinot.apache.org
[GitHub] [incubator-pinot] JoeFuentes-WebDev commented on a change in pull request #6448: Refactor alert details template
Posted by GitBox <gi...@apache.org>.
JoeFuentes-WebDev commented on a change in pull request #6448:
URL: https://github.com/apache/incubator-pinot/pull/6448#discussion_r560610345
##########
File path: thirdeye/thirdeye-frontend/app/pods/components/alert-details/template.hbs
##########
@@ -40,102 +29,88 @@
<p>Click "Rerun Preview" to get the preview for your updated configuration</p>
{{/if}}
</div>
- {{/if}}
- {{#if dataIsCurrent}}
- <div class="col-xs-12 preview">
- <div class="col-xs-2 no-padding">
- <label class="te-label te-label--display">Display Window
- <span>
- <i class="glyphicon glyphicon-question-sign"></i>
- {{#tooltip-on-element class="te-tooltip"}}
- This is the maximum display period in days. You can zoom into the chart further using the mouse wheel.
- {{/tooltip-on-element}}
- </span>
- </label>
- </div>
- <div class="col-xs-4 no-padding">
- {{date-range-picker
- class="te-range-picker"
- alwaysShowCalendars=true
- timePicker=true
- timePicker24Hour=true
- timePickerIncrement=pill.timePickerIncrement
- start=pill.activeRangeStart
- end=pill.activeRangeEnd
- ranges=pill.predefinedRanges
- showCustomRangeLabel=false
- format=pill.uiDateFormat
- serverFormat="YYYY-MM-DD HH:mm"
- applyAction=(action "onRangeSelection")
- }}
- </div>
- </div>
-
- {{#if alertId}}
-
- <div class="te-content-block__performance-health-wrapper">
- <!-- Anomalies, Response Rate, Precision, Recall -->
- <div class="te-horizontal-cards te-content-block__alert-performance">
- <h4 class="te-self-serve__block-title">
- <label for="select-dimension" class="control-label te-label">
- Alert Performance
- <span>
- <i class="glyphicon glyphicon-question-sign"></i>
- {{#tooltip-on-element class="te-tooltip"}}
- All estimated performance numbers are based on reviewed anomalies.
- {{/tooltip-on-element}}
- </span>
- </label>
- </h4>
- {{!-- Alert anomaly stats cards --}}
- {{#if performanceStatsTaskInstance.isRunning }}
- <div class="spinner-wrapper spinner-wrapper--card">
- {{ember-spinner lines=30 radius=20 length=0 width=10 opacity=0 trail=75 color='blue'}}
- </div>
- {{else}}
- {{stats-cards
- stats=computedStats
- areTwoSetsOfAnomalies=areTwoSetsOfAnomalies
- isEditMode=isEditMode
- }}
- {{/if}}
- </div>
+ {{#if showDetails}}
+ {{#unless dataIsCurrent}}
+ <div class="detection-yaml-msg">Alert configuration has changed.</div>
+ {{/unless}}
+ {{/if}}
- {{detection-health
- health=detectionHealth
- selectedRule=selectedRule
- }}
- </div>
- {{else}}
- <!-- Anomalies, Response Rate, Precision, Recall -->
- <div class="te-horizontal-cards te-content-block">
- <h4 class="te-self-serve__block-title">
- <label for="select-dimension" class="control-label te-label">
- Alert Performance
- <span>
- <i class="glyphicon glyphicon-question-sign"></i>
- {{#tooltip-on-element class="te-tooltip"}}
- All estimated performance numbers are based on reviewed anomalies.
- {{/tooltip-on-element}}
- </span>
- </label>
- </h4>
- {{!-- Alert anomaly stats cards --}}
- {{#if performanceStatsTaskInstance.isRunning }}
- <div class="spinner-wrapper spinner-wrapper--card">
- {{ember-spinner lines=30 radius=20 length=0 width=10 opacity=0 trail=75 color='blue'}}
- </div>
- {{else}}
- {{stats-cards
- stats=computedStats
- areTwoSetsOfAnomalies=areTwoSetsOfAnomalies
- isEditMode=isEditMode
+ {{/if}}
+ {{/if}}
+ {{/if}}
+ {{!-- display window + Dropdown --}}
+ {{#unless isPreviewLoading}}
+ {{#unless disablePreviewButton}}
+ <div class="col-xs-12 preview">
+ <div class="col-xs-2 no-padding">
+ <label class="te-label te-label--display">Display Window
+ <span>
+ <i class="glyphicon glyphicon-question-sign"></i>
+ {{#tooltip-on-element class="te-tooltip"}}
+ This is the maximum display period in days. You can zoom into the chart further using the mouse wheel.
+ {{/tooltip-on-element}}
+ </span>
+ </label>
+ </div>
+ <div class="col-xs-4 no-padding">
+ {{date-range-picker
+ class="te-range-picker"
+ alwaysShowCalendars=true
+ timePicker=true
+ timePicker24Hour=true
+ timePickerIncrement=pill.timePickerIncrement
+ start=pill.activeRangeStart
+ end=pill.activeRangeEnd
+ ranges=pill.predefinedRanges
+ showCustomRangeLabel=false
+ format=pill.uiDateFormat
+ serverFormat="YYYY-MM-DD HH:mm"
+ applyAction=(action "onRangeSelection")
+ }}
+ </div>
+ </div>
+ {{/unless}}
+ {{/unless}}
+ {{!-- draw chart & table--}}
+ {{#if showDetails}}
+ {{#if dataIsCurrent}}
+ {{#unless isPreviewLoading}}
+ {{!-- Stats Cards --}}
+ <div class="te-content-block__performance-health-wrapper">
+ <!-- Anomalies, Response Rate, Precision, Recall -->
+ <div class="te-horizontal-cards te-content-block{{if alertId '__alert-performance'}}" >
+ <h4 class="te-self-serve__block-title">
+ <label for="select-dimension" class="control-label te-label">
+ Alert Performance
+ <span>
+ <i class="glyphicon glyphicon-question-sign"></i>
+ {{#tooltip-on-element class="te-tooltip"}}
+ All estimated performance numbers are based on reviewed anomalies.
+ {{/tooltip-on-element}}
+ </span>
+ </label>
+ </h4>
+ {{!-- Alert anomaly stats cards --}}
+ {{#if performanceStatsTaskInstance.isRunning }}
+ <div class="spinner-wrapper spinner-wrapper--card">
+ {{ember-spinner lines=30 radius=20 length=0 width=10 opacity=0 trail=75 color='blue'}}
+ </div>
+ {{else}}
+ {{stats-cards
+ stats=computedStats
+ areTwoSetsOfAnomalies=areTwoSetsOfAnomalies
+ isEditMode=isEditMode
+ }}
+ {{/if}}
+ </div>
+ {{#if alertId}}
+ {{detection-health
+ health=detectionHealth
+ selectedRule=selectedRule
}}
{{/if}}
Review comment:
Agreed. That said, this is an improvement over the original template.
I'll take a look at reducing the nested ifs but I can't promise much improvement at this stage
- the functional refactoring may offer an opportunity to move the conditionals from the `template` into the `component/controller`
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@pinot.apache.org
For additional commands, e-mail: commits-help@pinot.apache.org
[GitHub] [incubator-pinot] JoeFuentes-WebDev commented on a change in pull request #6448: Refactor alert details template
Posted by GitBox <gi...@apache.org>.
JoeFuentes-WebDev commented on a change in pull request #6448:
URL: https://github.com/apache/incubator-pinot/pull/6448#discussion_r560610345
##########
File path: thirdeye/thirdeye-frontend/app/pods/components/alert-details/template.hbs
##########
@@ -40,102 +29,88 @@
<p>Click "Rerun Preview" to get the preview for your updated configuration</p>
{{/if}}
</div>
- {{/if}}
- {{#if dataIsCurrent}}
- <div class="col-xs-12 preview">
- <div class="col-xs-2 no-padding">
- <label class="te-label te-label--display">Display Window
- <span>
- <i class="glyphicon glyphicon-question-sign"></i>
- {{#tooltip-on-element class="te-tooltip"}}
- This is the maximum display period in days. You can zoom into the chart further using the mouse wheel.
- {{/tooltip-on-element}}
- </span>
- </label>
- </div>
- <div class="col-xs-4 no-padding">
- {{date-range-picker
- class="te-range-picker"
- alwaysShowCalendars=true
- timePicker=true
- timePicker24Hour=true
- timePickerIncrement=pill.timePickerIncrement
- start=pill.activeRangeStart
- end=pill.activeRangeEnd
- ranges=pill.predefinedRanges
- showCustomRangeLabel=false
- format=pill.uiDateFormat
- serverFormat="YYYY-MM-DD HH:mm"
- applyAction=(action "onRangeSelection")
- }}
- </div>
- </div>
-
- {{#if alertId}}
-
- <div class="te-content-block__performance-health-wrapper">
- <!-- Anomalies, Response Rate, Precision, Recall -->
- <div class="te-horizontal-cards te-content-block__alert-performance">
- <h4 class="te-self-serve__block-title">
- <label for="select-dimension" class="control-label te-label">
- Alert Performance
- <span>
- <i class="glyphicon glyphicon-question-sign"></i>
- {{#tooltip-on-element class="te-tooltip"}}
- All estimated performance numbers are based on reviewed anomalies.
- {{/tooltip-on-element}}
- </span>
- </label>
- </h4>
- {{!-- Alert anomaly stats cards --}}
- {{#if performanceStatsTaskInstance.isRunning }}
- <div class="spinner-wrapper spinner-wrapper--card">
- {{ember-spinner lines=30 radius=20 length=0 width=10 opacity=0 trail=75 color='blue'}}
- </div>
- {{else}}
- {{stats-cards
- stats=computedStats
- areTwoSetsOfAnomalies=areTwoSetsOfAnomalies
- isEditMode=isEditMode
- }}
- {{/if}}
- </div>
+ {{#if showDetails}}
+ {{#unless dataIsCurrent}}
+ <div class="detection-yaml-msg">Alert configuration has changed.</div>
+ {{/unless}}
+ {{/if}}
- {{detection-health
- health=detectionHealth
- selectedRule=selectedRule
- }}
- </div>
- {{else}}
- <!-- Anomalies, Response Rate, Precision, Recall -->
- <div class="te-horizontal-cards te-content-block">
- <h4 class="te-self-serve__block-title">
- <label for="select-dimension" class="control-label te-label">
- Alert Performance
- <span>
- <i class="glyphicon glyphicon-question-sign"></i>
- {{#tooltip-on-element class="te-tooltip"}}
- All estimated performance numbers are based on reviewed anomalies.
- {{/tooltip-on-element}}
- </span>
- </label>
- </h4>
- {{!-- Alert anomaly stats cards --}}
- {{#if performanceStatsTaskInstance.isRunning }}
- <div class="spinner-wrapper spinner-wrapper--card">
- {{ember-spinner lines=30 radius=20 length=0 width=10 opacity=0 trail=75 color='blue'}}
- </div>
- {{else}}
- {{stats-cards
- stats=computedStats
- areTwoSetsOfAnomalies=areTwoSetsOfAnomalies
- isEditMode=isEditMode
+ {{/if}}
+ {{/if}}
+ {{/if}}
+ {{!-- display window + Dropdown --}}
+ {{#unless isPreviewLoading}}
+ {{#unless disablePreviewButton}}
+ <div class="col-xs-12 preview">
+ <div class="col-xs-2 no-padding">
+ <label class="te-label te-label--display">Display Window
+ <span>
+ <i class="glyphicon glyphicon-question-sign"></i>
+ {{#tooltip-on-element class="te-tooltip"}}
+ This is the maximum display period in days. You can zoom into the chart further using the mouse wheel.
+ {{/tooltip-on-element}}
+ </span>
+ </label>
+ </div>
+ <div class="col-xs-4 no-padding">
+ {{date-range-picker
+ class="te-range-picker"
+ alwaysShowCalendars=true
+ timePicker=true
+ timePicker24Hour=true
+ timePickerIncrement=pill.timePickerIncrement
+ start=pill.activeRangeStart
+ end=pill.activeRangeEnd
+ ranges=pill.predefinedRanges
+ showCustomRangeLabel=false
+ format=pill.uiDateFormat
+ serverFormat="YYYY-MM-DD HH:mm"
+ applyAction=(action "onRangeSelection")
+ }}
+ </div>
+ </div>
+ {{/unless}}
+ {{/unless}}
+ {{!-- draw chart & table--}}
+ {{#if showDetails}}
+ {{#if dataIsCurrent}}
+ {{#unless isPreviewLoading}}
+ {{!-- Stats Cards --}}
+ <div class="te-content-block__performance-health-wrapper">
+ <!-- Anomalies, Response Rate, Precision, Recall -->
+ <div class="te-horizontal-cards te-content-block{{if alertId '__alert-performance'}}" >
+ <h4 class="te-self-serve__block-title">
+ <label for="select-dimension" class="control-label te-label">
+ Alert Performance
+ <span>
+ <i class="glyphicon glyphicon-question-sign"></i>
+ {{#tooltip-on-element class="te-tooltip"}}
+ All estimated performance numbers are based on reviewed anomalies.
+ {{/tooltip-on-element}}
+ </span>
+ </label>
+ </h4>
+ {{!-- Alert anomaly stats cards --}}
+ {{#if performanceStatsTaskInstance.isRunning }}
+ <div class="spinner-wrapper spinner-wrapper--card">
+ {{ember-spinner lines=30 radius=20 length=0 width=10 opacity=0 trail=75 color='blue'}}
+ </div>
+ {{else}}
+ {{stats-cards
+ stats=computedStats
+ areTwoSetsOfAnomalies=areTwoSetsOfAnomalies
+ isEditMode=isEditMode
+ }}
+ {{/if}}
+ </div>
+ {{#if alertId}}
+ {{detection-health
+ health=detectionHealth
+ selectedRule=selectedRule
}}
{{/if}}
Review comment:
Agreed. That said, this is an improvement over the original template.
I'll take a look at reducing the nested ifs but I can't promise much improvement at this stage
- the functional refactoring may offer an opportunity to move the conditionals from the `template`
-into the `component/controller`
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@pinot.apache.org
For additional commands, e-mail: commits-help@pinot.apache.org
[GitHub] [incubator-pinot] JoeFuentes-WebDev commented on a change in pull request #6448: Refactor alert details template
Posted by GitBox <gi...@apache.org>.
JoeFuentes-WebDev commented on a change in pull request #6448:
URL: https://github.com/apache/incubator-pinot/pull/6448#discussion_r560611048
##########
File path: thirdeye/thirdeye-frontend/app/pods/components/alert-details/template.hbs
##########
@@ -40,102 +29,88 @@
<p>Click "Rerun Preview" to get the preview for your updated configuration</p>
{{/if}}
</div>
- {{/if}}
- {{#if dataIsCurrent}}
- <div class="col-xs-12 preview">
- <div class="col-xs-2 no-padding">
- <label class="te-label te-label--display">Display Window
- <span>
- <i class="glyphicon glyphicon-question-sign"></i>
- {{#tooltip-on-element class="te-tooltip"}}
- This is the maximum display period in days. You can zoom into the chart further using the mouse wheel.
- {{/tooltip-on-element}}
- </span>
- </label>
- </div>
- <div class="col-xs-4 no-padding">
- {{date-range-picker
- class="te-range-picker"
- alwaysShowCalendars=true
- timePicker=true
- timePicker24Hour=true
- timePickerIncrement=pill.timePickerIncrement
- start=pill.activeRangeStart
- end=pill.activeRangeEnd
- ranges=pill.predefinedRanges
- showCustomRangeLabel=false
- format=pill.uiDateFormat
- serverFormat="YYYY-MM-DD HH:mm"
- applyAction=(action "onRangeSelection")
- }}
- </div>
- </div>
-
- {{#if alertId}}
-
- <div class="te-content-block__performance-health-wrapper">
- <!-- Anomalies, Response Rate, Precision, Recall -->
- <div class="te-horizontal-cards te-content-block__alert-performance">
- <h4 class="te-self-serve__block-title">
- <label for="select-dimension" class="control-label te-label">
- Alert Performance
- <span>
- <i class="glyphicon glyphicon-question-sign"></i>
- {{#tooltip-on-element class="te-tooltip"}}
- All estimated performance numbers are based on reviewed anomalies.
- {{/tooltip-on-element}}
- </span>
- </label>
- </h4>
- {{!-- Alert anomaly stats cards --}}
- {{#if performanceStatsTaskInstance.isRunning }}
- <div class="spinner-wrapper spinner-wrapper--card">
- {{ember-spinner lines=30 radius=20 length=0 width=10 opacity=0 trail=75 color='blue'}}
- </div>
- {{else}}
- {{stats-cards
- stats=computedStats
- areTwoSetsOfAnomalies=areTwoSetsOfAnomalies
- isEditMode=isEditMode
- }}
- {{/if}}
- </div>
+ {{#if showDetails}}
+ {{#unless dataIsCurrent}}
+ <div class="detection-yaml-msg">Alert configuration has changed.</div>
+ {{/unless}}
+ {{/if}}
- {{detection-health
- health=detectionHealth
- selectedRule=selectedRule
- }}
- </div>
- {{else}}
- <!-- Anomalies, Response Rate, Precision, Recall -->
- <div class="te-horizontal-cards te-content-block">
- <h4 class="te-self-serve__block-title">
- <label for="select-dimension" class="control-label te-label">
- Alert Performance
- <span>
- <i class="glyphicon glyphicon-question-sign"></i>
- {{#tooltip-on-element class="te-tooltip"}}
- All estimated performance numbers are based on reviewed anomalies.
- {{/tooltip-on-element}}
- </span>
- </label>
- </h4>
- {{!-- Alert anomaly stats cards --}}
- {{#if performanceStatsTaskInstance.isRunning }}
- <div class="spinner-wrapper spinner-wrapper--card">
- {{ember-spinner lines=30 radius=20 length=0 width=10 opacity=0 trail=75 color='blue'}}
- </div>
- {{else}}
- {{stats-cards
- stats=computedStats
- areTwoSetsOfAnomalies=areTwoSetsOfAnomalies
- isEditMode=isEditMode
+ {{/if}}
+ {{/if}}
+ {{/if}}
+ {{!-- display window + Dropdown --}}
+ {{#unless isPreviewLoading}}
+ {{#unless disablePreviewButton}}
+ <div class="col-xs-12 preview">
+ <div class="col-xs-2 no-padding">
+ <label class="te-label te-label--display">Display Window
+ <span>
+ <i class="glyphicon glyphicon-question-sign"></i>
+ {{#tooltip-on-element class="te-tooltip"}}
+ This is the maximum display period in days. You can zoom into the chart further using the mouse wheel.
+ {{/tooltip-on-element}}
+ </span>
+ </label>
+ </div>
+ <div class="col-xs-4 no-padding">
+ {{date-range-picker
+ class="te-range-picker"
+ alwaysShowCalendars=true
+ timePicker=true
+ timePicker24Hour=true
Review comment:
yeah - this should be considered for the functional refactoring
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@pinot.apache.org
For additional commands, e-mail: commits-help@pinot.apache.org
[GitHub] [incubator-pinot] jihaozh merged pull request #6448: Refactor alert details template
Posted by GitBox <gi...@apache.org>.
jihaozh merged pull request #6448:
URL: https://github.com/apache/incubator-pinot/pull/6448
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@pinot.apache.org
For additional commands, e-mail: commits-help@pinot.apache.org
[GitHub] [incubator-pinot] jihaozh merged pull request #6448: Refactor alert details template
Posted by GitBox <gi...@apache.org>.
jihaozh merged pull request #6448:
URL: https://github.com/apache/incubator-pinot/pull/6448
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@pinot.apache.org
For additional commands, e-mail: commits-help@pinot.apache.org
[GitHub] [incubator-pinot] JoeFuentes-WebDev commented on a change in pull request #6448: Refactor alert details template
Posted by GitBox <gi...@apache.org>.
JoeFuentes-WebDev commented on a change in pull request #6448:
URL: https://github.com/apache/incubator-pinot/pull/6448#discussion_r560614293
##########
File path: thirdeye/thirdeye-frontend/app/pods/components/alert-details/template.hbs
##########
@@ -40,102 +29,88 @@
<p>Click "Rerun Preview" to get the preview for your updated configuration</p>
{{/if}}
</div>
- {{/if}}
- {{#if dataIsCurrent}}
- <div class="col-xs-12 preview">
- <div class="col-xs-2 no-padding">
- <label class="te-label te-label--display">Display Window
- <span>
- <i class="glyphicon glyphicon-question-sign"></i>
- {{#tooltip-on-element class="te-tooltip"}}
- This is the maximum display period in days. You can zoom into the chart further using the mouse wheel.
- {{/tooltip-on-element}}
- </span>
- </label>
- </div>
- <div class="col-xs-4 no-padding">
- {{date-range-picker
- class="te-range-picker"
- alwaysShowCalendars=true
- timePicker=true
- timePicker24Hour=true
- timePickerIncrement=pill.timePickerIncrement
- start=pill.activeRangeStart
- end=pill.activeRangeEnd
- ranges=pill.predefinedRanges
- showCustomRangeLabel=false
- format=pill.uiDateFormat
- serverFormat="YYYY-MM-DD HH:mm"
- applyAction=(action "onRangeSelection")
- }}
- </div>
- </div>
-
- {{#if alertId}}
-
- <div class="te-content-block__performance-health-wrapper">
- <!-- Anomalies, Response Rate, Precision, Recall -->
- <div class="te-horizontal-cards te-content-block__alert-performance">
- <h4 class="te-self-serve__block-title">
- <label for="select-dimension" class="control-label te-label">
- Alert Performance
- <span>
- <i class="glyphicon glyphicon-question-sign"></i>
- {{#tooltip-on-element class="te-tooltip"}}
- All estimated performance numbers are based on reviewed anomalies.
- {{/tooltip-on-element}}
- </span>
- </label>
- </h4>
- {{!-- Alert anomaly stats cards --}}
- {{#if performanceStatsTaskInstance.isRunning }}
- <div class="spinner-wrapper spinner-wrapper--card">
- {{ember-spinner lines=30 radius=20 length=0 width=10 opacity=0 trail=75 color='blue'}}
- </div>
- {{else}}
- {{stats-cards
- stats=computedStats
- areTwoSetsOfAnomalies=areTwoSetsOfAnomalies
- isEditMode=isEditMode
- }}
- {{/if}}
- </div>
+ {{#if showDetails}}
+ {{#unless dataIsCurrent}}
+ <div class="detection-yaml-msg">Alert configuration has changed.</div>
Review comment:
Yeah - `indentation` gets really tricky when there are so many nested conditionals.
I'll try some clean up
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@pinot.apache.org
For additional commands, e-mail: commits-help@pinot.apache.org