Remove table stripes, add border edges, fix row-actions with table-ac…

…tions=false
rancher · Sep 24, 2020 · aba3693 · aba3693
1 parent 7572823
commit aba3693
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 74 deletions.
diff --git a/components/SortableTable/index.vue b/components/SortableTable/index.vue
@@ -531,7 +531,7 @@ export default {
             <!-- The data-cant-run-bulk-action-of-interest attribute is being used instead of :class because
             because our selection.js invokes toggleClass and :class clobbers what was added by toggleClass if
             the value of :class changes. -->
-            <tr :key="get(row,keyField)" class="main-row" :data-cant-run-bulk-action-of-interest="actionOfInterest && !canRunBulkActionOfInterest(row)">
+            <tr :key="get(row,keyField)" class="main-row" :data-node-id="get(row,keyField)" :data-cant-run-bulk-action-of-interest="actionOfInterest && !canRunBulkActionOfInterest(row)">
               <td v-if="tableActions" class="row-check" align="middle">
                 <Checkbox class="selection-checkbox" :data-node-id="get(row,keyField)" :value="tableSelected.includes(row)" />
               </td>
@@ -665,6 +665,10 @@ $spacing: 10px;
 
     &.row-check {
       padding-top: 16px;
+
+      LABEL {
+        margin-right: 1px; /* to make up for the edge border */
+      }
     }
   }
 
@@ -675,25 +679,25 @@ $spacing: 10px;
 
     tr {
       border-bottom: 1px solid var(--sortable-table-top-divider);
+      background-color: var(--body-bg);
 
       &.main-row + .sub-row {
         border-bottom: 0;
       }
 
-      &:nth-of-type(even) {
-        background-color: var(--body-bg);
-      }
-
-      &.sub-row:nth-of-type(even) {
-        background-color: initial;
+      &:last-of-type {
+        border-bottom: 0;
       }
+    }
 
-      &.sub-row:nth-of-type(odd) {
-        background-color: var(--body-bg);
+    td {
+      &:first-of-type {
+        border-left: 1px solid var(--sortable-table-accent-bg);
       }
 
       &:last-of-type {
-        border-bottom: 0;
+        /* Not sure why 2 but one doesn't show up.. */
+        border-right: 2px solid var(--sortable-table-accent-bg);
       }
     }
 
@@ -715,11 +719,13 @@ $spacing: 10px;
         content: "";
         display: block;
         height: 20px;
-        background-color: var(--sortable-table-accent-bg);
+        background-color: transparent;
       }
     }
 
     tr.group-row {
+      background-color: initial;
+
       &:first-child {
         border-bottom: 0;
       }
@@ -730,6 +736,10 @@ $spacing: 10px;
 
       td {
         padding: 0;
+
+        &:first-of-type {
+          border-left: 1px solid var(--sortable-table-accent-bg);
+        }
       }
 
       .group-tab {

diff --git a/components/SortableTable/selection.js b/components/SortableTable/selection.js
@@ -132,10 +132,9 @@ export default {
         return;
       }
 
-      const check = tgtRow.find('label.selection-checkbox');
-      const nodeId = check.data('node-id');
+      const nodeId = tgtRow.data('node-id');
 
-      if ( !nodeId || !check || !check.length || check[0].disabled ) {
+      if ( !nodeId ) {
         return;
       }
 

diff --git a/components/Tabbed/index.vue b/components/Tabbed/index.vue
@@ -307,9 +307,9 @@ export default {
      outline:none;
 
       & .tab.active {
-          outline-color: var(--outline);
-          outline-style: solid;
-          outline-width: var(--outline-width);
+        outline-color: var(--outline);
+        outline-style: solid;
+        outline-width: var(--outline-width);
       }
     }
 
@@ -331,13 +331,16 @@ export default {
 
       &.active {
         background-color: var(--tabbed-container-bg);
+        // box-shadow: 0 0 20px var(--shadow);
+        // clip-path: polygon(-100% -100%, 100% -100%, 200% 100%, -100% 100%);
       }
     }
   }
 
   .tab-container {
     padding: 20px;
     background-color: var(--tabbed-container-bg);
+    // box-shadow: 0 0 20px var(--shadow);
   }
 
   .side-tabs{

diff --git a/models/cluster.js b/models/cluster.js
diff --git a/models/management.cattle.io.cluster.js b/models/management.cattle.io.cluster.js
@@ -1,3 +1,55 @@
-import Cluster from './cluster';
+import { insertAt } from '@/utils/array';
 
-export default Cluster;
+export default {
+
+  _availableActions() {
+    const out = this._standardActions;
+
+    insertAt(out, 0, {
+      action:     'openShell',
+      label:      'Kubectl Shell',
+      icon:       'icon icon-terminal',
+      enabled:    !!this.links.shell,
+    });
+
+    return out;
+  },
+
+  openShell() {
+    return () => {
+      this.$dispatch('wm/open', {
+        id:        `kubectl-${ this.id }`,
+        label:     this.$rootGetters['i18n/t']('wm.kubectlShell.title', { name: this.nameDisplay }),
+        icon:      'terminal',
+        component: 'KubectlShell',
+        attrs:     {
+          cluster: this,
+          pod:     {}
+        }
+      }, { root: true });
+    };
+  },
+
+  isReady() {
+    return this.hasCondition('Ready');
+  },
+
+  configName() {
+    const allKeys = Object.keys(this.spec);
+    const configKey = allKeys.find( kee => kee.includes('Config'));
+
+    return configKey;
+  },
+
+  kubernetesVersion() {
+    if ( this?.status?.version?.gitVersion ) {
+      return this.status.version.gitVersion;
+    } else {
+      return this.$rootGetters['i18n/t']('generic.unknown');
+    }
+  },
+
+  canDelete() {
+    return this.hasLink('remove') && !this?.spec?.internal;
+  },
+};