Navigation progress 4 (#1154)

* Navigation progress 4

* merged app abr, top bar and tabs into one bar
* improved navigation highlighting (now menu item is highlighted when,
  e.g., a RC is selected)
* Fixed zerostate pages for RCs
* Moved events tables out from tabs to just a card

i18n/messages-en.xtb

@@ -569,4 +569,11 @@
 	<translation id="1546082571745741755" key="MSG_NAMESPACE_NOT_SELECTED" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Text for dropdown item that indicates that no namespace was selected">All namespaces</translation>
 	<translation id="1024358167652076581" key="MSG_ALL_NAMESPACES" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Text for dropdown item that indicates that no namespace was selected">All namespaces</translation>
 	<translation id="8827015449851505134" key="MSG_NAMESPACE" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Title for namespace select.">Namespace</translation>
+	<translation id="9183905402242013542" key="MSG_EVENTS_CARD" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Label for the events card.">Events</translation>
+	<translation id="3538793608564323810" key="MSG_EVENTS_NO_EVENTS_TITLE" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Title of section when there are no events.">There is nothing to display here</translation>
+	<translation id="7050746505431266585" key="MSG_EVENTS_NO_EVENTS_USER_HELP" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="User help on the events page when no events are to be displayed.">It is possible that all events have expired.</translation>
+	<translation id="3610014951719533291" key="MSG_JOB_DETAIL_PODS" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Title for a pods section.">Pods</translation>
+	<translation id="873716249176769410" key="MSG_RC_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 replication controller details page.">There are currently no Services with the same label selector as this Replication Controller</translation>
+	<translation id="4924028459458420869" key="MSG_RC_DETAIL_PODS_ZEROSTATE_TEXT" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Text for pods card zerostate in replication controller details page.">There are currently no Pods selected by this Replication Controller</translation>
+	<translation id="6335211681012316099" key="MSG_PET_SET_DETAIL_PODS_ZEROSTATE_TEXT" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Text for pods card zerostate in pet set details page.">There are currently no Pods selected by this Pet Set</translation>
 </translationbundle>

i18n/messages-ja.xtb

@@ -758,4 +758,11 @@
 	<translation id="1546082571745741755" key="MSG_NAMESPACE_NOT_SELECTED" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Text for dropdown item that indicates that no namespace was selected">All namespaces</translation>
 	<translation id="1024358167652076581" key="MSG_ALL_NAMESPACES" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Text for dropdown item that indicates that no namespace was selected">All namespaces</translation>
 	<translation id="8827015449851505134" key="MSG_NAMESPACE" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Title for namespace select.">Namespace</translation>
+	<translation id="9183905402242013542" key="MSG_EVENTS_CARD" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Label for the events card.">Events</translation>
+	<translation id="3538793608564323810" key="MSG_EVENTS_NO_EVENTS_TITLE" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Title of section when there are no events.">There is nothing to display here</translation>
+	<translation id="7050746505431266585" key="MSG_EVENTS_NO_EVENTS_USER_HELP" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="User help on the events page when no events are to be displayed.">It is possible that all events have expired.</translation>
+	<translation id="3610014951719533291" key="MSG_JOB_DETAIL_PODS" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Title for a pods section.">Pods</translation>
+	<translation id="873716249176769410" key="MSG_RC_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 replication controller details page.">There are currently no Services with the same label selector as this Replication Controller</translation>
+	<translation id="4924028459458420869" key="MSG_RC_DETAIL_PODS_ZEROSTATE_TEXT" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Text for pods card zerostate in replication controller details page.">There are currently no Pods selected by this Replication Controller</translation>
+	<translation id="6335211681012316099" key="MSG_PET_SET_DETAIL_PODS_ZEROSTATE_TEXT" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Text for pods card zerostate in pet set details page.">There are currently no Pods selected by this Pet Set</translation>
 </translationbundle>

src/app/backend/resource/common/service.go

@@ -26,7 +26,7 @@ func FilterNamespacedServicesBySelector(services []api.Service, namespace string
 	var matchingServices []api.Service
 	for _, service := range services {
 		if service.ObjectMeta.Namespace == namespace &&
-			IsSelectorMatching(resourceSelector, service.Labels) {
+			IsSelectorMatching(service.Spec.Selector, resourceSelector) {
 			matchingServices = append(matchingServices, service)
 		}
 	}

src/app/backend/resource/common/types.go

@@ -95,21 +95,21 @@ type ResourceKind string
 
 // List of all resource kinds supported by the UI.
 const (
-	ResourceKindReplicaSet             = "replicaset"
-	ResourceKindService                = "service"
-	ResourceKindDeployment             = "deployment"
-	ResourceKindPod                    = "pod"
-	ResourceKindEvent                  = "event"
-	ResourceKindReplicationController  = "replicationcontroller"
-	ResourceKindDaemonSet              = "daemonset"
-	ResourceKindJob                    = "job"
-	ResourceKindPetSet                 = "petset"
-	ResourceKindNamespace              = "namespace"
-	ResourceKindNode                   = "node"
-	ResourceKindSecret                 = "secret"
-	ResourceKindConfigMap              = "configmap"
-	ResourceKindPersistentVolume       = "persistentvolume"
-	ResourceKindPersistentVolumeClaim  = "persistentvolumeclaim"
+	ResourceKindReplicaSet            = "replicaset"
+	ResourceKindService               = "service"
+	ResourceKindDeployment            = "deployment"
+	ResourceKindPod                   = "pod"
+	ResourceKindEvent                 = "event"
+	ResourceKindReplicationController = "replicationcontroller"
+	ResourceKindDaemonSet             = "daemonset"
+	ResourceKindJob                   = "job"
+	ResourceKindPetSet                = "petset"
+	ResourceKindNamespace             = "namespace"
+	ResourceKindNode                  = "node"
+	ResourceKindSecret                = "secret"
+	ResourceKindConfigMap             = "configmap"
+	ResourceKindPersistentVolume      = "persistentvolume"
+	ResourceKindPersistentVolumeClaim = "persistentvolumeclaim"
 )
 
 // ClientType represents type of client that is used to perform generic operations on resources.

src/app/frontend/_variables.scss

@@ -49,6 +49,7 @@ $foreground-1: rgba(0, 0, 0, .87);
 $foreground-2: rgba(0, 0, 0, .54);
 $foreground-3: rgba(0, 0, 0, .26);
 $foreground-4: rgba(0, 0, 0, .12);
+$hue-2: rgba(255, 255, 255, .54);
 
 $background-1: rgba(158, 158, 158, .2);
 
@@ -61,6 +62,7 @@ $layout-breakpoint-sm: 960px;
 $layout-breakpoint-xs: 600px;
 $whiteframe-shadow-1dp: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
 $baseline-grid: 8px;
+$nav-width: 30 * $baseline-grid;
 $logo-width: 8 * $baseline-grid;
 $logo-height: 8 * $baseline-grid;
 $table-cell-height: 6 * $baseline-grid;

src/app/frontend/chrome/chrome.html

@@ -16,16 +16,16 @@
 
 <md-toolbar class="kd-toolbar">
   <div class="md-toolbar-tools kd-toolbar-tools">
-    <kd-nav-hamburger></kd-nav-hamburger>
-    <h2>
+    <kd-nav-hamburger flex="none"></kd-nav-hamburger>
+    <h2 class="kd-logo-menu" flex="none">
       <span>kubernetes</span>
     </h2>
+    <kd-breadcrumbs class="kd-actionbar-breadcrumbs" limit="2" flex="auto" layout="row"></kd-breadcrumbs>
     <div flex="auto" ui-view="toolbar"></div>
+    <div ui-view="actionbar"></div>
   </div>
 </md-toolbar>
 
-<kd-actionbar flex="none"></kd-actionbar>
-
 <div layout="row">
   <kd-nav></kd-nav>
   <div layout="column" flex="shrink" class="kd-chrome-content-container">

src/app/frontend/chrome/chrome.scss

@@ -36,16 +36,10 @@ body,
 a {
   color: $primary;
   text-decoration: inherit;
-
-  &:visited {
-    color: $primary;
-  }
 }
 
-.md-toolbar-tools {
-  a {
-    color: $primary;
-  }
+.kd-logo-menu {
+  width: $nav-width - 5.5 * $baseline-grid;
 }
 
 .kd-success {

src/app/frontend/chrome/nav/nav.scss

@@ -21,12 +21,12 @@
   overflow: hidden;
   overflow-y: auto;
   white-space: nowrap;
-  width: 30 * $baseline-grid;
+  width: $nav-width;
 
   &.md-closed {
     &.md-locked-open-add-active {
-      min-width: 30 * $baseline-grid;
-      width: 30 * $baseline-grid;
+      min-width: $nav-width;
+      width: $nav-width;
     }
   }
 

src/app/frontend/chrome/nav/navitem_component.js

@@ -12,6 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import {breadcrumbsConfig} from 'common/components/breadcrumbs/breadcrumbs_service';
+
 /**
  * @final
  */
@@ -38,7 +40,20 @@ export class NavItemController {
    * @return {boolean}
    * @export
    */
-  isActive() { return this.state_.current.name === this.state; }
+  isActive() {
+    let state = this.state_.current;
+    while (state) {
+      if (state.name === this.state) {
+        return true;
+      }
+      if (state && state.data && state.data[breadcrumbsConfig]) {
+        state = this.state_.get(state.data[breadcrumbsConfig]['parent']);
+      } else {
+        state = null;
+      }
+    }
+    return false;
+  }
 }
 
 /**

src/app/frontend/common/components/breadcrumbs/breadcrumbs.html

@@ -16,11 +16,11 @@
 
 <div ng-switch="$last" ng-repeat="breadcrumb in ctrl.breadcrumbs" class="md-title kd-breadcrumbs-ellipsised"
     ng-class="{'kd-inline-breadcrumb': !$last}" flex="shrink">
-  <a ng-switch-when="false" href="{{::breadcrumb.stateLink}}">
+  <a ng-switch-when="false" href="{{::breadcrumb.stateLink}}" class="kd-faded-breadcrumb">
     {{::breadcrumb.label}}
   </a>
   <div ng-switch-when="true" class="kd-breadcrumbs-ellipsised">
     <kd-middle-ellipsis display-string="{{::breadcrumb.label}}"></kd-middle-ellipsis>
   </div>
-  <span ng-switch-when="false">></span>
+  <span ng-switch-when="false" class="kd-faded-breadcrumb">></span>
 </div>

src/app/frontend/common/components/breadcrumbs/breadcrumbs.scss

@@ -19,6 +19,10 @@
   float: left;
   font-weight: $regular-font-weight;
   max-width: 100%;
+
+  >.kd-faded-breadcrumb {
+    color: $hue-2;
+  }
 }
 
 .kd-inline-breadcrumb {

src/app/frontend/common/components/endpoint/externalendpoint.html

@@ -31,7 +31,7 @@
           <md-icon class="kd-endpoint-icon">open_in_new</md-icon>
         </a>
       </div>
-      <div>
+      <div ng-if="::!port.port">
         <a href="http://{{::endpoint.host}}:{{::port.nodePort}}" target="_blank"
            layout layout-align="start center">
           <kd-middle-ellipsis display-string="{{::endpoint.host}}:{{::port.nodePort}}">

src/app/frontend/common/components/zerostate/zerostate.scss

@@ -31,5 +31,6 @@
 }
 
 .kd-zerostate-text {
+  color: $delicate;
   word-break: break-all;
 }

src/app/frontend/daemonsetdetail/daemonsetdetail.html

@@ -14,36 +14,26 @@
 limitations under the License.
 -->
 
-<div layout="column">
-  <md-content>
-    <md-tabs md-border-bottom md-dynamic-height>
-      <md-tab label="{{::ctrl.i18n.MSG_DAEMON_SET_DETAIL_OVERVIEW_LABEL}}">
-        <kd-daemon-set-info daemon-set="::ctrl.daemonSetDetail"></kd-daemon-set-info>
-        <kd-content-card ng-if="::ctrl.daemonSetDetail.serviceList.services.length">
-          <kd-title>{{::ctrl.i18n.MSG_DAEMON_SET_DETAIL_SERVICES_TITLE}}</kd-title>
-          <kd-content>
-            <kd-service-card-list service-list="::ctrl.daemonSetDetail.serviceList"
-                                  service-list-resource="::ctrl.daemonSetServicesResource">
-            </kd-service-card-list>
-          </kd-content>
-        </kd-content-card>
-        <kd-content-card>
-          <kd-title>{{::ctrl.i18n.MSG_DAEMON_SET_DETAIL_PODS_TITLE}}</kd-title>
-          <kd-content>
-            <kd-pod-card-list pod-list="::ctrl.daemonSetDetail.podList"
-                              pod-list-resource="::ctrl.daemonSetPodsResource"
-                              with-statuses="true" ng-show="::ctrl.daemonSetDetail.podList.pods.length">
-            </kd-pod-card-list>
-            <div class="kd-zerostate-message" layout-padding ng-hide="::ctrl.daemonSetDetail.podList.pods.length">
-              <div class="kd-zerostate-title">{{::ctrl.i18n.MSG_DAEMON_SET_DETAIL_PODS_ZEROSTATE_TITLE}}</div>
-              <div class="kd-zerostate-text">{{::ctrl.i18n.MSG_DAEMON_SET_DETAIL_PODS_ZEROSTATE_TEXT}}</div>
-            </div>
-          </kd-content>
-        </kd-content-card>
-      </md-tab>
-      <md-tab label="{{::ctrl.i18n.MSG_DAEMON_SET_DETAIL_EVENTS_LABEL}}">
-        <kd-event-card-list event-list="::ctrl.daemonSetDetail.eventList"></kd-event-card-list>
-      </md-tab>
-    </md-tabs>
-  </md-content>
-</div>
+<kd-daemon-set-info daemon-set="::ctrl.daemonSetDetail"></kd-daemon-set-info>
+<kd-content-card ng-if="::ctrl.daemonSetDetail.serviceList.services.length">
+  <kd-title>{{::ctrl.i18n.MSG_DAEMON_SET_DETAIL_SERVICES_TITLE}}</kd-title>
+  <kd-content>
+    <kd-service-card-list service-list="::ctrl.daemonSetDetail.serviceList"
+                          service-list-resource="::ctrl.daemonSetServicesResource">
+    </kd-service-card-list>
+  </kd-content>
+</kd-content-card>
+<kd-content-card>
+  <kd-title>{{::ctrl.i18n.MSG_DAEMON_SET_DETAIL_PODS_TITLE}}</kd-title>
+  <kd-content>
+    <kd-pod-card-list pod-list="::ctrl.daemonSetDetail.podList"
+                      pod-list-resource="::ctrl.daemonSetPodsResource"
+                      with-statuses="true" ng-show="::ctrl.daemonSetDetail.podList.pods.length">
+    </kd-pod-card-list>
+    <div class="kd-zerostate-message" layout-padding ng-hide="::ctrl.daemonSetDetail.podList.pods.length">
+      <div class="kd-zerostate-title">{{::ctrl.i18n.MSG_DAEMON_SET_DETAIL_PODS_ZEROSTATE_TITLE}}</div>
+      <div class="kd-zerostate-text">{{::ctrl.i18n.MSG_DAEMON_SET_DETAIL_PODS_ZEROSTATE_TEXT}}</div>
+    </div>
+  </kd-content>
+</kd-content-card>
+<kd-event-card-list event-list="::ctrl.daemonSetDetail.eventList"></kd-event-card-list>

src/app/frontend/deploymentdetail/deploymentdetail.html

@@ -1,41 +1,32 @@
-<div layout="column">
-  <md-content>
-    <md-tabs md-border-bottom md-dynamic-height>
-      <md-tab label="{{::ctrl.i18n.MSG_DEPLOYMENT_DETAIL_OVERVIEW_LABEL}}">
-        <kd-deployment-info deployment="::ctrl.deploymentDetail"></kd-deployment-info>
+<kd-deployment-info deployment="::ctrl.deploymentDetail"></kd-deployment-info>
 
-        <kd-content-card>
-          <kd-title>{{::ctrl.i18n.MSG_DEPLOYMENT_DETAIL_NEW_REPLICAS_TITLE}}</kd-title>
-          <kd-content>
-            <kd-replica-set-card-list ng-show="::ctrl.deploymentDetail.newReplicaSet.objectMeta.name"
-                    replica-set-list="::ctrl.newReplicaSetList">
-            </kd-replica-set-card-list>
-            <div class="kd-zerostate-message" layout-padding
-                 ng-hide="::ctrl.deploymentDetail.newReplicaSet.objectMeta.name">
-              <div class="kd-zerostate-title">{{::ctrl.i18n.MSG_DEPLOYMENT_DETAIL_NEW_REPLICAS_ZEROSTATE_TITLE}}</div>
-              <div class="kd-zerostate-text">{{::ctrl.i18n.MSG_DEPLOYMENT_DETAIL_NEW_REPLICAS_ZEROSTATE_TEXT}}</div>
-            </div>
-          </kd-content>
-        </kd-content-card>
+<kd-content-card>
+  <kd-title>{{::ctrl.i18n.MSG_DEPLOYMENT_DETAIL_NEW_REPLICAS_TITLE}}</kd-title>
+  <kd-content>
+    <kd-replica-set-card-list ng-show="::ctrl.deploymentDetail.newReplicaSet.objectMeta.name"
+            replica-set-list="::ctrl.newReplicaSetList">
+    </kd-replica-set-card-list>
+    <div class="kd-zerostate-message" layout-padding
+         ng-hide="::ctrl.deploymentDetail.newReplicaSet.objectMeta.name">
+      <div class="kd-zerostate-title">{{::ctrl.i18n.MSG_DEPLOYMENT_DETAIL_NEW_REPLICAS_ZEROSTATE_TITLE}}</div>
+      <div class="kd-zerostate-text">{{::ctrl.i18n.MSG_DEPLOYMENT_DETAIL_NEW_REPLICAS_ZEROSTATE_TEXT}}</div>
+    </div>
+  </kd-content>
+</kd-content-card>
 
-        <kd-content-card>
-          <kd-title>{{::ctrl.i18n.MSG_DEPLOYMENT_DETAIL_OLD_REPLICAS_TITLE}}</kd-title>
-          <kd-content>
-            <kd-replica-set-card-list
-                    ng-show="::ctrl.deploymentDetail.oldReplicaSetList.replicaSets.length"
-                    replica-set-list="::ctrl.deploymentDetail.oldReplicaSetList">
-            </kd-replica-set-card-list>
-            <div class="kd-zerostate-message" layout-padding
-                 ng-hide="::ctrl.deploymentDetail.oldReplicaSetList.replicaSets.length">
-              <div class="kd-zerostate-title">{{::ctrl.i18n.MSG_DEPLOYMENT_DETAIL_OLD_REPLICAS_ZEROSTATE_TITLE}}</div>
-              <div class="kd-zerostate-text">{{::ctrl.i18n.MSG_DEPLOYMENT_DETAIL_OLD_REPLICAS_ZEROSTATE_TEXT}}</div>
-            </div>
-          </kd-content>
-        </kd-content-card>
-      </md-tab>
-      <md-tab label="{{::ctrl.i18n.MSG_DEPLOYMENT_DETAIL_EVENTS_LABEL}}">
-        <kd-event-card-list event-list="::ctrl.deploymentDetail.eventList"></kd-event-card-list>
-      </md-tab>
-    </md-tabs>
-  </md-content>
-</div>
+<kd-content-card>
+  <kd-title>{{::ctrl.i18n.MSG_DEPLOYMENT_DETAIL_OLD_REPLICAS_TITLE}}</kd-title>
+  <kd-content>
+    <kd-replica-set-card-list
+            ng-show="::ctrl.deploymentDetail.oldReplicaSetList.replicaSets.length"
+            replica-set-list="::ctrl.deploymentDetail.oldReplicaSetList">
+    </kd-replica-set-card-list>
+    <div class="kd-zerostate-message" layout-padding
+         ng-hide="::ctrl.deploymentDetail.oldReplicaSetList.replicaSets.length">
+      <div class="kd-zerostate-title">{{::ctrl.i18n.MSG_DEPLOYMENT_DETAIL_OLD_REPLICAS_ZEROSTATE_TITLE}}</div>
+      <div class="kd-zerostate-text">{{::ctrl.i18n.MSG_DEPLOYMENT_DETAIL_OLD_REPLICAS_ZEROSTATE_TEXT}}</div>
+    </div>
+  </kd-content>
+</kd-content-card>
+
+<kd-event-card-list event-list="::ctrl.deploymentDetail.eventList"></kd-event-card-list>

src/app/frontend/events/eventcardlist.html

@@ -15,8 +15,9 @@
 -->
 
 <kd-content-card>
+  <kd-title>{{::$ctrl.i18n.MSG_EVENTS_CARD}}</kd-title>
   <kd-content>
-    <div class="kd-replicationcontrollerevents-options" layout="row">
+    <div class="kd-replicationcontrollerevents-options" layout="row" ng-if="::$ctrl.hasEvents()">
       <md-input-container>
         <label>{{::$ctrl.i18n.MSG_EVENTS_TYPE_LABEL}}</label>
         <md-select aria-label="Event Type" ng-model="$ctrl.eventType"
@@ -87,16 +88,9 @@
       </kd-resource-card-list-footer>
     </kd-resource-card-list>
 
-    <div class="kd-replicationcontrollerevents-no-events" ng-if="!$ctrl.hasEvents()">
-      <md-icon class="material-icons kd-replicationcontrollerevents-no-events-icon">
-        info_outline
-      </md-icon>
-      <div class="kd-replicationcontrollerevents-no-events-text">
-        {{::$ctrl.i18n.MSG_EVENTS_NO_EVENTS_TITLE}}
-      </div>
-      <div class="kd-replicationcontrollerevents-no-events-info">
-        {{::$ctrl.i18n.MSG_EVENTS_NO_EVENTS_USER_HELP}}
-      </div>
+    <div class="kd-zerostate-message" layout-padding ng-hide="$ctrl.hasEvents()">
+      <div class="kd-zerostate-title">{{::$ctrl.i18n.MSG_EVENTS_NO_EVENTS_TITLE}}</div>
+      <div class="kd-zerostate-text">{{::$ctrl.i18n.MSG_EVENTS_NO_EVENTS_USER_HELP}}</div>
     </div>
   </kd-content>
 </kd-content-card>

src/app/frontend/events/eventcardlist.scss

@@ -31,16 +31,6 @@ md-icon {
   }
 }
 
-.kd-replicationcontrollerevents-no-events-text {
-  color: $muted;
-  font-size: $headline-font-size-base;
-}
-
-.kd-replicationcontrollerevents-no-events-info {
-  color: $delicate;
-  font-size: $subhead-font-size-base;
-}
-
 .kd-replicationcontrollerevents-warning-icon {
   color: $warning;
 }