Pre-Con Ed: Build Your Own Apps for an Enhanced Network Management Experience with the CA...

World®’16

BuildYourOwnAppsforanEnhancedNetworkManagementExperiencewiththeCAPerformanceManagementOpenAPIJasonNormandin,Sr.PrincipalProductManager,CATechnologiesBernardClairmont,Sr.PrincipalConsultant,CATechnologies

DO4X70E

DEVOPS– AGILEOPERATIONS

2 ©2016CA.ALLRIGHTSRESERVED.@CAWORLD#CAWORLD

©2016CA.Allrightsreserved.Alltrademarksreferencedhereinbelongtotheirrespectivecompanies.

Thecontentprovidedinthis CAWorld2016presentationisintendedforinformationalpurposesonlyanddoesnotformanytypeofwarranty. The informationprovidedbyaCApartnerand/orCAcustomerhasnotbeenreviewedforaccuracybyCA.

ForInformationalPurposesOnlyTermsofthisPresentation


Abstract

Getyourdata,yourwaywiththeCAPerformanceManagementopenAPI.Learntheframeworktocreatesimpleappsthatcanprovideyouruserswithnewvisualizationsintoyourperformancedata.Usingsimpledrag-and-dropandtheCAPerformanceManagementopenAPI,youcanmakeadvancedoperationssimpleandinnovatenewwaysforyourbusinesspartnersandcustomerstoconsumedata.Thishands-onlabsessionwillproveyoudon’thavetobeadevelopertobesuccessfulatbuildingyourownintegrationsandapplicationswithCAPerformanceManagementopenAPI.

JasonNormandinSr.PrincipalProductManagerCATechnologies

BernardClairmontCATechnologiesSr.PrincipalConsultant


Agenda

CAPERFORMANCEMANAGEMENTOPENAPI– ANECOSYSTEM

OPENAPIAPP– BASICSANDDATAFLOW

YOURTURN!

CREATINGDYNAMICQUERIESWITHCAPERFORMANCECENTERBROWSERVIEWS

WEATHER-MAPAPPCASESTUDY

OTHERAPPSANDRESOURCES

1

2

3

4

5

6


TheCAPerformanceManagementOpenAPIEco-SystemCA

PMOpe

nAPI

ODataAPI SmartdataextractionDataandconfigurationextraction

End-userfocusedAPI(SSO &Auth)

DataAggregatorREST

Manageadministrativeoperations

Configuration data

Metric familiesandvendorcerts

PerformanceCenterAPI

Automateprovisioningandconfigurationtasks

Createandmanagegroups

Createandupdateuseraccounts

DatasourceunificationManagedatasourceaccess

Providelocal/remoteIDmappings

ContextawarecustomcontentImportandexportdashboards

Browservieww/parameters


WhatisanOpenAPIApplication?

§ Accesses1(ormore)oftheCAPerformanceManagementAPIstoprovideinteractivitybetweenaPerformanceCenteruserandcontentdeliveredthroughaPerformanceCenterbrowserview

§ Manydifferentpurposes:– ProvidealternativeornewvisualizationtoaugmentthePerformanceCenter

experience– AllowausertointeractwiththeDataAggregatorRESTAPItoupdate/create

itemattributes– Providetheabilitytointeractwith3rd partyapplicationsusingdataandcontext

drivenfromPerformanceCenterandCAPerformanceManagement


OpenAPIApplications- Hosting

§ OpenAPIAppsareprimarilyhostedonPerformanceCentertoenablesimplerdeploymentandavoidrestrictionsrelatedtoDataAggregatoraccessfrombeyondafirewall

§ Themostimportantthingtorememberis:“Thoushaltnotrequestdatainanappwhichoriginatesonasystemotherthanthehostedsystem.”

§ Unless…AproxyisusedtoallowittoappeardataisfromthesamedomainORCORSisenabled


1. UserauthenticatestoPerformanceCenterthrusinglesign-on

