Editor Gitlab - Integración Plataforma

El editor Gitlab consta de un componente web desarrollado en VueJS y de un microservicio backend separado del resto de módulos de la plataforma (forma parte de los módulos del center).

La integración con plataforma consigue del siguiente modo:

El componente VueJS se puede incrustar en las pantallas HTML de la plataforma, necesitando para su funcionamiento, que se informe un objeto con el token OAuth del usuario logado en plataforma, así como de la url donde está el módulo Gitlab-manager, que le proporciona los servicios de Backend.

A su vez el módulo Gitlab-manager, se configura mediante variables de entorno para informarle que está dando servicio a un front desde plataforma, el servidor OAuth de plataforma contra el que puede autenticar al usuario, así como del servidor Serverless-manager de plataforma (de momento solo está integrado para funciones Serverless) desde donde recupera la configuración del Gitlab de la aplicación Serverless.

Configuración Módulo Gitlab-manager

Este módulo se encuentra entre los componentes de proyecto Onesait Platform Center:

Código fuente en Gitlab: https://gitlab.devops.onesait.com/onesait/platform/engine/onesait-platform/control-center/-/tree/develop/sources/modules/platform-center-gitlab-manager
Imagen contenerizada en Registro: https://registry.onesaitplatform.com/repository/onesaitplatform/onesait-platform-gitlab-manager

A nivel de contenedor, la configuración que necesita para funcionar con Onesait Platform viene dada por las siguientes variables de entorno:

GITLAB_BACKEND_TYPE: platform
SERVER_NAME: https://<server_url>

Con la variable SERVER_NAME se monta la url de los servicios de OAuth2:

SERVER_NAME=platform-console.onesaitplatform.com \
OAUTH2_ISSUER_URI=<https://${SERVER_NAME}/auth/realms/onesaitplatform> \
OAUTH2_JWK_SET_URI=<https://${SERVER_NAME}/auth/realms/onesaitplatform/protocol/openid-connect/certs> \
OAUTH2_OPENID_URL=<https://${SERVER_NAME}/auth/realms/onesaitplatform/protocol/openid-connect> \

Aunque en caso de que se desee modificar para apuntar a otro servidor OAuth2, las variables a configurar serían:

OAUTH2_ISSUER_URI: https://<server_url>/auth/realms/onesaitplatform
OAUTH2_JWK_SET_URI: https://<server_url>/auth/realms/onesaitplatform/protocol/openid-connect/certs
OAUTH2_OPENID_URL: https://<server_url>/auth/realms/onesaitplatform/protocol/openid-connect

Asímismo puede ser necesario indicar la url del servicio “serverless-manager“, Por defecto está configurada para utilizar el servicio interno:

SERVERLESS_URL=http://serverless-manager:8086/serverless-manager

Configuración Control Panel

El control panel está configurado para utilizar por defecto la url por defecto del gitlab-manager

GITLAB_MANAGER_URL: https://<server_url>/gitlab

En caso de que se necesite apuntar a otra instancia del gitlab-manager, esta URL es parametrizable mediante dicha variable de entorno.

Integración Componente VueJS en HTML de plataforma

El editor forma parte de los componentes visuales del control center. Podemos encontrar el código fuente en el gitlab del proyecto:

https://gitlab.devops.onesait.com/onesait/platform/engine/onesait-platform/control-center/-/tree/develop/sources/ui/platform-front/src/modules/git-editor

Es necesario compilar la última versión del código fuente situandose en:

control-center/sources/ui/platform-front/src/modules/git-editor

y ejecutando:

npm run library

Lo que generará el directorio dist con el editor

Renombramos esta carpeta a git-editor y ya tendriamos el componente exportable

Para integrar el componente en plataforma seleccionamos el control-panel y añadimos la carpeta git-editor en la carpeta de extensiones vendor

Con esto ya podemos integrar el componente en cualquier HTML del proyecto. Para ello:

Instanciar Vue

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>

Importar Componente

Teniendo esto, en el componente elegido se importaría como si fuese otro componente cualquiera. Por la necesidad de meterle el token, actualmente se implementa debajo del script principal o al menos que sus variables estén declaradas antes de su inicialización.

Incrustarlo en el HTML

Pasarle la configuración del gitlab-manager (backend) que le servirá la información

Estas variables se deben incluir en el script por encima de la declaración del editor.

OBLIGATORIAS:

projectId: El id del proyecto (en el caso del center) o del concepto de plataforma del que recuperar la congiuración Gitlab.

baseUrl: Url del gitlab-manager

token: de la sesión.

OPCIONAL:

isFile: (opcional) Modo para mostrar el editor con un un solo archivo (si arbol).

NOTAS:

Actualmente se adapta al ancho de la pantalla, pero hay que darle un height máximo.

Plataforma usa bootstrap y sus estilos, también se instancia una versión antigua de Codemirror.

Si en el componente se instancia Codemirror a parte, hay que ponerlo debajo de la declaración del git-editor, si no absorbe el Codemirror instancia antes.

Codemirror tiene un fallo con bootstrap y algunas clases dentro de plataforma, para solucionarlo: