You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flink.apache.org by se...@apache.org on 2015/09/17 20:20:15 UTC

[43/51] [abbrv] flink git commit: [FLINK-2357] [web dashboard] Show plan (and optimizer properties) as a dedicated view

[FLINK-2357] [web dashboard] Show plan (and optimizer properties) as a dedicated view


Project: http://git-wip-us.apache.org/repos/asf/flink/repo
Commit: http://git-wip-us.apache.org/repos/asf/flink/commit/6a3b095e
Tree: http://git-wip-us.apache.org/repos/asf/flink/tree/6a3b095e
Diff: http://git-wip-us.apache.org/repos/asf/flink/diff/6a3b095e

Branch: refs/heads/master
Commit: 6a3b095ee686062af0933e94ded2b43f82014607
Parents: 46d8217
Author: Piotr Godek <pi...@gmail.com>
Authored: Tue Sep 1 16:18:35 2015 +0200
Committer: Stephan Ewen <se...@apache.org>
Committed: Thu Sep 17 14:21:52 2015 +0200

----------------------------------------------------------------------
 .../app/partials/jobs/job.exceptions.jade       |  2 +-
 .../app/partials/jobs/job.plan.node-list.jade   | 37 ++++++++++---
 .../app/partials/jobs/job.plan.node-tabs.jade   | 26 ++++++++-
 .../partials/jobs/job.plan.node.properties.jade |  2 +-
 .../partials/jobs/job.plan.node.subtasks.jade   | 37 +++++++------
 .../web-dashboard/app/scripts/index.coffee      | 42 ++++-----------
 .../app/scripts/modules/jobs/jobs.ctrl.coffee   | 21 ++++++--
 .../app/scripts/modules/jobs/jobs.svc.coffee    | 16 ++++++
 .../web-dashboard/app/styles/index.styl         | 33 +++++++++++-
 .../web-dashboard/app/styles/job.styl           | 27 ++++++++--
 .../web-dashboard/web/css/index.css             | 55 ++++++++++++++++++--
 flink-runtime-web/web-dashboard/web/js/index.js | 44 ++++++++++++++--
 .../web/partials/jobs/job.exceptions.html       |  2 +-
 .../web/partials/jobs/job.plan.node-list.html   | 26 ++++++---
 .../web/partials/jobs/job.plan.node-nav.html    |  0
 .../web/partials/jobs/job.plan.node-tabs.html   |  3 ++
 .../partials/jobs/job.plan.node.properties.html |  2 +-
 .../partials/jobs/job.plan.node.subtasks.html   | 31 ++++++-----
 pom.xml                                         |  8 ++-
 19 files changed, 311 insertions(+), 103 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flink/blob/6a3b095e/flink-runtime-web/web-dashboard/app/partials/jobs/job.exceptions.jade
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/app/partials/jobs/job.exceptions.jade b/flink-runtime-web/web-dashboard/app/partials/jobs/job.exceptions.jade
index 66606e6..09f5b36 100644
--- a/flink-runtime-web/web-dashboard/app/partials/jobs/job.exceptions.jade
+++ b/flink-runtime-web/web-dashboard/app/partials/jobs/job.exceptions.jade
@@ -15,7 +15,7 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 
-.panel.panel-default.panel-multi(ng-repeat="exception in exceptions['all-exceptions']" )
+.panel.panel-default.panel-multi
   .panel-heading.clearfix
     .panel-title
       | Root exception

http://git-wip-us.apache.org/repos/asf/flink/blob/6a3b095e/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node-list.jade
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node-list.jade b/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node-list.jade
index 5621336..b8a8a4c 100644
--- a/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node-list.jade
+++ b/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node-list.jade
@@ -15,9 +15,10 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 
-table.table.table-hover.table-clickable.table-activable
+table.table.table-body-hover.table-clickable.table-activable
   thead
     tr
+      th.tab-column
       th Start Time
       th End Time
       th Duration
@@ -29,15 +30,26 @@ table.table.table-hover.table-clickable.table-activable
       th Tasks
       th Status
 