2. UseraccessOpenAPIappthroughPerformanceCenter

3. OpenAPIapprequestsdatafromOpenAPIthroughrelativepath

4. PerformanceCenterproxydirectsOpenAPIrequesttoDataAggregator

5. OpenAPIvalidatesuserauthorization(whichItemsdotheyhavepermissionstoview)

6. OpenAPIcreatesdatasetfromiRep andVerticabasedonuser’spermissions

7. DatareturnedtoPerformanceCenterproxy8. ProxysendsOpenAPIdatatoapp9. UserviewsappwithOpenAPIdata

1

2 3

4

5

66

7

89

OpenAPIDataFlowofanApp– ODataExample


Question?

§ WhatroledoesthePerformanceCenterproxyplayintheOpenAPI applicationinthelastscenario?


1. UserauthenticatestoPerformanceCenterthroughsinglesign-on

2. UseraccessOpenAPIAppthroughPerformanceCenterbrowserview

3. PerformanceCenterpassesdashboardparameterstoapp

4. AppmakesRESTcalldirectlytoDataAggregator

5. RESTupdateresponsepassedbacktoOpenAPIapp

6. Appprovidesfeedbacktouserinbrowserviewapp

1

23

45

OpenAPI– DataflowofanApp– DAHostedApp

36

6


Question?

§ WhyistheapplicationhostedontheDataAggregatorinthelastscenario?


WhatAretheTypicalAspectsofanOpenAPIApp

§ Buildthequery– LeveragesPerformanceCenterbrowserviewtoderivecontextforqueriesand

useroutput

§ Getthedata– OpenAPIODataURLs– DataAggregator/PerformanceCenterRESTAPIGet/Put/Post

§ Parseandrender– GetsandparsestheAPIresponsedata– Leveragesclientvisualizationoranalyticslibraries– Generatesoutputfortheuser


BuildtheQuery

§ QueriesbuiltinquerybuilderorlistedinCAPerformanceManagementdocumentationarestatic

§ PerformanceCenterbrowserviewsprovideparameterstocustomizetheURLtoaddkeyinfosuchasitemIDs,itemtypes,time-ranges,etc.


CreatingDynamicODataQueriesusingPerformanceCenter

AppgetscontextinfofromPerformanceCenterbrowserviewAPI

ODataURLleveragesparametersforcontextualdataset


GettheData

§ ThedatacanthenbefetchedfromtheclientbrowserusingavarietyofmethodologiesderivedfromAJAX


OpenAPIODataDataExtractionExample

JQuery D3


ParsingtheData

§ ParsingthedataisanexerciseoftakingdatareturnedbytheAPIinformatAandtransposingintoformatB

§ ManyGREATtoolsavailableforthis– Simplest:D3&JQuery


ParsingDatatheEasyWay:D3

§ D3providesmanygreatfunctionstoparse,structure,analyze,andmodifydatasetsfromanAPIcall;here’sjustafew:

http://bl.ocks.org/phoebebright/raw/3176159/

Objects AcommondatatypeinJavaScriptistheassociativearray,ormoresimplytheobject,whichhasasetofnamedproperties

Maps AMapobjectiteratesitselementsininsertionorder— afor...ofloopreturnsanarrayof[key,value]foreachiteration

Sets TheSetobjectletsyoustoreuniquevaluesofanytype,whetherprimitivevaluesorobjectreferences

Nests Nestingallowselementsinanarraytobegroupedintoahierarchicaltreestructure;thinkofitliketheGROUPBYoperatorinSQL,exceptyoucanhavemultiplelevelsofgrouping,andtheresultingoutputisatreeratherthanaflattable


PresentingtheData

§ ThisisthefunpartandJavaScriptmakesitveryeasy

§ HTML,HTML5,CSS3,JavaScript,D3,GoogleCharts,etc.

§ Thinkaboutstyle,format,anddatapresentationgoals

§ Plentyofhelpon-lineinmanydifferentforums


Weather-mapCaseStudy

