zhangloo333 commented on a change in pull request #6227:
URL: https://github.com/apache/incubator-pinot/pull/6227#discussion_r516968762
##########
File path:
thirdeye/thirdeye-frontend/app/pods/components/detection-health/template.hbs
##########
@@ -1,84 +1,103 @@
-<ul class="te-horizontal-cards__single-card">
- <li class="te-horizontal-cards__card-title">
- <label for="select-dimension" class="control-label te-label--no-bottom">
- 30-day status
+<div class="te-horizontal-cards te-content-block__detection-health">
+ <h4 class="te-self-serve__block-title">
+ <label for="select-dimension" class="control-label te-label">
+ Detection health
<span>
<i class="glyphicon glyphicon-question-sign"></i>
- {{#tooltip-on-element class="te-tooltip"}}
- The overall health status of your detection configuration is based on
- the most recent 30 days.
- {{/tooltip-on-element}}
+ {{#tooltip-on-element class="te-tooltip"}}
+ See how your detection configuration is performing in detail
+ by clicking 'view details' below{{#if showRules}},
+ and select different rules above the graph
+ to see their respective regression errors{{/if}}.
+ {{/tooltip-on-element}}
</span>
</label>
- </li>
- <li class="te-horizontal-cards__card-number{{overall.label}}">
- {{overall.status}}
- </li>
- <a role="button" tabindex="0" class=".te-button--link">
- view details
- {{#bs-popover placement="bottom" title="Detection health"}}
- <p>Overall health of the metrics that monitor detection performance.</p>
+ </h4>
+ <div class="te-horizontal-cards__container">
+ <ul class="te-horizontal-cards__single-card">
+ <li class="te-horizontal-cards__card-title">
+ <label for="select-dimension" class="control-label
te-label--no-bottom">
+ 30-day status
+ <span>
+ <i class="glyphicon glyphicon-question-sign"></i>
+ {{#tooltip-on-element class="te-tooltip"}}
+ The overall health status of your detection configuration is
based on
+ the most recent 30 days.
+ {{/tooltip-on-element}}
+ </span>
+ </label>
+ </li>
+ <li class="te-horizontal-cards__card-number{{overall.label}}">
+ {{overall.status}}
+ </li>
+ <a role="button" tabindex="0" class=".te-button--link">
Review comment:
I curious why we need a `.` here.
##########
File path:
thirdeye/thirdeye-frontend/app/pods/components/detection-health/template.hbs
##########
@@ -1,84 +1,103 @@
-<ul class="te-horizontal-cards__single-card">
- <li class="te-horizontal-cards__card-title">
- <label for="select-dimension" class="control-label te-label--no-bottom">
- 30-day status
+<div class="te-horizontal-cards te-content-block__detection-health">
Review comment:
It's better to use semantic tag here, such as `section`
##########
File path:
thirdeye/thirdeye-frontend/app/pods/components/detection-health/template.hbs
##########
@@ -1,84 +1,103 @@
-<ul class="te-horizontal-cards__single-card">
- <li class="te-horizontal-cards__card-title">
- <label for="select-dimension" class="control-label te-label--no-bottom">
- 30-day status
+<div class="te-horizontal-cards te-content-block__detection-health">
+ <h4 class="te-self-serve__block-title">
+ <label for="select-dimension" class="control-label te-label">
+ Detection health
<span>
<i class="glyphicon glyphicon-question-sign"></i>
- {{#tooltip-on-element class="te-tooltip"}}
- The overall health status of your detection configuration is based on
- the most recent 30 days.
- {{/tooltip-on-element}}
+ {{#tooltip-on-element class="te-tooltip"}}
+ See how your detection configuration is performing in detail
+ by clicking 'view details' below{{#if showRules}},
+ and select different rules above the graph
+ to see their respective regression errors{{/if}}.
+ {{/tooltip-on-element}}
</span>
</label>
- </li>
- <li class="te-horizontal-cards__card-number{{overall.label}}">
- {{overall.status}}
- </li>
- <a role="button" tabindex="0" class=".te-button--link">
- view details
- {{#bs-popover placement="bottom" title="Detection health"}}
- <p>Overall health of the metrics that monitor detection performance.</p>
+ </h4>
+ <div class="te-horizontal-cards__container">
+ <ul class="te-horizontal-cards__single-card">
+ <li class="te-horizontal-cards__card-title">
+ <label for="select-dimension" class="control-label
te-label--no-bottom">
+ 30-day status
+ <span>
+ <i class="glyphicon glyphicon-question-sign"></i>
+ {{#tooltip-on-element class="te-tooltip"}}
+ The overall health status of your detection configuration is
based on
+ the most recent 30 days.
+ {{/tooltip-on-element}}
+ </span>
+ </label>
+ </li>
+ <li class="te-horizontal-cards__card-number{{overall.label}}">
Review comment:
do you need a hyphen here to meet the BEM requirement?
##########
File path:
thirdeye/thirdeye-frontend/app/pods/components/detection-health/template.hbs
##########
@@ -1,84 +1,103 @@
-<ul class="te-horizontal-cards__single-card">
- <li class="te-horizontal-cards__card-title">
- <label for="select-dimension" class="control-label te-label--no-bottom">
- 30-day status
+<div class="te-horizontal-cards te-content-block__detection-health">
+ <h4 class="te-self-serve__block-title">
+ <label for="select-dimension" class="control-label te-label">
+ Detection health
<span>
<i class="glyphicon glyphicon-question-sign"></i>
- {{#tooltip-on-element class="te-tooltip"}}
- The overall health status of your detection configuration is based on
- the most recent 30 days.
- {{/tooltip-on-element}}
+ {{#tooltip-on-element class="te-tooltip"}}
+ See how your detection configuration is performing in detail
+ by clicking 'view details' below{{#if showRules}},
+ and select different rules above the graph
+ to see their respective regression errors{{/if}}.
+ {{/tooltip-on-element}}
</span>
</label>
- </li>
- <li class="te-horizontal-cards__card-number{{overall.label}}">
- {{overall.status}}
- </li>
- <a role="button" tabindex="0" class=".te-button--link">
- view details
- {{#bs-popover placement="bottom" title="Detection health"}}
- <p>Overall health of the metrics that monitor detection performance.</p>
+ </h4>
+ <div class="te-horizontal-cards__container">
+ <ul class="te-horizontal-cards__single-card">
+ <li class="te-horizontal-cards__card-title">
+ <label for="select-dimension" class="control-label
te-label--no-bottom">
+ 30-day status
+ <span>
+ <i class="glyphicon glyphicon-question-sign"></i>
+ {{#tooltip-on-element class="te-tooltip"}}
+ The overall health status of your detection configuration is
based on
+ the most recent 30 days.
+ {{/tooltip-on-element}}
+ </span>
+ </label>
+ </li>
+ <li class="te-horizontal-cards__card-number{{overall.label}}">
+ {{overall.status}}
+ </li>
+ <a role="button" tabindex="0" class=".te-button--link">
+ view details
+ {{#bs-popover placement="bottom" title="Detection health"}}
+ <p>Overall health of the metrics that monitor detection
performance.</p>
- <label class="control-label te-label">
- Detection task status
- </label>
+ <label class="control-label te-label">
+ Detection task status
+ </label>
- <div class="te-horizontal-metrics__container">
- <ul class="te-horizontal-metrics__metric">
- <li class="te-horizontal-metrics__number">{{executionTime}}</li>
- <li class="te-horizontal-metrics__title">Last success detection task
finish time</li>
- </ul>
- </div>
+ <div class="te-horizontal-metrics__container">
+ <ul class="te-horizontal-metrics__metric">
+ <li class="te-horizontal-metrics__number">{{executionTime}}</li>
+ <li class="te-horizontal-metrics__title">Last success detection
task finish time</li>
+ </ul>
+ </div>
- <div class="te-horizontal-metrics__container">
- <ul class="te-horizontal-metrics__metric">
- <li
class="te-horizontal-metrics__number{{detection.label}}">{{detection.status}}</li>
- <li class="te-horizontal-metrics__title">Status</li>
- </ul>
+ <div class="te-horizontal-metrics__container">
+ <ul class="te-horizontal-metrics__metric">
+ <li
class="te-horizontal-metrics__number{{detection.label}}">{{detection.status}}</li>
+ <li class="te-horizontal-metrics__title">Status</li>
+ </ul>
- {{#each tasks as |task|}}
- <ul class="te-horizontal-metrics__metric">
- <li
class="te-horizontal-metrics__number{{task.label}}">{{task.number}}</li>
- <li class="te-horizontal-metrics__title">{{task.title}}</li>
- </ul>
- {{/each}}
- </div>
+ {{#each tasks as |task|}}
+ <ul class="te-horizontal-metrics__metric">
+ <li
class="te-horizontal-metrics__number{{task.label}}">{{task.number}}</li>
+ <li class="te-horizontal-metrics__title">{{task.title}}</li>
+ </ul>
+ {{/each}}
+ </div>
- <label class="control-label te-label">
- Anomaly coverage ratio
- </label>
+ <label class="control-label te-label">
+ Anomaly coverage ratio
+ </label>
- <div class="te-horizontal-metrics__container">
- <ul class="te-horizontal-metrics__metric">
- <li
class="te-horizontal-metrics__number{{anomalyCoverage.label}}">{{anomalyCoverage.status}}</li>
- <li class="te-horizontal-metrics__title">Status</li>
- </ul>
+ <div class="te-horizontal-metrics__container">
+ <ul class="te-horizontal-metrics__metric">
+ <li
class="te-horizontal-metrics__number{{anomalyCoverage.label}}">{{anomalyCoverage.status}}</li>
+ <li class="te-horizontal-metrics__title">Status</li>
+ </ul>
- <ul class="te-horizontal-metrics__metric">
- <li
class="te-horizontal-metrics__number">{{anomalyCoverage.ratio}}%</li>
- <li class="te-horizontal-metrics__title">The percentage of anomalous
duration over the past 30 days</li>
- </ul>
- </div>
+ <ul class="te-horizontal-metrics__metric">
+ <li
class="te-horizontal-metrics__number">{{anomalyCoverage.ratio}}%</li>
+ <li class="te-horizontal-metrics__title">The percentage of
anomalous duration over the past 30 days</li>
+ </ul>
+ </div>
- <p>To improve this, adjust alert sensitivity using preview.</p>
+ <p>To improve this, adjust alert sensitivity using preview.</p>
- <label class="control-label te-label">
- Regression error{{#if regressionInfo.rule}} for
{{regressionInfo.rule}}{{/if}}
- </label>
+ <label class="control-label te-label">
+ Regression error{{#if regressionInfo.rule}} for
{{regressionInfo.rule}}{{/if}}
+ </label>
- <div class="te-horizontal-metrics__container">
- <ul class="te-horizontal-metrics__metric">
- <li
class="te-horizontal-metrics__number{{regressionInfo.label}}">{{regressionInfo.status}}</li>
- <li class="te-horizontal-metrics__title">Status</li>
- </ul>
+ <div class="te-horizontal-metrics__container">
+ <ul class="te-horizontal-metrics__metric">
+ <li
class="te-horizontal-metrics__number{{regressionInfo.label}}">{{regressionInfo.status}}</li>
+ <li class="te-horizontal-metrics__title">Status</li>
Review comment:
Some indent issue. it would be better to fix it.
----------------------------------------------------------------
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
