From baa98aea84e056e8b72afdb03ad67bc0850980fa Mon Sep 17 00:00:00 2001 From: Marek Libra Date: Thu, 6 Jun 2019 10:21:09 +0200 Subject: [PATCH 1/3] Introduce VirtualMachine Details page --- .../src/components/vm-details.tsx | 164 ++++++++++++++++++ .../packages/kubevirt-plugin/src/plugin.ts | 19 +- .../packages/kubevirt-plugin/src/style.scss | 1 + .../packages/kubevirt-plugin/src/types.ts | 60 +++++++ 4 files changed, 237 insertions(+), 7 deletions(-) create mode 100644 frontend/packages/kubevirt-plugin/src/components/vm-details.tsx create mode 100644 frontend/packages/kubevirt-plugin/src/style.scss create mode 100644 frontend/packages/kubevirt-plugin/src/types.ts diff --git a/frontend/packages/kubevirt-plugin/src/components/vm-details.tsx b/frontend/packages/kubevirt-plugin/src/components/vm-details.tsx new file mode 100644 index 00000000000..02640eef63b --- /dev/null +++ b/frontend/packages/kubevirt-plugin/src/components/vm-details.tsx @@ -0,0 +1,164 @@ +import * as React from 'react'; +import * as _ from 'lodash-es'; + +import { VmDetails, getName, getNamespace, getResource, DASHES } from 'kubevirt-web-ui-components'; + +import { + ResourceLink, + navFactory, + LoadingInline, + NodeLink, + Firehose, + StatusBox, +} from '@console/internal/components/utils'; + +import { PodKind, k8sPatch, k8sGet, K8sResourceKindReference } from '@console/internal/module/k8s'; +import { PodModel, ServiceModel, NamespaceModel } from '@console/internal/models'; +import { breadcrumbsForOwnerRefs } from '@console/internal/components/utils/breadcrumbs'; +import { DetailsPage } from '@console/internal/components/factory'; + +import { VmKind, VmiKind } from '../types'; +import { VirtualMachineInstanceModel, VirtualMachineInstanceMigrationModel } from '../models'; + +// import { VmEvents } from './vm-events'; +// import VmConsolesConnected from '../vmconsoles'; +// import { Nic } from '../nic'; +// import { Disk } from '../disk'; +// import { menuActions } from './menu-actions'; + +export const VmDetailsFirehose = ({ obj: vm }: { obj: VmKind }) => { + const { name, namespace } = vm.metadata; + + const vmiRes = getResource(VirtualMachineInstanceModel, { + name, + namespace, + isList: false, + props: 'vmi', + }); + vmiRes.optional = true; + + const resources = [ + vmiRes, + getResource(PodModel, { namespace, prop: 'pods' }), + getResource(VirtualMachineInstanceMigrationModel, { namespace, prop: 'migrations' }), + getResource(ServiceModel, { namespace, prop: 'services' }), + ]; + + return ( +
+ + + +
+ ); +}; + +const podResourceLink = ({ pod }: { pod?: PodKind }) => + pod ? ( + + ) : ( + DASHES + ); + +const VmDetailsConnected = (props: VmDetailsProps) => { + const { vm } = props; + + const namespaceResourceLink = () => ( + + ); + + return ( + + + + ); +}; + +/* TODO(mlibra): pages will be transferred one by one in follow-ups +const VmDisk = ({obj: vm}) => ; +const VmNic = ({obj: vm}) => ; +*/ + +export const VirtualMachinesDetailsPage = (props: VirtualMachinesDetailsPageProps) => { + const { name, namespace } = props; + /* TODO(mlibra): pages will be transferred one by one in follow-ups + const consolePage = { + href: 'consoles', + name: 'Consoles', + component: VmConsolesConnected, + }; + + const nicsPage = { + href: 'nics', + name: 'Network Interfaces', + component: VmNic, + }; + + const disksPage = { + href: 'disks', + name: 'Disks', + component: VmDisk, + }; + */ + const pages = [ + navFactory.details(VmDetailsFirehose), + navFactory.editYaml(), + // consolePage, + // navFactory.events(VmEvents), + // nicsPage, + // disksPage, + ]; + + const breadcrumbsFor = (obj) => + breadcrumbsForOwnerRefs(obj).concat({ + name: 'Virtual Machine Details', + path: props.match.url, + }); + + return ( + + ); +}; + +type VirtualMachinesDetailsPageProps = { + name: string; + namespace: string; + kind: K8sResourceKindReference; + match: any; +}; + +type VmDetailsProps = { + vm: VmKind; + pods?: PodKind[]; + migrations?: any[]; + vmi?: VmiKind; +}; diff --git a/frontend/packages/kubevirt-plugin/src/plugin.ts b/frontend/packages/kubevirt-plugin/src/plugin.ts index 2d47bea2663..e6ff44c91c3 100644 --- a/frontend/packages/kubevirt-plugin/src/plugin.ts +++ b/frontend/packages/kubevirt-plugin/src/plugin.ts @@ -12,6 +12,8 @@ import { import * as models from './models'; import { yamlTemplates } from './yaml-templates'; +import './style.scss'; + type ConsumedExtensions = | ResourceNSNavItem | ResourceListPage @@ -65,13 +67,16 @@ const plugin: Plugin = [ template: yamlTemplates.getIn([models.VirtualMachineModel, 'default']), }, }, - // { - // type: 'Page/Resource/Details', - // properties: { - // model: VirtualMachineModel, - // loader: () => import('./components/vm-detail' /* webpackChunkName: "kubevirt-virtual-machines" */).then(m => m.VirtualMachinesDetailsPage), - // }, - // }, + { + type: 'Page/Resource/Details', + properties: { + model: models.VirtualMachineModel, + loader: () => + import('./components/vm-details' /* webpackChunkName: "kubevirt-virtual-machines" */).then( + (m) => m.VirtualMachinesDetailsPage, + ), + }, + }, ]; export default plugin; diff --git a/frontend/packages/kubevirt-plugin/src/style.scss b/frontend/packages/kubevirt-plugin/src/style.scss new file mode 100644 index 00000000000..559dc1db2f1 --- /dev/null +++ b/frontend/packages/kubevirt-plugin/src/style.scss @@ -0,0 +1 @@ +@import '~kubevirt-web-ui-components/dist/sass/components'; diff --git a/frontend/packages/kubevirt-plugin/src/types.ts b/frontend/packages/kubevirt-plugin/src/types.ts new file mode 100644 index 00000000000..6c8d62de934 --- /dev/null +++ b/frontend/packages/kubevirt-plugin/src/types.ts @@ -0,0 +1,60 @@ +import { K8sResourceKind, ObjectMetadata } from '@console/internal/module/k8s'; + +// https://kubevirt.io/api-reference/master/definitions.html#_v1_virtualmachineinstancespec +export type VmiSpec = { + affinity: any; + dnsConfig: any; + dnsPolicy: string; + domain?: any; + evictionStrategy: any; + hostname: string; + livenessProbe: any; + networks?: any[]; + nodeSelector: any; + readinessProbe: any; + subdomain: string; + terminationGracePeriodSeconds: number; + tolerations: any[]; + volumes?: any[]; +}; + +// https://kubevirt.io/api-reference/master/definitions.html#_v1_virtualmachineinstancestatus +export type VmiStatus = { + conditions: any[]; + interfaces: any[]; + migrationMethod: string; + migrationState: any; + nodeName: string; + phase: string; + reason: string; +}; + +export type VmiKind = { + spec: VmiSpec; + status: VmiStatus; +} & K8sResourceKind; + +export type VmiTemplate = { + metadata?: ObjectMetadata; + spec?: VmiSpec; +}; + +export type VmSpec = { + template: VmiTemplate; + running?: boolean; + runStrategy?: any; + dataVolumeTemplates?: any[]; +}; + +export type VmStatus = { + conditions?: any[]; + created?: boolean; + ready?: boolean; + stateChangeRequests?: any[]; +}; + +// https://kubevirt.io/api-reference/master/definitions.html#_v1_virtualmachine +export type VmKind = { + spec: VmSpec; + status: VmStatus; +} & K8sResourceKind; From b5a1f6bbfed6d8953f5d9fa60256348781e09177 Mon Sep 17 00:00:00 2001 From: Marek Libra Date: Mon, 17 Jun 2019 10:41:35 +0200 Subject: [PATCH 2/3] VmDetail: redesign to use ResourceSummary --- .../src/components/vm-details.tsx | 164 ------------------ .../src/{ => components/vms}/types.ts | 26 +-- .../src/components/vms/vm-details.tsx | 136 +++++++++++++++ .../src/components/vms/vm-resource.tsx | 98 +++++++++++ .../src/components/{ => vms}/vm.tsx | 2 +- .../packages/kubevirt-plugin/src/plugin.ts | 8 +- 6 files changed, 252 insertions(+), 182 deletions(-) delete mode 100644 frontend/packages/kubevirt-plugin/src/components/vm-details.tsx rename frontend/packages/kubevirt-plugin/src/{ => components/vms}/types.ts (78%) create mode 100644 frontend/packages/kubevirt-plugin/src/components/vms/vm-details.tsx create mode 100644 frontend/packages/kubevirt-plugin/src/components/vms/vm-resource.tsx rename frontend/packages/kubevirt-plugin/src/components/{ => vms}/vm.tsx (99%) diff --git a/frontend/packages/kubevirt-plugin/src/components/vm-details.tsx b/frontend/packages/kubevirt-plugin/src/components/vm-details.tsx deleted file mode 100644 index 02640eef63b..00000000000 --- a/frontend/packages/kubevirt-plugin/src/components/vm-details.tsx +++ /dev/null @@ -1,164 +0,0 @@ -import * as React from 'react'; -import * as _ from 'lodash-es'; - -import { VmDetails, getName, getNamespace, getResource, DASHES } from 'kubevirt-web-ui-components'; - -import { - ResourceLink, - navFactory, - LoadingInline, - NodeLink, - Firehose, - StatusBox, -} from '@console/internal/components/utils'; - -import { PodKind, k8sPatch, k8sGet, K8sResourceKindReference } from '@console/internal/module/k8s'; -import { PodModel, ServiceModel, NamespaceModel } from '@console/internal/models'; -import { breadcrumbsForOwnerRefs } from '@console/internal/components/utils/breadcrumbs'; -import { DetailsPage } from '@console/internal/components/factory'; - -import { VmKind, VmiKind } from '../types'; -import { VirtualMachineInstanceModel, VirtualMachineInstanceMigrationModel } from '../models'; - -// import { VmEvents } from './vm-events'; -// import VmConsolesConnected from '../vmconsoles'; -// import { Nic } from '../nic'; -// import { Disk } from '../disk'; -// import { menuActions } from './menu-actions'; - -export const VmDetailsFirehose = ({ obj: vm }: { obj: VmKind }) => { - const { name, namespace } = vm.metadata; - - const vmiRes = getResource(VirtualMachineInstanceModel, { - name, - namespace, - isList: false, - props: 'vmi', - }); - vmiRes.optional = true; - - const resources = [ - vmiRes, - getResource(PodModel, { namespace, prop: 'pods' }), - getResource(VirtualMachineInstanceMigrationModel, { namespace, prop: 'migrations' }), - getResource(ServiceModel, { namespace, prop: 'services' }), - ]; - - return ( -
- - - -
- ); -}; - -const podResourceLink = ({ pod }: { pod?: PodKind }) => - pod ? ( - - ) : ( - DASHES - ); - -const VmDetailsConnected = (props: VmDetailsProps) => { - const { vm } = props; - - const namespaceResourceLink = () => ( - - ); - - return ( - - - - ); -}; - -/* TODO(mlibra): pages will be transferred one by one in follow-ups -const VmDisk = ({obj: vm}) => ; -const VmNic = ({obj: vm}) => ; -*/ - -export const VirtualMachinesDetailsPage = (props: VirtualMachinesDetailsPageProps) => { - const { name, namespace } = props; - /* TODO(mlibra): pages will be transferred one by one in follow-ups - const consolePage = { - href: 'consoles', - name: 'Consoles', - component: VmConsolesConnected, - }; - - const nicsPage = { - href: 'nics', - name: 'Network Interfaces', - component: VmNic, - }; - - const disksPage = { - href: 'disks', - name: 'Disks', - component: VmDisk, - }; - */ - const pages = [ - navFactory.details(VmDetailsFirehose), - navFactory.editYaml(), - // consolePage, - // navFactory.events(VmEvents), - // nicsPage, - // disksPage, - ]; - - const breadcrumbsFor = (obj) => - breadcrumbsForOwnerRefs(obj).concat({ - name: 'Virtual Machine Details', - path: props.match.url, - }); - - return ( - - ); -}; - -type VirtualMachinesDetailsPageProps = { - name: string; - namespace: string; - kind: K8sResourceKindReference; - match: any; -}; - -type VmDetailsProps = { - vm: VmKind; - pods?: PodKind[]; - migrations?: any[]; - vmi?: VmiKind; -}; diff --git a/frontend/packages/kubevirt-plugin/src/types.ts b/frontend/packages/kubevirt-plugin/src/components/vms/types.ts similarity index 78% rename from frontend/packages/kubevirt-plugin/src/types.ts rename to frontend/packages/kubevirt-plugin/src/components/vms/types.ts index 6c8d62de934..49e6cba4201 100644 --- a/frontend/packages/kubevirt-plugin/src/types.ts +++ b/frontend/packages/kubevirt-plugin/src/components/vms/types.ts @@ -1,7 +1,7 @@ import { K8sResourceKind, ObjectMetadata } from '@console/internal/module/k8s'; // https://kubevirt.io/api-reference/master/definitions.html#_v1_virtualmachineinstancespec -export type VmiSpec = { +export type VMISpec = { affinity: any; dnsConfig: any; dnsPolicy: string; @@ -19,7 +19,7 @@ export type VmiSpec = { }; // https://kubevirt.io/api-reference/master/definitions.html#_v1_virtualmachineinstancestatus -export type VmiStatus = { +export type VMIStatus = { conditions: any[]; interfaces: any[]; migrationMethod: string; @@ -29,24 +29,24 @@ export type VmiStatus = { reason: string; }; -export type VmiKind = { - spec: VmiSpec; - status: VmiStatus; +export type VMIKind = { + spec: VMISpec; + status: VMIStatus; } & K8sResourceKind; -export type VmiTemplate = { +export type VMITemplate = { metadata?: ObjectMetadata; - spec?: VmiSpec; + spec?: VMISpec; }; -export type VmSpec = { - template: VmiTemplate; +export type VMSpec = { + template: VMITemplate; running?: boolean; runStrategy?: any; dataVolumeTemplates?: any[]; }; -export type VmStatus = { +export type VMStatus = { conditions?: any[]; created?: boolean; ready?: boolean; @@ -54,7 +54,7 @@ export type VmStatus = { }; // https://kubevirt.io/api-reference/master/definitions.html#_v1_virtualmachine -export type VmKind = { - spec: VmSpec; - status: VmStatus; +export type VMKind = { + spec: VMSpec; + status: VMStatus; } & K8sResourceKind; diff --git a/frontend/packages/kubevirt-plugin/src/components/vms/vm-details.tsx b/frontend/packages/kubevirt-plugin/src/components/vms/vm-details.tsx new file mode 100644 index 00000000000..a5fd4f8054c --- /dev/null +++ b/frontend/packages/kubevirt-plugin/src/components/vms/vm-details.tsx @@ -0,0 +1,136 @@ +import * as React from 'react'; +import * as _ from 'lodash-es'; + +import { getResource, getServicesForVm } from 'kubevirt-web-ui-components'; + +import { + navFactory, + Firehose, + StatusBox, + ScrollToTopOnMount, + SectionHeading, +} from '@console/internal/components/utils'; + +import { PodKind, K8sResourceKindReference } from '@console/internal/module/k8s'; +import { PodModel, ServiceModel } from '@console/internal/models'; +import { DetailsPage } from '@console/internal/components/factory'; + +import { ServicesList } from '@console/internal/components/service'; +import { VMKind, VMIKind } from './types'; +import { VirtualMachineInstanceModel, VirtualMachineInstanceMigrationModel } from '../../models'; +import { VMResourceSummary, VMDetailsList } from './vm-resource'; + +// import { VmEvents } from './vm-events'; +// import VmConsolesConnected from '../vmconsoles'; +// import { Nic } from '../nic'; +// import { Disk } from '../disk'; +// import { menuActions } from './menu-actions'; + +const VMDetailsFirehose = ({ obj: vm }: { obj: VMKind }) => { + const { name, namespace } = vm.metadata; + + const vmiRes = getResource(VirtualMachineInstanceModel, { + name, + namespace, + isList: false, + prop: 'vmi', + optional: true, + }); + + const resources = [ + vmiRes, + getResource(PodModel, { namespace, prop: 'pods' }), + getResource(VirtualMachineInstanceMigrationModel, { namespace, prop: 'migrations' }), + getResource(ServiceModel, { namespace, prop: 'services' }), + ]; + + return ( +
+ + + +
+ ); +}; + +const VMDetails = (props: VMDetailsProps) => { + const { vm, ...restProps } = props; + const flatResources = { + vm, + vmi: _.get(props, 'vmi.data'), + pods: _.get(props, 'pods.data'), + migrations: _.get(props, 'migrations.data'), + }; + + const vmServicesData = getServicesForVm(_.get(props, 'services', {}).data, vm); + + return ( + + +
+ +
+
+ +
+
+ +
+
+
+
+ + +
+ + ); +}; + +export const VirtualMachinesDetailsPage = (props: VirtualMachinesDetailsPageProps) => { + /* TODO(mlibra): pages will be transferred one by one in follow-ups + const consolePage = { + href: 'consoles', + name: 'Consoles', + component: VmConsolesConnected, + }; + + const nicsPage = { + href: 'nics', + name: 'Network Interfaces', + component: VmNic, + }; + + const disksPage = { + href: 'disks', + name: 'Disks', + component: VmDisk, + }; + */ + + const pages = [ + navFactory.details(VMDetailsFirehose), + navFactory.editYaml(), + // consolePage, + // navFactory.events(VmEvents), + // nicsPage, + // disksPage, + ]; + + const menuActions = undefined; // TODO(mlibra): menuActions + + return ; +}; + +type VirtualMachinesDetailsPageProps = { + name: string; + namespace: string; + kind: K8sResourceKindReference; + match: any; +}; + +type VMDetailsProps = { + vm: VMKind; + pods?: PodKind[]; + migrations?: any[]; + vmi?: VMIKind; +}; diff --git a/frontend/packages/kubevirt-plugin/src/components/vms/vm-resource.tsx b/frontend/packages/kubevirt-plugin/src/components/vms/vm-resource.tsx new file mode 100644 index 00000000000..02660e0d614 --- /dev/null +++ b/frontend/packages/kubevirt-plugin/src/components/vms/vm-resource.tsx @@ -0,0 +1,98 @@ +import * as React from 'react'; + +import { + getDescription, + getOperatingSystemName, + getOperatingSystem, + getVmStatus, + getVmiIpAddresses, + getWorkloadProfile, + getVmTemplate, + getTemplateDisplayName, + getNodeName, + getFlavor, + VmStatuses, + BootOrder, + isVmOff, + getBootableDevicesInOrder, +} from 'kubevirt-web-ui-components'; + +import { ResourceSummary, NodeLink, ResourceLink } from '@console/internal/components/utils'; +import { PodKind } from '@console/internal/module/k8s'; +import { getName, getNamespace, DASH } from '@console/shared'; +import { PodModel } from '@console/internal/models'; + +import { VMKind, VMIKind } from './types'; + +export const VMResourceSummary = ({ vm }: VMResourceSummaryProps) => { + const template = getVmTemplate(vm); + const templateLink = template && getTemplateDisplayName(template); // TODO(mlibra): link to a template detail, once implemented + + return ( + +
Description
+
{getDescription(vm)}
+
Operating System
+
{getOperatingSystemName(vm) || getOperatingSystem(vm) || DASH}
+
Template
+
{templateLink || DASH}
+ + ); +}; + +export const VMDetailsList = ({ vm, vmi, pods, migrations }: VMResourceListProps) => { + const vmStatus = getVmStatus(vm, pods, migrations); + const { launcherPod } = vmStatus; + const sortedBootableDevices = getBootableDevicesInOrder(vm); + const nodeName = getNodeName(launcherPod); + const vmIsOff = isVmOff(vmStatus); + const ipAddresses = vmIsOff ? [] : getVmiIpAddresses(vmi); + + return ( +
+
Status
+
+ +
+
Pod
+
+ {launcherPod ? ( + + ) : ( + DASH + )} +
+
Boot Order
+
+ {sortedBootableDevices.length > 0 ? ( + + ) : ( + DASH + )} +
+
IP Address
+
{ipAddresses.length > 0 ? ipAddresses.join(', ') : DASH}
+
Node
+
{}
+
Flavour
+
{getFlavor(vm) || DASH}
+
Workload Profile
+
{getWorkloadProfile(vm) || DASH}
+
+ ); +}; + +type VMResourceSummaryProps = { + vm: VMKind; +}; + +type VMResourceListProps = { + vm: VMKind; + pods?: PodKind[]; + migrations?: any[]; + vmi?: VMIKind; +}; diff --git a/frontend/packages/kubevirt-plugin/src/components/vm.tsx b/frontend/packages/kubevirt-plugin/src/components/vms/vm.tsx similarity index 99% rename from frontend/packages/kubevirt-plugin/src/components/vm.tsx rename to frontend/packages/kubevirt-plugin/src/components/vms/vm.tsx index 1aeb6d84990..7c227e7968a 100644 --- a/frontend/packages/kubevirt-plugin/src/components/vm.tsx +++ b/frontend/packages/kubevirt-plugin/src/components/vms/vm.tsx @@ -26,7 +26,7 @@ import { VirtualMachineModel, // VirtualMachineInstanceModel, // VirtualMachineInstanceMigrationModel, -} from '../models'; +} from '../../models'; // import { openCreateVmWizard } from '../modals/create-vm-modal'; // import { menuActions } from './menu-actions'; diff --git a/frontend/packages/kubevirt-plugin/src/plugin.ts b/frontend/packages/kubevirt-plugin/src/plugin.ts index e6ff44c91c3..e8e6dd95bb6 100644 --- a/frontend/packages/kubevirt-plugin/src/plugin.ts +++ b/frontend/packages/kubevirt-plugin/src/plugin.ts @@ -55,7 +55,7 @@ const plugin: Plugin = [ properties: { model: models.VirtualMachineModel, loader: () => - import('./components/vm' /* webpackChunkName: "kubevirt-virtual-machines" */).then( + import('./components/vms/vm' /* webpackChunkName: "kubevirt-virtual-machines" */).then( (m) => m.VirtualMachinesPage, ), }, @@ -72,9 +72,9 @@ const plugin: Plugin = [ properties: { model: models.VirtualMachineModel, loader: () => - import('./components/vm-details' /* webpackChunkName: "kubevirt-virtual-machines" */).then( - (m) => m.VirtualMachinesDetailsPage, - ), + import( + './components/vms/vm-details' /* webpackChunkName: "kubevirt-virtual-machine-details" */ + ).then((m) => m.VirtualMachinesDetailsPage), }, }, ]; From aadc02d541dff553fe82f47297e63769bf9b2132 Mon Sep 17 00:00:00 2001 From: Marek Libra Date: Wed, 19 Jun 2019 09:14:41 +0200 Subject: [PATCH 3/3] Refactor: split VMDetails to separate file --- .../src/components/vms/vm-details-page.tsx | 56 +++++++++++++++++++ .../src/components/vms/vm-details.tsx | 56 +------------------ .../packages/kubevirt-plugin/src/plugin.ts | 2 +- 3 files changed, 60 insertions(+), 54 deletions(-) create mode 100644 frontend/packages/kubevirt-plugin/src/components/vms/vm-details-page.tsx diff --git a/frontend/packages/kubevirt-plugin/src/components/vms/vm-details-page.tsx b/frontend/packages/kubevirt-plugin/src/components/vms/vm-details-page.tsx new file mode 100644 index 00000000000..be61269f584 --- /dev/null +++ b/frontend/packages/kubevirt-plugin/src/components/vms/vm-details-page.tsx @@ -0,0 +1,56 @@ +import * as React from 'react'; + +import { navFactory } from '@console/internal/components/utils'; + +import { DetailsPage } from '@console/internal/components/factory'; +import { K8sResourceKindReference } from '@console/internal/module/k8s'; + +import { VMDetailsFirehose } from './vm-details'; + +// import { VmEvents } from './vm-events'; +// import VmConsolesConnected from '../vmconsoles'; +// import { Nic } from '../nic'; +// import { Disk } from '../disk'; +// import { menuActions } from './menu-actions'; + +export const VirtualMachinesDetailsPage = (props: VirtualMachinesDetailsPageProps) => { + /* TODO(mlibra): pages will be transferred one by one in follow-ups + const consolePage = { + href: 'consoles', + name: 'Consoles', + component: VmConsolesConnected, + }; + + const nicsPage = { + href: 'nics', + name: 'Network Interfaces', + component: VmNic, + }; + + const disksPage = { + href: 'disks', + name: 'Disks', + component: VmDisk, + }; + */ + + const pages = [ + navFactory.details(VMDetailsFirehose), + navFactory.editYaml(), + // consolePage, + // navFactory.events(VmEvents), + // nicsPage, + // disksPage, + ]; + + const menuActions = undefined; // TODO(mlibra): menuActions + + return ; +}; + +type VirtualMachinesDetailsPageProps = { + name: string; + namespace: string; + kind: K8sResourceKindReference; + match: any; +}; diff --git a/frontend/packages/kubevirt-plugin/src/components/vms/vm-details.tsx b/frontend/packages/kubevirt-plugin/src/components/vms/vm-details.tsx index a5fd4f8054c..2e8c87ee079 100644 --- a/frontend/packages/kubevirt-plugin/src/components/vms/vm-details.tsx +++ b/frontend/packages/kubevirt-plugin/src/components/vms/vm-details.tsx @@ -1,32 +1,24 @@ import * as React from 'react'; -import * as _ from 'lodash-es'; +import * as _ from 'lodash'; import { getResource, getServicesForVm } from 'kubevirt-web-ui-components'; import { - navFactory, Firehose, StatusBox, ScrollToTopOnMount, SectionHeading, } from '@console/internal/components/utils'; -import { PodKind, K8sResourceKindReference } from '@console/internal/module/k8s'; +import { PodKind } from '@console/internal/module/k8s'; import { PodModel, ServiceModel } from '@console/internal/models'; -import { DetailsPage } from '@console/internal/components/factory'; import { ServicesList } from '@console/internal/components/service'; import { VMKind, VMIKind } from './types'; import { VirtualMachineInstanceModel, VirtualMachineInstanceMigrationModel } from '../../models'; import { VMResourceSummary, VMDetailsList } from './vm-resource'; -// import { VmEvents } from './vm-events'; -// import VmConsolesConnected from '../vmconsoles'; -// import { Nic } from '../nic'; -// import { Disk } from '../disk'; -// import { menuActions } from './menu-actions'; - -const VMDetailsFirehose = ({ obj: vm }: { obj: VMKind }) => { +export const VMDetailsFirehose = ({ obj: vm }: { obj: VMKind }) => { const { name, namespace } = vm.metadata; const vmiRes = getResource(VirtualMachineInstanceModel, { @@ -86,48 +78,6 @@ const VMDetails = (props: VMDetailsProps) => { ); }; -export const VirtualMachinesDetailsPage = (props: VirtualMachinesDetailsPageProps) => { - /* TODO(mlibra): pages will be transferred one by one in follow-ups - const consolePage = { - href: 'consoles', - name: 'Consoles', - component: VmConsolesConnected, - }; - - const nicsPage = { - href: 'nics', - name: 'Network Interfaces', - component: VmNic, - }; - - const disksPage = { - href: 'disks', - name: 'Disks', - component: VmDisk, - }; - */ - - const pages = [ - navFactory.details(VMDetailsFirehose), - navFactory.editYaml(), - // consolePage, - // navFactory.events(VmEvents), - // nicsPage, - // disksPage, - ]; - - const menuActions = undefined; // TODO(mlibra): menuActions - - return ; -}; - -type VirtualMachinesDetailsPageProps = { - name: string; - namespace: string; - kind: K8sResourceKindReference; - match: any; -}; - type VMDetailsProps = { vm: VMKind; pods?: PodKind[]; diff --git a/frontend/packages/kubevirt-plugin/src/plugin.ts b/frontend/packages/kubevirt-plugin/src/plugin.ts index e8e6dd95bb6..baefbe7795d 100644 --- a/frontend/packages/kubevirt-plugin/src/plugin.ts +++ b/frontend/packages/kubevirt-plugin/src/plugin.ts @@ -73,7 +73,7 @@ const plugin: Plugin = [ model: models.VirtualMachineModel, loader: () => import( - './components/vms/vm-details' /* webpackChunkName: "kubevirt-virtual-machine-details" */ + './components/vms/vm-details-page' /* webpackChunkName: "kubevirt-virtual-machine-details" */ ).then((m) => m.VirtualMachinesDetailsPage), }, },