I have been asked to update the System notification & current status widgets on our self service portal to include the description from the outage record in addition to the service and time. I have successfully made the changes to a cloned version of both widgets but for some reason when I drill down through the current status widget to the affected service the extra details are not displayed.
I should be able to see this
But i actually get this
Since its the same widget I am at a loss as to why its working fine until i get down to an individual service. The HTML & Server Script code blocks are below. Can anyone point me in the right direction?
Body HTML template
<div ng-if="!data.service || data.outages.length > 0" class="panel panel-{{options.color}} b">
<div class="panel-heading">
<h2 class="panel-title">${Current Status}<span ng-if="data.serviceDisplay"> - {{data.serviceDisplay}}</span></h2>
</div>
<div class="panel-body">
<div ng-if="!standalone && !data.service" class="hidden-xs">${We constantly monitor our services and their related components.} ${If there is ever a service interruption, a notification will be posted to this page.} ${If you are experiencing problems not listed on this page, you can submit a request for service.}</div>
<div ng-if="data.outages.length == 0" class="col-xs-12 bs-callout bs-callout-success">
<div ng-if="!data.service">${No system is reporting an issue}</div>
</div>
<div ng-if="data.outages.length > 0" ng-repeat="outage in data.outages" class="col-xs-12 bs-callout bs-callout-{{outage.type}}">
<a ng-if="!data.service" style="color:inherit" ng-href="?id=service_status&service={{outage.serviceID}}">{{outage.typeDisplay}} - {{outage.ci}} (${started {{outage.begin}}})
<a ng-if="!data.service" style="color:inherit" style="white-space: pre-line" ng-href="?id=service_status&service={{outage.serviceID}}">{{outage.desc}}
<div ng-if="options.show_outage_details == 'true' && outage.details" ng-bind-html="outage.details" class="sp-outage-details"></div>
</a>
<span ng-if="data.service" style="color:inherit">{{outage.typeDisplay}} - {{outage.ci}} (${started {{outage.begin}}})
<a ng-if="!data.service" style="color:inherit" style="white-space: pre-line" ng-href="?id=service_status&service={{outage.serviceID}}">{{outage.desc}}
<div ng-if="options.show_outage_details == 'true' && outage.details" ng-bind-html="outage.details" class="sp-outage-details"></div>
</span>
</div>
<div ng-if="::standalone"><a href="?id=services_status" aria-label="${More information, open current status page}">${More information...}</a></div>
</div>
</div>
Server Script
// populate the 'data' object
// e.g., data.table = $sp.getValue('table');
var outage = new GlideRecord("cmdb_ci_outage");
outage.addQuery("cmdb_ci.sys_class_name", "cmdb_ci_service");
outage.addQuery("cmdb_ci.short_description");
outage.addQuery("begin", "<=", gs.nowNoTZ());
outage.addQuery("end", ">=", gs.nowNoTZ()).addOrCondition("end", "=", "NULL");
data.service = (input && input.service) || $sp.getParameter("service");
if (!GlideStringUtil.nil(data.service)) {
outage.addQuery("cmdb_ci", data.service);
var serviceGR = new GlideRecord("cmdb_ci_service");
if (serviceGR.get(data.service))
data.serviceDisplay = serviceGR.getDisplayValue();
}
outage.query();
data.outages = [];
data.outageIDs = "";
while (outage.next()) {
var out = {};
out.typeDisplay = outage.type.getDisplayValue();
out.type = outage.getValue("type");
out.details = outage.getValue("details");
out.ci = outage.cmdb_ci.getDisplayValue();
out.serviceID = outage.getValue("cmdb_ci");
out.begin = outage.begin.getDisplayValue();
out.desc = outage.short_description.getDisplayValue();
data.outages.push(out);
data.outageIDs += "," + outage.getUniqueValue();
}
