From 671c7c10c535ed032232e0b7b501c94647a8639e Mon Sep 17 00:00:00 2001
From: Jason Prodonovich <prodonjs@google.com>
Date: Mon, 3 Jun 2019 22:56:58 -0400
Subject: [PATCH] Adds recent Pipelines cards for Definitions and Runs. (#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
---
 .../public/assets/icons/pipeline.svg          |  28 +++
 .../public/components/activities-list.js      |   2 +-
 .../public/components/card-styles.js          |  61 +++++-
 .../public/components/dashboard-view.css      |  46 +----
 .../public/components/dashboard-view.js       |   4 +-
 .../public/components/dashboard-view.pug      |   5 +-
 .../public/components/notebooks-card.js       |  48 ++---
 .../public/components/pipelines-card.js       | 149 ++++++++++++++
 .../public/components/pipelines-card_test.js  | 188 ++++++++++++++++++
 .../public/components/resource-chart.js       |  16 +-
 components/centraldashboard/webpack.config.js |   4 +
 11 files changed, 469 insertions(+), 82 deletions(-)
 create mode 100644 components/centraldashboard/public/assets/icons/pipeline.svg
 create mode 100644 components/centraldashboard/public/components/pipelines-card.js
 create mode 100644 components/centraldashboard/public/components/pipelines-card_test.js

diff --git a/components/centraldashboard/public/assets/icons/pipeline.svg b/components/centraldashboard/public/assets/icons/pipeline.svg
new file mode 100644
index 00000000000..f054a2aa380
--- /dev/null
+++ b/components/centraldashboard/public/assets/icons/pipeline.svg
@@ -0,0 +1,28 @@
+<svg width='24px' height='24px' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlnsXlink='http://www.w3.org/1999/xlink'>
+    <g id='Symbols' stroke='none' strokeWidth='1' fill='none' fillRule='evenodd'>
+        <g transform='translate(-2.000000, -4.000000)'>
+        <polygon id='Shape' points='0 0 24 0 24 24 0 24' />
+        <path d='M12.7244079,9.74960425 L17.4807112,9.74960425 C17.7675226,9.74960425
+                    18,9.51894323 18,9.23437272 L18,4.51523153 C18,4.23066102 17.7675226,4
+                    17.4807112,4 L12.7244079,4 C12.4375965,4 12.2051191,4.23066102
+                    12.2051191,4.51523153 L12.2051191,6.06125154 L9.98218019,6.06125154
+                    C9.52936032,6.06125154 9.16225043,6.42549311 9.16225043,6.87477501
+                    L9.16225043,11.2135669 L7.05995053,11.2135669 C6.71661861,10.189612
+                    5.74374462,9.45093267 4.59644424,9.45093267 C3.16249641,9.45093267
+                    2,10.6043462 2,12.0270903 C2,13.4498886 3.16249641,14.603248
+                    4.59644424,14.603248 C5.74379928,14.603248 6.71661861,13.8645687
+                    7.06000519,12.8406138 L9.16225043,12.8406138 L9.16225043,17.1794057
+                    C9.16225043,17.6286875 9.52936032,17.9929291 9.98218019,17.9929291
+                    L12.2051191,17.9929291 L12.2051191,19.4847685 C12.2051191,19.769339
+                    12.4375965,20 12.7244079,20 L17.4807112,20 C17.7675226,20 18,19.769339
+                    18,19.4847685 L18,14.7656273 C18,14.4810568 17.7675226,14.2503957
+                    17.4807112,14.2503957 L12.7244079,14.2503957 C12.4375965,14.2503957
+                    12.2051191,14.4810568 12.2051191,14.7656273 L12.2051191,16.3658822
+                    L10.80211,16.3658822 L10.80211,7.68829848 L12.2051191,7.68829848
+                    L12.2051191,9.23437272 C12.2051191,9.51894323 12.4375965,9.74960425
+                    12.7244079,9.74960425 Z'
+                id='Path'
+                fill='#000000'/>
+        </g>
+    </g>
+</svg>
diff --git a/components/centraldashboard/public/components/activities-list.js b/components/centraldashboard/public/components/activities-list.js
index 2089e386ea9..b15ea53f99d 100644
--- 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
index 9dfe2224100..8ae33219ee8 100644
--- 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
index 4bb04618d81..16ff79ba3a3 100644
--- 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
index 17c1b35c977..fdd81eb0faf 100644
--- 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
index a2608c72558..6fe99d92610 100644
--- 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
index 455dbd22f9a..19dc667935e 100644
--- 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>
         `;
     }
 
diff --git a/components/centraldashboard/public/components/pipelines-card.js b/components/centraldashboard/public/components/pipelines-card.js
new file mode 100644
index 00000000000..bdfe94b7a5b
--- /dev/null
+++ b/components/centraldashboard/public/components/pipelines-card.js
@@ -0,0 +1,149 @@
+import '@polymer/iron-ajax/iron-ajax.js';
+import '@polymer/iron-icon/iron-icon.js';
+import '@polymer/iron-icons/iron-icons.js';
+import '@polymer/paper-card/paper-card.js';
+import '@polymer/paper-item/paper-icon-item.js';
+import '@polymer/paper-ripple/paper-ripple.js';
+import '@polymer/paper-icon-button/paper-icon-button.js';
+import '@polymer/paper-progress/paper-progress.js';
+import './iframe-link.js';
+
+import {html, PolymerElement} from '@polymer/polymer';
+
+import './card-styles.js';
+
+const MAX_PIPELINES = 5;
+const PIPELINES = 'pipelines';
+const RUNS = 'runs';
+const VALID_ARTIFACT_TYPES = new Set([PIPELINES, RUNS]);
+
+/**
+ * Component to retrieve and display Pipelines or Pipeline Runs
+ */
+export class PipelinesCard extends PolymerElement {
+    static get template() {
+        return html`
+        <style include="card-styles">
+            :host {
+                @apply --layout-vertical;
+            }
+            iron-icon.success {
+                color: rgb(52, 168, 83);
+            }
+            iron-icon.error {
+                color: rgb(213, 0, 0);
+            }
+        </style>
+        <iron-ajax auto url="[[listPipelinesUrl]]" handle-as="json"
+            loading="{{loading}}" on-response="_onResponse" on-error="_onError">
+        </iron-ajax>
+        <paper-progress indeterminate class="slow"
+            hidden$="[[!loading]]"></paper-progress>
+        <paper-card heading="[[heading]]">
+            <header id="message" hidden$="[[!message]]">[[message]]</header>
+            <template is="dom-repeat" items="[[pipelines]]">
+                <iframe-link class="link" href$="[[item.href]]">
+                    <paper-icon-item>
+                        <paper-ripple></paper-ripple>
+                        <iron-icon icon="[[item.icon]]" slot="item-icon"
+                            class$="[[item.iconClass]]"
+                            title="[[item.iconTitle]]">
+                        </iron-icon>
+                        <paper-item-body two-line>
+                            <div class="header">[[item.name]]</div>
+                            <aside secondary>Created [[item.created]]</aside>
+                        </paper-item-body>
+                    </paper-icon-item>
+                </iframe-link>
+            </template>
+        </paper-card>
+        `;
+    }
+
+    static get properties() {
+        return {
+            loading: {
+                type: Boolean,
+                value: false,
+            },
+            heading: String,
+            artifactType: String,
+            message: {
+                type: String,
+                value: '',
+            },
+            listPipelinesUrl: {
+                type: String,
+                computed: '_getListPipelinesUrl(artifactType)',
+            },
+            pipelines: {
+                type: Array,
+                value: () => [],
+            },
+        };
+    }
+
+    /**
+     * Returns the URL to list the available Pipeline artifacts
+     * @param {string} artifactType
+     * @return {string}
+     */
+    _getListPipelinesUrl(artifactType) {
+        if (!VALID_ARTIFACT_TYPES.has(artifactType)) return null;
+        return `/pipeline/apis/v1beta1/${artifactType}?`
+            + 'page_size=5&sort_by=created_at%20desc';
+    }
+
+    /**
+     * Handles the response from the Pipelines API to set the items that
+     * will displayed in the card.
+     * @param {Event} responseEvent
+     */
+    _onResponse(responseEvent) {
+        const response = responseEvent.detail.response;
+        const pipelines = response[this.artifactType].map((p) => {
+            const date = new Date(p.created_at);
+            const iconTitle = p.status || '';
+            let icon = 'kubeflow:pipeline';
+            let iconClass = '';
+            if (this.artifactType === RUNS) {
+                switch (p.status) {
+                case 'Succeeded':
+                    icon = 'icons:check-circle';
+                    iconClass = 'success';
+                    break;
+                case 'Error':
+                case 'Failed':
+                    icon = 'icons:error';
+                    iconClass = 'error';
+                    break;
+                default:
+                    icon = 'icons:schedule';
+                }
+            }
+            return {
+                created: date.toLocaleString(),
+                href:
+                    `/pipeline/#/${this.artifactType}/details/${p.id}`,
+                name: p.name,
+                icon,
+                iconClass,
+                iconTitle,
+            };
+        }).slice(0, MAX_PIPELINES);
+        this.splice('pipelines', 0, this.pipelines.length, ...pipelines);
+        this.message = this.pipelines.length ? '' : 'None Found';
+        this.loading = false;
+    }
+
+    /**
+     * Handles an Pipelines error response.
+     */
+    _onError() {
+        this.splice('pipelines', 0);
+        this.message = this.artifactType === PIPELINES ?
+            'Error retrieving Pipelines' : 'Error retrieving Pipeline Runs';
+    }
+}
+
+customElements.define('pipelines-card', PipelinesCard);
diff --git a/components/centraldashboard/public/components/pipelines-card_test.js b/components/centraldashboard/public/components/pipelines-card_test.js
new file mode 100644
index 00000000000..d7ef4395733
--- /dev/null
+++ b/components/centraldashboard/public/components/pipelines-card_test.js
@@ -0,0 +1,188 @@
+import '@polymer/test-fixture/test-fixture';
+import 'jasmine-ajax';
+import {flush} from '@polymer/polymer/lib/utils/flush.js';
+
+import './pipelines-card';
+import {mockRequest} from '../ajax_test_helper';
+
+const FIXTURE_ID = 'pipelines-card-fixture';
+const PIPELINES_CARD_ID = 'test-pipelines-card';
+const TEMPLATE = `
+<test-fixture id="${FIXTURE_ID}">
+  <template>
+    <pipelines-card id="${PIPELINES_CARD_ID}"></pipelines-card>
+  </template>
+</test-fixture>
+`;
+
+const BASE_DATE = new Date('2019-05-01T00:00:00.00Z');
+
+describe('Pipelines Card', () => {
+    let pipelinesCard;
+
+    beforeAll(() => {
+        const div = document.createElement('div');
+        div.innerHTML = TEMPLATE;
+        document.body.appendChild(div);
+    });
+
+    beforeEach(() => {
+        jasmine.Ajax.install();
+        document.getElementById(FIXTURE_ID).create();
+        pipelinesCard = document.getElementById(PIPELINES_CARD_ID);
+    });
+
+    afterEach(() => {
+        document.getElementById(FIXTURE_ID).restore();
+        jasmine.Ajax.uninstall();
+    });
+
+    it('Shows 5 most recently created Pipelines', async () => {
+        const pipelines = [];
+        for (let i = 10; i > 0; i--) {
+            pipelines.push({
+                id: i,
+                name: `pipeline-${i}`,
+                created: new Date(BASE_DATE.valueOf() + (i * 86400000)),
+            });
+        }
+        const requestPromise = mockRequest(pipelinesCard, {
+            status: 200,
+            responseText: JSON.stringify({pipelines}),
+        }, false, '/pipeline/apis/v1beta1/pipelines?' +
+                'page_size=5&sort_by=created_at%20desc');
+
+        pipelinesCard.artifactType = 'pipelines';
+        await requestPromise;
+        flush();
+
+        const header = pipelinesCard.shadowRoot
+            .getElementById('message');
+        expect(header.hasAttribute('hidden')).toBe(true);
+        const pipelineLinks = Array.from(pipelinesCard.shadowRoot
+            .querySelectorAll('iframe-link').values());
+        expect(pipelineLinks.length).toBe(5);
+        const hrefPrefix = '/pipeline/#/pipelines/details';
+        expect(pipelineLinks.map((l) => l.href)).toEqual([
+            `${hrefPrefix}/10`,
+            `${hrefPrefix}/9`,
+            `${hrefPrefix}/8`,
+            `${hrefPrefix}/7`,
+            `${hrefPrefix}/6`,
+        ]);
+
+        const pipelineNames = Array.from(pipelinesCard.shadowRoot
+            .querySelectorAll('paper-item-body .header').values());
+        expect(pipelineNames.map((l) => l.innerText)).toEqual([
+            'pipeline-10',
+            'pipeline-9',
+            'pipeline-8',
+            'pipeline-7',
+            'pipeline-6',
+        ]);
+    });
+
+    it('Shows 5 most recently created Pipeline Runs', async () => {
+        const runs = [];
+        const statuses = ['Succeeded', 'Failed', 'Running'];
+        for (let i = 10; i > 0; i--) {
+            runs.push({
+                id: i,
+                status: statuses[i % statuses.length],
+                name: `pipeline-run-${i}`,
+                created: new Date(BASE_DATE.valueOf() + (i * 86400000)),
+            });
+        }
+        const requestPromise = mockRequest(pipelinesCard, {
+            status: 200,
+            responseText: JSON.stringify({runs}),
+        }, false, '/pipeline/apis/v1beta1/runs?' +
+                'page_size=5&sort_by=created_at%20desc');
+
+        pipelinesCard.artifactType = 'runs';
+        await requestPromise;
+        flush();
+
+        const header = pipelinesCard.shadowRoot
+            .getElementById('message');
+        expect(header.hasAttribute('hidden')).toBe(true);
+        const pipelineLinks = Array.from(pipelinesCard.shadowRoot
+            .querySelectorAll('iframe-link').values());
+        expect(pipelineLinks.length).toBe(5);
+        const hrefPrefix = '/pipeline/#/runs/details';
+        expect(pipelineLinks.map((l) => l.href)).toEqual([
+            `${hrefPrefix}/10`,
+            `${hrefPrefix}/9`,
+            `${hrefPrefix}/8`,
+            `${hrefPrefix}/7`,
+            `${hrefPrefix}/6`,
+        ]);
+
+        const pipelineNames = Array.from(pipelinesCard.shadowRoot
+            .querySelectorAll('paper-item-body .header').values());
+        expect(pipelineNames.map((l) => l.innerText)).toEqual([
+            'pipeline-run-10',
+            'pipeline-run-9',
+            'pipeline-run-8',
+            'pipeline-run-7',
+            'pipeline-run-6',
+        ]);
+
+        const icons = Array.from(pipelinesCard.shadowRoot
+            .querySelectorAll('paper-icon-item iron-icon').values());
+        expect(icons.map((l) => l.icon)).toEqual([
+            'icons:error',
+            'icons:check-circle',
+            'icons:schedule',
+            'icons:error',
+            'icons:check-circle',
+        ]);
+    });
+
+    it('Shows error message when Pipelines request fails', async () => {
+        const requestPromise = mockRequest(pipelinesCard, {
+            status: 500,
+            responseText: 'Some internal error',
+        }, true, '/pipeline/apis/v1beta1/pipelines?' +
+                'page_size=5&sort_by=created_at%20desc');
+        pipelinesCard.artifactType = 'pipelines';
+        await requestPromise;
+        flush();
+
+        const header = pipelinesCard.shadowRoot.getElementById('message');
+        expect(header.hasAttribute('hidden')).toBe(false);
+        expect(header.innerText).toBe('Error retrieving Pipelines');
+    });
+
+    it('Shows error message when Pipeline Runs request fails', async () => {
+        const requestPromise = mockRequest(pipelinesCard, {
+            status: 500,
+            responseText: 'Some internal error',
+        }, true, '/pipeline/apis/v1beta1/runs?' +
+                'page_size=5&sort_by=created_at%20desc');
+        pipelinesCard.artifactType = 'runs';
+        await requestPromise;
+        flush();
+
+        const header = pipelinesCard.shadowRoot.getElementById('message');
+        expect(header.hasAttribute('hidden')).toBe(false);
+        expect(header.innerText).toBe('Error retrieving Pipeline Runs');
+    });
+
+    it('Shows message when no Pipelines are found', async () => {
+        const requestPromise = mockRequest(pipelinesCard, {
+            status: 200,
+            responseText: JSON.stringify({pipelines: []}),
+        }, false, '/pipeline/apis/v1beta1/pipelines?' +
+                'page_size=5&sort_by=created_at%20desc');
+
+        pipelinesCard.artifactType = 'pipelines';
+        await requestPromise;
+        flush();
+
+        const header = pipelinesCard.shadowRoot
+            .getElementById('message');
+        expect(header.hasAttribute('hidden')).toBe(false);
+        expect(header.innerText).toBe('None Found');
+    });
+});
diff --git a/components/centraldashboard/public/components/resource-chart.js b/components/centraldashboard/public/components/resource-chart.js
index 7677ee0b412..2baab4b2958 100644
--- a/components/centraldashboard/public/components/resource-chart.js
+++ b/components/centraldashboard/public/components/resource-chart.js
@@ -10,6 +10,12 @@ import 'chartjs-plugin-crosshair';
 
 import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
 import {Chart} from 'chart.js';
