Skip to content

Commit

Permalink
Merge changes from PR kubeflow#2651
Browse files Browse the repository at this point in the history
  • Loading branch information
@prodonjs
prodonjs committed Mar 8, 2019
1 parent 01c4dab commit 4ea2c5b
Show file tree
Hide file tree
Showing 5 changed files with 99 additions and 88 deletions.
30 changes: 27 additions & 3 deletions components/centraldashboard/public/components/dashboard-view.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,12 @@
}

article {
background: #f1f3f4;
padding: 1em;
grid-gap: 1em;
display: grid;
min-height: 0;
min-width: 0;
--primary-background-color: white;
}

Expand All @@ -20,15 +24,18 @@ article:after {

article>paper-card {
border-radius: 5px;
margin: 1em;
grid-column: 1 / span 2;
max-width: 100%;
overflow: hidden;
min-width: 0;
--paper-card-header: {
font-family: "Google Sans"
}
}

article>paper-card.thin {
grid-column: 3
grid-column: 3;
min-width: 19em;
}

#Getting-Started paper-icon-item:not(:last-of-type) {
Expand All @@ -39,6 +46,13 @@ article>paper-card.thin {
color: var(--accent-color)
}

#Getting-Started [secondary] {
word-break: break-word;
width: 100%;
white-space: normal;
font-size: .8em;
}

#Quick-Links {
grid-column: 3
}
Expand All @@ -62,4 +76,14 @@ article>paper-card.thin {
color: var(--accent-color);
background: rgba(0, 125, 252, 0.25);
border-radius: 50%
}
}

a {
text-decoration: none;
color: initial;
}

.header:hover {
color: var(--paper-blue-700);
text-decoration: underline;
}
46 changes: 37 additions & 9 deletions components/centraldashboard/public/components/dashboard-view.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {PolymerElement, html} from '@polymer/polymer';
import {html, PolymerElement} from '@polymer/polymer';

import css from './dashboard-view.css';

import template from './dashboard-view.pug';

