CmdbuildGraph

This is an Sencha ExtJS example application for displaying data coming from CMDBuild, a free CMDB software, as graph, using visjs JavaScript library.

The motivation is both to have external CMDBuild graph display and propose to CMDBuild maintener, Tecnoteca, a replacement of the current obsolescent flash graph viewer.

Quick start

First, install your CMDBuild instance.

CORS

In order to make rest data available for CmdbuildGraph, a CORS filter has to be added to the CMDBuild web.xml configuration file: ${PATH_TO_TOMCAT}/webapps/cmdbuild/WEB-INF/web.xml

<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
</filter>
<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/services/rest/v1/*</url-pattern>
</filter-mapping>

As this seem not to be sufficient, here is a way to make CMdbuildGraph work getting ride of CORS error:

You have to configure Tomcat server.xml to serve your CmdbuildGrah application in the same domain, in order to avoid CORS errors:

In Server > Service > Engine > Host tag, add:

<Host name="localhost" ...>

...
  
<Context docBase="/var/www/" path="/cmdbg" />

...

</Host>

where docBase is a server directory where your CmbduilGraph application is accessible for tomcat user and cmdbg the name to use in URL (http://localhost:8080/cmdbg) to access it.

Note that it should be localhost, as typed in Host tag and not 127.0.0.1 to avoid CORS error to be thrown.

Then, proceed as follow:

• get sencha extjs 5.1
• unzip it
• generate app skeleton sencha generate app -sdk ext-5.1.0 CmdbuildGraph CmdbuildGraph
• clone this git repository git clone https://github.com/poum/CmdbuildGraph.git
• adapt the configuration in app/Application.js (credentials and URL to CMDBuild instane)
• launch sencha app watcher sencha app watch
• visit http://localhost:1841

Tools

• Sencha ExtJS framework, because is the one I currently know best (and I need model, store and rest proxy) and because it's the CMDBuild GUI engine
• Sencha cmd to facilitate ExtJs app development
• Sass (SCSS format) for styling
• visjs which seems to me be the easiest JavaScript graph generator (d3 could be fine too but not so easy and light ... For a next attempt, maybe ?

Roadmap

• DONE generate app skeleton
• DONE get session id from cmdbuild rest webservice (through CORS)
• DONE get node data

•  get edge data
  

•  formate data
  

•  draw graph
  

•  add asset selector
  

•  add credential form
  

ExtJs App structure

This folder is primarily a container for the top-level pieces of the application. While you can remove some files and folders that this application does not use, be sure to read below before deciding what can be deleted and what needs to be kept in source control.

The following files are all needed to build and load the application.

• "app.json" - The application descriptor which controls how the application is built and loaded.
• "app.js" - The file that launches the application. This is primarily used to launch an instance of the MyApp.Application class.
• "index.html" - The default web page for this application. This can be customized in "app.json".
• "build.xml" - The entry point for Sencha Cmd to access the generated build script. This file is a place where you can hook into these processes and tune them. See the comments in that file for more information.
• ".sencha" - This (typically hidden) folder contains the generated build scripts and configuration files for the application. This folder is required in order to build the application but its content should not need to be edited in most cases. The content of this folder is updated by "sencha app upgrade".

These files can be ignored from source control as they are regenerated by the build process.

• "build" - This folder contain the output of the build. The generated CSS file, consolidated resources and concatenated JavaScript file are all stored in this folder.
• "bootstrap.*" - These files are generated by the build and watch commands to enable the application to load in "development mode".

Other Folders

CmdbuildGraph/app

This folder contains the JavaScript files for the application.

CmdbuildGraph/resources

This folder contains static resources (typically an "images" folder as well).

CmdbuildGraph/overrides

This folder contains override classes. All overrides in this folder will be automatically included in application builds if the target class of the override is loaded.

CmdbuildGraph/sass

This folder contains the styling for the application's views. See CmdbuildGraph/sass/Readme.md for details.

Generation

$ sencha -sdk ext-5.1.0 generate app CmdbuildGraph CmdbuildGraph A

Watching for changes

$ sencha app watch

# CMDBuild webservice URL

##Session Id

POST http://demo.cmdbuild.org/cmdbuild/services/rest/v1/sessions

Content-type: application/json

{ "username": "compte", "password": "secret" }

Which will return:

{"data":
  {
    "username":"pouphi",
    "role":"SuperUser",
    "availableRoles":["SuperUser"],
    "_id":"kkr48crv866hiuftgvm02d5ki3"
  }
}

##Getting data from CMDBuild

GET http://demo.cmdbuild.org/cmdbuild/services/rest/v1/classes/PC/cards

Header: CMDBuild-Authorization: <_id>