From vszocs at redhat.com Mon Nov 19 09:29:24 2012 Content-Type: multipart/mixed; boundary="===============1230086830684676042==" MIME-Version: 1.0 From: Vojtech Szocs To: devel at ovirt.org Subject: [Engine-devel] UI plugins crash course (for plugin developers) Date: Mon, 19 Nov 2012 09:29:24 -0500 Message-ID: <415793932.7311099.1353335364366.JavaMail.root@redhat.com> In-Reply-To: 288289482.7271048.1353327709415.JavaMail.root@redhat.com --===============1230086830684676042== Content-Type: text/plain; charset="utf-8" MIME-Version: 1.0 Content-Transfer-Encoding: quoted-printable Hi guys, Oved asked me how to get started with writing UI plugins, and I thought I'd= post a quick "crash course" for writing simple UI plugin here. Level 1 - Plugin basics =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D 1. Sync with upstream git repository and apply recent UI plugin patches (re= v.6 and rev.7) $ cd $ git fetch && git rebase origin $ git fetch git://gerrit.ovirt.org/ovirt-engine refs/changes/20/8120/4 && g= it checkout FETCH_HEAD $ git fetch git://gerrit.ovirt.org/ovirt-engine refs/changes/50/9250/2 && g= it checkout FETCH_HEAD 2. Verify your default (machine-specific) Engine configuration - do this if= /usr/share/ovirt-engine/conf doesn't exist yet: $ mkdir -p /usr/share/ovirt-engine/conf $ cp /backend/manager/conf/engine.conf.defaults /usr/share/ovir= t-engine/conf/engine.conf.defaults 3. Create plugin descriptor $ mkdir /usr/share/ovirt-engine/ui-plugins $ vim /usr/share/ovirt-engine/ui-plugins/hello-ui-world.json [hello-world.json] { "name": "HelloWorldPlugin", "url": "/webadmin/webadmin/plugin/HelloWorldPlugin/start.html", "resourcePath": "hello-world-files" } [/hello-ui-world.json] 4. Create plugin host page $ mkdir /usr/share/ovirt-engine/ui-plugins/hello-world-files $ vim /usr/share/ovirt-engine/ui-plugins/hello-world-files/start.html [start.html] [/start.html] 5. See plugin in action by logging into WebAdmin, you should see following = message in Engine log: ... Reading UI plugin descriptor [/usr/share/ovirt-engine/ui-plugins/hello-= ui-world.json] Level 2 - Using plugin API =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D 6. Add custom main tab that shows content of the given URL [start.html] ... api.register({ UiInit: function() { api.addMainTab('Test Tab', 'test-tab', 'http://www.example.com/'); } }); ... [/start.html] 7. Update main tab content URL [start.html] ... # Anywhere within event handler function code (e.g. UiInit) api.setMainTabContentUrl('test-tab', 'http://www.another-example.com/'); ... [/start.html] 8. Add custom context-sensitive button to existing main tab [start.html] ... api.register({ UiInit: function() { api.addMainTabActionButton('Host', 'Do something with selected host', { onClick: function() { # arguments[0] is the first selected item var hostId =3D arguments[0].entityId; window.alert('Host ID ' + hostId); }, isEnabled: function() { # This button is enabled only on single item selection return arguments.length =3D=3D 1; } }); } }); ... [/start.html] 9. Show custom dialog that shows content of the given URL [start.html] ... # Anywhere within event handler function code (e.g. UiInit) api.showDialog('Test Dialog', 'http://www.example.com/', 600, 400); ... [/start.html] Level 3 - REST API integration =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D 10. Get notified upon acquiring new Engine REST API session [start.html] ... api.register({ RestApiSessionAcquired: function(sessionId) { window.alert('REST API session ID ' + sessionId); } }); ... [/start.html] Regards, Vojtech --===============1230086830684676042==--