export class DashboardView extends PolymerElement {
Expand All @@ -9,26 +10,53 @@ export class DashboardView extends PolymerElement {
}

/**
* Object describing property-related metadata used by Polymer features
*/
* Object describing property-related metadata used by Polymer features
*/
static get properties() {
const kubeflowDocs = 'https://www.kubeflow.org/docs/started';

return {
gettingStartedItems: {
type: Array,
value: [
{text: 'Build a model in a notebook', icon: 'donut-large'},
{text: 'Launch a pipeline', icon: 'donut-large'},
{text: 'Deploy a solution', icon: 'donut-large'},
{text: 'Compare run output', icon: 'donut-large'},
{text: 'Share solution on AI Hub', icon: 'donut-large'},
{
text: 'Getting started with Kubeflow',
desc: 'Quickly get running with your ML workflow on ' +
'an existing Kubernetes installation',
link: `${kubeflowDocs}/getting-started/`,
},
{
text: 'Microk8s for Kubeflow',
desc: 'Quickly get Kubeflow running locally on ' +
'native hypervisors',
link: `${kubeflowDocs}/getting-started-multipass/`,
},
{
text: 'Minikube for Kubeflow',
desc: 'Quickly get Kubeflow running locally',
link: `${kubeflowDocs}/getting-started-minikube/`,
},
{
text: 'Kubernetes Engine for Kubeflow',
desc: 'Get Kubeflow running on Google Cloud ' +
'Platform. This guide is a quickstart to deploying Kubeflow ' +
'on Google Kubernetes Engine',
link: `${kubeflowDocs}/getting-started-gke/`,
},
{
text: 'Requirements for Kubeflow',
desc: 'Get more detailed information about using ' +
'Kubeflow and its components',
link: `${kubeflowDocs}/requirements/`,
},
],
},
quickLinks: {
type: Array,
value: [
{
text: 'Open docs',
link: 'https://www.kubeflow.org/docs/started/getting-started/',
link: `${kubeflowDocs}/getting-started/`,
},
{
text: 'Open Github',
Expand Down
18 changes: 10 additions & 8 deletions components/centraldashboard/public/components/dashboard-view.pug
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,19 @@
article
paper-card#Getting-Started(heading='Getting Started', hidden$='[[!_devMode]]')
paper-card#Getting-Started(heading='Getting Started')
template(is='dom-repeat', items='[[gettingStartedItems]]')
paper-icon-item
iron-icon(icon='[[item.icon]]', slot='item-icon')
paper-item-body(two-line)
div [[item.text]]
aside(secondary) Lorem ipsum...
paper-card#Quick-Links(heading='Quick Links')
a.heading(href$='[[item.link]]', tabindex='-1',
target='_blank')
paper-icon-item
iron-icon(icon='launch', slot='item-icon')
paper-item-body(two-line)
.header [[item.text]]
aside(secondary) [[item.desc]]
paper-card.thin#Quick-Links(heading='Quick Links')
template(is='dom-repeat', items='[[quickLinks]]')
article.link
paper-item-body [[item.text]]
a(href$='[[item.link]]', tabindex='-1', target='_blank')
paper-icon-button.button(icon='arrow-forward', alt='[[item.text]]')
article.link.more-coming
paper-item-body More coming soon
paper-icon-button.button(icon='arrow-forward', disabled)
paper-icon-button.button(icon='arrow-forward', disabled)
79 changes: 19 additions & 60 deletions components/centraldashboard/public/components/main-page.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
/* eslint-disable max-len */
import {PolymerElement, html} from '@polymer/polymer/polymer-element.js';

import '@polymer/app-layout/app-drawer/app-drawer.js';
import '@polymer/app-layout/app-drawer-layout/app-drawer-layout.js';
import '@polymer/app-layout/app-header/app-header.js';
Expand All @@ -26,7 +23,10 @@ import '@polymer/neon-animation/neon-animated-pages.js';
import '@polymer/neon-animation/animations/fade-in-animation.js';
import '@polymer/neon-animation/animations/fade-out-animation.js';

import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';

import css from './main-page.css';

import template from './main-page.pug';

import './dashboard-view.js';
Expand Down Expand Up @@ -58,46 +58,6 @@ export class MainPage extends PolymerElement {
text: 'Kubeflow docs',
href: '/docs',
},
{link: '/jupyter/', text: 'Notebooks'},
{link: '/tfjobs/ui/', text: 'TFJob Dashboard'},
{link: '/katib/', text: 'Katib Dashboard'},
{link: '/pipeline/', text: 'Pipeline Dashboard'},
],
},
gettingStartedItems: {
type: Array,
value: [
{
text: 'Getting started with Kubeflow',
desc: 'Quickly get running with your ML workflow on an existing Kubernetes installation',
link: 'https://www.kubeflow.org/docs/started/getting-started/',
icon: 'launch',
}, {
text: 'Microk8s for Kubeflow',
desc: 'Quickly get Kubeflow running locally on native hypervisors',
link: 'https://www.kubeflow.org/docs/started/getting-started-multipass/',
icon: 'launch',
}, {
text: 'Minikube for Kubeflow',
desc: 'Quickly get Kubeflow running locally',
link: 'https://www.kubeflow.org/docs/started/getting-started-minikube/',
icon: 'launch',
}, {
text: 'Kubernetes Engine for Kubeflow',
desc: 'Get Kubeflow running on Google Cloud Platform. This guide is a quickstart to deploying Kubeflow on Google Kubernetes Engine',
link: 'https://www.kubeflow.org/docs/started/getting-started-gke/',
icon: 'launch',
}, {
text: 'Requirements for Kubeflow',
desc: 'Get more detailed information about using Kubeflow and its components',
link: 'https://www.kubeflow.org/docs/started/requirements/',
icon: 'launch',
},
],
},
quickLinks: {
type: Array,
value: [
{
iframeUrl: '/jupyter/',
text: 'Notebooks',
Expand Down Expand Up @@ -130,20 +90,20 @@ export class MainPage extends PolymerElement {
}

/**
* Array of strings describing multi-property observer methods and their
* dependant properties
*/
* Array of strings describing multi-property observer methods and their
* dependant properties
*/
static get observers() {
return [
'_routePageChanged(routeData.page)',
];
}

/**
* Intercepts any external links and ensures that they are captured in
* the route and sent to the iframe source.
* @param {MouseEvent} e
*/
* Intercepts any external links and ensures that they are captured in
* the route and sent to the iframe source.
* @param {MouseEvent} e
*/
openInIframe(e) {
const url = new URL(e.currentTarget.href);
window.history.pushState({}, null, `_${url.pathname}`);
Expand All @@ -156,9 +116,9 @@ export class MainPage extends PolymerElement {
}

/**
* Handles route changes by evaluating the page path component
* @param {string} newPage
*/
* Handles route changes by evaluating the page path component
* @param {string} newPage
*/
_routePageChanged(newPage) {
this.hideToolbar = false;
switch (newPage) {
Expand All @@ -176,14 +136,13 @@ export class MainPage extends PolymerElement {
}

/**
* Sets the iframeUrl and sidebarItem based on the subpage component
* provided.
* @param {string} href
*/
* Sets the iframeUrl and sidebarItem based on the subpage component
* provided.
* @param {string} href
*/
_setIframeFromRoute(href) {
const menuLinkIndex = this.menuLinks.findIndex((m) =>
m.href === this.subRouteData.path
);
const menuLinkIndex =
this.menuLinks.findIndex((m) => m.href === this.subRouteData.path);
if (menuLinkIndex >= 0) {
this.page = 'iframe';
this.iframeUrl = this.menuLinks[menuLinkIndex].iframeUrl;
Expand Down
14 changes: 6 additions & 8 deletions components/centraldashboard/webpack.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
/* eslint-disable linebreak-style,no-undef */
'use strict';

const {resolve} = require('path');
Expand Down Expand Up @@ -114,7 +113,6 @@ module.exports = {
'not op_mini all',
],
},
debug: true,
},
]],
plugins: ['@babel/plugin-transform-runtime'],
Expand Down Expand Up @@ -153,7 +151,7 @@ module.exports = {
new CopyWebpackPlugin(POLYFILLS),
new DefinePlugin({
VERSION: JSON.stringify(PKG_VERSION),
DEVMODE: JSON.stringify(ENV == 'development')
DEVMODE: JSON.stringify(ENV == 'development'),
}),
new HtmlWebpackPlugin({
filename: resolve(DESTINATION, 'index.html'),
Expand All @@ -178,9 +176,9 @@ module.exports = {
],
devServer: {
port: 8081,
proxy: { '/api': 'http://localhost:8082' },
proxy: {'/api': 'http://localhost:8082'},
historyApiFallback: {
disableDotRule: true
}
}
}
disableDotRule: true,
},
},
};

0 comments on commit 4ea2c5b

Please sign in to comment.