Implement Create VM Wizard component #27

rawagner · 2018-09-25T11:06:59Z

No description provided.

coveralls · 2018-09-25T11:13:46Z

Pull Request Test Coverage Report for Build 114

72 of 107 (67.29%) changed or added relevant lines in 8 files are covered.
No unchanged relevant lines lost coverage.
Overall coverage increased (+23.8%) to 55.598%

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
src/components/Forms/Dropdown.js	4	5	80.0%
src/components/Wizards/CreateVmWizard/CreateVmWizard.js	37	71	52.11%

Totals
Change from base Build 78:	23.8%
Covered Lines:	95
Relevant Lines:	176

💛 - Coveralls

mareklibra

LGTM, clean-up required.

I like the FormFactrory.
A few comments inscribed.

mareklibra · 2018-09-25T11:48:49Z

src/components/wizards/create-vm/CreateVmWizard.js

@@ -0,0 +1,302 @@
+import React from 'react';


Please rename folder to follow component name (CamelCase), so .../wizards/CreateVmWizard/...

fixed for all components

mareklibra · 2018-09-25T11:51:05Z

src/components/wizards/new-vm/NewVmWizard.js

+  openCreateVmWizard = () => this.setState({ createVM: true });
+
+  render() {
+    let wizard;


can be:

const wizard = this.state.createVM && (...)

mareklibra · 2018-09-25T12:15:42Z

src/components/wizards/create-vm/CreateVmWizard.js

+    templates: this.props.templates
+  };
+
+  componentDidUpdate({ namespaces, templates }) {


Please use getDerivedStateFromProps() instead

replaced componentDidUpdate with getDerivedStateFromProps

mareklibra · 2018-09-25T12:20:26Z

src/components/forms/FormFactory.js

+import { get, has } from 'lodash';
+import { TextArea, Dropdown, Checkbox, Text } from '.';
+
+export const FormFactory = ({ fields, fieldsValues, onFormChange }) => {


mareklibra · 2018-09-25T12:22:04Z

src/components/forms/FormFactory.js

+
+export const FormFactory = ({ fields, fieldsValues, onFormChange }) => {
+  const formGroups = Object.keys(fields)
+    .filter(key => !(fields[key].isVisible && fields[key].isVisible(fieldsValues) === false))


nitpick to be generic:
change fields[key].isVisible(fieldsValues) to !!fields[key].isVisible(fieldsValues)

mareklibra · 2018-09-25T12:25:16Z

src/components/forms/FormFactory.js

+            />
+          );
+          break;
+        default:


nitpick to be genric: introduce specific type to be same as this default, like:

case 'text': default:

mareklibra · 2018-09-25T12:28:11Z

src/components/wizards/create-vm/CreateVmWizard.js

+        }
+      }
+    }));
+    this.validateWizard(basicVmSettings);


good idea here ...

mareklibra · 2018-09-25T12:28:37Z

src/components/wizards/create-vm/CreateVmWizard.js

+} from '../../../constants';
+import { getTemplatesWithLabels, getTemplatesLabelValues } from '../../../utils/template';
+
+/* eslint react/no-did-update-set-state: 0 */


This will probably not needed with the changes bellow

mareklibra · 2018-09-25T12:39:53Z

src/components/wizards/create-vm/CreateVmWizard.js

