Enable Prettier code formatting for the Katib UI

.travis.yml

@@ -1,20 +1,25 @@
-language: go
-
-go:
-  - "1.12.5"
-
-go_import_path: github.com/kubeflow/katib
-
-install:
-  - curl -L -O "https://github.com/kubernetes-sigs/kubebuilder/releases/download/v1.0.7/kubebuilder_1.0.7_linux_amd64.tar.gz"
-  - # extract the archive
-  - tar -zxvf kubebuilder_1.0.7_linux_amd64.tar.gz
-  - sudo mv kubebuilder_1.0.7_linux_amd64 /usr/local/kubebuilder
-  - export PATH=$PATH:/usr/local/kubebuilder/bin
-  # get coveralls.io support
-  - go get github.com/mattn/goveralls
-
-script:
-  - make check
-  - make test
-  - goveralls -coverprofile=coverage.out
+jobs:
+  include:
+    - name: "Go unit tests, gofmt, golint and coveralls"
+      language: go
+      go: "1.12.5"
+      go_import_path: github.com/kubeflow/katib
+      install:
+        - curl -L -O "https://github.com/kubernetes-sigs/kubebuilder/releases/download/v1.0.7/kubebuilder_1.0.7_linux_amd64.tar.gz"
+        - # extract the archive
+        - tar -zxvf kubebuilder_1.0.7_linux_amd64.tar.gz
+        - sudo mv kubebuilder_1.0.7_linux_amd64 /usr/local/kubebuilder
+        - export PATH=$PATH:/usr/local/kubebuilder/bin
+        # get coveralls.io support
+        - go get github.com/mattn/goveralls
+      script:
+        - make check
+        - make test
+        - goveralls -coverprofile=coverage.out
+    - name: "Prettier frontend check"
+      language: node_js
+      node_js: "10.13.0"
+      install:
+        - npm install --global prettier
+      script:
+        - make prettier-check

Makefile

@@ -50,3 +50,6 @@ endif
 
 build: depend generate
 	bash scripts/v1alpha3/build.sh
+
+prettier-check:
+	npm run format:check --prefix pkg/ui/v1alpha3/frontend

pkg/ui/v1alpha3/README.md

