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).
...
A nivel de contenedor, la configuración que necesita para funcionar con Onesait Platform es:
...
gitlab.backend_type: 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:
| Code Block |
|---|
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>authurl>/auth/realms/onesaitplatform
spring.security.oauth2.resourceserver.jwt.jwk-set-uriOAUTH2_JWK_SET_URI: https://<server_url>/auth/realms/onesaitplatform/protocol/openid-connect/certs
onesaitplatform.oauth.urlOAUTH2_OPENID_URL: https://<server_url>/auth/realms/onesaitplatform/protocol/openid-connectonesaitplatform.serverless.server:
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 gitlabmanagerEl 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 plataformaTBD: Como se integra el componente VueJS en los HTML de plataforma y que necesita recibir desde el controlador
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
| Code Block |
|---|
<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:
...