mirror of https://github.com/rancher/dashboard.git
54 lines
2.1 KiB
TypeScript
54 lines
2.1 KiB
TypeScript
import ResourceDetailDrawer from '@shell/components/Drawer/ResourceDetailDrawer/index.vue';
|
|
import { Props as YamlTabProps } from '@shell/components/Drawer/ResourceDetailDrawer/YamlTab.vue';
|
|
import { Props as ConfigTabProps } from '@shell/components/Drawer/ResourceDetailDrawer/ConfigTab.vue';
|
|
import { useStore } from 'vuex';
|
|
import { useDrawer } from '@shell/composables/drawer';
|
|
import { getYaml } from '@shell/components/Drawer/ResourceDetailDrawer/helpers';
|
|
|
|
export function useResourceDetailDrawer() {
|
|
const { open, close } = useDrawer();
|
|
|
|
const openResourceDetailDrawer = (resource: any, returnFocusSelector: string) => {
|
|
open(ResourceDetailDrawer,
|
|
returnFocusSelector,
|
|
{
|
|
resource,
|
|
onClose: close,
|
|
width: '73%',
|
|
// We want this to be full viewport height top to bottom
|
|
height: '100vh',
|
|
top: '0',
|
|
'z-index': 101, // We want this to be above the main side menu
|
|
closeOnRouteChange: ['name', 'params', 'query'] // We want to ignore hash changes, tables in extensions can trigger the drawer to close while opening
|
|
});
|
|
};
|
|
|
|
return { openResourceDetailDrawer };
|
|
}
|
|
|
|
export async function useDefaultYamlTabProps(resource: any): Promise<YamlTabProps> {
|
|
const yaml = await getYaml(resource);
|
|
|
|
return {
|
|
resource,
|
|
yaml
|
|
};
|
|
}
|
|
|
|
export function useDefaultConfigTabProps(resource: any): ConfigTabProps | undefined {
|
|
const store = useStore();
|
|
|
|
// You don't want to show the Config tab if there isn't a an edit page to show and you don't want to show it if there isn't
|
|
// a detail page because we default to showing the existing edit page if the detail page doesn't exist. Showing them again
|
|
// wouldn't be worth while.
|
|
if (!store.getters['type-map/hasCustomEdit'](resource.type) || !store.getters['type-map/hasCustomDetail'](resource.type) || resource.disableResourceDetailDrawerConfigTab) {
|
|
return;
|
|
}
|
|
|
|
return {
|
|
resource,
|
|
component: store.getters['type-map/importEdit'](resource.type),
|
|
resourceType: resource.type
|
|
};
|
|
}
|