@@ -113,27 +114,27 @@ const NetworkColumn = ({ podMetrics }) => {
);
return (
);
};
-const PodMetrics = ({ podMetrics }) => {
+const PodMetrics = ({ idPrefix, podMetrics }) => {
return (
);
};
-const VmMetricsTab = ({podMetrics}) => {
- const content = podMetrics ? (
)
+const VmMetricsTab = ({idPrefix, podMetrics}) => {
+ const content = podMetrics ? (
)
: _("Usage metrics are available after the pod starts");
return (
-
+
{content}
);
diff --git a/pkg/kubernetes/scripts/virtual-machines/components/VmOverviewTabKubevirt.jsx b/pkg/kubernetes/scripts/virtual-machines/components/VmOverviewTabKubevirt.jsx
index ce5c0354bf44..af4e5a21b8a6 100644
--- a/pkg/kubernetes/scripts/virtual-machines/components/VmOverviewTabKubevirt.jsx
+++ b/pkg/kubernetes/scripts/virtual-machines/components/VmOverviewTabKubevirt.jsx
@@ -64,7 +64,7 @@ const PodLink = ({ pod }) => {
return (
{pod.metadata.name});
};
-const VmOverviewTabKubevirt = ({ vm, vmMessages, pod }: { vm: Vm, vmMessages: VmMessages, pod: Pod }) => {
+const VmOverviewTabKubevirt = ({ vm, vmMessages, pod, showState }: { vm: Vm, vmMessages: VmMessages, pod: Pod, showState: boolean }) => {
const idPrefix = vmIdPrefx(vm);
const message = (
);
@@ -73,12 +73,25 @@ const VmOverviewTabKubevirt = ({ vm, vmMessages, pod }: { vm: Vm, vmMessages: Vm
const nodeLink = nodeName ? (
{nodeName}) : '-';
const podLink = (
);
- const items = [
- {title: commonTitles.MEMORY, value: getMemory(vm), idPostfix: 'memory'},
- {title: _("Node:"), value: nodeLink, idPostfix: 'node'},
- {title: commonTitles.CPUS, value: _(getValueOrDefault(() => vm.spec.domain.cpu.cores, 1)), idPostfix: 'vcpus'},
- {title: _("Labels:"), value: getLabels(vm), idPostfix: 'labels'},
- {title: _("Pod:"), value: podLink, idPostfix: 'pod'},
+ const memoryItem = {title: commonTitles.MEMORY, value: getMemory(vm), idPostfix: 'memory'};
+ const vCpusItem = {title: commonTitles.CPUS, value: _(getValueOrDefault(() => vm.spec.domain.cpu.cores, 1)), idPostfix: 'vcpus'};
+ const podItem = {title: _("Pod:"), value: podLink, idPostfix: 'pod'};
+ const nodeItem = {title: _("Node:"), value: nodeLink, idPostfix: 'node'};
+ const labelsItem = {title: _("Labels:"), value: getLabels(vm), idPostfix: 'labels'};
+
+ const items = showState ? [
+ memoryItem,
+ {title: _("State"), value: getValueOrDefault(() => vm.status.phase, _("n/a")), idPostfix: 'state'},
+ vCpusItem,
+ nodeItem,
+ podItem,
+ labelsItem,
+ ] : [
+ memoryItem,
+ nodeItem,
+ vCpusItem,
+ labelsItem,
+ podItem,
];
return (
{
+ return cockpit.location.go([ 'vms', vm.metadata.namespace, vm.metadata.name ]);
+};
+
const VmsListingRow = ({ vm, vmMessages, pvs, pod, podMetrics, vmUi, onExpandChanged }:
{ vm: Vm, vmMessages: VmMessages, pvs: PersistenVolumes, pod: Pod, onExpandChanged: Function }) => {
- const node = (vm.metadata.labels && vm.metadata.labels[NODE_LABEL]) || '-';
- const phase = (vm.status && vm.status.phase) || _("n/a");
+ const node = getValueOrDefault(() => vm.metadata.labels[NODE_LABEL], '-');
+ const phase = getValueOrDefault(() => vm.status.phase, _("n/a"));
const idPrefix = vmIdPrefx(vm);
const overviewTabRenderer = {
- name: ({_("Overview")}
),
+ name: ({_("Overview")}
),
renderer: VmOverviewTab,
data: { vm, vmMessages, pod },
presence: 'always',
};
const metricsTabRenderer = {
- name: ({_("Usage")}
),
+ name: ({_("Usage")}
),
renderer: VmMetricsTab,
- data: { podMetrics },
+ data: { idPrefix, podMetrics },
presence: 'always',
};
const disksTabRenderer = {
- name: ({_("Disks")}
),
+ name: ({_("Disks")}
),
renderer: VmDisksTab,
data: { vm, pvs },
presence: 'onlyActive',
@@ -74,6 +78,7 @@ const VmsListingRow = ({ vm, vmMessages, pvs, pod, podMetrics, vmUi, onExpandCha
tabRenderers={[ overviewTabRenderer, metricsTabRenderer, disksTabRenderer ]}
listingActions={[ ]}
expandChanged={onExpandChanged(vm)}
+ navigateToItem={navigateToVm.bind(this, vm)}
initiallyExpanded={initiallyExpanded} />
);
};
@@ -83,6 +88,7 @@ VmsListingRow.propTypes = {
vmMessages: PropTypes.object,
pvs: PropTypes.array.isRequired,
pod: PropTypes.object.isRequired,
+ podMetrics: PropTypes.object,
vmUi: PropTypes.object,
onExpandChanged: PropTypes.func.isRequired,
};
diff --git a/pkg/kubernetes/scripts/virtual-machines/entry-points/util/initialize.es6 b/pkg/kubernetes/scripts/virtual-machines/entry-points/util/initialize.es6
new file mode 100644
index 000000000000..30350769a08f
--- /dev/null
+++ b/pkg/kubernetes/scripts/virtual-machines/entry-points/util/initialize.es6
@@ -0,0 +1,65 @@
+/*
+ * This file is part of Cockpit.
+ *
+ * Copyright (C) 2018 Red Hat, Inc.
+ *
+ * Cockpit is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; either version 2.1 of the License, or
+ * (at your option) any later version.
+ *
+ * Cockpit is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Cockpit; If not, see .
+ */
+
+import { initMiddleware } from '../../kube-middleware.jsx';
+import { watchMetrics, cleanupMetricsWatch } from '../../watch-metrics.es6';
+import * as actionCreators from '../../action-creators.jsx';
+
+function addKubeLoaderListener (store, $scope, kubeLoader, kubeSelect) {
+ // register load callback( callback, until )
+ kubeLoader.listen(() => {
+ const persistentVolumes = kubeSelect().kind('PersistentVolume');
+ const pods = kubeSelect().kind('Pod');
+
+ store.dispatch(actionCreators.setPVs(Object.values(persistentVolumes)));
+ store.dispatch(actionCreators.setPods(Object.values(pods)));
+ }, $scope);
+
+ // enable watching( watched-entity-type, until )
+ kubeLoader.watch('PersistentVolume', $scope);
+ kubeLoader.watch('Pod', $scope);
+}
+
+function addScopeVarsToStore (store, $scope) {
+ $scope.$watch(
+ scope => scope.settings,
+ newSettings => store.dispatch(actionCreators.setSettings(newSettings)));
+}
+
+/**
+ *
+ * @param {$rootScope.Scope} $scope '.*Ctrl' controller scope
+ * @param {kubeLoader} kubeLoader
+ * @param {kubeSelect} kubeSelect
+ * @param {kubeMethods} kubeMethods
+ * @param {KubeRequest} KubeRequest
+ * @param {store} store
+ * @param {onDestroy} onDestroy
+ */
+export default function initialize($scope, kubeLoader, kubeSelect, kubeMethods, KubeRequest, store, onDestroy) {
+ addKubeLoaderListener(store, $scope, kubeLoader, kubeSelect);
+ initMiddleware(kubeMethods, kubeLoader, KubeRequest);
+ addScopeVarsToStore(store, $scope);
+
+ watchMetrics(store);
+ $scope.$on("$destroy", () => {
+ typeof onDestroy === 'function' && onDestroy();
+ cleanupMetricsWatch();
+ });
+}
diff --git a/pkg/kubernetes/scripts/virtual-machines/entry-points/virtual-machine.jsx b/pkg/kubernetes/scripts/virtual-machines/entry-points/virtual-machine.jsx
new file mode 100644
index 000000000000..e526f8a34b56
--- /dev/null
+++ b/pkg/kubernetes/scripts/virtual-machines/entry-points/virtual-machine.jsx
@@ -0,0 +1,96 @@
+/*
+ * This file is part of Cockpit.
+ *
+ * Copyright (C) 2018 Red Hat, Inc.
+ *
+ * Cockpit is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; either version 2.1 of the License, or
+ * (at your option) any later version.
+ *
+ * Cockpit is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Cockpit; If not, see .
+ */
+
+import 'regenerator-runtime/runtime'; // required for library initialization
+import React from 'react';
+import { Provider } from 'react-redux';
+
+import { setVms, vmExpanded } from '../action-creators.jsx';
+import VmDetail from '../components/VmDetail.jsx';
+import { initStore, getStore } from '../store.es6';
+import initialize from './util/initialize.es6';
+
+import '../../../../machines/machines.less'; // once per component hierarchy
+
+const VmPage = ({pageParams}) => (
+
+
+
+);
+
+function addVmListener (store, $scope, kubeLoader, kubeSelect, namespace, name) {
+ kubeLoader.listen(() => {
+ const vm = kubeSelect().kind('VirtualMachine')
+ .namespace(namespace)
+ .name(name)
+ .one();
+ const result = vm ? [vm] : [];
+
+ if (vm) {
+ store.dispatch(vmExpanded({
+ vm,
+ isExpanded: true
+ }));
+ }
+
+ store.dispatch(setVms(result));
+ }, $scope);
+ kubeLoader.watch('VirtualMachine', $scope);
+}
+
+/**
+ *
+ * @param {$rootScope.Scope} $scope 'VirtualMachinesCtrl' controller scope
+ * @param {$routeParams} $routeParams
+ * @param {kubeLoader} kubeLoader
+ * @param {kubeSelect} kubeSelect
+ * @param {kubeMethods} kubeMethods
+ * @param {KubeRequest} KubeRequest
+ */
+function init ($scope, $routeParams, kubeLoader, kubeSelect, kubeMethods, KubeRequest) {
+ const store = initStore();
+ const name = $routeParams.name;
+ const namespace = $routeParams.namespace;
+
+ let onDestroy;
+ if (namespace && name) {
+ // enable metrics fetching
+ onDestroy = () => {
+ const state = store.getState();
+ if (state.vms.length > 0) {
+ store.dispatch(vmExpanded({
+ vm: state.vms[0],
+ isExpanded: false,
+ }));
+ }
+ };
+
+ // fetch only if there is a namespace and name
+ addVmListener(store, $scope, kubeLoader, kubeSelect, namespace, name);
+ } else {
+ // otherwise reset
+ store.dispatch(setVms([]));
+ }
+ initialize($scope, kubeLoader, kubeSelect, kubeMethods, KubeRequest, store, onDestroy);
+
+ const rootElement = document.querySelector('#kubernetes-virtual-machine-root');
+ React.render(, rootElement);
+}
+
+export { init };
diff --git a/pkg/kubernetes/scripts/virtual-machines/entry-points/virtual-machines.jsx b/pkg/kubernetes/scripts/virtual-machines/entry-points/virtual-machines.jsx
new file mode 100644
index 000000000000..7c563341ac5b
--- /dev/null
+++ b/pkg/kubernetes/scripts/virtual-machines/entry-points/virtual-machines.jsx
@@ -0,0 +1,62 @@
+/*
+ * This file is part of Cockpit.
+ *
+ * Copyright (C) 2018 Red Hat, Inc.
+ *
+ * Cockpit is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; either version 2.1 of the License, or
+ * (at your option) any later version.
+ *
+ * Cockpit is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Cockpit; If not, see .
+ */
+
+import 'regenerator-runtime/runtime'; // required for library initialization
+import React from 'react';
+import { Provider } from 'react-redux';
+
+import VmsListing from '../components/VmsListing.jsx';
+import { initStore, getStore } from '../store.es6';
+import initialize from './util/initialize.es6';
+import { setVms } from '../action-creators.jsx';
+
+import '../../../../machines/machines.less'; // once per component hierarchy
+
+const VmsPage = () => (
+
+
+
+);
+
+function addVmsListener (store, $scope, kubeLoader, kubeSelect) {
+ kubeLoader.listen(() => {
+ const vms = kubeSelect().kind('VirtualMachine');
+ store.dispatch(setVms(Object.values(vms)));
+ }, $scope);
+ kubeLoader.watch('VirtualMachine', $scope);
+}
+
+/**
+ *
+ * @param {$rootScope.Scope} $scope 'VirtualMachinesCtrl' controller scope
+ * @param {kubeLoader} kubeLoader
+ * @param {kubeSelect} kubeSelect
+ * @param {kubeMethods} kubeMethods
+ * @param {KubeRequest} KubeRequest
+ */
+function init ($scope, kubeLoader, kubeSelect, kubeMethods, KubeRequest) {
+ const store = initStore();
+ addVmsListener(store, $scope, kubeLoader, kubeSelect);
+ initialize($scope, kubeLoader, kubeSelect, kubeMethods, KubeRequest, store);
+
+ const rootElement = document.querySelector('#kubernetes-virtual-machines-root');
+ React.render(, rootElement);
+}
+
+export { init };
diff --git a/pkg/kubernetes/scripts/virtual-machines/index.jsx b/pkg/kubernetes/scripts/virtual-machines/index.jsx
deleted file mode 100644
index 0637f4b6ca96..000000000000
--- a/pkg/kubernetes/scripts/virtual-machines/index.jsx
+++ /dev/null
@@ -1,100 +0,0 @@
-/*
- * This file is part of Cockpit.
- *
- * Copyright (C) 2017 Red Hat, Inc.
- *
- * Cockpit is free software; you can redistribute it and/or modify it
- * under the terms of the GNU Lesser General Public License as published by
- * the Free Software Foundation; either version 2.1 of the License, or
- * (at your option) any later version.
- *
- * Cockpit is distributed in the hope that it will be useful, but
- * WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with Cockpit; If not, see .
- */
-
-import 'regenerator-runtime/runtime'; // required for library initialization
-import React from 'react';
-import { createStore } from 'redux';
-import { Provider } from 'react-redux';
-
-import { initMiddleware } from './kube-middleware.jsx';
-import reducers from './reducers.jsx';
-import * as actionCreators from './action-creators.jsx';
-import VmsListing from './components/VmsListing.jsx';
-import { logDebug } from './utils.jsx';
-import { watchMetrics, cleanupMetricsWatch } from "./watch-metrics.es6";
-
-import '../../../machines/machines.less'; // once per component hierarchy
-
-let reduxStore;
-function initReduxStore() {
- if (reduxStore) {
- logDebug('initReduxStore(): store already initialized, skipping. ', reduxStore);
- return;
- }
- logDebug('initReduxStore(): initializing empty store');
- const initialState = {
- vms: []
- };
-
- const storeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();
- reduxStore = createStore(reducers, initialState, storeEnhancers);
-}
-
-function addKubeLoaderListener ($scope, kubeLoader, kubeSelect) {
- // register load callback( callback, until )
- kubeLoader.listen(() => {
- const vms = kubeSelect().kind('VirtualMachine');
- const persistentVolumes = kubeSelect().kind('PersistentVolume');
- const pods = kubeSelect().kind('Pod');
-
- reduxStore.dispatch(actionCreators.setVms(Object.values(vms)));
- reduxStore.dispatch(actionCreators.setPVs(Object.values(persistentVolumes)));
- reduxStore.dispatch(actionCreators.setPods(Object.values(pods)));
- }, $scope);
-
- // enable watching( watched-entity-type, until )
- kubeLoader.watch('VirtualMachine', $scope);
- kubeLoader.watch('PersistentVolume', $scope);
- kubeLoader.watch('Pod', $scope);
-}
-
-const VmsPlugin = () => (
-
-
-
-);
-
-function addScopeVarsToStore ($scope) {
- $scope.$watch(
- scope => scope.settings,
- newSettings => reduxStore.dispatch(actionCreators.setSettings(newSettings)));
-}
-
-/**
- *
- * @param {$rootScope.Scope} $scope 'VirtualMachinesCtrl' controller scope
- * @param {kubeLoader} kubeLoader
- * @param {kubeSelect} kubeSelect
- * @param {kubeMethods} kubeMethods
- * @param {KubeRequest} KubeRequest
- */
-function init($scope, kubeLoader, kubeSelect, kubeMethods, KubeRequest) {
- initReduxStore();
- addKubeLoaderListener($scope, kubeLoader, kubeSelect);
- initMiddleware(kubeMethods, kubeLoader, KubeRequest);
- addScopeVarsToStore($scope);
-
- watchMetrics(reduxStore);
- $scope.$on("$destroy", () => cleanupMetricsWatch());
-
- const rootElement = document.querySelector('#kubernetes-virtual-machines-root');
- React.render(, rootElement);
-}
-
-export { init };
diff --git a/pkg/kubernetes/scripts/virtual-machines/selectors.jsx b/pkg/kubernetes/scripts/virtual-machines/selectors.jsx
index 57560eea9888..5b2965abd021 100644
--- a/pkg/kubernetes/scripts/virtual-machines/selectors.jsx
+++ b/pkg/kubernetes/scripts/virtual-machines/selectors.jsx
@@ -24,7 +24,7 @@ import type { Vm } from './types.jsx';
* Returns pod corresponding to the given vm.
*/
export function getPod(vm, pods) {
- if (!pods) {
+ if (!vm || !pods) {
return null;
}
diff --git a/pkg/kubernetes/scripts/virtual-machines/store.es6 b/pkg/kubernetes/scripts/virtual-machines/store.es6
new file mode 100644
index 000000000000..54e03feb726f
--- /dev/null
+++ b/pkg/kubernetes/scripts/virtual-machines/store.es6
@@ -0,0 +1,47 @@
+/*
+ * This file is part of Cockpit.
+ *
+ * Copyright (C) 2017 Red Hat, Inc.
+ *
+ * Cockpit is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; either version 2.1 of the License, or
+ * (at your option) any later version.
+ *
+ * Cockpit is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Cockpit; If not, see .
+ */
+
+import { createStore } from 'redux';
+import reducers from './reducers.jsx';
+import { logDebug } from './utils.jsx';
+
+let reduxStore;
+
+export function initStore () {
+ if (reduxStore) {
+ logDebug('initStore(): store already initialized, skipping.', reduxStore);
+ return reduxStore;
+ }
+ logDebug('initStore(): initializing empty store');
+ const initialState = {
+ vms: []
+ };
+
+ const storeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();
+ reduxStore = createStore(reducers, initialState, storeEnhancers);
+
+ return reduxStore;
+}
+
+export function getStore () {
+ if (!reduxStore) {
+ logDebug('getStore(): store is not initialized yet.');
+ }
+ return reduxStore;
+}
diff --git a/pkg/kubernetes/scripts/virtual-machines/utils.jsx b/pkg/kubernetes/scripts/virtual-machines/utils.jsx
index 8913f1af92aa..3a358e470220 100644
--- a/pkg/kubernetes/scripts/virtual-machines/utils.jsx
+++ b/pkg/kubernetes/scripts/virtual-machines/utils.jsx
@@ -31,6 +31,10 @@ export function getPairs(object) {
}));
}
+export function prefixedId(idPrefix, id) {
+ return idPrefix ? `${idPrefix}-${id}` : null;
+}
+
export function vmIdPrefx(vm) {
return `vm-${vm.metadata.name}`;
}
diff --git a/pkg/kubernetes/views/virtual-machine-page.html b/pkg/kubernetes/views/virtual-machine-page.html
new file mode 100644
index 000000000000..3b67419505aa
--- /dev/null
+++ b/pkg/kubernetes/views/virtual-machine-page.html
@@ -0,0 +1 @@
+
diff --git a/pkg/lib/cockpit-components-detail-page.jsx b/pkg/lib/cockpit-components-detail-page.jsx
new file mode 100644
index 000000000000..7187462f4872
--- /dev/null
+++ b/pkg/lib/cockpit-components-detail-page.jsx
@@ -0,0 +1,90 @@
+/*
+ * This file is part of Cockpit.
+ *
+ * Copyright (C) 2018 Red Hat, Inc.
+ *
+ * Cockpit is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; either version 2.1 of the License, or
+ * (at your option) any later version.
+ *
+ * Cockpit is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Cockpit; If not, see .
+ */
+
+'use strict';
+
+const React = require('react');
+
+require('./listing.less');
+// TODO remove next line and detail-page.less file as well once React 16 is merged
+require('./detail-page.less');
+
+const prefixedId = (idPrefix, id) => idPrefix ? `${idPrefix}-${id}` : null;
+
+const DetailPage = ({children}) => {
+ return (
+
+ {children}
+
+ );
+};
+
+const DetailPageRow = ({title, idPrefix, children}) => {
+ // TODO use React.Fragment instead and remove 'className="detail-row"' once React 16 is merged
+ return (
+
+
{title}
+
+ {children}
+
+
+
+ {actions}
+
+
+ {icon}
+ {title}
+
+ {navigateUp}
+