You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@pinot.apache.org by ne...@apache.org on 2018/11/13 00:12:19 UTC
[incubator-pinot] branch master updated: [TE] frontend -
aaronucsd/fixed some styling issues for share template (THIRDEYE-2432)
(#3457)
This is an automated email from the ASF dual-hosted git repository.
nehapawar 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 b4496b6 [TE] frontend - aaronucsd/fixed some styling issues for share template (THIRDEYE-2432) (#3457)
b4496b6 is described below
commit b4496b6867391e820fc18656e45cbdf2b3adceed
Author: Long Huynh <lo...@linkedin.com>
AuthorDate: Mon Nov 12 16:12:14 2018 -0800
[TE] frontend - aaronucsd/fixed some styling issues for share template (THIRDEYE-2432) (#3457)
---
.../components/share-custom-template/template.hbs | 6 +-
.../app/pods/home/share-dashboard/controller.js | 2 +-
.../app/pods/home/share-dashboard/template.hbs | 102 ++++++++++++++-------
thirdeye/thirdeye-frontend/app/styles/app.scss | 1 -
.../pods/home/share-dashboard/share-dashboard.scss | 22 -----
5 files changed, 75 insertions(+), 58 deletions(-)
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 34b659b..084981b 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 cdb39c5..b140b26 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 2188719..3879228 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 ec0b59c..1bbf74f 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 b4f5c13..0000000
--- 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%;
- }
- }
-}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@pinot.apache.org
For additional commands, e-mail: commits-help@pinot.apache.org