Adds recent Pipelines cards for Definitions and Runs. (kubeflow#3379)

* Adds Pipelines Cards for definitions and runs. * Address review comments * Fix progress colors and move to common card-styles * Consolidates styles and embeds paper-card inside notebooks and pipelines cards * Adds Chart.JS css to ShadowDOM to enable responsive behavior
StatCan · Jun 4, 2019 · 671c7c1 · 671c7c1
1 parent 5630e3a
commit 671c7c1
Show file tree

Hide file tree

Showing 11 changed files with 469 additions and 82 deletions.
diff --git a/components/centraldashboard/public/assets/icons/pipeline.svg b/components/centraldashboard/public/assets/icons/pipeline.svg
diff --git a/components/centraldashboard/public/components/activities-list.js b/components/centraldashboard/public/components/activities-list.js
@@ -49,7 +49,7 @@ export class ActivitiesList extends PolymerElement {
                     color: rgb(28, 175, 199);
                 }
                 .event-icon.error {
-                    color: rgb(218, 66, 54);
+                    color: rgb(213, 0, 0);
                 }
             </style>
             <template is="dom-repeat" items="[[eventsForDates]]">

diff --git a/components/centraldashboard/public/components/card-styles.js b/components/centraldashboard/public/components/card-styles.js
@@ -1,8 +1,55 @@
+
+import '@polymer/paper-styles/element-styles/paper-material-styles.js';
+
 const styleElement = document.createElement('dom-module');
 styleElement.innerHTML = `
 <template>
-    <style>
+    <style include="paper-material-styles">
         /* Styles shared amongst dashboard card components */
+        :host {
+            --dashboard-card: {
+                background-color: var(--paper-card-background-color,
+                    var(--primary-background-color));
+                border-radius: 5px;
+                display: inline-block;
+                font-size: 14px;
+                position: relative;
+                width: 100%;
+                @apply --paper-material-elevation-1;
+            };
+
+            --dashboard-card-header: {
+                font-family: "Google Sans";
+                height: 62px;
+                border-bottom: 1px solid var(--divider-color);
+                @apply --layout-horizontal;
+                @apply --layout-center;
+            };
+        }
+
+        paper-card {
+            border-radius: 5px;
+            width: 100%;
+            padding-bottom: 16px;
+            font-size: 14px;
+            --paper-card-header-color: #202124;
+            --paper-card-header: {
+                @apply --dashboard-card-header;
+            }
+            --paper-card-header-text: {
+                font-size: 16px;
+                font-weight: 500;
+                padding: 0 1em;
+                flex: 1;
+            };
+            --paper-card-content: {
+                font-size: 14px;
+            }
+        }
+        paper-card {
+            --paper-item-body-two-line-min-height: 2em;
+        }
+
         paper-icon-item {
             @apply --layout-flex;
             @apply --layout-justified;
@@ -56,6 +103,18 @@ styleElement.innerHTML = `
             text-decoration: none;
             color: initial;
         }
+
+        paper-progress {
+            width: 100%;
+            --paper-progress-active-color: #669df6;
+            --paper-progress-container-color: #f1f3f4;
+        }
+        #message {
+            color: var(--google-grey-500);
+            font-style: italic;
+            font-family: Google Sans;
+            padding: 0.5em 1em;
+        }
     </style>
 </template>
 `;

diff --git a/components/centraldashboard/public/components/dashboard-view.css b/components/centraldashboard/public/components/dashboard-view.css
@@ -6,26 +6,6 @@
     flex: 1;
     --accent-color: #007dfc;
     --primary-background-color: white;
-
-    --dashboard-card: {
-        background-color: var(--paper-card-background-color,
-            var(--primary-background-color));
-        border-radius: 5px;
-        display: inline-block;
-        font-size: 14px;
-        position: relative;
-        width: 100%;
-        @apply --paper-material-elevation-1;
-    }
-
-    --dashboard-card-header: {
-        font-family: "Google Sans";
-        height: 62px;
-        border-bottom: 1px solid var(--divider-color);
-        @apply --layout-horizontal;
-        @apply --layout-center;
-    }
-
     --paper-item-body-secondary: {
         font-size: 12px;
         letter-spacing: 0.3px;
@@ -56,29 +36,8 @@
     margin-bottom: .75em; /* 12px */
 }
 
-paper-card {
-    border-radius: 5px;
-    width: 100%;
-    padding-bottom: 16px;
-    font-size: 14px;
-    --paper-card-header-color: #202124;
-    --paper-card-header: {
-        @apply --dashboard-card-header;
-    }
-    --paper-card-header-text: {
-        font-size: 16px;
-        font-weight: 500;
-        padding: 0 1em;
-        flex: 1;
-    };
-    --paper-card-content: {
-        font-size: 14px;
-    }
-}
-paper-card {
-    --paper-item-body-two-line-min-height: 2em;
-}
-paper-card#Platform-Links {
+
+#Platform-Links {
     --paper-card-header-color: #2c6acb;
     --paper-card-header-image-text: {
         flex: 1;
@@ -90,7 +49,6 @@ paper-card#Platform-Links {
         padding: .5em .75em .5em 1.25em;
     };
 }
-
 #Platform-Links header {
     font-size: 1.25em;
     font-weight: 400;

diff --git a/components/centraldashboard/public/components/dashboard-view.js b/components/centraldashboard/public/components/dashboard-view.js
@@ -4,7 +4,6 @@ import '@polymer/paper-card/paper-card.js';
 import '@polymer/paper-ripple/paper-ripple.js';
 import '@polymer/paper-item/paper-icon-item.js';
 import '@polymer/paper-icon-button/paper-icon-button.js';
-import '@polymer/paper-styles/element-styles/paper-material-styles.js';
 
 import {html, PolymerElement} from '@polymer/polymer';
 
@@ -13,6 +12,7 @@ import template from './dashboard-view.pug';
 import './card-styles.js';
 import './iframe-link.js';
 import './notebooks-card.js';
+import './pipelines-card.js';
 import './resource-chart.js';
 import {getGCPData} from './resources/cloud-platform-data.js';
 
@@ -21,7 +21,7 @@ const DOCS = 'https://www.kubeflow.org/docs/started';
 export class DashboardView extends PolymerElement {
     static get template() {
         return html([`
