Merge pull request #72 from floreks/zerostate-view

Initial implementation of zerostate view.

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: 'Dashboard 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 @@ See the License for the specific language governing permissions and
 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 Dashboard</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

+// 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: 'Dashboard 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');
   });
 });