Initial implementation of zerostate view.

Author: Sebastian Florek

src/app/frontend/zerostate/zerostate.controller.js

@@ -20,15 +20,15 @@
 */
 export default class ZeroStateController {
 /**
-* @param {!angular.$timeout} $timeout
 * @ngInject
 */
-constructor($timeout) {
-/** @export {number} */
-this.testValue = 7;
-
-$timeout(() => {
-this.testValue = 8;
-}, 4000);
+constructor() {
+/** @export {!Array<{title:string, link:string}>} */
+this.learnMoreLinks = [
+{title: 'Dasard Tour', link: "#"},
+{title: 'Deploying your App', link: "#"},
+{title: 'Monitoring your App', link: "#"},
+{title: 'Troubleshooting', link: "#"},
+];
 }
 }

src/app/frontend/zerostate/zerostate.html

@@ -14,9 +14,34 @@
 limitations under the License.
 -->
 
-<div layout="vertical" layout-fill>
-<header>
-Zero state page. <a ui-sref="microservicelist">Go to microservices page</a> or
-<a ui-sref="deploy">deploy an app</a>.
-</header>
+<div layout="row" layout-align="center center" layout-padding class="kd-zerostate-content">
+<md-content layout layout-align="center" class="kd-content">
+<md-card flex="50" class="kd-zerostate-deploy-card">
+<md-toolbar layout="row" class="md-primary kd-zerostate-card-header"
+layout-align="center center" flex>
+<md-icon md-svg-icon="assets/images/kubernetes-logo.svg"
+class="kd-zerostate-card-logo"></md-icon>
+<span class="md-padding" flex>The <b>Kubernetes Dasard</b> lets you deploy, monitor
+and troubleshoot containerized apps and services</span>
+</md-toolbar>
+<md-card-content layout-align="center center">
+<md-button ui-sref="deploy" class="md-raised md-primary kd-zerostate-deploy-bt">Deploy an
+app
+</md-button>
+</md-card-content>
+</md-card>
+<md-card flex="15" class="kd-zerostate-lm-card">
+<md-card-content>
+<md-text-float class="kd-zerostate-lm-text"><b>Learn more</b></md-text-float>
+<md-list class="kd-zerostate-lm-list">
+<md-list-item class="kd-zerostate-lm-list-item"
+ng-repeat="option in ctrl.learnMoreLinks">
+<a ui-sref="{{option.link}}">
+{{option.title}} <i class="material-icons kd-zerostate-ext-link-icon">open_in_new</i>
+</a>
+</md-list-item>
+</md-list>
+</md-card-content>
+</md-card>
+</md-content>
 </div>

src/app/frontend/zerostate/zerostate.scss

@@ -0,0 +1,62 @@
+// Copyright 2015 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+.kd-zerostate-content {
+position: fixed;
+height: 90%;
+width: 100%;
+}
+
+.kd-zerostate-card-header {
+font-size: 1em;
+}
+
+.kd-zerostate-card-logo {
+height: 80px;
+width: 80px;
+padding: 0 0 0 15px;
+}
+
+.kd-zerostate-deploy-card {
+min-width: 300px;
+color: white;
+}
+
+.kd-zerostate-deploy-bt {
+font-size: 12px;
+min-width: 120px;
+}
+
+.kd-zerostate-lm-list {
+margin-top: 10px;
+
+> .kd-zerostate-lm-list-item {
+padding: 0;
+min-height: 30px;
+color: royalblue;
+}
+}
+
+.kd-zerostate-ext-link-icon {
+font-size: 1em;
+}
+
+.kd-zerostate-lm-card {
+min-width: 200px;
+font-size: 15px;
+}
+
+.kd-zerostate-lm-text {
+color: darkgray;
+}

src/test/frontend/zerostate/zerostate.controller.test.js

@@ -23,6 +23,11 @@ describe('Main controller', () => {
 }));
 
 it('should do something', () => {
-expect(vm.testValue).toEqual(7);
+expect(vm.learnMoreLinks).toEqual([
+{title: 'Dasard Tour', link: "#"},
+{title: 'Deploying your App', link: "#"},
+{title: 'Monitoring your App', link: "#"},
+{title: 'Troubleshooting', link: "#"},
+]);
 });
 });

src/test/integration/zerostate.po.js

@@ -15,6 +15,6 @@
 
 export default class ZeroStatePageObject {
 constructor() {
-this.header = element(by.css('header'));
+this.deployButton = element(by.css('.kd-zerostate-deploy-bt'));
 }
 }

src/test/integration/zerostate.test.js

@@ -24,6 +24,6 @@ describe('Zero state view', function () {
 });
 
 it('should do something', function() {
-expect(page.header.getText()).toContain('page');
+expect(page.deployButton.getText()).toContain('DEPLOY');
 });
 });