Skip to content

Commit

Permalink
Merge pull request #1379 from vincent99/master
Browse files Browse the repository at this point in the history
Cleanup, fleet
  • Loading branch information
vincent99 authored Sep 24, 2020
2 parents e780574 + 264aa27 commit e09fda1
Show file tree
Hide file tree
Showing 32 changed files with 568 additions and 351 deletions.
3 changes: 2 additions & 1 deletion assets/translations/en-us.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -902,6 +902,7 @@ resourceDetail:
error: This resource is currently in an error state, but there isn't a detailed message available.
transitioning: This resource is currently in a transitioning state,but there isn't a detailed message available.
namespace: Namespace
workspace: Workspace
overview: Overview
project: Project
yaml: YAML
Expand Down Expand Up @@ -1104,8 +1105,8 @@ tableHeaders:
internalExternalIp: External/Internal IP
key: Key
keys: Data
lastHeartbeatTime: Last update
lastUpdated: Last Updated
lastSeen: Last Seen
matches: Matches
message: Message
name: Name
Expand Down
139 changes: 139 additions & 0 deletions components/FleetClusters.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
<script>
import ButtonGroup from '@/components/ButtonGroup';
import SortableTable from '@/components/SortableTable';
import { removeObject } from '@/utils/array';
import { STATE, NAME, AGE } from '@/config/table-headers';
import { FLEET, MANAGEMENT } from '@/config/types';
export default {
components: { ButtonGroup, SortableTable },
props: {
rows: {
type: Array,
required: true,
},
groupable: {
type: Boolean,
default: false,
},
group: {
type: String,
default: null,
},
groupBy: {
type: String,
default: null,
},
groupOptions: {
type: Array,
default: null,
},
},
computed: {
MANAGEMENT_CLUSTER() {
return MANAGEMENT.CLUSTER;
},
headers() {
const workspace = {
name: 'workspace',
label: 'Workspace',
value: 'metadata.namespace',
sort: ['metadata.namespace', 'nameSort'],
};
const out = [
STATE,
NAME,
workspace,
{
name: 'bundlesReady',
labelKey: 'tableHeaders.bundlesReady',
value: 'status.display.readyBundles',
sort: 'status.summary.ready',
search: false,
},
{
name: 'nodesReady',
labelKey: 'tableHeaders.nodesReady',
value: 'status.display.readyBundles',
sort: 'status.summary.ready',
search: false,
},
{
name: 'lastSeen',
labelKey: 'tableHeaders.lastSeen',
value: 'status.agent.lastSeen',
sort: 'status.agent.lastSeen',
search: false,
formatter: 'LiveDate',
formatterOpts: { addSuffix: true },
width: 120,
align: 'right'
},
AGE,
];
if ( this.groupBy || !this.groupable ) {
removeObject(out, workspace);
}
return out;
},
pagingParams() {
const inStore = this.$store.getters['currentProduct'].inStore;
const schema = this.$store.getters[`${ inStore }/schemaFor`](FLEET.CLUSTER);
return {
singularLabel: this.$store.getters['type-map/labelFor'](schema),
pluralLabel: this.$store.getters['type-map/labelFor'](schema, 99),
};
},
}
};
</script>

<template>
<SortableTable
v-bind="$attrs"
:headers="headers"
:rows="rows"
:group-by="groupBy"
:paging-params="pagingParams"
key-field="_key"
v-on="$listeners"
>
<template v-if="groupable" #header-middle>
<slot name="more-header-middle" />
<ButtonGroup :value="group" :options="groupOptions" @input="$emit('set-group', $event)" />
</template>

<template #group-by="{group: thisGroup}">
<div class="group-tab" v-html="thisGroup.ref" />
</template>

<template #cell:workspace="{row}">
<span v-if="row.type !== MANAGEMENT_CLUSTER && row.metadata.namespace">{{ row.metadata.namespace }}</span>
<span v-else class="text-muted">&mdash;</span>
</template>

<template #cell:bundlesReady="{row}">
<span v-if="!row.bundleInfo" class="text-muted">&mdash;</span>
<span v-else-if="row.bundleInfo.unready" class="text-warning">{{ row.bundleInfo.ready }}/{{ row.bundleInfo.total }}</span>
<span v-else>{{ row.bundleInfo.total }}</span>
</template>

