How to show only our Service Offerings on the Business Services Status Widget

Tony Landowski
Kilo Contributor

I have a request to start showing the Status History section of the System Status page on our Service Portal.  This section is the Business Services Status widget.  I am trying to customize to only show our Service Offerings.  Can someone please help guide me on what I am missing to only show these.  Below are the HTML and Server Script sections of the widget.  

 

find_real_file.png

 

HTML:

<div class="panel panel-default">
<div class="panel-heading">&nbsp;</div>
<div class="panel-body">
<table class="tb">
<thead>
<th scope="col">
<h2 class="panel-title title">
${Status History}
</h2></th>
<th scope="col" ng-repeat="date in ::data.dates" class="date-column">{{::date.month}} {{::date.day}}</th>
</thead>
<tbody>
<tr ng-repeat-start="category in ::c.data.categories" aria-hidden="true">
<th scope="col" colspan="6" title="{{::category.label}}"><h3 class="title category" ng-bind-html="::category.label"></h3></th>
</tr>
<tr ng-repeat-end ng-repeat="service in ::category.services">
<td scope="row">
<small ng-if="::service.subscribed" class="subscribed" title="${Subscribed to updates}" aria-label="${Subscribed to updates}"><i class="fa fa-envelope"></i></small>
<a ng-href="?id=service_status&service={{::service.sys_id}}" ng-bind-html="::service.name"></a>
</td>
<td ng-repeat="n in [0,1,2,3,4] track by $index" class="outage-row">
<span class="fa" ng-class="::service.outages[4-$index].icon"
sp-tooltip
aria-label="{{::data.dates[$index].month + ' ' + data.dates[$index].day + ' - ' + service.outages[4-$index].msg}}"
role="application"
tooltip-smart="true"
tooltip-speed="slow"
tooltip-size="large"
tooltip-template="{{::service.outages[4-$index].msg + ' - ' + data.dates[$index].month + ' ' + data.dates[$index].day}}">
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>

Server Script:

(function() {
data.monthTranslations = {
'Jan': gs.getMessage("Jan"),
'Feb': gs.getMessage("Feb"),
'Mar': gs.getMessage("Mar"),
'Apr': gs.getMessage("Apr"),
'May': gs.getMessage("May"),
'Jun': gs.getMessage("Jun"),
'Jul': gs.getMessage("Jul"),
'Aug': gs.getMessage("Aug"),
'Sep': gs.getMessage("Sep"),
'Oct': gs.getMessage("Oct"),
'Nov': gs.getMessage("Nov"),
'Dec': gs.getMessage("Dec")
};

data.categories = [];
var svs = new GlideRecord("cmdb_ci_service");
//svs.addQuery("sys_class_name", "cmdb_ci_service");
svs.setLimit(options.number_of_services || 2000);
svs.orderBy("category");
svs.orderBy("name");
svs.query();
var currentCategory = "-";
var catIndex = -1;
while (svs.next()) {
var cat = svs.getValue("category");
if (cat != currentCategory) {
catIndex++;
currentCategory = cat;
data.categories[catIndex] = {};
data.categories[catIndex].name = cat;
data.categories[catIndex].label = svs.getDisplayValue("category");
if (data.categories[catIndex].label == "")
data.categories[catIndex].label = gs.getMessage("Service");
data.categories[catIndex].services = [];
}
var svc = {};
svc.sys_id = svs.getUniqueValue();
svc.name = svs.getDisplayValue();
svc.safeName = GlideStringUtil.escapeHTML(svc.name);
svc.subscribed = isSubscribed(svc.sys_id);
var outs = [];
for (var i = 0; i <= 4; i++) {
var out = new GlideAggregate("cmdb_ci_outage");
out.addQuery("cmdb_ci", svs.getUniqueValue());
out.addQuery("end", ">=", gs.daysAgoStart(i));
out.addQuery("begin", "<=", gs.daysAgoEnd(i));
out.addAggregate('COUNT', 'type');
out.query();
var svcOutageDay = {};
svcOutageDay.count = 0;

while (out.next()) {
var type = out.type;
var typeCount = out.getAggregate('COUNT', 'type');
svcOutageDay[type] = typeCount;
svcOutageDay.count += typeCount;
}
svcOutageDay.icon = "fa-check-circle";
svcOutageDay.msg = gs.getMessage("{0} - no outage", svc.safeName);
if (svcOutageDay.count > 1) {
svcOutageDay.icon = "fa-plus-circle";
svcOutageDay.msg = gs.getMessage("{0} - multiple issues", svc.safeName);
} else if (svcOutageDay.outage > 0) {
svcOutageDay.icon = "fa-exclamation-circle";
svcOutageDay.msg = gs.getMessage("{0} - outage", svc.safeName);
} else if (svcOutageDay.degradation > 0) {
svcOutageDay.icon = "fa-minus-circle";
svcOutageDay.msg = gs.getMessage("{0} - degradation of service", svc.safeName);
} else if (svcOutageDay.planned > 0) {
svcOutageDay.icon = "fa-info-circle";
svcOutageDay.msg = gs.getMessage("{0} - planned maintenance", svc.safeName);
}
outs.push(svcOutageDay);
}
svc.outages = outs;
data.categories[catIndex].services.push(svc);
}
data.dates = [];
for (var i = 5; i > 0; i--) {
var d = new GlideDate();
d.subtract(1000 * 3600 * 24 * (i - 1));
data.dates.push(d.getDisplayValueInternal());
}

function isSubscribed(id) {
var subs = new GlideRecord("m2m_sp_status_subscription");
subs.addQuery("sys_user", gs.getUserID());
subs.addQuery("cmdb_ci_service", id);
subs.query();
return subs.hasNext();
}
})();

1 ACCEPTED SOLUTION

Community Alums
Not applicable

Service Offering is extended from Business Service, so you can do this simply by changing the table you are looking at.

Change

var svs = new GlideRecord("cmdb_ci_service");

To

var svs = new GlideRecord("service_offering");

Please mark correct if this solves your issue and helpful 👍 if it has assisted you.

View solution in original post

5 REPLIES 5

Hi Allen,

 

The above information was helpful. Something related to this only, what if i want to show both the business service and their respective service offerings on the portal?

Is there a way to achieve it? and if so, how can i do that?

 

Regards,

Surabhi