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
TBD: Propiedad con la url del gitlabmanager
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:
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:
