mirror of https://github.com/rancher/dashboard.git
88 lines
3.7 KiB
Vue
88 lines
3.7 KiB
Vue
<script lang="ts" setup>
|
|
import { useRoute } from 'vue-router';
|
|
import { computed, defineAsyncComponent } from 'vue';
|
|
|
|
import { MODE, _VIEW } from '@shell/config/query-params';
|
|
import Legacy from '@shell/components/ResourceDetail/legacy.vue';
|
|
import Loading from '@shell/components/Loading.vue';
|
|
import { useIsNewDetailPageEnabled } from '@shell/composables/useIsNewDetailPageEnabled';
|
|
import { VIRTUAL_TYPES } from '@shell/config/types';
|
|
|
|
export interface Props {
|
|
flexContent?: boolean;
|
|
componentTestId?: string;
|
|
storeOverride?: string;
|
|
resourceOverride?: string;
|
|
parentRouteOverride?: string;
|
|
errorsMap?: any;
|
|
}
|
|
|
|
// Ideally I'd prefer to have separate routes/pages for each of these but our app makes a
|
|
// fair amount of assumptions around having one detail page for each resource and that the
|
|
// detail, config, edit, yaml, create pages are all derived from the same page.
|
|
//
|
|
// I could also dynamically check for and import these pages but I wanted this to be easier
|
|
// to be explicit and easier to search for.
|
|
const resourceToPage: any = {
|
|
// 'apps.daemonset': defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/apps.daemonset.vue')),
|
|
// 'apps.deployment': defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/apps.deployment.vue')),
|
|
// 'apps.statefulset': defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/apps.statefulset.vue')),
|
|
// 'batch.cronjob': defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/batch.cronjob.vue')),
|
|
// 'batch.job': defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/batch.job.vue')),
|
|
configmap: defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/configmap.vue')),
|
|
// namespace: defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/namespace.vue')),
|
|
// node: defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/node.vue')),
|
|
// pod: defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/pod.vue')),
|
|
secret: defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/secret.vue')),
|
|
[VIRTUAL_TYPES.PROJECT_SECRETS]: defineAsyncComponent(() => import('@shell/pages/explorer/resource/detail/projectsecret.vue')),
|
|
};
|
|
|
|
defineOptions({ inheritAttrs: false });
|
|
|
|
const route = useRoute();
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
flexContent: false,
|
|
componentTestId: 'resource-details',
|
|
storeOverride: undefined,
|
|
resourceOverride: undefined,
|
|
parentRouteOverride: undefined,
|
|
errorsMap: undefined
|
|
});
|
|
|
|
const currentResourceName = computed(() => {
|
|
const resource = props.resourceOverride || route?.params?.resource;
|
|
|
|
if (!resource) {
|
|
return;
|
|
}
|
|
|
|
if (typeof resource === 'string') {
|
|
return resource;
|
|
}
|
|
|
|
// This should never occur, just satisfying the types
|
|
return resource[0];
|
|
});
|
|
const mode = computed(() => route?.query?.[MODE]);
|
|
const isView = computed(() => route?.params?.id && (!mode.value || mode.value === _VIEW));
|
|
// We're defaulting to legacy being on, we'll switch this once we want to enable the new detail page by default
|
|
const iseNewDetailPageEnabled = useIsNewDetailPageEnabled();
|
|
const page = computed(() => currentResourceName.value ? resourceToPage[currentResourceName.value] : undefined);
|
|
const useLatest = computed(() => !!(iseNewDetailPageEnabled.value && isView.value && page.value));
|
|
</script>
|
|
|
|
<template>
|
|
<Suspense v-if="useLatest">
|
|
<template #default>
|
|
<component :is="page" />
|
|
</template>
|
|
<template #fallback>
|
|
<Loading />
|
|
</template>
|
|
</Suspense>
|
|
<Legacy
|
|
v-else
|
|
v-bind="{...$attrs, ...props}"
|
|
/>
|
|
</template>
|