Style fixes: center loading, fonts and internal error title (#1196)

* Style fixes: center loading, fonts and internal error title

1. Centered loading spinner
2. Made fonts work on prod
3. Set breadcrumbs title for the internal error page

build/build.js

@@ -17,6 +17,7 @@
  */
 import del from 'del';
 import gulp from 'gulp';
+import gulpUrlAdjuster from 'gulp-css-url-adjuster';
 import gulpHtmlmin from 'gulp-htmlmin';
 import gulpIf from 'gulp-if';
 import gulpMinifyCss from 'gulp-minify-css';
@@ -199,7 +200,13 @@ function createFrontendCopies(outputDirs) {
 
   return gulp.src(path.join(conf.paths.prodTmp, '*.html'))
       .pipe(gulpUseref({searchPath: searchPath}))
-      .pipe(gulpIf('**/vendor.css', gulpMinifyCss()))
+      .pipe(gulpIf(
+          '**/vendor.css',
+          gulpMinifyCss({rebase: true, relativeTo: conf.paths.tmp, target: conf.paths.tmp})))
+      .pipe(gulpIf('**/vendor.css', gulpUrlAdjuster({
+                     // Replace invalid prefix that is added to resolved URLs.
+                     replace: ['prod/static/', ''],
+                   })))
       .pipe(gulpIf('**/vendor.js', gulpUglify({
                      preserveComments: uglifySaveLicense,
                      // Disable compression of unused vars. This speeds up minification a lot (like
@@ -276,7 +283,7 @@ function assets(outputDirs) {
  * @return {stream}
  */
 function icons(outputDirs) {
-  let localizedOutputDirs = createLocalizedOutputs(outputDirs, 'static');
+  let localizedOutputDirs = createLocalizedOutputs(outputDirs, 'static/');
   return gulp
       .src(
           path.join(conf.paths.materialIcons, '/**/*.+(woff2|woff|eot|ttf)'),
@@ -290,9 +297,8 @@ function icons(outputDirs) {
  * @return {stream}
  */
 function fonts(outputDirs) {
-  let localizedOutputDirs = createLocalizedOutputs(outputDirs, 'fonts');
-  return gulp
-      .src(path.join(conf.paths.robotoFonts, '/**/*.+(woff2)'), {base: conf.paths.robotoFonts})
+  let localizedOutputDirs = createLocalizedOutputs(outputDirs, 'static/');
+  return gulp.src(path.join(conf.paths.robotoFonts, '/**/*.*'), {base: conf.paths.robotoFontsBase})
       .pipe(multiDest(localizedOutputDirs));
 }
 

build/conf.js

@@ -208,6 +208,7 @@ export default {
     prodTmp: path.join(basePath, '.tmp/prod'),
     protractorConf: path.join(basePath, 'build/protractor.conf.js'),
     robotoFonts: path.join(basePath, 'bower_components/roboto-fontface/fonts'),
+    robotoFontsBase: path.join(basePath, 'bower_components/roboto-fontface'),
     serve: path.join(basePath, '.tmp/serve'),
     src: path.join(basePath, 'src'),
     tmp: path.join(basePath, '.tmp'),

i18n/messages-en.xtb

@@ -698,4 +698,9 @@
 	<translation id="8923709969996632603" key="MSG_PET_SET_DETAIL_GRAPH_CARD_TITLE" source="/usr/local/google/home/pdabkowski/WebstormProjects/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Title for graph card displaying metrics of one pet set.">Resource usage history</translation>
 	<translation id="6717489320603977132" key="MSG_WORKLOADS_GRAPH_CARD_TITLE" source="/usr/local/google/home/pdabkowski/WebstormProjects/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Title for graph card displaying cumulative resource usage of all resources.">Cumulative resource usage history</translation>
 	<translation id="1641889007186562221" key="MSG_POD_DETAIL_GRAPH_CARD_TITLE" source="/usr/local/google/home/pdabkowski/WebstormProjects/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Title for graph card displaying metrics of one pod.">Resource usage history</translation>
+	<translation id="2741276106482217695" key="MSG_BREADCRUMBS_INTERNALERROR_LABEL" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Label for internal error page for breadcrumbs on the action bar.">Internal error</translation>
+	<translation id="6349033695019335926" key="MSG_REPLICA_SET_DETAIL_SERVICES_ZEROSTATE_TITLE" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Title for services card zerostate in replica set details page.">There is nothing to display here</translation>
+	<translation id="1741131394299188225" key="MSG_REPLICA_SET_DETAIL_SERVICES_ZEROSTATE_TEXT" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Text for services card zerostate in replica set details page.">There are currently no Services with the same label selector as this Replica Set</translation>
+	<translation id="1706732391203508865" key="MSG_DAEMON_SET_DETAIL_SERVICES_ZEROSTATE_TITLE" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Title for services card zerostate in daemon set details page.">There is nothing to display here</translation>
+	<translation id="2050439213098688097" key="MSG_DAEMON_SET_DETAIL_SERVICES_ZEROSTATE_TEXT" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Text for services card zerostate in daemon set details page.">There are currently no Services with the same label selector as this Daemon Set</translation>
 </translationbundle>
\ No newline at end of file

i18n/messages-ja.xtb

@@ -887,4 +887,9 @@
 	<translation id="8923709969996632603" key="MSG_PET_SET_DETAIL_GRAPH_CARD_TITLE" source="/usr/local/google/home/pdabkowski/WebstormProjects/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Title for graph card displaying metrics of one pet set.">Resource usage history</translation>
 	<translation id="6717489320603977132" key="MSG_WORKLOADS_GRAPH_CARD_TITLE" source="/usr/local/google/home/pdabkowski/WebstormProjects/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Title for graph card displaying cumulative resource usage of all resources.">Cumulative resource usage history</translation>
 	<translation id="1641889007186562221" key="MSG_POD_DETAIL_GRAPH_CARD_TITLE" source="/usr/local/google/home/pdabkowski/WebstormProjects/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Title for graph card displaying metrics of one pod.">Resource usage history</translation>
+	<translation id="2741276106482217695" key="MSG_BREADCRUMBS_INTERNALERROR_LABEL" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Label for internal error page for breadcrumbs on the action bar.">Internal error</translation>
+	<translation id="6349033695019335926" key="MSG_REPLICA_SET_DETAIL_SERVICES_ZEROSTATE_TITLE" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Title for services card zerostate in replica set details page.">There is nothing to display here</translation>
+	<translation id="1741131394299188225" key="MSG_REPLICA_SET_DETAIL_SERVICES_ZEROSTATE_TEXT" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Text for services card zerostate in replica set details page.">There are currently no Services with the same label selector as this Replica Set</translation>
+	<translation id="1706732391203508865" key="MSG_DAEMON_SET_DETAIL_SERVICES_ZEROSTATE_TITLE" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Title for services card zerostate in daemon set details page.">There is nothing to display here</translation>
+	<translation id="2050439213098688097" key="MSG_DAEMON_SET_DETAIL_SERVICES_ZEROSTATE_TEXT" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Text for services card zerostate in daemon set details page.">There are currently no Services with the same label selector as this Daemon Set</translation>
 </translationbundle>
\ No newline at end of file

package.json

@@ -32,6 +32,7 @@
     "gulp-closure-compiler": "~0.4.0",
     "gulp-codecov.io": "~1.0.1",
     "gulp-concat": "~2.6.0",
+    "gulp-css-url-adjuster": "^0.2.3",
     "gulp-eslint": "~3.0.1",
     "gulp-flatten": "~0.3.0",
     "gulp-htmlmin": "~2.0.0",

src/app/frontend/chrome/chrome.html

@@ -32,7 +32,7 @@ limitations under the License.
   <div layout="column" flex="shrink" class="kd-chrome-content-container">
     <md-content flex="auto" class="kd-app-content">
       <div ng-switch="$ctrl.showLoadingSpinner" flex="auto">
-        <div ng-switch-when="true">
+        <div ng-switch-when="true" class="kd-spinner">
           <md-progress-circular md-mode="indeterminate" md-diameter="96">
           </md-progress-circular>
         </div>

src/app/frontend/chrome/chrome.scss

@@ -28,6 +28,17 @@
   box-shadow: $whiteframe-shadow-1dp;
 }
 
+.kd-spinner {
+  align-content: center;
+  align-items: center;
+  flex: 1;
+  justify-content: center;
+
+  >md-progress-circular {
+    margin: 0 auto;
+  }
+}
+
 body,
 .kd-app-content {
   background-color: $body;

src/app/frontend/error/internalerror_stateconfig.js

@@ -13,10 +13,12 @@
 // limitations under the License.
 
 import {stateName as chromeStateName} from 'chrome/chrome_state';
+import {breadcrumbsConfig} from 'common/components/breadcrumbs/breadcrumbs_service';
 
 import {InternalErrorController} from './internalerror_controller';
 import {stateName, StateParams} from './internalerror_state';
 
+
 /**
  * Configures states for the internal error view.
  *
@@ -30,5 +32,16 @@ export default function stateConfig($stateProvider) {
     controllerAs: 'ctrl',
     params: new StateParams(/** @type {!angular.$http.Response} */ ({})),
     templateUrl: 'error/internalerror.html',
+    data: {
+      [breadcrumbsConfig]: {
+        'label': i18n.MSG_BREADCRUMBS_INTERNALERROR_LABEL,
+      },
+    },
   });
 }
+
+
+const i18n = {
+  /** @type {string} @desc Label for internal error page for breadcrumbs on the action bar. */
+  MSG_BREADCRUMBS_INTERNALERROR_LABEL: goog.getMsg('Internal error'),
+};