occ portal - a dashboards story
TRANSCRIPT
![Page 1: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/1.jpg)
OCC Portal…A Dashboards Story
![Page 2: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/2.jpg)
05/01/2023 EL Abquina | [email protected] | +639088772988 2
Name Current Work/Role Why Drupal?
Hello Drupal!
![Page 3: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/3.jpg)
05/01/2023 EL Abquina | [email protected] | +639088772988 3
Technology Consultant @ HPWeb Dev/Design @ Tech Ops PHWeb Specialist Instructor @ CIIT PH
EL Abquina | [email protected] | [email protected]
![Page 4: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/4.jpg)
![Page 5: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/5.jpg)
![Page 6: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/6.jpg)
OCC stands for Operations Control Center Our team performs applications performance monitoring
and support desk services.
![Page 7: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/7.jpg)
Planning and Mapping
Collection Automation
Detection and Communication
Availability and Visibility
Insights Building
100% Coverage 100% Automation 100% Detection 100% Availability 100% Understanding
Map what is working as designed so
knowing it will be real-time
Utilize monitoring tools have extensive and automatic data
collection
Real-time alerts and reports for immediate
resolution or restoration
Alerts and reports are always available by all
means
Translate trends and reports to create
insights for decisions
12 pt. boldHP Simplified
12 pt. boldHP Simplified
12 pt. boldHP SimplifiedCollectIdentify AnalyzeVisualizeAlert
Service Monitoring
Support Reporting Dashboard Services Service Analysis Configuration Planning
![Page 8: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/8.jpg)
The OCC lacks the central platform
for all of our activities
![Page 9: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/9.jpg)
Here comes OCC Portal… Management of all OCC Activities:
Monitoring Requests
Configuration Planning
Monitoring Objects Inventory
Communications Platform (Alerts/Reports)
Dashboards
Analysis to Knowledge Management system (SKMS)
![Page 10: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/10.jpg)
Quickly moved out of old SharePoint 2010
installations
![Page 11: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/11.jpg)
A new buzzword came….
Dashboards
![Page 12: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/12.jpg)
The Problem… A site audit for team operations “required” team to have
Analytics Dashboards for team operations
We need to display data that would show: Organization / Team Performance
Individual Scores / Results Volume Trending and Monitoring
![Page 13: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/13.jpg)
Tale of the Tape…GOALS
Deploy a tool across
12 global organizations Aggregate and Analyze individual scores for approx.
300-400 resources Daily real-time analysis of
1000 content “Please complete it by….
Monday
CONSTRAINTS
Engaged resources for the project
0 individuals Incomplete requirements and “budget”
0 dollars Lack of hardware / software resources for storing content
0 servers / hardware “It is already…
Thursday!!!!
![Page 14: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/14.jpg)
SUBJECT: Help Needed – Action Request
POSSIBLE ACTIONS
There was a sudden alternative solution:
Too slow for users There is a promise of improvement:
3 months to complete Need to decide for design requirements:
0 designers And more…..
![Page 15: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/15.jpg)
… we still went in for the Project!
![Page 16: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/16.jpg)
The Process…We simplified the process by
getting the design and data requirements from users themselves
We skipped the part of business analysis or requirements gathering
How should your Dashboards look like??
![Page 17: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/17.jpg)
![Page 18: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/18.jpg)
The Process… use PowerPoint!We asked the team to “build a slide” in SharePoint
It is quite easy to design something in a single slide by simply adding tables, charts or text boxes
“Please send me sample PPT slides…”
![Page 19: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/19.jpg)
Slide Samples sent by our Users
![Page 20: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/20.jpg)
Actual Dashboard Screenshots
![Page 21: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/21.jpg)
Trending Dashboard
![Page 22: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/22.jpg)
Combined Graphs and Tables
![Page 23: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/23.jpg)
Scorecards – aka “Employee of the Month”
![Page 24: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/24.jpg)
Scorecards – aka “Employee of the Month”
![Page 25: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/25.jpg)
![Page 26: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/26.jpg)
How did we use Drupal?
![Page 27: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/27.jpg)
The Tools…
In our existing Drupal installation, we pieced contrib modules smartly to create our requirements:
• Layout Structure• Content Strategy
Is there a Dashboard Module?!
![Page 28: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/28.jpg)
Dashboard Core Module – x_x
Relies on Custom or Views BlocksNo alternative lay-outs
![Page 29: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/29.jpg)
Content Strategy – Views… W enabled taxonomy to be configurable and extended with tax
Our Content:Recipe:Taxonomy ManagerEntity APIHierarchical Select (+ more)
Views Aggregation PlusCharts Highcharts Google
Contenders:Field CollectionContent Taxonomy….
Tickets Nodes with a Taxonomy Term called Workgroup
Workgroup A Taxonomy Term with term fields Service Line and Support Level
Service Line The various organization entities to be deployed
Support Level Level of work the workgroup performs
![Page 30: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/30.jpg)
Content Strategy > Taxonomy Manager Quickly Upload thousands of Terms (Workgroups, Service Lines) and have a quick view for their organization
![Page 31: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/31.jpg)
Content Strategy > Hierarchical Select A requirement is to have a dashboard view that can be filtered based on Service Line hierarchy
Hierarchical Select uses multiple taxonomies and record their parent – child relationships
Taxonomy Term: Service Line
Service Line A◦ Sub-Service Line A – 1◦ Sub-Service Line A – 2
Service Line B◦ Sub-Service Line A – 1◦ Sub-Service Line A - 2
Note: Checkout Simple Hierarchical Select or Client-Side Hierarchical Select
![Page 32: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/32.jpg)
Content Strategy > Views > Contextual Filters Formerly known as arguments
Found under Advanced > Contextual Filters
Works great with Relationships for either Entity Reference or Term References
Filter Statement:
All Tickets
Under Workgroups
Under Service Lines
![Page 33: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/33.jpg)
Content Strategy > Views > Contextual Filters > Add
Contextual Filters use Relationships too
Can add multiple contextual filters based on Order
Can use a Fixed Value or
Raw Value from URL
Note: Our decision is just to provide Direct URL of the Dashboard pages for each of the sub-teams
![Page 34: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/34.jpg)
Content Strategy > Views > Charts or D3 It just works!
http://drupal.org/project/chartshttp://drupal.org/project/d3
Use Views SQL Date Formatterhttps://www.drupal.org/project/views_date_format_sql
![Page 35: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/35.jpg)
Filtered Content with Hierarchical Tree Editableviews
Views Bulk Operations
![Page 36: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/36.jpg)
Layout / Structure – Panels? We used Panels suite of modules (http://drupal.org/project/panels)
a. Build Flexible Layouts that are Fixed or Fluid
b. Insert any type of content (Custom or Views Content Panes)
c. Can customize Panel for Node View/Layouts
d. Can insert Custom Styles
Note: Check out the Panopoly Distribution with built-in layouts!
Recipe:Views w/ Contextual FiltersContext (Context_Layouts)Page ManagerLayout
Contenders:Display Suite
![Page 37: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/37.jpg)
Flexible Layouts Enables Users with a WYSIWYG like capability for building layouts for a page, content or any entity (check-out Panelizer)
Note: Check out the Panopoly Distribution with built-in layouts!
![Page 38: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/38.jpg)
Page Manager - Pages We decided to use Pages with !input arguments in their paths and relate them as Contextual Filters for each Panel pane
This simplified the approach instead of retrieving user Context (that is not yet existing or default)
![Page 39: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/39.jpg)
Page Manager – Pages > Content Page Variants can also have different Layouts, and different set of Content.
Just place your views, blocks or custom content on the regions
![Page 40: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/40.jpg)
Page Manager – Pages > Content > Panes Add Content per Region of your Layout
Can add:
View Panes or Views
Custom Blocks
Custom Content Panes
Nodes and more
![Page 41: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/41.jpg)
Page Manager – Pages > Content > Panes > Config
Content/View Pane configuration is simple.
Just add the argument count based on the URL path
![Page 42: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/42.jpg)
Single Page Dashboards
![Page 43: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/43.jpg)
43
Dashboards in Mission Control Center (OCC)
![Page 44: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/44.jpg)
List of Existing Dashboards as of Nov. 27, 2015http://occportal.itcs.hp.com/dashboards/*Dashboard URLOverall Open Tickets
http://occportal.itcs.hp.com/dashboard/open-tickets
OCC Auto-tickets
http://occportal.itcs.hp.com/dashboard/occ-tickets
Incident Tickets
http://occportal.itcs.hp.com/dashboard/open-ticket-trend/<SL>/<LVL>http://occportal.itcs.hp.com/dashboard/open-ticket-metrics/<SL>/<LVL>
Fulfillment Requests
http://occportal.itcs.hp.com/dashboard/fr-tickets
Problem Records
http://occportal.itcs.hp.com/dashboard/problems
Performance Dashboards
http://occportal.itcs.hp.com/dashboard/performance/closed
![Page 45: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/45.jpg)
A New Service… Enabled users and teams to identify action item areas….
Insights and Decision Making Improvement on team scores and performance
60-70% Backlog Reduction Coined a new term within the organization…
Dashboards as a Service -_-
![Page 46: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/46.jpg)
Aftermath… Successful implementation and deployment to the teams; Very little or even up to no training involved for handover
Increase user base and usage of the OCC Portal Currently fine-tuning and actively receiving suggestions
A long list of additional Dashboard Requests from other organizations Happy Customers!
![Page 47: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/47.jpg)
Future Plans… Ongoing Activities… Additional content relationships and views with
Human Resources Data Enable users Through Panopoly / Panels In-Place Editor
BYOD (Build Your Own Dashboard) UX / UI Improvements and Define
Mobile First Dashboards
![Page 48: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/48.jpg)
Grommet.io http://grommet.io/docs/documentation
Based on React.js + Gulp
![Page 49: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/49.jpg)
Porting to Drupal 8 We have a lot of contrib modules used and “yearns” for a quick Drupal 8 adoption.
Upgrade Status
https://www.drupal.org/project/upgrade_status
Drupal 8 Contrib Porting Tracker
https://www.drupal.org/project/contrib_tracker
![Page 50: OCC Portal - A Dashboards Story](https://reader035.vdocuments.us/reader035/viewer/2022062522/58861abd1a28abe63e8b7147/html5/thumbnails/50.jpg)
Room…Hallway for Improvement Open for suggestions…
Actively seek new ways to develop… Ask for help.
Share!