-  tbody
-    //- tr(ng-repeat="v in job.vertices" ng-class="{ active: job.currentNode && v.id == job.currentNode.id }" id="vertex-row-{{v.id}}" ng-click="changeNode(v.id)")
-    tr(ng-repeat="v in job.vertices" ng-class="{ active: job.currentNode && v.id == job.currentNode.id }" id="vertex-row-{{v.id}}" ui-sref="{nodeid: v.id}")
+  //- tbody(ng-repeat="v in job.vertices" ng-class="{ active: job.currentNode && v.id == job.currentNode.id }" id="vertex-row-{{v.id}}" ui-sref="{nodeid: v.id}")
+  tbody(ng-repeat="v in job.vertices" ng-class="{ active: job.currentNode && v.id == job.currentNode.id }" ui-sref="{nodeid: v.id}")
+    tr
+      td.tab-column
+        ul.nav.nav-tabs.tabs-vertical(ng-if="job.currentNode && v.id == job.currentNode.id")
+          li(ng-class="{ active: ('single-job.plan.node.generic' | isState) }")
+            a(ng-click="gotoGeneric(v.id)" title='Basic')
+              i.fa.fa-tasks
+
+          li(ng-class="{ active: ('single-job.plan.node.accumulators' | isState) }")
+            a(ng-click="gotoAccumulators(v.id)" title='Accumulators')
+              i.fa.fa-calculator
+
       td
