This is an automated email from the ASF dual-hosted git repository.
jihao pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-pinot.git
The following commit(s) were added to refs/heads/master by this push:
new d1a0688 [THIRDEYE-3799](fix): the alert item style fix (#6504)
d1a0688 is described below
commit d1a0688688b3c0cf17e42e31ac543ac02a763dd6
Author: Lei Zhang <[email protected]>
AuthorDate: Tue Feb 2 16:08:49 2021 -0800
[THIRDEYE-3799](fix): the alert item style fix (#6504)
Fix UI bug for self-serve-alert-details component
add style for the link tag
fix alignment and tag style issue by modifying CSS
---
.../self-serve-alert-details/template.hbs | 6 +-
.../self-serve-alert-yaml-details/template.hbs | 141 ++++++++++++---------
.../app/styles/shared/_styles.scss | 34 ++---
3 files changed, 99 insertions(+), 82 deletions(-)
diff --git
a/thirdeye/thirdeye-frontend/app/pods/components/self-serve-alert-details/template.hbs
b/thirdeye/thirdeye-frontend/app/pods/components/self-serve-alert-details/template.hbs
index ec7b441..0399f8a 100644
---
a/thirdeye/thirdeye-frontend/app/pods/components/self-serve-alert-details/template.hbs
+++
b/thirdeye/thirdeye-frontend/app/pods/components/self-serve-alert-details/template.hbs
@@ -95,8 +95,8 @@
</div>
{{/if}}
{{#if (eq displayMode "list")}}
- {{#link-to "manage.explore" alertData.id}}
- <div class="te-search-results__title-name"
title={{alertData.functionName}}>{{alertData.functionName}}</div>
+ {{#link-to "manage.explore" alertData.id
class="te-search-results__title-link"}}
+ <p class="te-search-results__title-name"
title={{alertData.functionName}}>{{alertData.functionName}}</p>
{{/link-to}}
{{/if}}
</div>
@@ -177,4 +177,4 @@
</li>
</div>
</ul>
-{{/if}}
+{{/if}}
\ No newline at end of file
diff --git
a/thirdeye/thirdeye-frontend/app/pods/components/self-serve-alert-yaml-details/template.hbs
b/thirdeye/thirdeye-frontend/app/pods/components/self-serve-alert-yaml-details/template.hbs
index 059a52b..879fbe1 100644
---
a/thirdeye/thirdeye-frontend/app/pods/components/self-serve-alert-yaml-details/template.hbs
+++
b/thirdeye/thirdeye-frontend/app/pods/components/self-serve-alert-yaml-details/template.hbs
@@ -1,80 +1,97 @@
<div class="te-search-results__header row">
<div class="te-search-results__title-group col-md-10 col-xs-9">
<div class="te-search-results__title">
- <h3 class="te-search-results__title-name"
title={{alertData.detectionName}}>{{alertData.detectionName}}</h3>
- {{#if (eq displayMode "list")}}
- {{#link-to "manage.explore" alertData.id}}
- <div class="te-search-results__title-name"
title={{alertData.detectionName}}>{{alertData.detectionName}}</div>
- {{/link-to}}
- {{/if}}
+ <h3 class="te-search-results__title-name"
title={{alertData.detectionName}}>
+ {{alertData.detectionName}}
+ </h3>
{{#if isLoadError}}
- <div
- class="te-search-results__tag {{if (eq displayMode "list")
"te-search-results__tag--list"}} {{if alertData.isActive
"te-search-results__tag--active"}}">
- Error
- </div>
+ <div class="te-search-results__tag
+ {{if (eq displayMode " list") "te-search-results__tag--list"}}
+ {{if alertData.isActive "te-search-results__tag--active"}}">
+ Error
+ </div>
{{else}}
- <div
- class="te-search-results__tag {{if (eq displayMode "list")
"te-search-results__tag--list"}} {{if alertData.isActive
"te-search-results__tag--active"}}">
- {{if alertData.isActive "Active" "Inactive"}}
- </div>
- {{#x-toggle
+ <div class="te-search-results__tag
+ {{if (eq displayMode " list") "te-search-results__tag--list"}}
+ {{if alertData.isActive "te-search-results__tag--active"}}">
+ {{if alertData.isActive "Active" "Inactive"}}
+ </div>
+ {{#x-toggle
value=alertData.isActive
classNames="te-toggle te-toggle--form te-toggle--left report-toggle
activation-toggle"
theme="ios"
id="active-toggle"
showLabels=false
name="activeToggle"
- onToggle=(action "toggleAlertActivation")
- as |toggle|}}
- {{toggle.switch theme='ios' onLabel='diff on' offLabel='diff off'}}
- {{/x-toggle}}
+ onToggle=(action "toggleAlertActivation") as |toggle|
+ }}
+ {{toggle.switch theme="ios" onLabel="diff on" offLabel="diff off"}}
+ {{/x-toggle}}
{{/if}}
</div>
</div>
<div class="col-md-2 col-xs-3">
- <div class="pull-right">{{yield}}</div>
+ <div class="pull-right">
+ {{yield}}
+ </div>
</div>
</div>
-<h4 class="te-alert-page__subtitle">{{alertData.description}}</h4>
+<h4 class="te-alert-page__subtitle">
+ {{alertData.description}}
+</h4>
{{#if (not isLoadError)}}
-<div class="te-alert-detail-breakdown row">
- <dl class="col-xs-12 col-sm-5 row">
- <dt class="col-md-4">Metric</dt>
- <dd class="col-md-8 te-search-results__value{{valueClassSuffix}}"
title={{alertData.metric}}>
- {{if alertData.metric alertData.metric 'N/A'}}
- </dd>
-
- <dt class="col-md-4">Dataset</dt>
- <dd class="col-md-8 te-search-results__value{{valueClassSuffix}}"
title={{alertData.dataset}}>
- {{if alertData.dataset alertData.dataset 'N/A'}}
- </dd>
-
- <dt class="col-md-4">Filtered By</dt>
- <dd class="col-md-8 te-search-results__value{{valueClassSuffix}}"
title={{alertData.filters}}>
- {{if alertData.filters alertData.filters 'N/A'}}</dd>
-
- <dt class="col-md-4">Breakdown By</dt>
- <dd class="col-md-8 te-search-results__value{{valueClassSuffix}}"
title={{alertData.dimensionExploration}}>
- {{if alertData.dimensionExploration alertData.dimensionExploration
'N/A'}}</dd>
- </dl>
-
- <dl class="col-xs-12 col-sm-5 row">
- <dt class="col-md-4">Created By</dt>
- <dd class="col-md-8 te-search-results__value{{valueClassSuffix}}"
title={{alertData.createdBy}}>
- {{if alertData.createdBy alertData.createdBy 'N/A'}}</dd>
-
- <dt class="col-md-4">Updated By</dt>
- <dd class="col-md-8 te-search-results__value{{valueClassSuffix}}"
title={{alertData.updatedBy}}>
- {{if alertData.updatedBy alertData.updatedBy 'N/A'}}</dd>
-
- <dt class="col-md-4">Last detection</dt>
- <dd class="col-md-8 te-search-results__value{{valueClassSuffix}}"
title={{alertData.lastDetectionTime}}>
- {{if alertData.lastDetectionTime alertData.lastDetectionTime 'N/A'}}</dd>
-
- <dt class="col-md-4">Subscribed Groups</dt>
- <dd class="col-md-8 te-search-results__value{{valueClassSuffix}}"
title={{subscribedGroups}}>
- {{if subscribedGroups subscribedGroups 'N/A'}}
- </dd>
- </dl>
-</div>
-{{/if}}
+ <div class="te-alert-detail-breakdown row">
+ <dl class="col-xs-12 col-sm-5 row">
+ <dt class="col-md-4">
+ Metric
+ </dt>
+ <dd class="col-md-8 te-search-results__value{{valueClassSuffix}}"
title={{alertData.metric}}>
+ {{if alertData.metric alertData.metric "N/A"}}
+ </dd>
+ <dt class="col-md-4">
+ Dataset
+ </dt>
+ <dd class="col-md-8 te-search-results__value{{valueClassSuffix}}"
title={{alertData.dataset}}>
+ {{if alertData.dataset alertData.dataset "N/A"}}
+ </dd>
+ <dt class="col-md-4">
+ Filtered By
+ </dt>
+ <dd class="col-md-8 te-search-results__value{{valueClassSuffix}}"
title={{alertData.filters}}>
+ {{if alertData.filters alertData.filters "N/A"}}
+ </dd>
+ <dt class="col-md-4">
+ Breakdown By
+ </dt>
+ <dd class="col-md-8 te-search-results__value{{valueClassSuffix}}"
title={{alertData.dimensionExploration}}>
+ {{if alertData.dimensionExploration alertData.dimensionExploration
"N/A"}}
+ </dd>
+ </dl>
+ <dl class="col-xs-12 col-sm-5 row">
+ <dt class="col-md-4">
+ Created By
+ </dt>
+ <dd class="col-md-8 te-search-results__value{{valueClassSuffix}}"
title={{alertData.createdBy}}>
+ {{if alertData.createdBy alertData.createdBy "N/A"}}
+ </dd>
+ <dt class="col-md-4">
+ Updated By
+ </dt>
+ <dd class="col-md-8 te-search-results__value{{valueClassSuffix}}"
title={{alertData.updatedBy}}>
+ {{if alertData.updatedBy alertData.updatedBy "N/A"}}
+ </dd>
+ <dt class="col-md-4">
+ Last detection
+ </dt>
+ <dd class="col-md-8 te-search-results__value{{valueClassSuffix}}"
title={{alertData.lastDetectionTime}}>
+ {{if alertData.lastDetectionTime alertData.lastDetectionTime "N/A"}}
+ </dd>
+ <dt class="col-md-4">
+ Subscribed Groups
+ </dt>
+ <dd class="col-md-8 te-search-results__value{{valueClassSuffix}}"
title={{subscribedGroups}}>
+ {{if subscribedGroups subscribedGroups "N/A"}}
+ </dd>
+ </dl>
+ </div>
+{{/if}}
\ No newline at end of file
diff --git a/thirdeye/thirdeye-frontend/app/styles/shared/_styles.scss
b/thirdeye/thirdeye-frontend/app/styles/shared/_styles.scss
index cfbe44e..c7f266e 100644
--- a/thirdeye/thirdeye-frontend/app/styles/shared/_styles.scss
+++ b/thirdeye/thirdeye-frontend/app/styles/shared/_styles.scss
@@ -237,13 +237,13 @@ body {
}
.te-content-block {
- font-family: "Source Sans Pro", sans-serif;
+ font-family: 'Source Sans Pro', sans-serif;
border-radius: 5px;
background: white;
padding: 24px;
&__date-picker-section {
- display:flex;
+ display: flex;
flex-direction: row;
align-items: center;
@@ -263,14 +263,14 @@ body {
&__date-picker-label {
margin-bottom: 15px;
-
+
color: rgba(0, 0, 0, 0.9);
font-weight: 500;
font-size: 14px;
}
&__alert-performance {
- font-family: "Source Sans Pro", sans-serif;
+ font-family: 'Source Sans Pro', sans-serif;
background: white;
padding: 24px;
flex-basis: 75%;
@@ -279,10 +279,10 @@ body {
&__detection-health {
margin-left: 10px;
- font-family: "Source Sans Pro", sans-serif;
+ font-family: 'Source Sans Pro', sans-serif;
background: white;
padding: 24px;
- flex-basis: 25%
+ flex-basis: 25%;
}
&__performance-health-wrapper {
@@ -775,7 +775,7 @@ body {
&:before {
display: block;
position: absolute;
- content: "";
+ content: '';
left: -200px;
width: 200px;
height: 4px;
@@ -808,7 +808,7 @@ body {
&__list {
list-style: none;
font-weight: normal;
- margin-bottom: 0;
+ margin-top: 17px;
&--summary-block {
padding: 0;
@@ -829,12 +829,10 @@ body {
&--list {
display: inline-block;
- width: 137px;
- min-width: 137px;
font-size: 15px;
overflow: hidden;
text-overflow: ellipsis;
- text-align: right;
+ text-align: left;
margin-right: 10px;
color: app-shade(black, 4);
}
@@ -852,6 +850,7 @@ body {
}
&__value {
+ flex-shrink: 9015;
overflow: hidden;
text-overflow: ellipsis;
}
@@ -867,10 +866,6 @@ body {
&__title-group {
color: app-shade(black, 0.85);
font-size: 21px;
- display: flex;
- align-items: center;
- flex-shrink: 1;
- overflow: hidden;
}
&__title {
@@ -878,11 +873,16 @@ body {
display: flex;
}
+ &__title-link {
+ line-height: 25px;
+ overflow: hidden;
+ }
+
&__title-name {
+ height: 31px;
+ line-height: 35px;
overflow: hidden;
text-overflow: ellipsis;
- max-width: 80%;
- display: inline-block;
font-weight: 600;
margin: 0 $te-spacing 0 0;
}
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
