dashboard/components/ResourceDetail/Generic.vue

124 lines
2.8 KiB
Vue

<script>
/*
Fallback component to display if there is no custom detail page defined in '@/detail'
Contains tabs for:
* Conditions
* OwnerReferences
* Finalizers
* Labels
* Annotations
*/
import ResourceTabs from '@/components/form/ResourceTabs';
import Tab from '@/components/Tabbed/Tab';
import Conditions from '@/components/form/Conditions';
import ResourceYaml from '@/components/ResourceYaml';
import { get } from '@/utils/object';
export default {
components: {
ResourceTabs,
Tab,
Conditions,
ResourceYaml
},
props: {
value: {
type: Object,
default: () => {
return {};
}
},
},
data() {
return { owners: [], yaml: '' };
},
mounted() {
this.findOwners();
this.findYaml();
},
methods: {
async findOwners() {
const inStore = this.$store.getters['currentProduct'].inStore;
/*
all we have is api version, kind, and uid, but we can't query by uid :(
find all of each kind of ownerref present, then find each specific ownerref by metadata.uid
*/
for ( const kind in this.value.ownersByType) {
const schema = this.$store.getters[`${ inStore }/schema`](kind);
if (schema) {
const type = schema.id;
const allOfResourceType = await this.$store.dispatch(`${ inStore }/findAll`, { type });
this.value.ownersByType[kind].forEach((resource, idx) => {
const resourceInstance = allOfResourceType.filter(resource => resource?.metdata?.uid === resource.uid)[0];
this.owners.push(resourceInstance);
});
}
}
},
async findYaml() {
const link = this.value.hasLink('rioview') ? 'rioview' : 'view';
const yaml = (await this.value.followLink(link, { headers: { accept: 'application/yaml' } })).data;
this.yaml = yaml;
},
get
}
};
</script>
<template>
<div id="generic-container">
<div class="spacer"></div>
<div id="yaml-container">
<h2>
YAML
</h2>
<ResourceYaml v-if="yaml.length" :value="value" mode="view" :yaml="yaml" :show-footer="false" />
</div>
<div class="spacer"></div>
<ResourceTabs v-model="value" mode="view">
<template #before>
<Tab v-if="!!(value.status||{}).conditions" label="Conditions" name="conditions">
<Conditions :value="value" />
</Tab>
</template>
</ResourceTabs>
</div>
</template>
<style lang='scss'>
#generic-container {
display: flex;
flex-direction:column;
flex-grow:1;
& .resource-yaml{
flex-grow:1;
flex-basis: auto;
-ms-overflow-style: none;
overflow: scroll;
max-height: 75vh;
min-height:0px;
&::-webkit-scrollbar {
display: none;
}
}
& .code-mirror .CodeMirror{
position:relative;
height: auto;
}
}
</style>