npawar closed pull request #3457: [TE] frontend - aaronucsd/fixed some styling
issues for share templat…
URL: https://github.com/apache/incubator-pinot/pull/3457
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/share-custom-template/template.hbs
b/thirdeye/thirdeye-frontend/app/pods/components/share-custom-template/template.hbs
index 34b659bc21..084981b211 100644
---
a/thirdeye/thirdeye-frontend/app/pods/components/share-custom-template/template.hbs
+++
b/thirdeye/thirdeye-frontend/app/pods/components/share-custom-template/template.hbs
@@ -3,7 +3,7 @@
<h4 style="margin-left: 20px;word-wrap: break-word;">
<span style="color: #737373;margin-right:10px;font-weight:
bold;">{{config.title}} for {{startDateDisplay}}</span>
</h4>
- <table border="1" width="660" style="margin: 20px;background-color:
#F6F8FA;font-size: 18px;">
+ <table width="660" style="margin: 20px;border:1px solid
#C7D1D8;background-color: #F6F8FA;font-size: 18px;">
<!-- Custom template table -->
{{#each customHeaderMappingComplete as |row index|}}
<!-- Custom headers -->
@@ -17,11 +17,11 @@
<tr>
{{#each row as |column index|}}
{{#if (eq index 0)}}
- <td style="padding: 0 3px 3px 10px;">
+ <td style="border:1px solid #C7D1D8;padding: 0 3px 3px 10px;">
<p style="margin: 0;">{{column.value}}</p>
</td>
{{else}}
- <td style="padding: 0 3px 3px 10px;">
+ <td style="border:1px solid #C7D1D8;padding: 0 3px 3px 10px;">
<p style="margin: 0;">{{column.summary.[0]}}</p>
<p style="margin: 0;"
class="te-anomaly-table__value-label--{{calculate-direction
column.summary.[1]}}">
({{column.summary.[1]}}%)
diff --git
a/thirdeye/thirdeye-frontend/app/pods/home/share-dashboard/controller.js
b/thirdeye/thirdeye-frontend/app/pods/home/share-dashboard/controller.js
index cdb39c5b52..b140b2625c 100644
--- a/thirdeye/thirdeye-frontend/app/pods/home/share-dashboard/controller.js
+++ b/thirdeye/thirdeye-frontend/app/pods/home/share-dashboard/controller.js
@@ -295,7 +295,7 @@ export default Controller.extend({
map[metricName].items[functionName] = { 'functionId': functionId,
items: [] };
}
- const filteredDimensions = Object.keys(dimensions).map(key => [key,
dimensions[key]]);
+ const filteredDimensions = Object.keys(dimensions).map(key => [key,
'=', dimensions[key]]);
//build new urn
const metricUrn = appendFilters(`thirdeye:metric:${metricId}`,
filteredDimensions);
//Get all in the following order - current,wo2w,median4w
diff --git
a/thirdeye/thirdeye-frontend/app/pods/home/share-dashboard/template.hbs
b/thirdeye/thirdeye-frontend/app/pods/home/share-dashboard/template.hbs
index 2188719329..3879228237 100644
--- a/thirdeye/thirdeye-frontend/app/pods/home/share-dashboard/template.hbs
+++ b/thirdeye/thirdeye-frontend/app/pods/home/share-dashboard/template.hbs
@@ -1,16 +1,58 @@
+{{!-- TODO: needs to figure out if there is a cleaner way vs inline styles -
lohuynh --}}
+<style>
+ .container {
+ margin-right: auto !important;
+ margin-left: auto !important;
+ padding-left: 15px !important;
+ padding-right: 15px !important;
+ width: 1170px !important;
+ }
+ .share-dashboard-container {
+ margin-top: 24px !important;
+ }
+ .share-dashboard-container__body {
+ background-color: #FFF !important;
+ margin-top: 24px !important;
+ margin-bottom: 24px !important;
+ padding: 0 15px 15px 15px !important;
+ border: 1px solid rgba(0, 0, 0, 0.1) !important;
+ }
+ .share-dashboard-container__preview-container {
+ background-color: #EDF0F3 !important;
+ margin-top: 10px !important;
+ }
+ .share-dashboard-container__preview-container-body {
+ height: 100% !important;
+ background-color: #EDF0F3 !important;
+ }
+ .dimensions {
+ list-style: none !important;
+ margin-bottom: 0 !important;
+ max-width: 180px !important;
+ padding: 0 0 0 0 !important;
+ }
+ .email_body {
+ margin: 0 auto !important;
+ border: 1px solid !important;
+ border-color: #F5F5F5 !important;
+ background-color: #FFF !important;
+ max-width: 700px !important;
+ font-family: 'Source Sans Pro', sans-serif !important;
+ }
+</style>
<div class="container share-dashboard-container">
<header>
{{#link-to "home" (query-params appName=model.appName
feedbackType=model.feedbackType duration=model.duration
startDate=model.startDate endDate=model.endDate)
class="te-anomaly-table__link"}}
Back to Dashboard
{{/link-to}}
</header>
- <section class="share-dashboard-container__body">
- <article class="share-dashboard-container__share-header">
+ <div class="share-dashboard-container__body">
+ <div class="share-dashboard-container__share-header">
<h2 style="color: rgba(0,0,0,0.9);font-size: 24px;">Share dashboard
summary</h2>
- </article>
- <article class="share-dashboard-container__share-configure">
+ </div>
+ <div class="share-dashboard-container__share-configure">
<h4 style="color: rgba(0,0,0,0.9);font-size: 18px;font-weight:
bold;">Configure summary</h4>
- <section>
+ <div>
<div style="margin-left: 15px;display: inline-block;">
<p><input type="checkbox" {{action 'toggleSelection'
"dashboard_summary" on="change"}}> Add dashboard-level comments</p>
{{#if showDashboardSummary}}
@@ -20,8 +62,8 @@
</p>
{{/if}}
</div>
- </section>
- <section>
+ </div>
+ <div>
<p>
{{#x-tree
chosenId=selectedNode
@@ -34,9 +76,9 @@
{{/if}}
{{/x-tree}}
</p>
- </section>
+ </div>
<!-- Customize email template -->
- <section>
+ <div>
<div style="margin-left: 15px;display: inline-block;">
<p><input type="checkbox" {{action 'toggleSelection'
"customize_email" on="change"}}> Customize email template</p>
<p style="margin-left: 15px;">
@@ -57,11 +99,11 @@
{{/if}}
</p>
</div>
- </section>
- </article>
- <article class="share-dashboard-container__share-body">
+ </div>
+ </div>
+ <div class="share-dashboard-container__share-body">
<h4 style="color: rgba(0,0,0,0.9);font-size: 18px;">Preview dashboard
summary</h4>
- <section style="color: rgba(0,0,0,0.6);font-size: 14px; display:
flex;justify-content: space-between;">
+ <div style="color: rgba(0,0,0,0.6);font-size: 14px; display:
flex;justify-content: space-between;">
<span>Click the copy button to copy to clipboard to paste in email or
any word processor.</span>
<span>
<a href="" style="margin-right: 15px;font-weight: normal;font-size:
16px;line-height: 20px;">
@@ -84,15 +126,15 @@
{{/if}}
</a>
</span>
- </section>
- </article>
- <article class="share-dashboard-container__preview-container">
- <section class="share-dashboard-container__preview-container-body">
+ </div>
+ </div>
+ <div class="share-dashboard-container__preview-container">
+ <div class="share-dashboard-container__preview-container-body">
<!-- EMAIL TEMPLATE -->
- <div style="background-color: #FFF;width: 700px;font-family: 'Source
Sans Pro', sans-serif;">
+ <div class="email_body">
<div>
- <h2 style="margin: 0;padding: 15px;background-color:
#F6F8FA;letter-spacing: 5px;font-size: 19px;">
- <img src="/assets/images/in-logo/in-logo-58_58.png" alt="share
logo" class="share-dashboard-container__logo" style="margin-right: 10px;width:
34px;height: 34px;">THIRDEYE
+ <h2 style="margin: 0 !important;padding: 15px
!important;background-color: #F6F8FA !important;letter-spacing: 5px
!important;font-size: 19px !important;">
+ <img
src="https://thirdeye.corp.linkedin.com/app/assets/images/in-logo/in-logo-58_58-aa418792c3ce1f4dfa28fc22b424e240.png";
alt="share logo" class="share-dashboard-container__logo" style="margin-right:
10px;width: 34px;height: 34px;">THIRDEYE
</h2>
</div>
<div style="color: #FFF;">
@@ -100,7 +142,7 @@
<h3 style="line-height: 20px;margin-bottom:
25x;">Application:<span
style="padding-left:10px;">{{appNameDisplay}}</span></h3>
<h4 style="line-height: 20px;">{{anomaliesFilteredCount}}
anomalies were detected from {{startDateDisplay}} to {{endDateDisplay}}</h4>
{{#if dashboard_summary_comment}}
- <div id="section_dashboard_summary">
+ <div id="div_dashboard_summary">
<h5>Summary</h5>
<p id="dashboardId_dashboard_summary">{{markdown-to-html
dashboard_summary_comment}}</p>
</div>
@@ -131,7 +173,7 @@
{{#if metricList.viewTreeNode.isChecked}}
<h4 style="margin-left: 20px;word-wrap: break-word;"><span
style="color: #737373;margin-right:10px;">Metric</span>{{metric}}</h4>
{{#if metricList.viewTreeNode.comment}}
- <div id="section_{metricList.metricId}">
+ <div id="div_{metricList.metricId}">
<h5 style="margin-left: 20px;font-weight: bold;">Metric
summary</h5>
<p style="margin-left: 20px;"
id="metricId_{{metricList.metricId}}">{{markdown-to-html
metricList.viewTreeNode.comment}}</p>
</div>
@@ -146,8 +188,8 @@
{{alert}}
</a>
</h4>
- <table width="660" style="margin: 20px;{{unless
(mod-check metricList.count) 'background-color: #F6F8FA;'}}">
- <tr style="border-top: 1px solid #C7D1D8;
border-bottom: 1px solid #C7D1D8; background-color: #F6F8FA; color: #383838;
font-size: 12px;">
+ <table width="660" style="margin: 20px
!important;{{unless (mod-check metricList.count) 'background-color: #F6F8FA
!important;'}}">
+ <tr style="border-top: 1px solid #C7D1D8 !important;
border-bottom: 1px solid #C7D1D8 !important; background-color: #F6F8FA
!important; color: #383838 !important; font-size: 12px !important;">
<th style="padding: 10px;">Start/Duration</th>
<th style="padding: 10px;">Dimensions</th>
<th style="padding: 10px;">Current/Predicted</th>
@@ -182,11 +224,9 @@
</p>
</td>
<td style="padding: 0 3px 3px 10px;">
- <ul style="list-style: none;padding:
0px;margin-bottom: 0;max-width: 180px;">
+ <ul class="dimensions">
{{#each-in record.anomaly.dimensions as
|dimName dimList|}}
- <li style="color: rgba(0,0,0,0.6);font-size:
12px;">
- {{dimName}}:<span style="margin-left:
5px;word-break: break-all;">{{dimList}}</span>
- </li>
+ <li style="padding: 0;color:
rgba(0,0,0,0.6);font-size: 12px;">{{dimName}}:<span style="margin-left:
5px;word-break: break-all;">{{dimList}}</span></li>
{{else}}
-
{{/each-in}}
@@ -245,7 +285,7 @@
</div>
</div>
</div>
- </section>
- </article>
- </section>
+ </div>
+ </div>
+ </div>
</div>
diff --git a/thirdeye/thirdeye-frontend/app/styles/app.scss
b/thirdeye/thirdeye-frontend/app/styles/app.scss
index ec0b59c9d8..1bbf74fb34 100644
--- a/thirdeye/thirdeye-frontend/app/styles/app.scss
+++ b/thirdeye/thirdeye-frontend/app/styles/app.scss
@@ -79,6 +79,5 @@ body {
@import 'pods/rootcause';
@import 'pods/preview';
@import 'pods/home/index/dashboard';
-@import 'pods/home/share-dashboard/share-dashboard';
@import 'pods/custom/anomalies-table';
@import 'pods/custom/dimensions-table';
diff --git
a/thirdeye/thirdeye-frontend/app/styles/pods/home/share-dashboard/share-dashboard.scss
b/thirdeye/thirdeye-frontend/app/styles/pods/home/share-dashboard/share-dashboard.scss
deleted file mode 100644
index b4f5c1328a..0000000000
---
a/thirdeye/thirdeye-frontend/app/styles/pods/home/share-dashboard/share-dashboard.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.share-dashboard-container {
- margin-top: $te-default-element-spacing;
-
- &__body {
- background-color: #FFF;
- margin-top: $te-default-element-spacing;
- margin-bottom: $te-default-element-spacing;
- padding: 0 15px 15px 15px;
- border: 1px solid app-shade(black, 0.1);
- }
-
- &__preview-container {
- background-color: $te-share;
- margin-top: 10px;
-
- &-body {
- display: flex;
- justify-content: center;
- height: 100%;
- }
- }
-}
----------------------------------------------------------------
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:
[email protected]
With regards,
Apache Git Services
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
![https://thirdeye.corp.linkedin.com/app/assets/images/in-logo/in-logo-58_58-aa418792c3ce1f4dfa28fc22b424e240.png"](https://thirdeye.corp.linkedin.com/app/assets/images/in-logo/in-logo-58_58-aa418792c3ce1f4dfa28fc22b424e240.png"){kind=link}