+// Explicitly loads the Chart.js CSS so it can be applied to the ShadowDOM
+// Necessary since third-party CSS would normally be vendored and applied
+// globally.
+import chartCss from '!css-loader!exports-loader!chart.js/dist/Chart.css';
+
+import './card-styles.js';
 
 Chart.defaults.global.defaultFontFamily = '"Google Sans", sans-serif';
 
@@ -34,8 +40,8 @@ const MAX_TOOLTIP_LENGTH = 10;
 
 class ResourceChart extends PolymerElement {
     static get template() {
-        return html`
-        <style include="iron-flex iron-flex-alignment">
+        return html([`
+        <style include="card-styles">
             :host {
                 @apply --dashboard-card;
             }
@@ -81,6 +87,7 @@ class ResourceChart extends PolymerElement {
                     text-transform: none;
                 };
             }
+            ${chartCss.toString()}
         </style>
         <iron-ajax id="ajax" auto url="[[metricUrl]]" handle-as="json"
             on-response="_onResponse"></iron-ajax>
@@ -105,7 +112,7 @@ class ResourceChart extends PolymerElement {
                     title="Refresh chart" alt="Refresh chart"
                     on-click="_refresh"></paper-button>
             </header>
-            <section id="chart-container">
+            <section id="chart-container" hidden>
                 <canvas id="chart" height="400" width="400"></canvas>
             </section>
             <footer>
@@ -118,7 +125,7 @@ class ResourceChart extends PolymerElement {
                 </a>
             </footer>
         </article>
-        `;
+        `]);
     }
 
     static get properties() {
@@ -240,6 +247,7 @@ class ResourceChart extends PolymerElement {
                 callback: (value) => `${(value * 100).toFixed(0)}%`,
             };
         }
+        this.$['chart-container'].removeAttribute('hidden');
         this._chart.resize();
         this._chart.update();
     }
diff --git a/components/centraldashboard/webpack.config.js b/components/centraldashboard/webpack.config.js
index 114a15b6408..b451fc80ff3 100644
--- a/components/centraldashboard/webpack.config.js
+++ b/components/centraldashboard/webpack.config.js
@@ -206,6 +206,10 @@ module.exports = {
                         '/$1/services/$2/proxy/notebook/$1/$2/$3',
                 },
             },
+            '/pipeline': {
+                target: 'http://localhost:8083/api/v1/namespaces/kubeflow/services/ml-pipeline:8888/proxy',
+                pathRewrite: {'^/pipeline': ''},
+            },
         },
         historyApiFallback: {
             disableDotRule: true,