F #3951: First steps React and Node

Signed-off-by: Jorge Lobo <[email protected]>

src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/actions.js

@@ -72,7 +72,7 @@ define(function(require) {
 
   function _setup(context) {
     var that = this;
-		var actions = ["terminate", "terminate-hard", "hold", "release", "stop", "suspend", "resume", "reboot", "reboot-hard", "poweroff", "poweroff-hard", "undeploy", "undeploy-hard", "snapshot-create"];
+		var actions = ["terminate", "terminate-hard", "hold", "release", "stop", "suspend", "resume", "reboot", "reboot-hard", "poweroff", "poweroff-hard", "undeploy", "undeploy-hard", "snapshot-create","snapshot-delete", "snapshot-revert", "disk-snapshot-create", "disk-snapshot-delete", "disk-snapshot-revert"];
 
     context.off("click", "#add_scheduling_temp_action");
     context.on("click", "#add_scheduling_temp_action", function() {

src/sunstone/public/app/tabs/templates-tab/form-panels/instantiate.js

@@ -128,7 +128,7 @@ define(function(require) {
 
     context.off("click", "#add_scheduling_inst_action");
     context.on("click", "#add_scheduling_inst_action", function() {
-      var actions = ["terminate", "terminate-hard", "hold", "release", "stop", "suspend", "resume", "reboot", "reboot-hard", "poweroff", "poweroff-hard", "undeploy", "undeploy-hard", "snapshot-create"];
+      var actions = ["terminate", "terminate-hard", "hold", "release", "stop", "suspend", "resume", "reboot", "reboot-hard", "poweroff", "poweroff-hard", "undeploy", "undeploy-hard", "snapshot-create","snapshot-delete", "snapshot-revert", "disk-snapshot-create", "disk-snapshot-delete", "disk-snapshot-revert"];
       $("#add_scheduling_inst_action", context).attr("disabled", "disabled");
       ScheduleActions.htmlNewAction(actions, context, "inst");
       ScheduleActions.setup(context);

src/sunstone/public/app/tabs/vms-tab/panels/actions.js

@@ -99,7 +99,7 @@ define(function(require) {
     var actions = [
       "terminate", "terminate-hard", "hold", "release", "stop", "suspend", "resume",
       "reboot", "reboot-hard", "poweroff", "poweroff-hard", "undeploy", "undeploy-hard",
-      "snapshot-create"
+      "snapshot-create","snapshot-delete", "snapshot-revert", "disk-snapshot-create", "disk-snapshot-delete", "disk-snapshot-revert"
     ];
 
     context.off("click", "#add_scheduling_vms_action");

src/sunstone_react/README.md

@@ -0,0 +1,57 @@
+# Sunstone React
+
+base for a new sunstone (Opennebula).
+
+## Commands for run this
+
+- **yarn** (this command import the dependecies).
+- **yarn build** (execute the javascript build "bundle")
+- **yarn start** (start the server in port 3000)
+
+## Commands for development
+
+- **yarn dev** (run server in mode development)
+
+## How to use
+
+- **Api**
+  it is a http request, return opennebula resource info or login this return a `JWT`.
+
+  - Login: POST: `http://localhost:3000/api/auth` with params: `user` and `pass`.
+  - Other: check file `src/config/command-params.js`
+
+- **zeroMQ**
+  it is a websocket connection call to: `ws://127.0.0.1:3000/?token=JWT`
+
+## Errors with solutions
+
+- [nodemon] Internal watch failed: watch ENOSPC
+for this error run `sudo sysctl fs.inotify.max_user_watches=582222 && sudo sysctl -p`
+
+- Starting inspector on 127.0.0.1:9229 failed: address already in use
+for this error run  `killall -9 node` and start app again
+
+## Project description
+
+- `disk`: this folder content the transpiled code.
+- `disk/public`: content the transpiled code valid for the HTML.
+- `node_modules`: dependencies for backend (NODE).
+- `src`: non-transpiled code.
+- `src/config`: configuration files (please do not modify if you do not know how it works).
+- `src/config/command-params.js`: it contains the different commands with the possible opennebula parameters.
+- `src/config/defaults.js`: it contains default string parameters.
+- `src/config/function-routes.js`: it contains routes that are not opennebula commands.
+- `src/config/http-codes.js`: it contains all http codes for routes.
+- `src/config/params.js`: it contains the parameters used by the paths, example: `http://localhost:3000/api/template/id=0/action=info`.
+- `src/config/routes-api.js`: gather the different routes used by the API.
+- `src/public`: contains the sunstone in react.
+- `src/routes`: contains the routes for node (API and WEB).
+- `src/utils`: utilities used by the application.
+- `src/index.js`: entrypoint node.
+- `config.yml`: enviroment config for user
+- `.eslintignore`: files ignored by the eslint
+- `.gitignore`: files ignored by git
+- `copyStaticAssets.js`: copy the html resourses to dist/public path (.ico, .css, fonts, etc).
+- `packaje.json`: contains the name of the packages used by the application.
+- `webpack.config.js`: contains the JS transpiler configurations.
+- `yarn.lock`: contains the dependencies using the yarn command.

src/sunstone_react/config.yml

@@ -0,0 +1,50 @@
+################################################################################
+# Server Configuration
+################################################################################
+
+# System log (Morgan) prod or dev
+LOG: prod
+
+# Enable cors (cross-origin resource sharing)
+CORS: true
+
+# Webpack mode:
+#   - development
+#   - production 
+MODE: development
+
+# JWT user password encryption key (AUTH)
+TOKEN_SECRET: token_secreto
+
+# JWT life time
+LIMIT_TOKEN:
+  MIN: 14
+  MAX: 30
+
+# Zones Opeennebula
+# -ID: identificator zone
+# -RPC: URL connect to RPC (OPENNEBULA)
+# -ZEROMQ: URL connect to socket ZEROMQ
+# -VNC: URL connect to socket VNC
+
+OPENNEBULA_ZONES: 
+  - ID: 0
+    RPC: http://127.0.0.1:2633/RPC2
+    ZEROMQ:
+    VNC:
+  - ID: 1
+    RPC: http://localhost:2633/RPC2
+    ZEROMQ:
+    VNC:
+
+
+# Presentation information system (Config information)
+SYSTEM_DATA:
+  NO_AUTH:
+    - MODE
+  AUTH:
+    - MODE
+    - OPENNEBULA_ZONES:
+        - ID
+        - VNC
+        - ZEROMQ

src/sunstone_react/copyStaticAssets.js

@@ -0,0 +1,54 @@
+/* Copyright 2002-2019, OpenNebula Project, OpenNebula Systems                */
+/*                                                                            */
+/* Licensed under the Apache License, Version 2.0 (the "License"); you may    */
+/* not use this file except in compliance with the License. You may obtain    */
+/* a copy of the License at                                                   */
+/*                                                                            */
+/* http://www.apache.org/licenses/LICENSE-2.0                                 */
+/*                                                                            */
+/* Unless required by applicable law or agreed to in writing, software        */
+/* distributed under the License is distributed on an "AS IS" BASIS,          */
+/* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   */
+/* See the License for the specific language governing permissions and        */
+/* limitations under the License.                                             */
+/* -------------------------------------------------------------------------- */
+
+const fs = require('fs-extra');
+const { messageTerminal } = require('./src/utils');
+
+const pathInternal = 'src/public/assets/';
+const pathExternal = 'dist/public/';
+
+const config = {
+  color: 'red',
+  type: 'ERROR',
+  error: '',
+  message: 'Static assets copy: %s'
+};
+
+const files = [
+  {
+    internal: `${pathInternal}favicon.png`,
+    external: `${pathExternal}favicon.png`
+  },
+  {
+    internal: `${pathInternal}logo.png`,
+    external: `${pathExternal}logo.png`
+  },
+  {
+    internal: `${pathInternal}fonts`,
+    external: `${pathExternal}fonts`
+  }
+];
+
+try {
+  files.forEach(({ internal, external }) => {
+    fs.copySync(internal, external);
+  });
+
+  const internalConfig = { color: 'green', type: 'OK', error: '' };
+  messageTerminal({ ...config, ...internalConfig });
+} catch (err) {
+  const internalConfig = { error: err.message };
+  messageTerminal({ ...config, ...internalConfig });
+}

src/sunstone_react/cypress.json

@@ -0,0 +1 @@
+{}

src/sunstone_react/introduccion.txt

@@ -0,0 +1,74 @@
+El diseño del siguiente codigo esta basado en su totalidad en Javascript (ES6).
+
+- **NodeJS** con **Express** para el backend.
+- **React**, **Redux** para el front.
+- **Webpack** para el transpilado de la aplicacion.
+- **NPM** para la gestion de los packages.
+
+Cuando se transpila el código generado funciona tanto en el backend como en el frontend (Server-side Render)
+
+#Motivacion:
+
+en lo personal el sunstone actual esta lleno de inconvenientes los cuales mencionaré sin profundizar:
+
+- Dependencias: muchas de las mismas son muy viejas y actualizarlas seria un riesgo de que no funcionen partes del sistema. tampoco se usan las dependencias en su totalidad.
+- Estado global: en el front end no existe un estado global al cual hacer uso para los diferentes componentes del mismo.
+- Reactividad: no es reactivo. se hace uso de JQuery y de handlebars. esto hase que al querer hacer algun cambio debes de tambien instanciar los callback para que pueda funcionar despues. tambien hace complicado la busqueda de errores en el codigo.
+- Manejo del DOM: ya que su fuerte es el hacer uso de jQuery el manejo de Clases y Id son indispensables, esto tambien puede traer uns serie de consecuencias.
+- Respuestas del XMLRPC: hay llamadas que al ser cambiadas a JSON pueden mutar (en vez de ser objetos pasan a ser arrays y viceversa).
+- Configuracion: es simple la instalacion del sunstone, pero ya es mas complicado al momento de usar el memcache y demas cosas para usar en produccion.
+- Traza de errores: es dificil hacer el seguimiento del codigo ya que no hay herramientas especializadas para el debug.
+- Reglas de LINT: no posee.
+- Los test e2e: se usa readiness (Ruby).
+
+Ventajas:
+
+- Dependencias actualizadas y testeadas.
+- Eliminacion de recursos deprecados como Bower y Grunt, para el transpilado, JQuery y handlebars para el manejo de vistas.
+- Creacion de estado Global: al momento de querer hacer consulta a un resurso se puede saber conectando el componente a redux.
+- Reactividad: no se debe de manejar las vistas y las acciones por separado.
+- Uso de API REST: se puede usar tambien para otro tipo de aplicaciones web.
+- Reglas de LINT: el codigo se hace mas legible.
+
+Dependencias: 
+  - Principales: Node, Yarn, ZeroMQ
+  - Descargadas al hacer uso del comando "Yarn o nom start": 
+    * Sistema: React,NodeJS,Helmet,Redux.
+    * Desarrollo. Test y compilacion: Webpack, Babel, Cypress, Sass.
+
+Herramientas de Debug:
+  - Google Chrome (Browser).
+  - React Developer Tools (Chrome plugin).
+  - Redux DevTools (Chrome plugin).
+  - Clear Cache (Chrome plugin).
+
+Compilacion:
+
+  Server Side Rendering: al compilar una vez teniendo las dependencias instaladas Webpack se encargara de generar el codigo (Proceso) que estara ejecutandoce en node (Sunstone server) y tambien genera el javascript usado en el Browser (Cliente).
+
+Memcache:
+  no seria necesario el uso del memcache, actualmente se usa solamente para identificar el usuario del front con el backend, para esto se usaria un jwt, que es un token, dentro tuviese el id del usuario y el opennebula token, esto estaria cifrado por una clave que se guarda en el archivo config.yml
+
+Views
+  la idea es mantener las vistas (el concepto de vista seria la asociacion de recursos). esta "vista" estaran en los template de group. ya que cada usuario estaria almenos en un grupo. el orden seria el siguiente:
+  - Al conectarme buscaria los grupos que el usuario posea.
+  - Dependiendo del grupo del usuario se mostraria las diferentes vistas (estas vistas se guardarian cifradas en base64 ejemplo: 
+    VIEWS = [VIEW1="template_en_base64", VIEW2="template_en_base64", VIEW3="template_en_base64"]).
+  - Para que un usuario pueda ver una vista particular: 
+    * se puede seleccionar una vista por defecto en el usertemplate, estaria cifrada en base64 ejemplo: DEFAULT_VIEW = "VIEW3".
+    * se puede colocar una vista en particular cifrada en base64 ejemplo: VIEWS = [ VIEW1="template_en_base64", VIEW2="template_en_base64" ]
+
+
+
+CONSULTAR: 
+-que pasaria si en una federacion posee un namespace diferente a one.
+
+
+
+
+
+
+
+
+
+