<template #cell:nodesReady="{row}">
<span v-if="!row.nodeInfo" class="text-muted">&mdash;</span>
<span v-else-if="row.nodeInfo.unready" class="text-warning">{{ row.nodeInfo.ready }}/{{ row.nodeInfo.total }}</span>
<span v-else :class="{'text-error': !row.nodeInfo.total}">{{ row.nodeInfo.total }}</span>
</template>
</SortableTable>
</template>
20 changes: 19 additions & 1 deletion components/ResourceDetail/Masthead.vue
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
<script>
import { PROJECT } from '@/config/labels-annotations';
import { NAMESPACE, MANAGEMENT } from '@/config/types';
import { FLEET, NAMESPACE, MANAGEMENT } from '@/config/types';
import ButtonGroup from '@/components/ButtonGroup';
import BadgeState from '@/components/BadgeState';
import Banner from '@/components/Banner';
import { get } from '@/utils/object';
import { NAME as FLEET_NAME } from '@/config/product/fleet';
export default {
components: {
Expand Down Expand Up @@ -88,6 +89,22 @@ export default {
return null;
},
isWorkspace() {
return this.$store.getters['productId'] === FLEET_NAME && !!this.value?.metadata?.namespace;
},
workspaceLocation() {
return {
name: 'c-cluster-product-resource-id',
params: {
cluster: this.$route.params.cluster,
product: this.$store.getters['productId'],
resource: FLEET.WORKSPACE,
id: this.$route.params.namespace
}
};
},
project() {
if (this.isNamespace) {
const id = (this.value?.metadata?.labels || {})[PROJECT];
Expand Down Expand Up @@ -167,6 +184,7 @@ export default {
<!-- //TODO use nuxt-link for an internal project detail page once it exists -->
<div v-if="mode==='view'" class="subheader">
<span v-if="isNamespace && project">{{ t("resourceDetail.masthead.project") }}: {{ project.nameDisplay }}</span>
<span v-else-if="isWorkspace">{{ t("resourceDetail.masthead.workspace") }}: <nuxt-link :to="workspaceLocation">{{ namespace }}</nuxt-link></span>
<span v-else-if="namespace">{{ t("resourceDetail.masthead.namespace") }}: <nuxt-link :to="namespaceLocation">{{ namespace }}</nuxt-link></span>
<span v-if="!parent.hideAge">{{ t("resourceDetail.masthead.age") }}: <LiveDate class="live-date" :value="get(value, 'metadata.creationTimestamp')" /></span>
</div>
Expand Down
32 changes: 21 additions & 11 deletions components/SortableTable/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -665,6 +665,10 @@ $spacing: 10px;
&.row-check {
padding-top: 16px;
LABEL {
margin-right: 1px; /* to make up for the edge border */
}
}
}
Expand All @@ -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);
}
}
Expand All @@ -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;
}
Expand All @@ -730,6 +736,10 @@ $spacing: 10px;
td {
padding: 0;
&:first-of-type {
border-left: 1px solid var(--sortable-table-accent-bg);
}
}
.group-tab {
Expand Down
5 changes: 2 additions & 3 deletions components/SortableTable/selection.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
9 changes: 6 additions & 3 deletions components/Tabbed/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
Expand All @@ -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{
Expand Down
14 changes: 9 additions & 5 deletions components/form/MatchExpressions.vue
Original file line number Diff line number Diff line change
Expand Up @@ -309,17 +309,21 @@ export default {
}
.match-expression-row, .match-expression-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: $column-gutter;
align-items: center;
&:not(.view){
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: $column-gutter;
align-items: center;
&:not(.view){
margin-bottom: 10px;
grid-template-columns: 1fr 1fr 1fr 100px;
}
INPUT {
height: 50px;
}
}
.match-expression-header{
color: var(--input-label);
margin-top: 20px;
Expand Down
6 changes: 5 additions & 1 deletion components/form/NameNsDescription.vue
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,10 @@ export default {
type: Boolean,
default: true,
},
namespaceType: {
type: String,
default: NAMESPACE,
},
namespaceLabel: {
type: String,
default: 'nameNsDescription.namespace.label',
Expand Down Expand Up @@ -147,7 +151,7 @@ export default {
namespaces() {
const inStore = this.$store.getters['currentProduct'].inStore;
const choices = this.$store.getters[`${ inStore }/all`](NAMESPACE);
const choices = this.$store.getters[`${ inStore }/all`](this.namespaceType);
const out = sortBy(choices.map((obj) => {
return {
Expand Down
6 changes: 3 additions & 3 deletions components/form/ResourceTabs/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export default {
const inStore = this.$store.getters['currentProduct'].inStore;
if ( this.$store.getters[`${ inStore }/schemaFor`](EVENT) ) {
this.hasEvents = true;
this.hasEvents = true; // @TODO be smarter about which ones actually ever have events
this.allEvents = await this.$store.dispatch(`${ inStore }/findAll`, { type: EVENT });
}
},
Expand Down Expand Up @@ -112,11 +112,11 @@ export default {
<Tabbed v-if="!isView || hasCustomTabs || hasConditions" v-bind="$attrs">
<slot />
<Tab v-if="hasConditions" :label="t('resourceTabs.tabs.conditions')" name="conditions" :weight="11">
<Tab v-if="hasConditions" :label="t('resourceTabs.tabs.conditions')" name="conditions">
<Conditions :value="value" />
</Tab>
<Tab v-if="!$fetchState.pending && hasEvents" :label="t('resourceTabs.tabs.events')" name="events" :weight="10">
<Tab v-if="!$fetchState.pending && hasEvents" :label="t('resourceTabs.tabs.events')" name="events">
<SortableTable
:rows="events"
:headers="eventHeaders"
Expand Down
Loading

0 comments on commit e09fda1

Please sign in to comment.