Dataview and Details customization
Viewpoint displays content based on dataviews and detailsproperties. Dataviews are used on pages (such as most "Management" pages) that display grids listing possible objects of a certain type, and usually—though not always—allow filtering and sorting. From these dataview pages, users can click a record that will open a Details view of the selected object that displays detailed information for the individual object.
Contained in the Viewpoint home directory under a sub-directory for the suite (for example, opt/viewpoint/cloud/) is a file named DataviewConfig.groovy. This file contains the layout and structure of the data grid and details pages within Viewpoint. The contents are each laid out per Viewpoint page.
dataview
"dataview" explanation
The following are (and must be) valid JSON constructs.
sort
- DV_SORT_SORT Specifies the default column to sort by on page load. Valid values are ASC or DESC. For example:
"sort": {"${DV_SORT_SORT}": [{"name": "ASC"}]},
page
- DV_PAGE_NUMBER Specifies which page of results to display on page load. Default: 0. For example:
- DV_PAGE_COUNT Specifies the number of records to show per page. For example:
"page": {"${DV_PAGE_NUMBER}": 0,"${DV_PAGE_COUNT}": 20},
"page": {"${DV_PAGE_NUMBER}": 0,"${DV_PAGE_COUNT}": 20},
filter
- facets Specifies the array of "caption" and "query.
- caption Specifies the user-facing text (name of the query). This key first references messages.properties (for example: "caption":"dataview.serviceCatalog.filterCaption.moabEnabled"). If no value exists in messages.properties, then Viewpoint uses the value in this field (for example: "caption":"My Caption"). For example:
- query Specifies a predefined filter that should be applied on page load to the records on the page. Note that users can remove this filter in the interface. Valid JSON is required. For example:
"filter":{"facets":[{"caption":"dataview.serviceCatalog.filterCaption.moabEnabled",query:{"attributes.csa.moabEnabled":true}}]},
"filter":{"facets":[{"caption":"dataview.serviceCatalog.filterCaption.moabEnabled",query:{"attributes.csa.moabEnabled":true}}]},
postFilter
Specifies a predefined filter that should be applied on page load to the records on the page. Note that users cannot remove this filter in the interface. Valid JSON is required. For example:
"postFilter":{"phase":"Rejected"}
actions
- buttons Specifies which buttons are available (order insensitive). Default: "visible":true.
- id Specifies the button ID.
- visible Specifies whether or not the button is visible. Valid values are true (show) or false (hide).
- actionsBar This construct is not currently in use.
For example:
"actions": {
"buttons": [{"id":"newBtn","visible":false},{"id":"edit","visible":true},{"id":"delete","visible":true}],
Making buttons visible that are hidden by default in your suite may cause unintended results.
data
- viewProperties Specifies the following properties for the page:
- multiSelect Specifies whether or not users can multi-select objects on the page. Default: "multiSelect":false. For example:
- itemsPerPage Specifies the numbers available in the "items per page" drop-down.
"data" : { "viewProperties": { "multiSelect":true, "itemsPerPage":[20,30,50,100] },The functionality of multiSelect varies from page-to-page. It is recommended that you do not change it for existing pages.
For example:
"data" : { "viewProperties": { "multiSelect":true, "itemsPerPage":[20,30,50,100] }, - pager Specifies that you want the grid navigation bar to be visible at the bottom of the grid. Default: "pager":"true".
- topPager Specifies that you want the grid navigation bar to be visible at the top of the grid. Default: "topPager":"false".
- view Specifies information specific to each column that displays on the page.
- DV_PRIMARY_KEY Specifies the MWS identifier for the row, and should not be changed.
- DV_ID_KEY Specifies the key used for the column. This field is used if DV_DB_KEY does not exist within MongoDB in MWS.
- DV_TITLE_KEY Specifies the text for the column heading. This key first references messages.properties. If no key exists in messages.properties, the ID/primary key is used.
- DV_VISIBLE_KEY Specifies to show or hide the column. Valid values are 1 (visible is true) or 0 (visible is false) (for example, "${DV_VISIBLE_KEY}": 0).
- DV_SORTABLE_KEY Specifies whether or not to allow column sorting. Valid values are 1 (sortable is true) or 0 (sortable is false) (for example, "${DV_SORTABLE_KEY}": 1).
- DV_FILTERABLE_KEY Specifies whether or not to allow column filtering. Valid values are 1 (filterable is true) or 0 (filterable is false) (for example, "${DV_FILTERABLE_KEY}": 1).
- DV_TYPE_KEY Specifies the data type for the column. Valid values are:
DV_STRING_TYPE
- DV_LONG_TYPE
- DV_FLOAT_TYPE
DV_DATE_TYPE
DV_BOOLEAN_TYPE
- DV_WIDTH_KEY Specifies the width of the column on initial page load (because columns are resizable on the page). The value is a number that represents the ratio of width in relation to other columns (for example: "${DV_WIDTH_KEY}": 50 would be five times wider than "${DV_WIDTH_KEY}": 10).
- DV_DB_KEY Specifies the database key to use for search, filter and sort. This value becomes DV_ID_KEY if that field is not specified.
- DV_CLASSNAME_KEY Specifies the class you would like to apply to the column (for styling changes). For example: "${DV_CLASSNAME_KEY}": "redText"
- DV_NUM_FORMAT_KEY Specifies the Java number format you wish to use on a field that returns a number (for example: "${DV_NUM_FORMAT_KEY}": "###,###,##0.##").
- DV_DATE_FORMAT_KEY Specifies the Java date format you wish to use on a field that returns a number (for example: "${DV_DATE_FORMAT_KEY}": "mm/dd/yyyy"
- DV_DEFAULT_EMPTY_KEY Specifies a default message for the column if data does not exist—for instance, "Not Available" or "None." This key first references messages.properties (for example: "${DV_DEFAULT_EMPTY_KEY}": "dataview.empty.none"). If no value exists in messages.properties, then you can specify a value with this field (for example: "${DV_DEFAULT_EMPTY_KEY}": "Not Available"). Leave this key empty if you want the field left blank.
- DV_COMPONENT_TYPE_KEY Specifies a gsp template to use in formatting data (for example, to display data as a list, table, etc.). Component type templates are located in /views/shared/componentTypes directory. For example, if you wanted to truncate the data after 10 characters:
- DV_JOIN_KEY Lets you join arrays with the value specified (for example, to separate with a comma and a space: "${DV_JOIN_KEY}":", ").
- DV_CHILDREN_KEY Lets you specify children of an array to be a column. This key works in combination with DV_JOIN_KEY. This is an array that has "view" object in it to specify children. For example:
Not all columns are sortable (for example, aggregate columns).
Not all columns are filterable (for example, aggregate columns).
... "${DV_COMPONENT_TYPE_KEY}": { "type": "stringTruncate", "optional": { "truncateLength": 10 } }In this example, the key references the "stringTruncate" gsp file, located in the /views/shared/componentTypes directory.
... "${DV_CHILDREN_KEY}": [ { "${DV_ID_KEY}": "processors", "${DV_TITLE_KEY}": "Procs", "${DV_VISIBLE_KEY}": 1, "${DV_SORTABLE_KEY}": 1, "${DV_FILTERABLE_KEY}": 0, "${DV_TYPE_KEY}": "${DV_STRING_TYPE}", "${DV_WIDTH_KEY}": 95, "${DV_DBKEY_KEY}": "resourcesPerTask.processors.dedicated" }, { "${DV_ID_KEY}": "memory", "${DV_TITLE_KEY}": "Mem", "${DV_VISIBLE_KEY}": 1, "${DV_SORTABLE_KEY}": 1, "${DV_FILTERABLE_KEY}": 0, "${DV_TYPE_KEY}": "${DV_STRING_TYPE}", "${DV_WIDTH_KEY}": 95, "${DV_DBKEY_KEY}": "resourcesPerTask.memory.dedicated" } ]In this example, "processors" and "memory" are their own column because DV_JOIN_KEY was not used. To change this behavior, you would simply specify a DV_JOIN_KEY.
"dataview" example
nodes = """{
"sort": {
"${DV_SORT_SORT}": [
{
"name": "ASC"
}
]
},
"page": {
"${DV_PAGE_NUMBER}": 0,
"${DV_PAGE_COUNT}": 20
},
"filter": "{}",
"actions": {
"buttons": [],
"actionsBar": {
"id": "vmActions",
"visible": true
}
},
"data": {
"viewProperties": {
"itemsPerPage": [
20,
30,
50,
100
],
"multiSelect": true
},
"view": [
{
"${DV_PRIMARY_KEY}": "name",
"${DV_VISIBLE_KEY}": 1,
"${DV_SORTABLE_KEY}": 1,
"${DV_FILTERABLE_KEY}": 1,
"${DV_TYPE_KEY}": "${DV_STRING_TYPE}",
"${DV_WIDTH_KEY}": 20
},
{
"${DV_ID_KEY}": "datacenter",
"${DV_DBKEY_KEY}": "attributes.MOAB_DATACENTER.displayValue",
"${DV_VISIBLE_KEY}": 1,
"${DV_SORTABLE_KEY}": 1,
"${DV_FILTERABLE_KEY}": 1,
"${DV_TYPE_KEY}": "${DV_STRING_TYPE}",
"${DV_WIDTH_KEY}": 20
},
{
"${DV_ID_KEY}": "state",
"${DV_DBKEY_KEY}": "states.state",
"${DV_VISIBLE_KEY}": 1,
"${DV_SORTABLE_KEY}": 0,
"${DV_FILTERABLE_KEY}": 0,
"${DV_TYPE_KEY}": "${DV_STRING_TYPE}",
"${DV_WIDTH_KEY}": 10
},
{
"${DV_ID_KEY}": "totalMemory",
"${DV_DBKEY_KEY}": "resources.memory.configured",
"${DV_VISIBLE_KEY}": 1,
"${DV_SORTABLE_KEY}": 1,
"${DV_FILTERABLE_KEY}": 0,
"${DV_TYPE_KEY}": "${DV_LONG_TYPE}",
"${DV_WIDTH_KEY}": 20
},
{
"${DV_ID_KEY}": "totalProcessors",
"${DV_DBKEY_KEY}": "resources.processors.configured",
"${DV_TITLE_KEY}": "dataview.nodes.title.totalProcessors",
"${DV_NUM_FORMAT_KEY}": "###,###,##0.##",
"${DV_VISIBLE_KEY}": 1,
"${DV_SORTABLE_KEY}": 1,
"${DV_FILTERABLE_KEY}": 0,
"${DV_TYPE_KEY}": "${DV_NUMBER_TYPE}",
"${DV_WIDTH_KEY}": 10
},
{
"${DV_ID_KEY}": "reservations",
"${DV_VISIBLE_KEY}": 1,
"${DV_SORTABLE_KEY}": 1,
"${DV_FILTERABLE_KEY}": 0,
"${DV_TYPE_KEY}": "${DV_STRING_TYPE}",
"${DV_WIDTH_KEY}": 25,
"${DV_CHILDREN_KEY}": [
{
"${DV_ID_KEY}": "reservationName",
"${DV_DBKEY_KEY}": "name",
"${DV_TITLE_KEY}": "dataview.nodes.title.reservations",
"${DV_VISIBLE_KEY}": 1,
"${DV_SORTABLE_KEY}": 1,
"${DV_FILTERABLE_KEY}": 0,
"${DV_TYPE_KEY}": "${DV_STRING_TYPE}",
"${DV_WIDTH_KEY}": 25,
"${DV_JOIN_KEY}": ", "
}
]
},
{
"${DV_ID_KEY}": "featuresReported",
"${DV_VISIBLE_KEY}": 1,
"${DV_SORTABLE_KEY}": 1,
"${DV_FILTERABLE_KEY}": 0,
"${DV_TYPE_KEY}": "${DV_STRING_TYPE}",
"${DV_WIDTH_KEY}": 50,
"${DV_JOIN_KEY}": ", "
}
]
}
}"""
detailsproperties
"detailsproperties" explanation
The following are (and must be) valid JSON constructs.
section
Indicates an array of sections available for details. See line 2 in the example code below.
- title Specifies the main heading for the detail section. See line 4 in the example code.
- properties Specifies the following properties for each field that displays in the section. See line 5 in the example code.
- id Specifies the ID of the key that corresponds to the field you want to display. See line 7 in the example code.
- displayName Specifies the text that displays for the field. See line 8 in the example code.
- component Contains the "type" element (see line 9 in the example code). Each component type has a corresponding gsp file that dictates formatting.
- type Specifies the data type, for example: string, date, number, boolean, link, etc. See line 10 in the example code.
The string type causes values to display as a string. If you do not specify a type, string is assumed by default. You can display numeric values as a string. See line 10 in the example code and the green arrow in the screen shot.
The percentage type causes values to display as a two-digit precision decimal with a percent symbol. See line 204 in the example code and the blue arrow in the screen shot.
The list type is used for multiple values in a list. Within the list type, you can specify additional types. See line 80 in the example code and the purple arrow in the screen shot.
The link type contains additional elements, for example: property and href. property is the value you want to pass into the link URL. href is the actual link. For example, specifying a property value of "name" and an href value of "/moab/vms/details" causes a link to display that points to http://<localhost:8080>/moab/vms/details/<name> for each item in the list. See lines 99-101 in the example code and the red arrow in the screen shot.
Certain data types have an optional component, such as className, join, etc. You can use these to further manipulate how a data type is displayed. For example, adding className to a string type with a value of "node-power-state" causes an "on" or "off" icon to appear with the text, depending on the node state because there is a CSS class that creates the formatting. See line 28 in the example code and the orange arrow in the screen shot.
Click to enlarge
- hidden Specifies whether or not the field is hidden. Default: "hidden":"false". See line 12 in the example code.
"detailsproperties" example
node = """{
"section": [
{
"title": "Node Details",
"properties": [
{
"id": "name",
"displayName": "Name",
"component": {
"type": "string"
},
"hidden": false
},
{
"id": "states.state",
"displayName": "State",
"component": {
"type": "string"
},
"hidden": false
},
{
"id": "states.powerState",
"displayName": "Power",
"component": {
"type": "string",
"optional": {
"className": "node-power-state"
}
},
"hidden": false
},
{
"id": "attributes.MOAB_TENANT.displayValue",
"displayName": "Tenant",
"component": {
"type": "string"
},
"hidden": false
},
{
"id": "attributes.MOAB_DATACENTER.displayValue",
"displayName": "Datacenter",
"component": {
"type": "string"
},
"hidden": false
},
{
"id": "ipAddress",
"displayName": "IP Address",
"component": {
"type": "string"
},
"hidden": false
},
{
"id": "operatingSystem.image",
"displayName": "Image",
"component": {
"type": "string"
},
"hidden": false
},
{
"id": "operatingSystem.hypervisorType",
"displayName": "Hypervisor type",
"component": {
"type": "string"
},
"hidden": false
},
{
"id": "resourceManagers",
"displayName": "Resource Managers",
"component": {
"type": "list",
"optional": {
"type": "object",
"list": [
{
"property": "name",
"showLabel": false
}
]
}
},
"hidden": false
},
{
"id": "virtualMachines",
"displayName": "Virtual machines",
"component": {
"type": "list.none",
"optional": {
"type": "object",
"list": [
{
"type": "link",
"property": "name",
"href": "/moab/vms/details"
}
]
}
},
"hidden": false
},
{
"id": "jobs",
"displayName": "Jobs",
"component": {
"type": "list.none",
"optional": {
"type": "object",
"list": [
{
"type": "link",
"property": "name",
"href": "/moab/job/details",
"parameter": "nodelist=true"
}
]
}
},
"hidden": false
},
{
"id": "reservations",
"displayName": "Reservations",
"component": {
"type": "list.none",
"optional": {
"type": "object",
"list": [
{
"type": "link",
"property": "name",
"filterName": "type",
"filterValue": "user",
"href": "/moab/viewReservations/details"
}
]
}
},
"hidden": false
}
]
},
{
"title": "Resources",
"properties": [
{
"id": "resources.processors.real",
"displayName": "Real processors",
"component": {
"type": "string"
},
"hidden": false
},
{
"id": "resources.processors.configured",
"displayName": "Processor overcommit limit",
"component": {
"type": "string"
},
"hidden": false
},
{
"id": "resources.processors.available",
"displayName": "Available processors",
"component": {
"type": "string"
},
"hidden": false
},
{
"id": "resources.memory.real",
"displayName": "Real memory (MB)",
"component": {
"type": "string"
},
"hidden": false
},
{
"id": "resources.memory.configured",
"displayName": "Memory (MB) overcommit limit",
"component": {
"type": "string"
},
"hidden": false
},
{
"id": "resources.memory.available",
"displayName": "Available memory (MB)",
"component": {
"type": "string"
},
"hidden": false
},
{
"id": "metrics.cpuUtilization",
"displayName": "CPU utilization",
"component": {
"type": "percentage"
},
"hidden": false
},
{
"id": "name",
"displayName": "Generic Resources",
"component": {
"type": "gResources",
"optional": {
"join": ", "
}
},
"hidden": false
}
]
}
]
}"""
Related topics