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:
us...@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@pinot.apache.org
For additional commands, e-mail: commits-h...@pinot.apache.org