§ WhatisaWeather-map?– Ageo-locationbasedviewwhichshowshigh-leveldevicesonamapwith

connectionsrepresentingthelogicalcircuit(s)betweensites– Sitesandconnectionsarebothcoloredandsizeddynamicallybasedonmetric

andattributevalues/threshold

§ WhataWeather-mapisNOT?– ALayer2topologyviewwhichshowsintra-sitedevice/interfaceto

device/interfaceconnections


Weather-mapCaseStudy(cont)

§ Pre-requisites:– CAPerformanceManagement3.0(requirescustomattributesfeature)– OpenAPIWeather-mapinstalled

§ GitHub:

– OpenAPI devicegeo-locationattributesdefined§ GitHub:

– OpenAPI interfaceconnectioninformation§ GitHub

– FollowinstallinstructionsinREADMEforeachapp


Weather-mapCaseStudy– ConfigurationSteps

Step1.Createcustomattributetodefineourdevicetodeviceconnections

§ POSTtoDataAggregator

§ ItemType:Port

§ Type:String

§ Name:ConnectsTo


Weather-mapCaseStudy(cont.)

Step2.CreategroupofWeather-mapdevicesandinterfaces

§ Devicealiascontains‘Core’

§ Interfacealiascontains‘->’



Step3.Foreachdevicetobeplacedonmap

§ Setgeo-location

informationincontext

page

§ Setaliasto‘<SiteXYZ>

CoreRouter’



Step4.Foreachdevicetobeplacedonmap

§ Setconnectioninformationin

interfacecontextpage– ConnectsTo <device>

§ Setaliasto‘LocationA->

LocationB’



Step5.AllowOpenAPIETLjobtocompleteandverifygroupcontentsandgeoandconnectiontagssetproperly



Step6.VerifyPerformanceCentergroupcontentsandaliasvaluesviainventoryviews



Step7.LaunchPerformanceCenterWeather-mapappdashboardandselectgroupcreatedinstep1


Weather-mapFunctionality

Eachsitewithintargetgroupdisplayedonmapandintable(sortedbyCPUUtil descending)

Sitecolorbasedonthresholdrange

Keymetricsforallconnectedcircuitsshown(sortedbyUtil desc)



HoveroversitetoviewInfoandKPIvalues



Selectasiteonmaporintabletoviewconnections

Circuitsfilteredtoonlyshowthoseto/fromselectedsite

Circuitcolorbasedonthresholdrange



HoveroveracircuittoviewinfoandKPIvalues


Weather-mapAppOptions

§ OptionsareconfiguredasparameterspassedtoappviaPerformanceCenterbrowserview– connect=full|half

§ Controlsthewaytheconnectionsaredrawntoenablelineover-lapinlargerconfigurations

full half



– scope=usa |europe |world(default)§ Allowmaptobefocusedonspecificcontinentformapsnotrequiringaglobalperspective

usa europe world



– theme=dark|light§ Controlsthethemeandcolors

dark light


OtherOpenAPIApps

§ VisitourGitHubRepositoryforothergreatappsthatcaneasilybedeployedandcustomized

https://github.com/CA-PM


YourTurn!

§ Refertothenexthands-onlabsession(DO4X66E)forstepbystepinstructionsto:– DeployappsnecessaryforCAPerformanceManagementMWeather-map

– Configurecustomattributeandgrouprulestosimplifydatavisualization

– LeveragetheOpenAPIAppstocreatethegeo-locationandconnectiondatathatisconsumedbythemap

– Runandtroubleshoot

§ Whatcouldbechangedtomakethismoreapplicabletoyourenvironment?

§ Howwouldyoumakethosechanges?


Thankyou.

Stayconnectedatcommunities.ca.com

Pre-Con Ed: Build Your Own Apps for an Enhanced Network Management Experience with the CA...

Technology

Transcript of Pre-Con Ed: Build Your Own Apps for an Enhanced Network Management Experience with the CA...