Hi Everyone,
After being a part of a webinar run in our area about the System Status page and the presenter mentioning one of their other customers have added the number of outages next to their header menu item, I thought I would set out to do the same! As it turns out, it isn't as easy as I thought, but here is how I did it:
Requirements
- Task-Outage Relationship (com.snc.task_outage) for the Short Description
- Business Services / Outages being used
The Template
In order to change the displayed items in the filtered list, we need to add a new "Type" to the spDropdownTreeTemplate angular template that is used to render the list. I copied the Incident/Request one, and updated the fields + link and added "Started" for outages. Here's the whole template, with my extra section between the comments:
<a ng-if="mi.type == 'link'" title="{{::mi.title}}" target="{{::mi.target}}" ng-href="{{::mi.href}}">
{{::mi.title | characters:60}}
</a>
<a ng-if="mi.type == 'record' && !mi.__page" title="{{::mi.short_description}}" href="?id=ticket&table={{::mi.__table}}&sys_id={{::mi.sys_id}}">
<span>{{::mi.short_description | characters:60}}</span>
<span class="block color-primary text-muted">
<span class="block" style="float: right">
<sn-time-ago timestamp="::mi.sys_updated_on" />
</span>
{{mi.number}}
</span>
</a>
<!-- Start Outages Update -->
<a ng-if="mi.type == 'outage'" title="{{::mi.short_description}}" href="?id=service_status&service={{::mi.sys_id}}">
<span>{{::mi.short_description | characters:60}}</span>
<span class="block color-primary text-muted">
<span class="block" style="float: right">
Started <sn-time-ago timestamp="::mi.begin" />
</span>
{{mi.outageType}}
</span>
</a>
<!-- End Outages Update -->
<a ng-if="mi.type == 'record' && mi.__page" title="{{::mi.short_description}}" ng-href="?id={{::mi.__page}}&table={{::mi.__table}}&sys_id={{::mi.sys_id}}">
<span>{{::mi.short_description | characters:60}}</span>
<span class="block color-primary text-muted">
<span class="block" style="float: right">
<sn-time-ago timestamp="::mi.sys_updated_on" />
</span>
{{::mi.number}}
</span>
</a>
<a ng-if="mi.type == 'request'" title="{{::mi.short_description}}" ng-href="?id=sc_request&table={{::mi.__table}}&sys_id={{::mi.sys_id}}">
<span>{{::mi.short_description | characters:60}}</span>
<span class="block color-primary text-muted">
<span class="block" style="float: right">
<sn-time-ago timestamp="::mi.sys_updated_on" />
</span>
{{::mi.number}}
</span>
</a>
<a ng-if="mi.type == 'approval'" title="{{::mi.short_description}}" ng-href="?id=approval&table={{::mi.__table}}&sys_id={{::mi.sys_id}}">
<span ng-if="mi.short_description">{{::mi.short_description | characters:60}}</span>
<span class="block color-primary text-muted">
<span class="block" style="float: right">
<sn-time-ago timestamp="::mi.sys_updated_on" />
</span>
{{::mi.number}}
</span>
</a>
<a ng-if="mi.type == 'menu' && mi.items.length" title="{{::mi.title}}" href class="menu_trigger right-caret">
{{::mi.title | characters:60}}
</a>
<sp-dropdown-tree ng-if="mi.type == 'menu' && mi.items.length" items="mi.items" />
The Menu Item
Next up, we create a new menu item in our portal. It will need the following properties:
Label: System Status (Or whatever you would like)
Parent Menu: <Your parent menu for your portal>
Page: services_status (Probably not mandatory)
Type: Scripted List
Condition: GlideSPScriptable.canSeePage("services_status") (Out of the box - feel free to change)
For the "Server Script" I copied the "My Requests" item and modified to fit my needs. Here is my code:
// maximum number of entries in this Menu
var max = 30;
var t = data; // shortcut
t.items = [];
var u = gs.getUser().getID();
// use record watchers to tell header when to update dropdown counts
t.record_watchers = [];
t.record_watchers.push({'table':'cmdb_ci_outage','filter':'beginRELATIVELT@minute@ago@0^endRELATIVEGE@minute@ago@0^ORendISEMPTY'});
var st = new GlideRecord('cmdb_ci_outage');
if (st.isValid()) {
st.addEncodedQuery('beginRELATIVELT@minute@ago@0^endRELATIVEGE@minute@ago@0^ORendISEMPTY'); //Get outages where Begin is before now, and End is either after now, or empty
st.orderByDesc('begin');
st.setLimit(max);
st.query();
while (st.next()) {
var a = {};
$sp.getRecordValues(a, st, 'short_description,begin'); //get the values and populate the object
a.type = 'outage';
a.sys_id = st.cmdb_ci.toString(); //sysid of the Business Service to link to
a.outageType = st.type.getDisplayValue(); //Outage type to display in list
a.sortOrder = st.begin.getGlideObject().getNumericValue();
t.items.push(a);
}
}
t.items.sort(function(a, b) {
return b.sortOrder - a.sortOrder;
});
t.items = t.items.slice(0, max); // only want however many is "Max"
t.count = t.items.length;
var link = {title: gs.getMessage('View System Status'), type: 'link', href: '?id=services_status', items: []};
t.items.unshift(link); // put 'View all requests' firstAnd that's pretty much it!
Here's an example of how it looks for me:
It wouldn't be hard to include the name of the Business Service in there as well, or swap out the Short Description. Whatever your business needs.
I hope this helps someone! I hadn't touched the Angular templates before, but when you get into it they all make sense.
-Andrew
EDIT:
I've found that if you don't have an outage, the menu disappears! This isn't ideal, so here's a solution: Rather than hacking the menu item template to always show (and break Requests, Approvals etc) you create another URL-type menu item and we do some cool trickery with the Condition field:
On the Scripted List:
var st = new GlideRecord('cmdb_ci_outage');st.addEncodedQuery('beginRELATIVELT@minute@ago@0^endRELATIVEGE@minute@ago@0^ORendISEMPTY');st.query();st.hasNext() && GlideSPScriptable.canSeePage('services_status')and on the URL:
var st = new GlideRecord('cmdb_ci_outage');st.addEncodedQuery('beginRELATIVELT@minute@ago@0^endRELATIVEGE@minute@ago@0^ORendISEMPTY');st.query(); !st.hasNext() && GlideSPScriptable.canSeePage("services_status")If there are any current outages, show the list of them, and if there aren't, show the link! Perfect!
