Tworzenie prostego pluginu do vCloud Director 10

Zdarza się, że w ramach naszego środowiska potrzebujemy spersonalizowanych rozwiązań. Często potrzebujemy funkcjonalności prostej, ale niedostępnej w upośledzonych produktach. Możemy tworzyć wirtualne datacenter, zarządzać siecią, maszynami wirtualnymi, storage, ale nie możemy dodać własnej strony np. z dokumentacją czy tutorialami i to jednym kliknięciem. Tak też jest w przypadku vCloud Director 10. Aby nasza strona pojawiła się w burger menu, czyli tam gdzie najczęściej klika użytkownik, musimy utworzyć plugin. Oczywiście tego typu plugin może robić znacznie więcej niż wyświetlać filmik z Youtuba, ale jak widzimy banalna sprawa, a tyle komplikacji.

Potrzebujemy kilka elementów, aby taki prosty plugin przygotować. Wymagane jest środowisko linux lub inne z zainstalowanymi pakietami npm, nodejs, git i yarp (poniżej przykład w systemie Debian 10). Wybrałem ten system ze względu na szybką instalację. Samo przygotowanie pluginu wykonałem w 6 krokach. No to zaczynajmy.

1. W tym kroku instalujemy  niezbędne pakiety. Oprócz git, który pobierze nam szablon, potrzebujemy samego npm do kompilacji oraz yarp i nodejs. Te dwa ostanie pakiety dostarczają nam dodatkowe pakiety wymagane do kompilacji. Poniżej instalacja pakietów w systemie Debian 10. 1

apt-get install npm nodejs yarp git 

2. Potrzebujemy szablonu, który jest udostępniony na github.com. Szablon jest niewielki, więc z pobraniem nie powinno być problemu.  

git clone -b plugin-seed-9.1 --single-branch https://github.com/vmware-samples/vcd-ext-samples.git

3. Po pobraniu szablonu zostanie utworzony katalog vcd-ext-samples. Zmiany wizualne dodatku wprowadzamy w plikach:

•	simple.component.html
•	simple.component.scss

znajdujące się w katalogu vcd-ext-samples/src/main/simple. Oprócz tych plików możemy dodać inne i je zagnieździć. Oczywiście nazwy plików możemy zmienić, ale musimy pamiętać o zmianach nazw w innych plikach. Wspierany jest html oraz zmienne, które np. będą wyświetlać aktualnie zalogowanego użytkownika vCD. Poniżej przykładowy plik:

<div>
  <p><i>Logged into {{tenant | async}} as {{username | async}}</i></p>
  <h1>{{"tos.title" | translate}}</h1>
  <p>{{"tos.1" | translate}}</p>
  <p>{{"tos.2" | translate}}</p>
  <img src="{{assetUrl}}/monkey.jpg" alt="Thoughtful Primate">
   <iframe src="https://lelusz.comblog"></iframe>
</div>

W katalogu vcd-ext-samples/src/main/public znajdują się pozostałe elementy typu zdjęcia naszej małpki oraz tekst, jaki ma być na stronie. Jak widzimy możliwości mamy sporo.

Mamy tam też plik manifest.json. Plik ten pozwala autorowi wtyczki zdefiniować metadane dotyczące wtyczki, które będą identyfikować wtyczkę w panelu administratora vCloud Director. Poniżej przykład pliku wraz z opisem.

{
    "urn": "vmware:vcloud:plugin:seed",
    "name": "Inleo Blog",
    "containerVersion": "9.1.0",
    "version": "1.0.0",
    "scope": ["service-provider", "tenant"],
    "permissions": [],
    "description": "Przykładowy plugin",
    "vendor": "Inleo",
    "license": "Copyright (C) VMware 2017-2018.  All rights reserved.",
    "link": "http://inleo.pl/blog",
    "module": "SimplePluginModule",
    "route": "plugin"
}

Pole	Opis
urn	Unikatowy identyfikator URN
name	Nazwa pluginu
description	Opis pluginu
vendor	Producent pluginu
license	Informacje na temat licencji
link	URL do pomocy technicznej
containerVersion	Wersja vCD potrzebna do instalacji dodatku
scope	Wskaźnik vCD, które portale mają wykorzystać tę wtyczkę (wartości: [“tenant” | “service-provider”])
module	Nazwa głównego eksportowanego modułu, który ma być dynamicznie ładowany przez vCD

4. Aby skompilować dodatek należy przejść do katalogu głównego np. vcd-ext-samples oraz wykonać polecenia:

npm ci – wykonuje instalacje zależności dla projektu
npm run build – kompiluje dodatek

Po poprawnym wykonaniu kompilacji powinien zostać utworzony katalog dist z plikami/katalogami:

• assets
• bundle.js
• i18n.json
• manifest.json
• plugin.zip

5. Po skompilowaniu instalacja wydaje się być już tylko formalnością. Logujemy się jako administrator to portalu provider’a. Przechodzimy do Customize Portal 5.

Klikamy Upload

Po otwarciu kreatora klikamy Select Plugin File oraz wskazujemy wygenerowany plik plugin.zip z katalogu dist

Zostanie wyświetlone podsumowanie dodatku. Przechodzimy dalej przez naciśniecie NEXT

Wybieramy w jakich tenantach ma zostać opublikowany plugin

Przechodzimy dalej i kończymy działanie kreatora przyciskiem FINISH.

6. Testowanie działania

Po poprawnej instalacji dodatek powinien pojawić się w menu Customize Portal oraz w burger menu

Przechodząc do pluginu w burger menu sprawdzamy czy wszystko wyświetla nam się poprawnie.

Efektem końcowym jest ładnie zagnieżdżona strona w vCD

Jak widzimy mamy spore możliwości tworzenia takich dodatków oraz publikowania ich dla konkretnych tenantów. Dzięki temu możemy decydować kto ma dostęp do jakiejś zawartości, a do jakiej nie. Samo wykonanie takiego pluginu w podstawowej wersji nie jest skomplikowane, ale czy nie można było zaimplementować tego tak, aby zrobić to wszystko dwoma kliknięciami myszki?