Skip to content

Commit

Permalink
redirect-vmis-to-vm-details-page
Browse files Browse the repository at this point in the history
  • Loading branch information
yaacov committed Jan 15, 2020
1 parent 154760d commit 99a0bb4
Show file tree
Hide file tree
Showing 17 changed files with 265 additions and 98 deletions.
Expand Up @@ -17,12 +17,12 @@ import {
withDashboardResources,
DashboardItemProps,
} from '@console/internal/components/dashboard/with-dashboard-resources';
import { VMKind } from '../../../types';
import { VirtualMachineModel } from '../../../models';
import { VMLikeEntityKind } from '../../../types';
import { VirtualMachineModel, VirtualMachineInstanceModel } from '../../../models';
import { getVmEventsFilters } from '../../../selectors/event';
import { VMDashboardContext } from '../../vms/vm-dashboard-context';

const combinedVmFilter = (vm: VMKind): EventFilterFuncion => (event) =>
const combinedVmFilter = (vm: VMLikeEntityKind): EventFilterFuncion => (event) =>
getVmEventsFilters(vm).some((filter) => filter(event.involvedObject));

const getEventsResource = (namespace: string): FirehoseResource => ({
Expand Down Expand Up @@ -56,14 +56,18 @@ const RecentEvent = withDashboardResources<RecentEventProps>(
);

export const VMActivityCard: React.FC = () => {
const { vm } = React.useContext(VMDashboardContext);
const { vm, vmi } = React.useContext(VMDashboardContext);

const [paused, setPaused] = React.useState(false);
const togglePause = React.useCallback(() => setPaused(!paused), [paused]);

const name = getName(vm);
const namespace = getNamespace(vm);
const viewEventsLink = `${resourcePath(VirtualMachineModel.kind, name, namespace)}/events`;
const name = getName(vm || vmi);
const namespace = getNamespace(vm || vmi);
const viewEventsLink = `${resourcePath(
vm ? VirtualMachineModel.kind : VirtualMachineInstanceModel.kind,
name,
namespace,
)}/events`;

return (
<DashboardCard gradient>
Expand All @@ -76,7 +80,7 @@ export const VMActivityCard: React.FC = () => {
</DashboardCardHeader>
<DashboardCardBody>
<ActivityBody>
<RecentEvent vm={vm} paused={paused} setPaused={setPaused} />
<RecentEvent vm={vm || vmi} paused={paused} setPaused={setPaused} />
</ActivityBody>
</DashboardCardBody>
</DashboardCard>
Expand All @@ -86,7 +90,7 @@ export const VMActivityCard: React.FC = () => {
type EventFilterFuncion = (event: EventKind) => boolean;

type RecentEventProps = DashboardItemProps & {
vm: VMKind;
vm: VMLikeEntityKind;
paused: boolean;
setPaused: (paused: boolean) => void;
};
Expand Up @@ -2,7 +2,7 @@ import * as React from 'react';
import AlertsBody from '@console/shared/src/components/dashboard/status-card/AlertsBody';
import { StatusItem } from '@console/shared/src/components/dashboard/status-card/AlertItem';
import { BlueInfoCircleIcon } from '@console/shared/src/components/status';
import { VMIKind, VMKind } from '../../../types';
import { VMIKind } from '../../../types';
import { getVMIConditionsByType } from '../../../selectors/vmi';

// Based on: https://github.com/kubevirt/kubevirt/blob/f71e9c9615a6c36178169d66814586a93ba515b5/staging/src/kubevirt.io/client-go/api/v1/types.go#L337
Expand All @@ -14,8 +14,8 @@ const isGuestAgentInstalled = (vmi: VMIKind) => {
return conditions && conditions.length > 0 && conditions[0].status === 'True';
};

export const VMAlerts: React.FC<VMAlertsProps> = ({ vm, vmi }) => (
<AlertsBody emptyMessage="No VM messages" isLoading={!vm}>
export const VMAlerts: React.FC<VMAlertsProps> = ({ vmi, isLoading }) => (
<AlertsBody emptyMessage="No VM messages" isLoading={isLoading}>
{vmi && vmi.status && !isGuestAgentInstalled(vmi) && (
<StatusItem
Icon={BlueInfoCircleIcon}
Expand All @@ -27,6 +27,6 @@ export const VMAlerts: React.FC<VMAlertsProps> = ({ vm, vmi }) => (
);

type VMAlertsProps = {
vm?: VMKind;
vmi?: VMIKind;
isLoading?: boolean;
};
Expand Up @@ -7,15 +7,16 @@ import DashboardCardTitle from '@console/shared/src/components/dashboard/dashboa
import DashboardCardLink from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardLink';
import DetailsBody from '@console/shared/src/components/dashboard/details-card/DetailsBody';
import DetailItem from '@console/shared/src/components/dashboard/details-card/DetailItem';
import { getName, getNamespace, getUID, getCreationTimestamp, getNodeName } from '@console/shared';
import { getName, getNamespace, getUID, getCreationTimestamp } from '@console/shared';
import {
ResourceLink,
Timestamp,
NodeLink,
resourcePath,
} from '@console/internal/components/utils';
import { VMDashboardContext } from '../../vms/vm-dashboard-context';
import { isVMRunning } from '../../../selectors/vm';
import { getVMINodeName } from '../../../selectors/vmi';
import { getVmiIpAddresses } from '../../../selectors/vmi/ip-address';
import { getVMStatus } from '../../../statuses/vm/vm';
import { VirtualMachineModel } from '../../../models';
import { getVmiIpAddressesString } from '../../ip-addresses';
Expand All @@ -24,15 +25,15 @@ import { VM_DETAIL_OVERVIEW_HREF } from '../../../constants';
export const VMDetailsCard: React.FC<VMDetailsCardProps> = () => {
const vmDashboardContext = React.useContext(VMDashboardContext);
const { vm, vmi, pods, migrations } = vmDashboardContext;
const obj = vm || vmi;

const vmStatus = getVMStatus({ vm, vmi, pods, migrations });
const { launcherPod } = vmStatus;
const vmStatus = vm && getVMStatus({ vm, vmi, pods, migrations });

const ipAddrs = getVmiIpAddressesString(vmi, vmStatus);
const ipAddrs = vm ? getVmiIpAddressesString(vmi, vmStatus) : getVmiIpAddresses(vmi).join(',');

const isNodeLoading = !vm || !pods || !vmStatus;
const name = getName(vm);
const namespace = getNamespace(vm);
const isNodeLoading = !obj || !pods || !migrations;
const name = getName(obj);
const namespace = getNamespace(obj);

const viewAllLink = `${resourcePath(
VirtualMachineModel.kind,
Expand All @@ -48,26 +49,27 @@ export const VMDetailsCard: React.FC<VMDetailsCardProps> = () => {
</DashboardCardHeader>
<DashboardCardBody isLoading={false}>
<DetailsBody>
<DetailItem title="Name" error={false} isLoading={!vm} valueClassName="co-select-to-copy">
<DetailItem
title="Name"
error={false}
isLoading={!obj}
valueClassName="co-select-to-copy"
>
{name}
</DetailItem>
<DetailItem title="Namespace" error={false} isLoading={!vm}>
<ResourceLink kind="Namespace" name={namespace} title={getUID(vm)} namespace={null} />
<DetailItem title="Namespace" error={false} isLoading={!obj}>
<ResourceLink kind="Namespace" name={namespace} title={getUID(obj)} namespace={null} />
</DetailItem>
<DetailItem title="Created" error={false} isLoading={!vm}>
<Timestamp timestamp={getCreationTimestamp(vm)} />
<DetailItem title="Created" error={false} isLoading={!obj}>
<Timestamp timestamp={getCreationTimestamp(obj)} />
</DetailItem>
<DetailItem
title="Node"
error={!isNodeLoading && (!launcherPod || !isVMRunning(vm))}
isLoading={isNodeLoading}
>
{launcherPod && <NodeLink name={getNodeName(launcherPod)} />}
<DetailItem title="Node" error={!vmi} isLoading={isNodeLoading}>
<NodeLink name={getVMINodeName(vmi)} />
</DetailItem>
<DetailItem
title="IP Address"
error={!ipAddrs}
isLoading={!vm}
isLoading={!obj}
valueClassName="co-select-to-copy"
>
{ipAddrs}
Expand Down
Expand Up @@ -17,10 +17,11 @@ import { VM_DETAIL_DISKS_HREF, VM_DETAIL_NETWORKS_HREF } from '../../../constant
export const VMInventoryCard: React.FC<VMInventoryCardProps> = () => {
const vmDashboardContext = React.useContext(VMDashboardContext);
const { vm, vmi } = vmDashboardContext;
const obj = vm || vmi;

const isLoading = !vm;
const name = getName(vm);
const namespace = getNamespace(vm);
const isLoading = !obj;
const name = getName(obj);
const namespace = getNamespace(obj);

// prefer vmi over vm if available (means: is running)
const nicCount = vmi && vmi.spec ? getVMINetworks(vmi).length : getNetworks(vm).length;
Expand Down
Expand Up @@ -5,6 +5,8 @@ import DashboardCardTitle from '@console/shared/src/components/dashboard/dashboa
import DashboardCardBody from '@console/shared/src/components/dashboard/dashboard-card/DashboardCardBody';
import HealthBody from '@console/shared/src/components/dashboard/status-card/HealthBody';
import { DashboardItemProps } from '@console/internal/components/dashboard/with-dashboard-resources';
import { Status } from '@console/shared';
import { getPhase } from '@console/noobaa-storage-plugin/src/utils';
import { VMStatus } from '../../vm-status';
import { VMDashboardContext } from '../../vms/vm-dashboard-context';
import { VMAlerts } from './vm-alerts';
Expand All @@ -20,9 +22,13 @@ export const VMStatusCard: React.FC<VMStatusCardProps> = () => {
</DashboardCardHeader>
<DashboardCardBody>
<HealthBody>
<VMStatus vm={vm} vmi={vmi} pods={pods} migrations={migrations} />
{vm ? (
<VMStatus vm={vm} vmi={vmi} pods={pods} migrations={migrations} />
) : (
<Status status={getPhase(vmi)} />
)}
</HealthBody>
<VMAlerts vm={vm} vmi={vmi} />
<VMAlerts isLoading={!(vm || vmi)} vmi={vmi} />
</DashboardCardBody>
</DashboardCard>
);
Expand Down
Expand Up @@ -35,10 +35,10 @@ const humanizeCpuCores = (v) => {
export const VMUtilizationCard: React.FC = () => {
const [timestamps, setTimestamps] = React.useState<Date[]>();
const [duration, setDuration] = React.useState(metricDurations[0]);
const { vm, pods } = React.useContext(VMDashboardContext);
const vmName = getName(vm);
const namespace = getNamespace(vm);
const launcherPodName = getName(findVMPod(vm, pods));
const { vm, vmi, pods } = React.useContext(VMDashboardContext);
const vmName = getName(vm || vmi);
const namespace = getNamespace(vm || vmi);
const launcherPodName = getName(findVMPod(vm || vmi, pods));
const queries = React.useMemo(
() =>
getUtilizationQueries({
Expand Down
@@ -0,0 +1,34 @@
import * as React from 'react';
import { Firehose } from '@console/internal/components/utils';
import { VirtualMachineInstanceModel, VirtualMachineModel } from '../../models';
import { getResource } from '../../utils';
import {
VirtualMachinesDetailsPage,
VirtualMachinesDetailsPageProps,
} from '../vms/vm-details-page';

export const VMLikeDetailsPage: React.FC<VirtualMachinesDetailsPageProps> = (props) => {
const { name, ns: namespace } = props.match.params;
const resources = [
getResource(VirtualMachineModel, {
name,
namespace,
isList: false,
prop: 'vm',
optional: true,
}),
getResource(VirtualMachineInstanceModel, {
name,
namespace,
isList: false,
prop: 'vmi',
optional: true,
}),
];

return (
<Firehose resources={resources}>
<VirtualMachinesDetailsPage {...props} name={name} namespace={namespace} />
</Firehose>
);
};
@@ -0,0 +1,34 @@
import * as React from 'react';
import { Link } from 'react-router-dom';
import * as classNames from 'classnames';
import { connectToModel } from '@console/internal/kinds';
import { ResourceIcon, resourcePath } from '@console/internal/components/utils';
import { getName, getNamespace } from '@console/shared';
import { VirtualMachineInstanceModel, VirtualMachineModel } from '../../models';
import { isVM } from '../../selectors/vm';

export const VMLikeResourceLink = connectToModel(({ className, inline = false, title, obj }) => {
const name = getName(obj);
const namespace = getNamespace(obj);

const VMpath = resourcePath(VirtualMachineModel.kind, name, namespace);
const classes = classNames('co-resource-item', className, {
'co-resource-item--inline': inline,
});

return (
<span className={classes}>
<ResourceIcon
kind={isVM(obj) ? VirtualMachineModel.kind : VirtualMachineInstanceModel.kind}
/>
<Link
to={VMpath}
title={title}
className="co-resource-item__resource-name"
data-test-id={name}
>
{name}
</Link>
</span>
);
});
@@ -0,0 +1,11 @@
import * as React from 'react';
import { CreateYAML } from '@console/internal/components/create-yaml';
import { VirtualMachineModel } from '../../models';

export const VMCreateYAML = (props: any) => (
<CreateYAML
{...props as any}
kindObj={VirtualMachineModel.kind}
plural={VirtualMachineModel.plural}
/>
);
Expand Up @@ -10,17 +10,18 @@ import {
VMActivityCard,
VMUtilizationCard,
} from '../dashboards-page/vm-dashboard';
import { isVM } from '../../selectors/vm';
import { VMDashboardContext } from './vm-dashboard-context';

const mainCards = [{ Card: VMStatusCard }, { Card: VMUtilizationCard }];
const leftCards = [{ Card: VMDetailsCard }, { Card: VMInventoryCard }];
const rightCards = [{ Card: VMActivityCard }];

export const VMDashboard: React.FC<VMDashboardProps> = (props) => {
const { obj: vm, vmi, pods, migrations } = props;
const { obj, vmi, pods, migrations } = props;

const context = {
vm,
vm: isVM(obj) && obj,
vmi,
pods,
migrations,
Expand Down

0 comments on commit 99a0bb4

Please sign in to comment.