diff --git a/assets/styles/base/_variables.scss b/assets/styles/base/_variables.scss index 39e043e5f0..ec34622c78 100644 --- a/assets/styles/base/_variables.scss +++ b/assets/styles/base/_variables.scss @@ -41,8 +41,8 @@ $z-indexes: ( // @media only screen and (min-width: map-get($breakpoints, '--viewport-*')) { // } $breakpoints: ( - '--viewport-4': 480px, - '--viewport-7': 768px, - '--viewport-9': 992px, - '--viewport-12': 1281px, + '--viewport-4': 480px, // Phone + '--viewport-7': 768px, // Tablet + '--viewport-9': 992px, // Laptop/Desktop + '--viewport-12': 1281px, // Desktop ); diff --git a/assets/translations/en-us.yaml b/assets/translations/en-us.yaml index 08f9294cd1..efdf19a251 100644 --- a/assets/translations/en-us.yaml +++ b/assets/translations/en-us.yaml @@ -475,6 +475,10 @@ asyncButton: action: Download success: Saving waiting: Downloading… + drain: + action: Drain + success: Drained + waiting: Draining… edit: action: Save success: Saved @@ -1136,6 +1140,7 @@ cluster: cluster: Cluster Configuration etcd: etcd networking: Networking + nodePools: Node Pools machinePools: Machine Pools registry: Private Registry upgrade: Upgrade Strategy @@ -1145,6 +1150,9 @@ cluster: services: Services allServices: Rotate all service certificates selectService: Rotate an individual service + nodePool: + scaleDown: Scale Pool Down + scaleUp: Scale Pool Up clusterIndexPage: hardwareResourceGauge: @@ -1223,6 +1231,27 @@ detailText: other {+ {n, number} more chars} } +drainNode: + action: 'Drain' + actionStop: 'Stop Drain' + titleOne: Drain {name} + titleMultiple: 'Drain {count} Nodes' + deleteLocalData: Delete Empty Dir Data + force: Force + safe: + label: Safe + helpText: If a node has standalone pods or ephemeral data it will be cordoned but not drained. + gracePeriod: + title: Grace period for pods to terminate themselves + default: Honor the default from each pod + placeholder: e.g. 30 + custom: "Ignore the defaults and give each pod:" + timeout: + title: "Drain timeout" + default: Keep trying forever + placeholder: e.g. 60 + custom: "Give up after:" + etcdInfoBanner: hasLeader: "Etcd has a leader:" leaderChanges: "Number of leader changes:" @@ -2110,6 +2139,12 @@ namespaceList: addLabel: Add Namespace node: + list: + pool: Pool + nodeTaint: Taints + poolDescription: + noSize: No Size + noLocation: No Location detail: detailTop: containerRuntime: Container Runtime @@ -2888,6 +2923,8 @@ resourceTable: project: "Project: {name}" notInAWorkspace: Not in a Workspace workspace: "Workspace: {name}" + notInANodePool: "Not in a Pool" + nodePool: "Node Pool: {name} ({count})" resourceTabs: conditions: @@ -3542,6 +3579,7 @@ tableHeaders: subType: Kind success: Success summary: Summary + taints: Taints target: Target targetKind: Target Type targetPort: Target diff --git a/components/SortableTable/THead.vue b/components/SortableTable/THead.vue index b1fa52c37e..fe4a354f8f 100644 --- a/components/SortableTable/THead.vue +++ b/components/SortableTable/THead.vue @@ -132,7 +132,7 @@ export default { :key="col.name" :align="col.align || 'left'" :width="col.width" - :class="{ sortable: col.sort }" + :class="{ sortable: col.sort, [col.breakpoint]: !!col.breakpoint}" @click.prevent="changeSort($event, col)" > @@ -180,6 +180,26 @@ export default { & A { color: var(--body-text); } + + // Aligns with COLUMN_BREAKPOINTS + @media only screen and (max-width: map-get($breakpoints, '--viewport-4')) { + // HIDE column on sizes below 480px + &.tablet, &.laptop, &.desktop { + display: none; + } + } + @media only screen and (max-width: map-get($breakpoints, '--viewport-9')) { + // HIDE column on sizes below 992px + &.laptop, &.desktop { + display: none; + } + } + @media only screen and (max-width: map-get($breakpoints, '--viewport-12')) { + // HIDE column on sizes below 1281px + &.desktop { + display: none; + } + } } .icon-stack { diff --git a/components/SortableTable/index.vue b/components/SortableTable/index.vue index 7143eb5ef0..d656320ab7 100644 --- a/components/SortableTable/index.vue +++ b/components/SortableTable/index.vue @@ -13,6 +13,21 @@ import sorting from './sorting'; import paging from './paging'; import grouping from './grouping'; +export const COLUMN_BREAKPOINTS = { + /** + * Only show column if at tablet width or wider + */ + TABLET: 'tablet', + /** + * Only show column if at laptop width or wider + */ + LAPTOP: 'laptop', + /** + * Only show column if at desktop width or wider + */ + DESKTOP: 'desktop' +}; + // @TODO: // Fixed header/scrolling @@ -598,7 +613,7 @@ export default { :key="col.name" :data-title="labelFor(col)" :align="col.align || 'left'" - :class="{['col-'+dasherize(col.formatter||'')]: !!col.formatter}" + :class="{['col-'+dasherize(col.formatter||'')]: !!col.formatter, [col.breakpoint]: !!col.breakpoint}" :width="col.width" > @@ -708,6 +723,26 @@ export default { box-shadow: none; } } + + // Aligns with COLUMN_BREAKPOINTS + @media only screen and (max-width: map-get($breakpoints, '--viewport-4')) { + // HIDE column on sizes below 480px + &.tablet, &.laptop, &.desktop { + display: none; + } + } + @media only screen and (max-width: map-get($breakpoints, '--viewport-9')) { + // HIDE column on sizes below 992px + &.laptop, &.desktop { + display: none; + } + } + @media only screen and (max-width: map-get($breakpoints, '--viewport-12')) { + // HIDE column on sizes below 1281px + &.desktop { + display: none; + } + } } diff --git a/components/SortableTable/selection.js b/components/SortableTable/selection.js index 2be65acd49..4df8fc8bfe 100644 --- a/components/SortableTable/selection.js +++ b/components/SortableTable/selection.js @@ -111,7 +111,7 @@ export default { onRowMouseEnter(e) { const tr = $(e.target).closest('TR'); - if (tr.hasClass('state-description')) { + if (tr.hasClass('sub-row')) { const trMainRow = tr.prev('TR'); trMainRow.toggleClass('sub-row-hovered', true); @@ -121,7 +121,7 @@ export default { onRowMouseLeave(e) { const tr = $(e.target).closest('TR'); - if (tr.hasClass('state-description')) { + if (tr.hasClass('sub-row')) { const trMainRow = tr.prev('TR'); trMainRow.toggleClass('sub-row-hovered', false); diff --git a/components/dialog/DrainNode.vue b/components/dialog/DrainNode.vue new file mode 100644 index 0000000000..7d78bf5a79 --- /dev/null +++ b/components/dialog/DrainNode.vue @@ -0,0 +1,218 @@ + + + + diff --git a/components/form/RadioGroup.vue b/components/form/RadioGroup.vue index 7b9936aabd..f9eea92318 100644 --- a/components/form/RadioGroup.vue +++ b/components/form/RadioGroup.vue @@ -121,7 +121,7 @@ export default {