Vnc console

frontend/package.json

@@ -53,6 +53,7 @@
     ]
   },
   "dependencies": {
+    "@patternfly/react-console": "^1.4.3",
     "brace": "0.11.x",
     "classnames": "2.x",
     "core-js": "2.x",

frontend/public/kubevirt/_style.scss

@@ -1,4 +1,6 @@
-@import "components/vm";
 @import '~kubevirt-web-ui-components/dist/sass/components';
 @import '~patternfly/dist/sass/patternfly/wizard';
 @import '~patternfly/dist/sass/patternfly/forms';
+
+@import 'components/vm';
+@import 'components/vmconsoles';

frontend/public/kubevirt/components/_vmconsoles.scss

@@ -0,0 +1,9 @@
+.vnc-console .toolbar-pf-results {
+  border-top: none; /** Override PF default. Once approved, this should get into pf-react VncConsole*/
+}
+
+.vmconsoles-type {
+  /*position: absolute;
+  left: 3.5em;
+  */
+}

frontend/public/kubevirt/components/utils/resources.js

@@ -0,0 +1,47 @@
+import * as _ from 'lodash-es';
+import { getCSRFToken } from '../../../co-fetch';
+import { k8sBasePath } from '../../module/okdk8s';
+
+import { VirtualMachineInstanceModel } from '../../models';
+
+export const getResourceKind = (model, name, namespaced, namespace, isList, matchLabels, matchExpressions) => {
+  let res = { kind:model.kind, namespaced, namespace, isList, prop: model.kind};
+  if (name) {
+    res.name = name;
+  }
+  if (matchLabels) {
+    res.selector = {matchLabels};
+  }
+  if (matchExpressions) {
+    res.selector = {matchExpressions};
+  }
+  return res;
+};
+
+export const getLabelMatcher = (vm) => _.get(vm, 'spec.template.metadata.labels');
+
+export const findPod = (data, name) => data.find(p => p.metadata.name.startsWith(`virt-launcher-${name}-`));
+export const findVMI = (data, name) => data.find(vmi => vmi.metadata.name === name);
+
+export const getFlattenForKind = (kind) => {
+  return resources => _.get(resources, kind, {}).data;
+};
+
+export const isVmiRunning = (vmi) => _.get(vmi, 'status.phase') === 'Running';
+
+export const getVncConnectionDetails = vmi => {
+  // Example: ws://localhost:9000/api/kubernetes/apis/subresources.kubevirt.io/v1alpha2/namespaces/kube-system/virtualmachineinstances/vm-cirros1/vnc
+  let base = k8sBasePath;
+  base = base[0] === '/' ? base.substring(1) : base; // avpid the extra slash when compose the URL by VncConsole
+  const context = `${base}/apis/subresources.${VirtualMachineInstanceModel.apiGroup}`;
+  const apiPath = `${VirtualMachineInstanceModel.apiVersion}/namespaces/${vmi.metadata.namespace}/${VirtualMachineInstanceModel.path}/${vmi.metadata.name}`;
+  const query = `?x-csrf-token=${encodeURIComponent(getCSRFToken())}`;
+  const encrypt = window.location.protocol === 'https:';
+  // the novnc library requires protocol to be specified so the URL must be absolute - including host:port
+  return {
+    encrypt, // whether ws or wss to be used
+    host: window.location.hostname,
+    port: window.location.port || (encrypt ? '443' : '80'),
+    path: `${context}/${apiPath}/vnc${query}`
+  };
+};

frontend/public/kubevirt/components/vm.jsx

@@ -4,17 +4,17 @@ import React, { Component, Fragment } from 'react';
 import { ListHeader, ColHead, List, ListPage, ResourceRow, DetailsPage } from './factory/okdfactory';
 import { breadcrumbsForOwnerRefs, Firehose, ResourceLink, navFactory, ResourceCog, Cog } from './utils/okdutils';
 import { VirtualMachineInstanceModel, VirtualMachineModel, PodModel, NamespaceModel, TemplateModel } from '../models';
-import { k8sCreate } from '../../module/k8s';
-import actions from '../../module/k8s/k8s-actions';
+import { k8sCreate, actions } from '../module/okdk8s';
 import { connect } from 'react-redux';
 
 import { startStopVmModal } from './modals/start-stop-vm-modal';
 import { restartVmModal } from './modals/restart-vm-modal';
+import { getResourceKind, getLabelMatcher, findVMI, findPod, getFlattenForKind } from './utils/resources';
 
 import { CreateVmWizard, TEMPLATE_TYPE_LABEL } from 'kubevirt-web-ui-components/dist/js';
+import VmConsolesConnected from './vmconsoles';
 
 const dashes = '---';
-const getLabelMatcher = (vm) => _.get(vm, 'spec.template.metadata.labels');
 
 const VMHeader = props => <ListHeader>
   <ColHead {...props} className="col-lg-2 col-md-2 col-sm-2 col-xs-6" sortField="metadata.name">Name</ColHead>
@@ -88,27 +88,6 @@ const FirehoseResourceLink = props => {
   return dashes;
 };
 
-const findPod = (data, name) => data.find(p => p.metadata.name.startsWith(`virt-launcher-${name}-`));
-const findVMI = (data, name) => data.find(vmi => vmi.metadata.name === name);
-
-const getResourceKind = (model, name, namespaced, namespace, isList, matchLabels, matchExpressions) => {
-  let res = { kind:model.kind, namespaced, namespace, isList, prop: model.kind};
-  if (name) {
-    res.name = name;
-  }
-  if (matchLabels) {
-    res.selector = {matchLabels};
-  }
-  if (matchExpressions) {
-    res.selector = {matchExpressions};
-  }
-  return res;
-};
-
-const getFlattenForKind = (kind) => {
-  return resources => _.get(resources, kind, {}).data;
-};
-
 export const VMRow = ({obj: vm}) => {
   const vmResource = getResourceKind(VirtualMachineModel, vm.metadata.name, true, vm.metadata.namespace, false);
   const vmiResources = getResourceKind(VirtualMachineInstanceModel, vm.metadata.name, true, vm.metadata.namespace, true, getLabelMatcher(vm));
@@ -263,18 +242,25 @@ const Details = ({obj: vm}) => {
   </Fragment>;
 };
 
-export const VirtualMachinesDetailsPage = props => <DetailsPage
-  {...props}
-  breadcrumbsFor={obj => breadcrumbsForOwnerRefs(obj).concat({
-    name: 'Virtual Machine Details',
-    path: props.match.url,
-  })}
-  menuActions={menuActions}
-  pages={[
-    navFactory.details(Details),
-    navFactory.editYaml()
-  ]}
-/>;
+export const VirtualMachinesDetailsPage = props => {
+  const pages = [navFactory.details(Details)];
+  pages.push({ // TODO: might be moved based on review; or display conditionally if VM is running?
+    href: 'consoles',
+    name: 'Consoles',
+    component: VmConsolesConnected
+  });
+  pages.push(navFactory.editYaml());
+  return (
+    <DetailsPage
+      {...props}
+      breadcrumbsFor={obj => breadcrumbsForOwnerRefs(obj).concat({
+        name: 'Virtual Machine Details',
+        path: props.match.url,
+      })}
+      menuActions={menuActions}
+      pages={pages}
+    />);
+};
 
 const mapStateToProps = ({k8s}) => ({
   k8s

frontend/public/kubevirt/components/vmconsoles.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { VncConsole } from '@patternfly/react-console';
+
+import { getLabelMatcher, getResourceKind, getVncConnectionDetails, getFlattenForKind, findVMI, isVmiRunning } from './utils/resources';
+import { Firehose } from './utils/okdutils';
+
+import { VirtualMachineInstanceModel } from '../models';
+
+const VmIsNotRunning = () => (
+  <div className="co-m-pane__body">
+    Please start the VM prior accessing its console.
+  </div>
+);
+
+/**
+ * Once design is stabilized, this will go to pf-react's VncConsole.
+ */
+const ConsoleType = ({ type }) => (
+  <div className="vmconsoles-type">
+    <b>Console</b> {type}
+  </div>
+);
+
+/**
+ * Actual component for consoles.
+ */
+const VmConsoles = ({ vmi }) => {
+  if (!isVmiRunning(vmi)) {
+    return <VmIsNotRunning />;
+  }
+
+  const vncConDetails = getVncConnectionDetails(vmi);
+  return (
+    <div className="co-m-pane__body">
+      <ConsoleType type="VNC" />
+      <VncConsole {...vncConDetails} />
+    </div>
+  );
+};
+
+/**
+ * Helper component to keep VmConsoles dependent on VMI only.
+ */
+const FirehoseVmConsoles = props => {
+  const data = props.flatten(props.resources);
+  const vmi = props.filter(data);
+  return <VmConsoles vmi={vmi} />;
+};
+
+/**
+ * Wrapper for VmConsoles performing asynchronous loading of API resources.
+ */
+const VmConsolesConnected = ({ obj: vm }) => {
+  const vmiResources = getResourceKind(VirtualMachineInstanceModel, vm.metadata.name, true, vm.metadata.namespace, true, getLabelMatcher(vm));
+  return (
+    <Firehose resources={[vmiResources]} flatten={getFlattenForKind(VirtualMachineInstanceModel.kind)}>
+      <FirehoseVmConsoles filter={data => findVMI(data, vm.metadata.name)} />
+    </Firehose>
+  );
+};
+
+export default VmConsolesConnected;

frontend/public/kubevirt/module/okdk8s.ts

@@ -0,0 +1,3 @@
+// kubevirt uses indirect references to OKD-core
+export * from '../../module/k8s';
+export { default as actions } from '../../module/k8s/k8s-actions';