-            <style include="card-styles paper-material-styles">
+            <style include="card-styles">
                 ${css.toString()}
             </style>
             ${template()}

diff --git a/components/centraldashboard/public/components/dashboard-view.pug b/components/centraldashboard/public/components/dashboard-view.pug
@@ -19,8 +19,9 @@ div#grid
                 external-link='[[platformDetails.resourceChartsLink]]'
                 external-link-text='[[platformDetails.resourceChartsLinkText]]')
     .column
-        paper-card(heading='Recent Notebooks')
-                notebooks-card(namespace='[[namespace]]')
+        notebooks-card(namespace='[[namespace]]')
+        pipelines-card(heading='Recent Pipelines', artifact-type='pipelines')
+        pipelines-card(heading='Recent Pipeline Runs', artifact-type='runs')
     .column
         template(is='dom-if', if='[[platformDetails.links]]')
             paper-card#Platform-Links(class$='[[platformDetails.name]]',

diff --git a/components/centraldashboard/public/components/notebooks-card.js b/components/centraldashboard/public/components/notebooks-card.js
@@ -28,39 +28,31 @@ export class NotebooksCard extends PolymerElement {
             :host {
                 @apply --layout-vertical;
             }
-            paper-progress {
-                width: 100%;
-                --paper-progress-active-color: var(--accent-color)
-            }
-            #message {
-                color: var(--google-grey-500);
-                font-style: italic;
-                font-family: Google Sans;
-                padding: 0.5em 1em;
-            }
         </style>
         <iron-ajax auto url="[[listNotebookServersUrl]]" handle-as="json"
             loading="{{loading}}" on-response="_onNotebookServersResponse"
             on-error="_onError">
         </iron-ajax>
-        <paper-progress indeterminate class="slow"
-            hidden$="[[!loading]]"></paper-progress>
-        <header id="message" hidden$="[[!message]]">[[message]]</header>
-        <template is="dom-repeat" items="[[notebooks]]">
-            <iframe-link class="link" href$="[[item.href]]">
-                <paper-icon-item>
-                    <paper-ripple></paper-ripple>
-                    <iron-icon icon="chrome-reader-mode" slot="item-icon">
-                    </iron-icon>
-                    <paper-item-body two-line>
-                        <div class="header">[[item.name]]</div>
-                        <aside secondary>
-                            Accessed [[item.lastModified]]
-                        </aside>
-                    </paper-item-body>
-                </paper-icon-item>
-            </iframe-link>
-        </template>
+        <paper-card heading="Recent Notebooks">
+            <paper-progress indeterminate class="slow"
+                hidden$="[[!loading]]"></paper-progress>
+            <header id="message" hidden$="[[!message]]">[[message]]</header>
+            <template is="dom-repeat" items="[[notebooks]]">
+                <iframe-link class="link" href$="[[item.href]]">
+                    <paper-icon-item>
+                        <paper-ripple></paper-ripple>
+                        <iron-icon icon="chrome-reader-mode" slot="item-icon">
+                        </iron-icon>
+                        <paper-item-body two-line>
+                            <div class="header">[[item.name]]</div>
+                            <aside secondary>
+                                Accessed [[item.lastModified]]
+                            </aside>
+                        </paper-item-body>
+                    </paper-icon-item>
+                </iframe-link>
+            </template>
+        </paper-card>
         `;
     }