-        | {{ v['start-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss' }}
-        div(ui-view="node")
+        span(ng-if="v['start-time'] > -1") {{ v['start-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss' }}
+      td
+        span(ng-if="v['end-time'] > -1") {{ v['end-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss' }}
+      td
+        span(ng-if="v.duration > -1") {{ v.duration }} ms
 
-      td {{ v['end-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss' }}
-      td {{ v.duration }} ms
       td {{ v.name | humanizeTaskName }}
       td {{ v.metrics['read-bytes'] }}
       td {{ v.metrics['read-records'] }}
@@ -49,3 +61,12 @@ table.table.table-hover.table-clickable.table-activable
 
       td 
         bs-label(status="{{v.status}}") {{v.status}}
+    tr(ng-if="job.currentNode && v.id == job.currentNode.id")
+      td.tab-column
+      td(colspan="10")
+        //- a(ng-click="gotoGeneric(nodeid)") Gen!
+        //- | 
+        //- a(ng-click="gotoAccumulators(nodeid)") Acc!
+
+        div(ng-if="'single-job.plan.node.generic' | isState" ng-include=" 'partials/jobs/job.plan.node.subtasks.html' ")
+        div(ng-if="'single-job.plan.node.accumulators' | isState" ng-include=" 'partials/jobs/job.plan.node.accumulators.html' ")

http://git-wip-us.apache.org/repos/asf/flink/blob/6a3b095e/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node-tabs.jade
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node-tabs.jade b/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node-tabs.jade
index 57b7d24..cc7961c 100644
--- a/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node-tabs.jade
+++ b/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node-tabs.jade
@@ -1,10 +1,34 @@
+//
+  Licensed to the Apache Software Foundation (ASF) under one
+  or more contributor license agreements.  See the NOTICE file
+  distributed with this work for additional information
+  regarding copyright ownership.  The ASF licenses this file
+  to you 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.
+
 .panel.panel-default.panel-multi(ng-if="node")
   nav.navbar.navbar-default.navbar-secondary-additional(ng-if="job.currentNode")
     ul.nav.nav-tabs
       li(ui-sref-active='active')
         a(ui-sref=".generic({nodeid: nodeid})") Subtasks
 
+      //- li(ui-sref-active='active')
+      //-   a(ui-sref=".accumulators({nodeid: nodeid})") Accumulators
+
       li(ui-sref-active='active')
         a(ui-sref=".properties({nodeid: nodeid})") Properties
 
-  div.panel-body.clean(ui-view="node-details")
+  .panel-heading.clearfix(ng-if="'single-job.plan.node.properties' | isState")
+    .panel-title
+      | {{ node.description | humanizeTaskName }}
+
+  .panel-body.clean(ui-view="node-details")

http://git-wip-us.apache.org/repos/asf/flink/blob/6a3b095e/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node.properties.jade
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node.properties.jade b/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node.properties.jade
index 6427ab3..0f5c9b7 100644
--- a/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node.properties.jade
+++ b/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node.properties.jade
@@ -15,7 +15,7 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 
-.row(ng-if="node")
+.row
  .col-sm-6.col-md-4
    table.table.table-properties(ng-if="node.optimizer_properties.global_properties")
      thead

http://git-wip-us.apache.org/repos/asf/flink/blob/6a3b095e/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node.subtasks.jade
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node.subtasks.jade b/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node.subtasks.jade
index d20b889..6072dd0 100644
--- a/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node.subtasks.jade
+++ b/flink-runtime-web/web-dashboard/app/partials/jobs/job.plan.node.subtasks.jade
@@ -15,33 +15,40 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 
-table.table.table-hover.table-clickable
+
+table.table.table-hover.table-clickable.table-activable.table-inner
   thead
     tr
       th Start Time
       th End Time
       th Duration
-      //- th Name
       th Bytes read
       th Records read
       th Bytes written
       th Records written
-      th Tasks
+      th Attempt
+      th Host
       th Status
 
   tbody
-    tr
-      td {{ vertex['start-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss' }}
-      td {{ vertex['end-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss' }}
-      td {{ vertex.duration }} ms
-      //- td {{ vertex.name | humanizeTaskName }}
-      td {{ vertex.metrics['read-bytes'] }}
-      td {{ vertex.metrics['read-records'] }}
-      td {{ vertex.metrics['write-bytes'] }}
-      td {{ vertex.metrics['write-records'] }}
+    tr(ng-repeat="subtask in vertex.st")
+      td
+        span(ng-if="subtask['start-time'] > -1") {{ subtask['start-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss' }}
+      td
+        span(ng-if="subtask['end-time'] > -1") {{ subtask['end-time'] | amDateFormat:'YYYY-MM-DD, H:mm:ss' }}
+      td
+        span(ng-if="subtask.duration > -1") {{ subtask.duration }} ms
+
+      td
+        span(ng-if="subtask.metrics['read-bytes'] > -1") {{ subtask.metrics['read-bytes'] }}
+      td
+        span(ng-if="subtask.metrics['read-records'] > -1") {{ subtask.metrics['read-records'] }}
+      td
+        span(ng-if="subtask.metrics['write-bytes'] > -1") {{ subtask.metrics['write-bytes'] }}
       td
-        .label-group
-          bs-label(status="{{status}}" ng-repeat="(index, status) in stateList") {{vertex.tasks[status]}}
+        span(ng-if="subtask.metrics['write-records'] > -1") {{ subtask.metrics['write-records'] }}
 
+      td {{ subtask.attempt + 1 }}
+      td {{ subtask.host }}
       td 
-        bs-label(status="{{vertex.status}}") {{vertex.status}}
+        bs-label(status="{{subtask.status}}") {{subtask.status}}

http://git-wip-us.apache.org/repos/asf/flink/blob/6a3b095e/flink-runtime-web/web-dashboard/app/scripts/index.coffee
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/app/scripts/index.coffee b/flink-runtime-web/web-dashboard/app/scripts/index.coffee
index 806a2a1..3bd1dac 100644
--- a/flink-runtime-web/web-dashboard/app/scripts/index.coffee
+++ b/flink-runtime-web/web-dashboard/app/scripts/index.coffee
@@ -106,6 +106,15 @@ angular.module('flinkApp', ['ui.router', 'angularMoment'])
         controller: 'JobPlanNodeListController' 
         templateUrl: "partials/jobs/job.plan.node-list.html"
 
+  .state "single-job.plan.node.accumulators",
+    url: "/accumulators"
+    views:
+      'node-details':
+        controller: 'JobPlanNodeListAccumulatorsController' 
+        templateUrl: "partials/jobs/job.plan.node-list.html"
+        # controller: 'JobPlanNodePropertiesController'
+        # templateUrl: "partials/jobs/job.plan.node.properties.html"
+
   .state "single-job.plan.node.properties",
     url: "/properties"
     views:
@@ -113,38 +122,7 @@ angular.module('flinkApp', ['ui.router', 'angularMoment'])
         controller: 'JobPlanNodePropertiesController'
         templateUrl: "partials/jobs/job.plan.node.properties.html"
 
-  # .state "single-job.plan.node.accumulators",
-  #   url: "/accumulators"
-  #   views:
-  #     'node-contents':
-  #       controller: 'JobPlanNodeAccumulatorsController'
-  #       templateUrl: "partials/jobs/job.plan.node.accumulators.html"
-
-  # .state "single-job.plan.node",
-  #   url: "/vertex/{nodeid}"
-  #   abstract: true
-  #   views:
-  #     node:
-  #       templateUrl: "partials/jobs/job.plan.node.html"
-  #       controller: 'JobPlanNodeController'
-
-  # .state "single-job.plan.node.subtasks",
-  #   url: ""
-  #   views:
-  #     nodeTab:
-  #       templateUrl: "partials/jobs/job.plan.node.subtasks.html"
-
-  # .state "single-job.plan.node.properties",
-  #   url: "/properties"
-  #   views:
-  #     nodeTab:
-  #       templateUrl: "partials/jobs/job.plan.node.properties.html"
-
-  # .state "single-job.plan.node.accumulators",
-  #   url: "/properties"
-  #   views:
-  #     nodeTab:
-  #       templateUrl: "partials/jobs/job.plan.node.accumulators.html"
+
 
   .state "single-job.timeline",
     url: "/timeline"

http://git-wip-us.apache.org/repos/asf/flink/blob/6a3b095e/flink-runtime-web/web-dashboard/app/scripts/modules/jobs/jobs.ctrl.coffee
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/app/scripts/modules/jobs/jobs.ctrl.coffee b/flink-runtime-web/web-dashboard/app/scripts/modules/jobs/jobs.ctrl.coffee
index 127cec1..eee69f0 100644
--- a/flink-runtime-web/web-dashboard/app/scripts/modules/jobs/jobs.ctrl.coffee
+++ b/flink-runtime-web/web-dashboard/app/scripts/modules/jobs/jobs.ctrl.coffee
@@ -85,6 +85,7 @@ angular.module('flinkApp')
   console.log 'JobPlanNodeTabsController'
 
   $scope.nodeid = $stateParams.nodeid
+  $scope.stateList = JobsService.stateList()
 
   JobsService.getNode($scope.nodeid).then (data) ->
     $scope.node = data
@@ -92,11 +93,25 @@ angular.module('flinkApp')
 
 # --------------------------------------
 
-.controller 'JobPlanNodeListController', ($scope, $stateParams, JobsService) ->
+.controller 'JobPlanNodeListController', ($scope, $stateParams, JobsService, $state) ->
   console.log 'JobPlanNodeListController'
 
-  # $scope.nodeid = $stateParams.nodeid
-  $scope.stateList = JobsService.stateList()
+  $scope.gotoAccumulators = (nodeid) ->
+    $state.go('^.accumulators', { nodeid: nodeid })
+
+  JobsService.getSubtasks($stateParams.nodeid).then (data) ->
+    $scope.vertex = data
+
+# --------------------------------------
+
+.controller 'JobPlanNodeListAccumulatorsController', ($scope, $stateParams, JobsService, $state) ->
+  console.log 'JobPlanNodeListAccumulatorsController'
+
+  $scope.gotoGeneric = (nodeid) ->
+    $state.go('^.generic', { nodeid: nodeid })
+
+  # JobsService.getSubtasks($stateParams.nodeid).then (data) ->
+  #   $scope.vertex = data
 
 # --------------------------------------
 

http://git-wip-us.apache.org/repos/asf/flink/blob/6a3b095e/flink-runtime-web/web-dashboard/app/scripts/modules/jobs/jobs.svc.coffee
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/app/scripts/modules/jobs/jobs.svc.coffee b/flink-runtime-web/web-dashboard/app/scripts/modules/jobs/jobs.svc.coffee
index f1a2e95..f840c14 100644
--- a/flink-runtime-web/web-dashboard/app/scripts/modules/jobs/jobs.svc.coffee
+++ b/flink-runtime-web/web-dashboard/app/scripts/modules/jobs/jobs.svc.coffee
@@ -171,12 +171,28 @@ angular.module('flinkApp')
 
       $http.get flinkConfig.jobServer + "/jobs/" + currentJob.jid + "/vertices/" + vertexid + "/subtasktimes"
       .success (data) ->
+        # TODO: change to subtasktimes
         vertex.subtasks = data.subtasks
 
         deferred.resolve(vertex)
 
     deferred.promise
 
+  @getSubtasks = (vertexid) ->
+    deferred = $q.defer()
+
+    $q.all([deferreds.job.promise]).then (data) =>
+      vertex = @seekVertex(vertexid)
+
+      $http.get flinkConfig.jobServer + "/jobs/" + currentJob.jid + "/vertices/" + vertexid
+      .success (data) ->
+        vertex.st = data.subtasks
+
+        deferred.resolve(vertex)
+
+    deferred.promise
+
+
   @loadExceptions = ->
     deferred = $q.defer()
 

http://git-wip-us.apache.org/repos/asf/flink/blob/6a3b095e/flink-runtime-web/web-dashboard/app/styles/index.styl
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/app/styles/index.styl b/flink-runtime-web/web-dashboard/app/styles/index.styl
index 295bc47..3c146a5 100644
--- a/flink-runtime-web/web-dashboard/app/styles/index.styl
+++ b/flink-runtime-web/web-dashboard/app/styles/index.styl
@@ -122,6 +122,9 @@ sidebar-width = 250px
   &.table-clickable
     tr
       cursor: pointer
+        
+  &.table-inner
+    background-color: transparent
 
 .panel
   &.panel-dashboard
@@ -263,13 +266,41 @@ sidebar-width = 250px
   &.indicator-danger
     color: #d9534f
 
-
 pre.exception
   border: none
   background-color: transparent
   padding: 0
   margin: 0
 
+.nav-tabs
+  &.tabs-vertical
+    // float: right
+    position: absolute
+    left: 0
+    top: 0
+    border-bottom: none
+    // border-right: 1px solid #dddddd
+    z-index: 100
+    li
+      float: none
+      margin-bottom: 0
+      margin-right: -1px
+      
+      > a
+        margin-right: 0
+        border-radius(0)
+        border-bottom: none
+        border-left: 2px solid transparent
+
+      > a:hover, > a:focus
+        border-bottom: none
+        border-left: 2px solid #000000
+        
+      &.active
+        > a
+          border-bottom: none
+          border-left: 2px solid #000000
+
 @import './job'
 @import './graph'
 @import './timeline'

http://git-wip-us.apache.org/repos/asf/flink/blob/6a3b095e/flink-runtime-web/web-dashboard/app/styles/job.styl
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/app/styles/job.styl b/flink-runtime-web/web-dashboard/app/styles/job.styl
index 4259824..ef12806 100644
--- a/flink-runtime-web/web-dashboard/app/styles/job.styl
+++ b/flink-runtime-web/web-dashboard/app/styles/job.styl
@@ -39,12 +39,31 @@
       white-space: nowrap
       overflow: hidden
       text-overflow: ellipsis
+
+  &.table-body-hover
+    > tbody
+      border-top: none
+      &:hover, &.active
+        td:not(.tab-column)
+          background-color: #f0f0f0
+        td.tab-column li.active
+            background-color: #f0f0f0
       
   &.table-activable
-    tr
-      border-left: 2px solid transparent
-      &.active
-        border-left: 2px solid #000000
+    // tbody
+    //   border-left: 2px solid transparent
+    //   &.active
+    //     border-left: 2px solid #000000
+
+    th.tab-column, td.tab-column
+      border-top: none
+      width: 47px
+
+    td.tab-column
+      border-right: 1px solid #dddddd
+      
+    td
+      position: relative
 
 
 .label-group

http://git-wip-us.apache.org/repos/asf/flink/blob/6a3b095e/flink-runtime-web/web-dashboard/web/css/index.css
----------------------------------------------------------------------
diff --git a/flink-runtime-web/web-dashboard/web/css/index.css b/flink-runtime-web/web-dashboard/web/css/index.css
index eca32cd..2077b14 100644
--- a/flink-runtime-web/web-dashboard/web/css/index.css
+++ b/flink-runtime-web/web-dashboard/web/css/index.css
@@ -135,6 +135,9 @@
 .table.table-clickable tr {
   cursor: pointer;
 }
+.table.table-inner {
+  background-color: transparent;
+}
 .panel.panel-dashboard .huge {
   font-size: 28px;
 }
@@ -324,6 +327,34 @@ pre.exception {
   padding: 0;
   margin: 0;
 }
+.nav-tabs.tabs-vertical {
+  position: absolute;
+  left: 0;
+  top: 0;
+  border-bottom: none;
+  z-index: 100;
+}
+.nav-tabs.tabs-vertical li {
+  float: none;
+  margin-bottom: 0;
+  margin-right: -1px;
+}
+.nav-tabs.tabs-vertical li > a {
+  margin-right: 0;
+  -webkit-border-radius: 0;
+  border-radius: 0;
+  border-bottom: none;
+  border-left: 2px solid transparent;
+}
+.nav-tabs.tabs-vertical li > a:hover,
+.nav-tabs.tabs-vertical li > a:focus {
+  border-bottom: none;
+  border-left: 2px solid #000;
+}
+.nav-tabs.tabs-vertical li.active > a {
+  border-bottom: none;
+  border-left: 2px solid #000;
+}
 .canvas-wrapper {
   border: 1px solid #ddd;
   position: relative;
@@ -349,11 +380,27 @@ pre.exception {
   -o-text-overflow: ellipsis;
   text-overflow: ellipsis;
 }
-.table.table-activable tr {
-  border-left: 2px solid transparent;
+.table.table-body-hover > tbody {
+  border-top: none;
 }
-.table.table-activable tr.active {
-  border-left: 2px solid #000;
+.table.table-body-hover > tbody:hover td:not(.tab-column),
+.table.table-body-hover > tbody.active td:not(.tab-column) {
+  background-color: #f0f0f0;
+}
+.table.table-body-hover > tbody:hover td.tab-column li.active,
+.table.table-body-hover > tbody.active td.tab-column li.active {
+  background-color: #f0f0f0;
+}
+.table.table-activable th.tab-column,
+.table.table-activable td.tab-column {
+  border-top: none;
+  width: 47px;
+}
+.table.table-activable td.tab-column {
+  border-right: 1px solid #ddd;
+}
+.table.table-activable td {
+  position: relative;
 }
 .label-group .label {
   display: inline-block;