What is 'service' in the OOTB Current Status widget?

[kim-lindgren]

In the Current Status widget, we have conditional rendering in the HTML based on ng-if="data.service" (and in the second case ng-if="!data.service"). The service is set server-side based on an input variable that is not defined there:

var outage = new GlideRecord("cmdb_ci_outage");
outage.addQuery("cmdb_ci.sys_class_name", "IN", options.sys_class_list || "cmdb_ci_service");
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();
}

Logging the input variable returns null. Logging data.service, likewise. What is happening here? I'm asking because I want to remove the superfluous conditional HTML. I have already removed it in my cloned widget and everything works fine, but I want to make sure  it does not have any unpredictable side-effects.

Here is the HTML template in full just in case you need to see it. Note that data.service is being checked in many different places:

<div ng-if="!data.service || data.outages.length > 0" class="panel panel-{{options.color}} b">
  <div class="panel-heading">
    <h3 class="panel-title">${Current Status}<span ng-if="data.serviceDisplay"> - {{data.serviceDisplay}}</span></h3>
  </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}}})
        <div ng-if="options.show_outage_details == 'true' && outage.details" ng-bind-html="::trustAsHtml(outage.details)" class="sp-outage-details"></div>
      </a>
      <span ng-if="data.service" style="color:inherit">{{outage.typeDisplay}} - {{outage.ci}} (${started {{outage.begin}}})
        <div ng-if="options.show_outage_details == 'true' && outage.details" ng-bind-html="::trustAsHtml(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>

Regards,

Kim

[Kieran Anson · Accepted solution]

Because the widget has two display modes, the ng-if logic is cater to the two user journeys.

A user can navigate straight to the service_status page. If they do so, there won't be a parameter for 'service' and instead they'll see the below for an ongoing outage

Note that the outage record for the blackberry service is a link, and selecting it navigates to the below which is the same page, but with the parameters to control the display of additional widgets.

The same widget is used on the index page. The presentation is controlled by the standalone widget option. Clicking on an outage record will navigate to the second screenshot above with a parametised URL. Clicking 'More information' will go to the same page without the service parameter

[kim-lindgren]

Thanks, I see now that if I remove the service parameter I will no longer be redirected to that overview of the last 90 days. For now we don't need it but it's good to know in case we want to bring it back at some point. 🙂