You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@pinot.apache.org by GitBox <gi...@apache.org> on 2018/11/13 00:12:16 UTC
[GitHub] npawar closed pull request #3457: [TE] frontend - aaronucsd/fixed some styling issues for share templat…
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:
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