tejasajmera commented on a change in pull request #6227:
URL: https://github.com/apache/incubator-pinot/pull/6227#discussion_r516992422



##########
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:
       I am not sure that there is an issue. I have used spaces everywhere, 
don't see indentation issue in the editor. I think it is just showing 
highlighting in the diff the indentation has moved by 2 spaces so reviewers 
know what has changed, but that is expected as I have added a parent tag so the 
indentation change is expected.




----------------------------------------------------------------
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

Reply via email to