@@ -0,0 +1,84 @@
+# Katib User Interface
+
+This is the source code for the Katib UI. Current version of Katib UI is v1alpha3. On the official Kubeflow website [here](https://www.kubeflow.org/docs/components/hyperparameter-tuning/experiment/#running-the-experiment-from-the-katib-ui) you can find information how to use Katib UI.
+We are using [React](https://reactjs.org/) framework to create frontend and Go as a backend.
+
+## Folder structure
+
+1. `Dockerfile` and file to serve the UI `main.go` you can find under [cmd/ui/v1alpha3](https://github.com/kubeflow/katib/tree/master/cmd/ui/v1alpha3).
+
+2. Go backend you can find under [pkg/ui/v1alpha3](https://github.com/kubeflow/katib/tree/master/pkg/ui/v1alpha3).
+
+3. React frontend you can find under [pkg/ui/v1alpha3/frontend](https://github.com/kubeflow/katib/tree/master/pkg/ui/v1alpha3/frontend).
+
+## Requirements
+
+To make changes to the UI you need to install:
+
+- Tools, defined [here](https://github.com/kubeflow/katib/blob/master/docs/developer-guide.md#requirements).
+
+- `Node` (10.13 or later) and `npm` (6.13 or later). You can find [here](https://nodejs.org/en/download/) how to download it.
+
+## Development
+
+While development you have different ways to run Katib UI.
+
+### First time
+
+1. Clone the repository.
+
+2. Go to `/frontend` folder.
+
+3. Run `npm install` to install all dependencies.
+
+It will create `/frontend/node_modules` folder with all dependencies from `package.json`. If you want to add new package, edit `/frontend/package.json` file with new dependency.
+
+### Start frontend server
+
+If you want to edit only frontend without connection to the backend, you can start frontend server in your local environment. For it, run `npm run start` under `/frontend` folder. You can access the UI using this URL: `http://localhost:3000/`.
+
+### Serve UI frontend and backend
+
+You can serve Katib UI locally. To make it you need to follow these steps:
+
+1. Run `npm run build` under `/frontend` folder. It will create `/frontend/build` directory with optimized production build.
+
+2. Go to `cmd/ui/v1alpha3`.
+
+3. Run `main.go` file with appropriate flags. For example, if you clone Katib repository to `/home` folder, run this command:
+
+```
+go run main.go --build-dir=/home/katib/pkg/ui/v1alpha3/frontend/build --port=8080
+```
+
+After that, you can access the UI using this URL: `http://localhost:8080/katib/`.
+
+## Production
+
+To run Katib UI in Production, after all changes in frontend and backend, you need to create an image for the UI. Under `katib` repository run this: `docker build . -f cmd/ui/v1alpha3/Dockerfile -t <name of your image>` to build image. You can modify UI [deployment](https://github.com/kubeflow/katib/blob/master/manifests/v1alpha3/ui/deployment.yaml#L24) with your new image. After this, follow [these steps](https://www.kubeflow.org/docs/components/hyperparameter-tuning/hyperparameter/#accessing-the-katib-ui) to access Katib UI.
+
+## Code style
+
+To make frontend code consistent and easy to review we use [Prettier](https://prettier.io/). You can find Prettier config [here](https://github.com/kubeflow/katib/tree/master/pkg/ui/v1alpha3/frontend/.prettierrc.yaml).
+Check [here](https://prettier.io/docs/en/install.html), how to install Prettier CLI to check and format your code.
+
+### IDE integration
+
+For VSCode you can install plugin: "Prettier - Code formatter" and it will pick Prettier config automatically.
+
+You can edit [settings.json](https://code.visualstudio.com/docs/getstarted/settings#_settings-file-locations) file for VSCode to autoformat on save.
+
+```json
+  "settings": {
+    "editor.formatOnSave": true
+  }
+```
+
+For others IDE see [this](https://prettier.io/docs/en/editors.html).
+
+### Check and format code
+
+Before submitting PR check and format your code. To check your code run `npm run format:check` under `/frontend` folder. To format your code run `npm run format:write` under `/frontend` folder.
+If all files formatted you can submit the PR.
+
+If you don't want to format some code, [here](https://prettier.io/docs/en/ignore.html) is an instruction how to disable Prettier.

pkg/ui/v1alpha3/frontend/.prettierrc.yaml

@@ -0,0 +1,4 @@
+singleQuote: true
+printWidth: 100
+trailingComma: all
+tabWidth: 2

pkg/ui/v1alpha3/frontend/package.json

@@ -78,7 +78,9 @@
   "scripts": {
     "start": "node --max-old-space-size=4096 scripts/start.js",
     "build": "node --max-old-space-size=4096 scripts/build.js",
-    "test": "node --max-old-space-size=4096 scripts/test.js"
+    "test": "node --max-old-space-size=4096 scripts/test.js",
+    "format:check": "prettier --check 'src/**/*.{jsx,js}' || node scripts/check-format-error.js",
+    "format:write": "prettier --write 'src/**/*.{jsx,js}'"
   },
   "eslintConfig": {
     "extends": "react-app"

pkg/ui/v1alpha3/frontend/scripts/check-format-error.js

@@ -0,0 +1,6 @@
+console.error();
+console.error('-----------------------------------------------');
+console.error('Please run `npm run format:write` to format your code.');
+console.error('-----------------------------------------------');
+console.error();
+process.exit(1);

pkg/ui/v1alpha3/frontend/src/actions/generalActions.js

@@ -1,60 +1,60 @@
-export const TOGGLE_MENU = "TOGGLE_MENU";
+export const TOGGLE_MENU = 'TOGGLE_MENU';
 
-export const toggleMenu = (state) => {
-    return {
-        type: TOGGLE_MENU,
-        state,
-    };
+export const toggleMenu = state => {
+  return {
+    type: TOGGLE_MENU,
+    state,
+  };
 };
 
-export const CLOSE_SNACKBAR = "CLOSE_SNACKBAR";
+export const CLOSE_SNACKBAR = 'CLOSE_SNACKBAR';
 
 export const closeSnackbar = () => {
-    return {
-        type: CLOSE_SNACKBAR,
-    };
+  return {
+    type: CLOSE_SNACKBAR,
+  };
 };
 
-export const SUBMIT_YAML_REQUEST = "SUBMIT_YAML_REQUEST";
-export const SUBMIT_YAML_FAILURE = "SUBMIT_YAML_FAILURE";
-export const SUBMIT_YAML_SUCCESS = "SUBMIT_YAML_SUCCESS";
+export const SUBMIT_YAML_REQUEST = 'SUBMIT_YAML_REQUEST';
+export const SUBMIT_YAML_FAILURE = 'SUBMIT_YAML_FAILURE';
+export const SUBMIT_YAML_SUCCESS = 'SUBMIT_YAML_SUCCESS';
 
 export const submitYaml = (yaml, globalNamespace) => ({
-    type: SUBMIT_YAML_REQUEST,
-    yaml,
-    globalNamespace
-})
+  type: SUBMIT_YAML_REQUEST,
+  yaml,
+  globalNamespace,
+});
 
-export const DELETE_EXPERIMENT_REQUEST = "DELETE_EXPERIMENT_REQUEST";
-export const DELETE_EXPERIMENT_FAILURE = "DELETE_EXPERIMENT_FAILURE";
-export const DELETE_EXPERIMENT_SUCCESS = "DELETE_EXPERIMENT_SUCCESS";
+export const DELETE_EXPERIMENT_REQUEST = 'DELETE_EXPERIMENT_REQUEST';
+export const DELETE_EXPERIMENT_FAILURE = 'DELETE_EXPERIMENT_FAILURE';
+export const DELETE_EXPERIMENT_SUCCESS = 'DELETE_EXPERIMENT_SUCCESS';
 
 export const deleteExperiment = (name, namespace) => ({
-    type: DELETE_EXPERIMENT_REQUEST,
-    name,
-    namespace,
-})
+  type: DELETE_EXPERIMENT_REQUEST,
+  name,
+  namespace,
+});
 
-export const OPEN_DELETE_EXPERIMENT_DIALOG = "OPEN_DELETE_EXPERIMENT_DIALOG";
+export const OPEN_DELETE_EXPERIMENT_DIALOG = 'OPEN_DELETE_EXPERIMENT_DIALOG';
 
 export const openDeleteExperimentDialog = (name, namespace) => ({
-    type: OPEN_DELETE_EXPERIMENT_DIALOG,
-    name,
-    namespace,
-})
+  type: OPEN_DELETE_EXPERIMENT_DIALOG,
+  name,
+  namespace,
+});
 
-export const CLOSE_DELETE_EXPERIMENT_DIALOG = "CLOSE_DELETE_EXPERIMENT_DIALOG";
+export const CLOSE_DELETE_EXPERIMENT_DIALOG = 'CLOSE_DELETE_EXPERIMENT_DIALOG';
 
 export const closeDeleteExperimentDialog = () => ({
-    type: CLOSE_DELETE_EXPERIMENT_DIALOG,
-})
+  type: CLOSE_DELETE_EXPERIMENT_DIALOG,
+});
 
-export const FETCH_NAMESPACES_REQUEST = "FETCH_NAMESPACES_REQUEST";
-export const FETCH_NAMESPACES_SUCCESS = "FETCH_NAMESPACES_SUCCESS";
-export const FETCH_NAMESPACES_FAILURE = "FETCH_NAMESPACES_FAILURE";
+export const FETCH_NAMESPACES_REQUEST = 'FETCH_NAMESPACES_REQUEST';
+export const FETCH_NAMESPACES_SUCCESS = 'FETCH_NAMESPACES_SUCCESS';
+export const FETCH_NAMESPACES_FAILURE = 'FETCH_NAMESPACES_FAILURE';
 
 export const fetchNamespaces = () => ({
-    type: FETCH_NAMESPACES_REQUEST
-})
+  type: FETCH_NAMESPACES_REQUEST,
+});
 
-export const CHANGE_GLOBAL_NAMESPACE = "CHANGE_GLOBAL_NAMESPACE";
+export const CHANGE_GLOBAL_NAMESPACE = 'CHANGE_GLOBAL_NAMESPACE';