+    return false;
+  };
+
+  getFlavorLabel = () => {


For a follow-up: improve behavior from user-perspective, so the user is still able to select any OS, na matter what pair-option (flavor,workload) has selected.

Just ideas:

disable unselected values (to denote "There's something more")

add sort of "reset form" button

add generic value to the dropdows to reset selection

etc.

mareklibra · 2018-09-25T12:47:21Z

src/k8s/templates/fedora28.template.js

@@ -0,0 +1,98 @@
+export const fedora28 = {


please rename folte templates to mock_templates to avoid confusion.

These templates are expected to be loaded from API once implemented within kubevirt Operator (or so)

renamed to mock_templates

lizsurette · 2018-09-25T13:11:57Z

@rawagner any difference from what you had shared in Storybook? Would you mind adding screenshots, if so?

rawagner · 2018-09-25T14:01:55Z

@lizsurette There is basically no visual difference, just removed 'Create Template from VM' checkbox as we do not have that functionality implemented yet. I will share Cosmos (alternative to Storybook) soon :)

mareklibra

LGTM, just minor comments

mareklibra · 2018-09-26T10:19:41Z

package.json

@@ -24,7 +24,7 @@
    "test:watch": "yarn test --watch",
    "prebuild": "yarn test --ci && shx rm -rf dist",
    "build": "yarn build:js && yarn build:sass",
-    "build:js": "babel src --config-file ./config/babel.config.js --out-dir dist/js --only 'src/components/**/*.js,src/index.js' --ignore '**/tests/**,**/fixtures/**'",
+    "build:js": "babel src --config-file ./config/babel.config.js --out-dir dist/js --only 'src/components/**/*.js,src/constants/**/*.js,src/k8s/**/*.js,src/models/**/*.js,src/utils/**/*.js,src/index.js' --ignore '**/tests/**,**/fixtures/**'",


can't we simplify that to just src/**/*.js ?

added src/**/*.js and ignore now includes jest and cosmos folders as those releate to tests which we are not shipping

mareklibra · 2018-09-26T10:22:07Z

src/components/Forms/FormFactory.js

+};
+
+FormFactory.propTypes = {
+  fields: PropTypes.object.isRequired,


For a follow-up: we should be more specific here

mareklibra · 2018-09-26T10:22:15Z

src/components/Forms/FormFactory.js

+
+FormFactory.propTypes = {
+  fields: PropTypes.object.isRequired,
+  fieldsValues: PropTypes.object.isRequired,


mareklibra · 2018-09-26T10:25:23Z

src/components/Wizards/CreateVmWizard/CreateVmWizard.js

+  };
+
+  getFlavors = () => {
+    let flavors = [];


No need to initialize here, can be const flavors later.

mareklibra

Thanks

vojtechszocs · 2018-09-26T15:25:05Z

Would you mind adding screenshots, if so?

@lizsurette I'm working on deploying Cosmos (Storybook alternative) static application upon PR merge so we have an up-to-date interactive showcase of our KubeVirt UI components.

lizsurette · 2018-09-26T15:46:45Z

@lizsurette I'm working on deploying Cosmos (Storybook alternative) static application upon PR merge so we have an up-to-date interactive showcase of our KubeVirt UI components.

@vojtechszocs perfect, thank you!

rawagner mentioned this pull request Sep 25, 2018

[WIP] Implement Create VM Wizard component #4

Closed

rawagner force-pushed the create_VM branch from 475c21e to 7c59f6a Compare September 25, 2018 11:10

rawagner force-pushed the create_VM branch from 7c59f6a to 045f8b0 Compare September 25, 2018 11:23

mareklibra suggested changes Sep 25, 2018

View reviewed changes

rawagner force-pushed the create_VM branch from 045f8b0 to ec63e64 Compare September 25, 2018 13:58

rawagner force-pushed the create_VM branch 3 times, most recently from a5ceb99 to 57e95ca Compare September 26, 2018 08:37

mareklibra mentioned this pull request Sep 26, 2018

Add kubevirt-web-ui-components and required scss files kubevirt/web-ui#17

Merged

mareklibra suggested changes Sep 26, 2018

View reviewed changes

Implement Create VM Wizard component

9c547e8

rawagner force-pushed the create_VM branch from 57e95ca to 9c547e8 Compare September 26, 2018 10:34

mareklibra approved these changes Sep 26, 2018

View reviewed changes

mareklibra merged commit 3afe91c into kubevirt:master Sep 26, 2018

mareklibra changed the title ~~[WIP] Implement Create VM Wizard component~~ Implement Create VM Wizard component Sep 26, 2018

rawagner deleted the create_VM branch September 27, 2018 13:40

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement Create VM Wizard component #27

Implement Create VM Wizard component #27

rawagner commented Sep 25, 2018

coveralls commented Sep 25, 2018 •

edited

mareklibra left a comment

mareklibra Sep 25, 2018

rawagner Sep 25, 2018

mareklibra Sep 25, 2018

rawagner Sep 25, 2018

mareklibra Sep 25, 2018

rawagner Sep 25, 2018

mareklibra Sep 25, 2018

mareklibra Sep 25, 2018

rawagner Sep 25, 2018

mareklibra Sep 25, 2018

rawagner Sep 25, 2018

mareklibra Sep 25, 2018

mareklibra Sep 25, 2018

rawagner Sep 25, 2018

mareklibra Sep 25, 2018

mareklibra Sep 25, 2018

rawagner Sep 25, 2018

lizsurette commented Sep 25, 2018

rawagner commented Sep 25, 2018 •

edited

mareklibra left a comment

mareklibra Sep 26, 2018

rawagner Sep 26, 2018 •

edited

mareklibra Sep 26, 2018

mareklibra Sep 26, 2018

mareklibra Sep 26, 2018

rawagner Sep 26, 2018

mareklibra left a comment

vojtechszocs commented Sep 26, 2018

lizsurette commented Sep 26, 2018

Implement Create VM Wizard component #27

Implement Create VM Wizard component #27

Conversation

rawagner commented Sep 25, 2018

coveralls commented Sep 25, 2018 • edited

Pull Request Test Coverage Report for Build 114

💛 - Coveralls

mareklibra left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lizsurette commented Sep 25, 2018

rawagner commented Sep 25, 2018 • edited

mareklibra left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rawagner Sep 26, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mareklibra left a comment

Choose a reason for hiding this comment

vojtechszocs commented Sep 26, 2018

lizsurette commented Sep 26, 2018

coveralls commented Sep 25, 2018 •

edited

rawagner commented Sep 25, 2018 •

edited

rawagner Sep 26, 2018 •

edited