mirror of https://github.com/rancher/dashboard.git
136 lines
3.5 KiB
Vue
136 lines
3.5 KiB
Vue
<script>
|
|
import { colorForState, stateDisplay, stateSort } from '@/plugins/steve/resource-class';
|
|
import SortableTable from '@/components/SortableTable';
|
|
import { NAME as EXPLORER } from '@/config/product/explorer';
|
|
import { FLEET as FLEET_ANNOTATIONS } from '@/config/labels-annotations';
|
|
|
|
export default {
|
|
components: { SortableTable },
|
|
|
|
props: {
|
|
value: {
|
|
type: Object,
|
|
required: true,
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
computedResources() {
|
|
const clusters = this.value.targetClusters || [];
|
|
const resources = this.value.status?.resources || [];
|
|
const out = [];
|
|
|
|
for ( const r of resources ) {
|
|
let namespacedName = r.name;
|
|
|
|
if ( r.namespace ) {
|
|
namespacedName = `${ r.namespace }:${ r.name }`;
|
|
}
|
|
|
|
for ( const c of clusters ) {
|
|
let state = r.state;
|
|
const perEntry = r.perClusterState?.find(x => x.clusterId === c.id );
|
|
const tooMany = r.perClusterState?.length >= 10 || false;
|
|
|
|
if ( perEntry ) {
|
|
state = perEntry.state;
|
|
} else if ( tooMany ) {
|
|
state = 'Unknown';
|
|
}
|
|
|
|
const color = colorForState(state).replace('text-', 'bg-');
|
|
const display = stateDisplay(state);
|
|
|
|
const detailLocation = {
|
|
name: `c-cluster-product-resource${ r.namespace ? '-namespace' : '' }-id`,
|
|
params: {
|
|
product: EXPLORER,
|
|
cluster: c.metadata.labels[FLEET_ANNOTATIONS.CLUSTER_NAME],
|
|
resource: r.type,
|
|
namespace: r.namespace,
|
|
id: r.name,
|
|
}
|
|
};
|
|
|
|
out.push({
|
|
key: `${ r.id }-${ c.id }-${ r.type }-${ r.namespace }-${ r.name }`,
|
|
kind: r.kind,
|
|
apiVersion: r.apiVersion,
|
|
type: r.type,
|
|
id: r.id,
|
|
namespace: r.namespace,
|
|
name: r.name,
|
|
clusterId: c.id,
|
|
clusterName: c.nameDisplay,
|
|
state,
|
|
stateBackground: color,
|
|
stateDisplay: display,
|
|
stateSort: stateSort(color, display),
|
|
namespacedName,
|
|
detailLocation,
|
|
});
|
|
}
|
|
}
|
|
|
|
return out;
|
|
},
|
|
|
|
resourceHeaders() {
|
|
return [
|
|
{
|
|
name: 'state',
|
|
value: 'state',
|
|
label: 'State',
|
|
sort: 'stateSort',
|
|
formatter: 'BadgeStateFormatter',
|
|
width: 100,
|
|
},
|
|
{
|
|
name: 'cluster',
|
|
value: 'clusterName',
|
|
sort: ['clusterName', 'stateSort'],
|
|
label: 'Cluster',
|
|
},
|
|
{
|
|
name: 'apiVersion',
|
|
value: 'apiVersion',
|
|
sort: 'apiVersion',
|
|
label: 'API Version',
|
|
},
|
|
{
|
|
name: 'kind',
|
|
value: 'kind',
|
|
sort: 'kind',
|
|
label: 'Kind',
|
|
},
|
|
{
|
|
name: 'name',
|
|
value: 'name',
|
|
sort: 'name',
|
|
label: 'Name',
|
|
formatter: 'LinkDetail',
|
|
},
|
|
{
|
|
name: 'namespace',
|
|
value: 'namespace',
|
|
sort: 'namespace',
|
|
label: 'Namespace',
|
|
},
|
|
];
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<SortableTable
|
|
:rows="computedResources"
|
|
:headers="resourceHeaders"
|
|
:table-actions="false"
|
|
:row-actions="false"
|
|
key-field="key"
|
|
default-sort-by="state"
|
|
:paged="true"
|
|
/>
|
|
</template>
|