[GitHub] apucher closed pull request #3531: [TE] rootcause - support remove metric from chart label

[GitBox <gi...@apache.org>]

apucher closed pull request #3531: [TE] rootcause - support remove metric from chart label
URL: https://github.com/apache/incubator-pinot/pull/3531
 
 
   

This is a PR merged from a forked repository.
As GitHub hides the original diff on merge, it is displayed below for
the sake of provenance:

As this is a foreign pull request (from a fork), the diff is supplied
below (as it won't show otherwise due to GitHub magic):

diff --git a/thirdeye/thirdeye-frontend/app/pods/components/rootcause-chart/component.js b/thirdeye/thirdeye-frontend/app/pods/components/rootcause-chart/component.js
index 23e3787aaa..697b5cf60f 100644
--- a/thirdeye/thirdeye-frontend/app/pods/components/rootcause-chart/component.js
+++ b/thirdeye/thirdeye-frontend/app/pods/components/rootcause-chart/component.js
@@ -35,6 +35,8 @@ export default Component.extend({
 
   onSelection: null, // function (updates)
 
+  onPrimaryChange: null, // function (updates)
+
   timeseriesMode: null, // 'absolute', 'relative', 'log', 'split'
 
   classNames: ['rootcause-chart'],
@@ -524,10 +526,16 @@ export default Component.extend({
 
   actions: {
     onSelect(urn) {
-      const { onSelection } = getProperties(this, 'onSelection');
+      const { onPrimaryChange } = getProperties(this, 'onPrimaryChange');
+      if (onPrimaryChange) {
+        onPrimaryChange({ [toMetricUrn(urn)]: true, [toBaselineUrn(urn)]: true, [toCurrentUrn(urn)]: true });
+      }
+    },
 
+    onRemove(urn) {
+      const { onSelection } = getProperties(this, 'onSelection');
       if (onSelection) {
-        onSelection({ [toMetricUrn(urn)]: true, [toBaselineUrn(urn)]: true, [toCurrentUrn(urn)]: true });
+        onSelection({ [toMetricUrn(urn)]: false, [toBaselineUrn(urn)]: false, [toCurrentUrn(urn)]: false });
       }
     }
   }
diff --git a/thirdeye/thirdeye-frontend/app/pods/components/rootcause-chart/template.hbs b/thirdeye/thirdeye-frontend/app/pods/components/rootcause-chart/template.hbs
index eb399a4d5c..bd4cae4a69 100644
--- a/thirdeye/thirdeye-frontend/app/pods/components/rootcause-chart/template.hbs
+++ b/thirdeye/thirdeye-frontend/app/pods/components/rootcause-chart/template.hbs
@@ -1,9 +1,16 @@
 {{#if isSplit}}
   {{#each splitUrns as |urn|}}
     <div>
-      <a {{action "onSelect" urn}}>
-        <h4 class="rootcause-chart__title">{{get-safe splitLabels urn}}</h4>
-      </a>
+      <span>
+        <h4 class="rootcause-chart__title">
+          <a {{action "onSelect" urn}}>{{get-safe splitLabels urn}}</a>
+          <a class="rootcause-chart__remove-icon" {{action "onRemove" urn}}>
+            <i class="glyphicon glyphicon-remove">
+              {{tooltip-on-element text='Remove metric'}}
+            </i>
+          </a>
+        </h4>
+      </span>
       {{timeseries-chart
         series=(get-safe splitSeries urn)
         tooltip=tooltip
diff --git a/thirdeye/thirdeye-frontend/app/pods/rootcause/template.hbs b/thirdeye/thirdeye-frontend/app/pods/rootcause/template.hbs
index c4d3142e5f..b6ee9ece40 100644
--- a/thirdeye/thirdeye-frontend/app/pods/rootcause/template.hbs
+++ b/thirdeye/thirdeye-frontend/app/pods/rootcause/template.hbs
@@ -72,7 +72,8 @@
               focusedUrns=focusedUrns
               context=context
               onHover=(action "chartOnHover")
-              onSelection=(action "onPrimaryChange")
+              onSelection=(action "onSelection")
+              onPrimaryChange=(action "onPrimaryChange")
             }}
           </div>
         </div>
diff --git a/thirdeye/thirdeye-frontend/app/styles/components/rootcause-chart.scss b/thirdeye/thirdeye-frontend/app/styles/components/rootcause-chart.scss
index 111446a362..cd3c566924 100644
--- a/thirdeye/thirdeye-frontend/app/styles/components/rootcause-chart.scss
+++ b/thirdeye/thirdeye-frontend/app/styles/components/rootcause-chart.scss
@@ -4,11 +4,35 @@
   &__title {
     padding-left: 16px;
     cursor: pointer;
+
+    &:hover {
+      .rootcause-chart__remove-icon {
+        visibility: visible;
+      }
+    }
   }
 
   g[class*='c3-target-frontend-metric-baseline'] > .c3-lines {
     stroke-dasharray: 1%;
   }
+
+  &__remove-icon {
+    background-color: white;
+    border-color: app-shade(black, 0.55);
+    color: app-shade(black, 0.55);
+    visibility: hidden;
+    text-decoration: none;
+    cursor: pointer;
+
+    &:hover,
+    &:focus,
+    &:active,
+    a:hover, {
+      border-color: app-shade(black, 0.75);
+      color: app-shade(black, 0.75);
+      text-decoration: none;
+    }
+  }
 }
 
 .c3-line {


 

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on 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


With regards,
Apache Git Services

---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@pinot.apache.org
For additional commands, e-mail: dev-help@pinot.apache.org