dashboard/detail/fleet.cattle.io.gitrepo.vue

114 lines
2.5 KiB
Vue

<script>
import Loading from '@/components/Loading';
import SimpleBox from '@/components/SimpleBox';
import BadgeState from '@/components/BadgeState';
import Banner from '@/components/Banner';
import SortableTable from '@/components/SortableTable';
import FleetSummary from '@/components/FleetSummary';
import { clone } from '@/utils/object';
import { colorForState } from '@/plugins/steve/resource-instance';
export default {
name: 'DetailGitRepo',
components: {
Loading,
BadgeState,
Banner,
FleetSummary,
SimpleBox,
SortableTable,
},
props: {
value: {
type: Object,
required: true,
},
},
computed: {
unready() {
let i = 1;
const out = clone(this.value.status?.summary?.nonReadyResources || []);
for ( const res of out ) {
res.stateBackground = colorForState(res.bundleState).replace('text-', 'bg-');
res.stateDisplay = res.bundleState;
for ( const stat of res.nonReadyResources || []) {
stat.id = `row${ i++ }`;
}
}
return out;
},
unreadyHeaders() {
return [
{
name: 'state',
value: 'summary.State',
label: 'State',
},
// {
// name: 'apiVersion',
// value: 'apiVersion',
// label: 'API Version',
// },
{
name: 'namespace',
value: 'namespace',
label: 'Namespace',
},
{
name: 'kind',
value: 'kind',
label: 'Resource',
},
{
name: 'name',
value: 'name',
label: 'Name',
},
];
}
},
};
</script>
<template>
<Loading v-if="$fetchState.pending" />
<div v-else>
<h2 v-t="'fleet.cluster.summary'" class="mt-20" />
<FleetSummary :value="value.status.summary" />
<hr class="mt-20 mb-20" />
<h2 v-t="'fleet.cluster.nonReady'" />
<SimpleBox v-for="(res, idx) in unready" :key="idx">
<div class="clearfix">
<h3 class="inline-block">
{{ res.name }}
</h3>
<BadgeState class="pull-right" :value="res" />
</div>
<Banner
v-if="res.message"
:color="res.stateBackground.replace(/bg-/, '')"
:label="res.message"
/>
<SortableTable
:rows="res.modifiedStatus"
:headers="unreadyHeaders"
:table-actions="false"
:row-actions="false"
:search="false"
key-field="id"
/>
</SimpleBox>
</div>
</template>