Update about page (#2716)

* Update about page

* Fix tests

src/app/backend/dashboard.go

@@ -62,8 +62,8 @@ var (
 	argTokenTTL           = pflag.Int("token-ttl", int(authApi.DefaultTokenTTL), "Expiration time (in seconds) of JWE tokens generated by dashboard. Default: 15 min. 0 - never expires")
 	argAuthenticationMode = pflag.StringSlice("authentication-mode", []string{authApi.Token.String()}, "Enables authentication options that will be reflected on login screen. Supported values: token, basic. Default: token."+
 		"Note that basic option should only be used if apiserver has '--authorization-mode=ABAC' and '--basic-auth-file' flags set.")
-	argMetricClientCheckPeriod  = pflag.Int("metric-client-check-period", 30, "Time in seconds that defines how often configured metric client health check should be run. Default: 30 seconds.")
-	argAutoGenerateCertificates = pflag.Bool("auto-generate-certificates", false, "When set to true, Dashboard will automatically generate certificates used to serve HTTPS. Default: false.")
+	argMetricClientCheckPeriod   = pflag.Int("metric-client-check-period", 30, "Time in seconds that defines how often configured metric client health check should be run. Default: 30 seconds.")
+	argAutoGenerateCertificates  = pflag.Bool("auto-generate-certificates", false, "When set to true, Dashboard will automatically generate certificates used to serve HTTPS. Default: false.")
 	argEnableInsecureLogin       = pflag.Bool("enable-insecure-login", false, "When enabled, Dashboard login view will also be shown when Dashboard is not served over HTTPS. Default: false.")
 	argSystemBanner              = pflag.String("system-banner", "", "When non-empty displays message to Dashboard users. Accepts simple HTML tags. Default: ''.")
 	argSystemBannerSeverity      = pflag.String("system-banner-severity", "INFO", "Severity of system banner. Should be one of 'INFO|WARNING|ERROR'. Default: 'INFO'.")

src/app/frontend/about/about.html

@@ -14,8 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<kd-info-card>
-  <kd-info-card-section>
+<kd-content-card>
+  <kd-title>[[About|Global settings header.]]</kd-title>
+  <kd-content class="kd-content-padded">
+
     <div layout="row">
       <img src="assets/images/kubernetes-logo.svg"
            class="kd-about-kubernetes-logo">
@@ -23,33 +25,25 @@ limitations under the License.
       <div layout="column"
            layout-align="start start">
         <div class="md-headline">Dashboard</div>
-        <div class="md-subhead">[[General-Purpose Web UI for Kubernetes Clusters| Dashbord moto on the about page, just below the header]]</div>
+        <div class="md-subhead">[[General-purpose web UI for Kubernetes clusters|Project description on about page.]]</div>
       </div>
     </div>
-    <a href="https://kubernetes.io/docs/user-guide/ui/">
-      <md-button class="kd-about-button">
-        [[Documentation|This is a label for button displayed on about page used to open documentaion in browser]]
-      </md-button>
-    </a>
-    <a ng-href="{{$ctrl.getLinkToFeedbackPage()}}">
-      <md-button class="kd-about-button">
-        [[Send feedback|This is a label for button displayed on about page used to send feedback to GitHub new issue.]]
-      </md-button>
-    </a>
+
     <kd-info-card-entry title="[[Dashboard Version|Label 'Dashboard Version' for the about page.]]"
                         ng-if="::$ctrl.dashboardVersion">
       {{$ctrl.dashboardVersion}}
     </kd-info-card-entry>
+
     <kd-info-card-entry title="[[Git Commit|Label 'Git Commit' for the about page.]]"
                         ng-if="::$ctrl.gitCommit">
       {{$ctrl.gitCommit}}
     </kd-info-card-entry>
-    <div class="kd-about-footer-container">
-      <div class="kd-footer kd-copyright-title">[[Copyright 2015-{{$ctrl.latestCopyrightYear}} The Kubernetes Authors.| This is the copyright statement displayed on the about page]]</div>
-      <div class="kd-footer">
-        [[ Kubernetes Dashboard is made possible by the Dashboard
-        <a href="https://github.com/kubernetes/dashboard/graphs/contributors">community</a> as an <a href="https://github.com/kubernetes/dashboard">open source project</a>. | This is the creator reference on the footer of the about page]]
-      </div>
+
+    <div class="kd-footer">
+      [[Copyright 2015-{{$ctrl.latestCopyrightYear}} The Kubernetes Authors.| Copyright statement displayed on the about page.]]
+      <br> [[Kubernetes Dashboard is made possible by the Dashboard <a href="https://github.com/kubernetes/dashboard/graphs/contributors">community</a> as an <a href="https://github.com/kubernetes/dashboard">open source project</a>.| Creator reference
+      on the footer of the about page.]]
     </div>
-  </kd-info-card-section>
-</kd-info-card>
+
+  </kd-content>
+</kd-content-card>

src/app/frontend/about/about.scss

@@ -14,24 +14,17 @@
 
 @import '../variables';
 
-.kd-about-footer-container {
-  padding-bottom: $baseline-grid;
-}
-
 .kd-about-kubernetes-logo {
   height: $logo-height;
-  padding-right: $baseline-grid * 2;
-}
-
-.kd-about-button {
-  margin: ($baseline-grid * 2) 0;
+  padding: 0 ($baseline-grid * 2) ($baseline-grid * 3) 0;
 }
 
 .kd-copyright-title {
-  padding-top: $baseline-grid * 8;
+  padding-top: $baseline-grid * 2;
 }
 
 .kd-footer {
   color: $foreground-2;
   font-size: $footer-font-size-base;
+  padding-top: $baseline-grid * 3;
 }

src/app/frontend/about/actionbar.html

+<!--
+Copyright 2017 The Kubernetes Authors.
+
+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.
+-->
+
+<a href="https://kubernetes.io/docs/user-guide/ui/">
+  <md-button class="kd-actionbar-button">
+    <md-icon>description</md-icon>
+    <md-tooltip md-delay="500"
+                md-autohide>
+      [[Read Kubernetes Dashboard documentation|Tooltip of button linking to documentation.]]
+    </md-tooltip>
+    <div class="kd-actionbar-button-text">
+      [[Documentation|Label of button linking to documentation.]]
+    </div>
+  </md-button>
+</a>
+
+<a ng-href="{{$ctrl.getLinkToFeedbackPage()}}">
+  <md-button class="kd-actionbar-button">
+    <md-icon>feedback</md-icon>
+    <md-tooltip md-delay="500"
+                md-autohide>
+      [[Create new issue on GitHub|Tooltip of button linking to new issue on GitHub used to send feedback.]]
+    </md-tooltip>
+    <div class="kd-actionbar-button-text">
+      [[Send feedback|Label of button linking to new issue on GitHub used to send feedback.]]
+    </div>
+  </md-button>
+</a>

src/app/frontend/about/actionbar_controller.js

+// Copyright 2017 The Kubernetes Authors.
+//
+// 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.
+
+/** @final */
+export class ActionBarController {
+  /**
+   * @param {!../common/appconfig/service.AppConfigService} kdAppConfigService
+   * @ngInject
+   */
+  constructor(kdAppConfigService) {
+    /** @export {string} */
+    this.dashboardVersion = kdAppConfigService.getDashboardVersion();
+
+    /** @export {string} */
+    this.gitCommit = kdAppConfigService.getGitCommit();
+  }
+
+  /**
+   * Returns URL of GitHub page used to report bugs with partly filled issue template
+   * (check .github/ISSUE_TEMPLATE.md file). IMPORTANT: Remember to keep these templates in sync.
+   *
+   * @export
+   * @return {string} URL of GitHub page used to report bugs.
+   */
+  getLinkToFeedbackPage() {
+    let title = ``;
+    let body = `##### Steps to reproduce\n<!-- Describe all steps needed to reproduce the ` +
+        `issue. It is a good place to use numbered list. -->\n\n##### Environment\n\`\`\`\n` +
+        `Installation method: \nKubernetes version:\nDashboard version: ` +
+        `${this.dashboardVersion}\nCommit: ${this.gitCommit}\n\`\`\`\n\n##### Observed result\n` +
+        `<!-- Describe observed result as precisely as possible. -->\n\n` +
+        `##### Comments\n<!-- If you have any comments or more details, put them here. -->`;
+    return `https://github.com/kubernetes/dashboard/issues/new?title=${encodeURIComponent(title)}` +
+        `&body=${encodeURIComponent(body)}`;
+  }
+}

src/app/frontend/about/controller.js

@@ -12,15 +12,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-/**
- * Controller for the about view. The view shows details about the installation
- * enviornment. The information can be used when creating issues.
- *
- * @final
- */
+/** @final */
 export class AboutController {
   /**
-   *   @param {!../common/appconfig/service.AppConfigService} kdAppConfigService
+   * @param {!../common/appconfig/service.AppConfigService} kdAppConfigService
    * @ngInject
    */
   constructor(kdAppConfigService) {
@@ -33,23 +28,4 @@ export class AboutController {
     /** @export {string} */
     this.latestCopyrightYear = kdAppConfigService.getBuildYear();
   }
-
-  /**
-   * Returns URL of GitHub page used to report bugs with partly filled issue template
-   * (check .github/ISSUE_TEMPLATE.md file). IMPORTANT: Remember to keep these templates in sync.
-   *
-   * @export
-   * @return {string} URL of GitHub page used to report bugs.
-   */
-  getLinkToFeedbackPage() {
-    let title = ``;
-    let body = `##### Steps to reproduce\n<!-- Describe all steps needed to reproduce the ` +
-        `issue. It is a good place to use numbered list. -->\n\n\n##### Environment\n\`\`\`\n` +
-        `Installation method: \nKubernetes version:\nDashboard version: ` +
-        `${this.dashboardVersion}\nCommit: ${this.gitCommit}\n\`\`\`\n\n##### Observed result\n` +
-        `<!-- Describe observed result as precisely as possible. -->\n\n\n` +
-        `##### Comments\n<!-- If you have any comments or more details, put them here. -->`;
-    return `https://github.com/kubernetes/dashboard/issues/new?title=${encodeURIComponent(title)}` +
-        `&body=${encodeURIComponent(body)}`;
-  }
 }

src/app/frontend/about/module.js

@@ -14,12 +14,6 @@
 
 import stateConfig from './stateconfig';
 
-/**
- * Angular module for the about view.
- *
- * The view shows details about the installation enviornment. The information
- * can be used when creating issues.
- */
 export default angular
     .module(
         'kubernetesDashboard.about',

src/app/frontend/about/stateconfig.js

@@ -13,15 +13,14 @@
 // limitations under the License.
 
 
-import {stateName as chromeStateName} from '../chrome/state';
+import {actionbarViewName, stateName as chromeStateName} from '../chrome/state';
 import {breadcrumbsConfig} from '../common/components/breadcrumbs/service';
 
+import {ActionBarController} from './actionbar_controller';
 import {AboutController} from './controller';
 import {stateName, stateUrl} from './state';
 
 /**
- * Configures states for the about view.
- *
  * @param {!ui.router.$stateProvider} $stateProvider
  * @ngInject
  */
@@ -35,6 +34,11 @@ export default function stateConfig($stateProvider) {
         controllerAs: '$ctrl',
         templateUrl: 'about/about.html',
       },
+      [`${actionbarViewName}@${chromeStateName}`]: {
+        controller: ActionBarController,
+        controllerAs: '$ctrl',
+        templateUrl: 'about/actionbar.html',
+      },
     },
     data: {
       [breadcrumbsConfig]: {

src/test/frontend/about/controller_test.js

@@ -12,19 +12,19 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {AboutController} from 'about/controller';
+import {ActionBarController} from 'about/actionbar_controller';
 import module from 'about/module';
 import appconfig_module from 'common/appconfig/module';
 
-describe('About controller', () => {
-  /** @type {!about/controller.AboutController} */
+describe('About actionbar controller', () => {
+  /** @type {!about/actionbar_controller.ActionBarController} */
   let ctrl;
 
   beforeEach(() => {
     angular.mock.module(module.name);
     angular.mock.module(appconfig_module.name);
     angular.mock.inject(($controller, kdAppConfigService) => {
-      ctrl = $controller(AboutController, {
+      ctrl = $controller(ActionBarController, {
         'kdAppConfigService': kdAppConfigService,
       });
     });