Transcript

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

3 ©2016CA.ALLRIGHTSRESERVED.@CAWORLD#CAWORLD

Abstract

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

JasonNormandinSr.PrincipalProductManagerCATechnologies

BernardClairmontCATechnologiesSr.PrincipalConsultant

4 ©2016CA.ALLRIGHTSRESERVED.@CAWORLD#CAWORLD

Agenda

CAPERFORMANCEMANAGEMENTOPENAPI– ANECOSYSTEM

OPENAPIAPP– BASICSANDDATAFLOW

YOURTURN!

CREATINGDYNAMICQUERIESWITHCAPERFORMANCECENTERBROWSERVIEWS

WEATHER-MAPAPPCASESTUDY

OTHERAPPSANDRESOURCES

1

2

3

4

5

6

5 ©2016CA.ALLRIGHTSRESERVED.@CAWORLD#CAWORLD

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

6 ©2016CA.ALLRIGHTSRESERVED.@CAWORLD#CAWORLD

WhatisanOpenAPIApplication?

§ Accesses1(ormore)oftheCAPerformanceManagementAPIstoprovideinteractivitybetweenaPerformanceCenteruserandcontentdeliveredthroughaPerformanceCenterbrowserview

§ Manydifferentpurposes:– ProvidealternativeornewvisualizationtoaugmentthePerformanceCenter

experience– AllowausertointeractwiththeDataAggregatorRESTAPItoupdate/create

itemattributes– Providetheabilitytointeractwith3rd partyapplicationsusingdataandcontext

drivenfromPerformanceCenterandCAPerformanceManagement

7 ©2016CA.ALLRIGHTSRESERVED.@CAWORLD#CAWORLD

OpenAPIApplications- Hosting

§ OpenAPIAppsareprimarilyhostedonPerformanceCentertoenablesimplerdeploymentandavoidrestrictionsrelatedtoDataAggregatoraccessfrombeyondafirewall

§ Themostimportantthingtorememberis:“Thoushaltnotrequestdatainanappwhichoriginatesonasystemotherthanthehostedsystem.”

§ Unless…AproxyisusedtoallowittoappeardataisfromthesamedomainORCORSisenabled

8 ©2016CA.ALLRIGHTSRESERVED.@CAWORLD#CAWORLD

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

9 ©2016CA.ALLRIGHTSRESERVED.@CAWORLD#CAWORLD

Question?

§ WhatroledoesthePerformanceCenterproxyplayintheOpenAPI applicationinthelastscenario?

10 ©2016CA.ALLRIGHTSRESERVED.@CAWORLD#CAWORLD

1. UserauthenticatestoPerformanceCenterthroughsinglesign-on

2. UseraccessOpenAPIAppthroughPerformanceCenterbrowserview

3. PerformanceCenterpassesdashboardparameterstoapp

4. AppmakesRESTcalldirectlytoDataAggregator

5. RESTupdateresponsepassedbacktoOpenAPIapp

6. Appprovidesfeedbacktouserinbrowserviewapp

1

23

45

OpenAPI– DataflowofanApp– DAHostedApp

36

6

11 ©2016CA.ALLRIGHTSRESERVED.@CAWORLD#CAWORLD

Question?

§ WhyistheapplicationhostedontheDataAggregatorinthelastscenario?

12 ©2016CA.ALLRIGHTSRESERVED.@CAWORLD#CAWORLD

WhatAretheTypicalAspectsofanOpenAPIApp

§ Buildthequery– LeveragesPerformanceCenterbrowserviewtoderivecontextforqueriesand

useroutput

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

§ Parseandrender– GetsandparsestheAPIresponsedata– Leveragesclientvisualizationoranalyticslibraries– Generatesoutputfortheuser

13 ©2016CA.ALLRIGHTSRESERVED.@CAWORLD#CAWORLD

BuildtheQuery

§ QueriesbuiltinquerybuilderorlistedinCAPerformanceManagementdocumentationarestatic

§ PerformanceCenterbrowserviewsprovideparameterstocustomizetheURLtoaddkeyinfosuchasitemIDs,itemtypes,time-ranges,etc.

14 ©2016CA.ALLRIGHTSRESERVED.@CAWORLD#CAWORLD

CreatingDynamicODataQueriesusingPerformanceCenter

AppgetscontextinfofromPerformanceCenterbrowserviewAPI

ODataURLleveragesparametersforcontextualdataset

15 ©2016CA.ALLRIGHTSRESERVED.@CAWORLD#CAWORLD

GettheData

§ ThedatacanthenbefetchedfromtheclientbrowserusingavarietyofmethodologiesderivedfromAJAX

16 ©2016CA.ALLRIGHTSRESERVED.@CAWORLD#CAWORLD

OpenAPIODataDataExtractionExample

JQuery D3

17 ©2016CA.ALLRIGHTSRESERVED.@CAWORLD#CAWORLD

ParsingtheData

§ ParsingthedataisanexerciseoftakingdatareturnedbytheAPIinformatAandtransposingintoformatB

§ ManyGREATtoolsavailableforthis– Simplest:D3&JQuery

18 ©2016CA.ALLRIGHTSRESERVED.@CAWORLD#CAWORLD

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

19 ©2016CA.ALLRIGHTSRESERVED.@CAWORLD#CAWORLD

PresentingtheData

§ ThisisthefunpartandJavaScriptmakesitveryeasy

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

§ Thinkaboutstyle,format,anddatapresentationgoals

§ Plentyofhelpon-lineinmanydifferentforums

20 ©2016CA.ALLRIGHTSRESERVED.@CAWORLD#CAWORLD

Weather-mapCaseStudy

§ WhatisaWeather-map?– Ageo-locationbasedviewwhichshowshigh-leveldevicesonamapwith

connectionsrepresentingthelogicalcircuit(s)betweensites– Sitesandconnectionsarebothcoloredandsizeddynamicallybasedonmetric

andattributevalues/threshold

§ WhataWeather-mapisNOT?– ALayer2topologyviewwhichshowsintra-sitedevice/interfaceto

device/interfaceconnections

21 ©2016CA.ALLRIGHTSRESERVED.@CAWORLD#CAWORLD

Weather-mapCaseStudy(cont)

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

§ GitHub:

– OpenAPI devicegeo-locationattributesdefined§ GitHub:

– OpenAPI interfaceconnectioninformation§ GitHub

– FollowinstallinstructionsinREADMEforeachapp

22 ©2016CA.ALLRIGHTSRESERVED.@CAWORLD#CAWORLD

Weather-mapCaseStudy– ConfigurationSteps

Step1.Createcustomattributetodefineourdevicetodeviceconnections

§ POSTtoDataAggregator

§ ItemType:Port

§ Type:String

§ Name:ConnectsTo

23 ©2016CA.ALLRIGHTSRESERVED.@CAWORLD#CAWORLD

Weather-mapCaseStudy(cont.)

Step2.CreategroupofWeather-mapdevicesandinterfaces

§ Devicealiascontains‘Core’

§ Interfacealiascontains‘->’

24 ©2016CA.ALLRIGHTSRESERVED.@CAWORLD#CAWORLD

Weather-mapCaseStudy(cont.)

Step3.Foreachdevicetobeplacedonmap

§ Setgeo-location

informationincontext

page

§ Setaliasto‘<SiteXYZ>

CoreRouter’

25 ©2016CA.ALLRIGHTSRESERVED.@CAWORLD#CAWORLD

Weather-mapCaseStudy(cont.)

Step4.Foreachdevicetobeplacedonmap

§ Setconnectioninformationin

interfacecontextpage– ConnectsTo <device>

§ Setaliasto‘LocationA->

LocationB’

26 ©2016CA.ALLRIGHTSRESERVED.@CAWORLD#CAWORLD

Weather-mapCaseStudy(cont.)

Step5.AllowOpenAPIETLjobtocompleteandverifygroupcontentsandgeoandconnectiontagssetproperly

27 ©2016CA.ALLRIGHTSRESERVED.@CAWORLD#CAWORLD

Weather-mapCaseStudy(cont.)

Step6.VerifyPerformanceCentergroupcontentsandaliasvaluesviainventoryviews

28 ©2016CA.ALLRIGHTSRESERVED.@CAWORLD#CAWORLD

Weather-mapCaseStudy(cont.)

Step7.LaunchPerformanceCenterWeather-mapappdashboardandselectgroupcreatedinstep1

29 ©2016CA.ALLRIGHTSRESERVED.@CAWORLD#CAWORLD

Weather-mapFunctionality

Eachsitewithintargetgroupdisplayedonmapandintable(sortedbyCPUUtil descending)

Sitecolorbasedonthresholdrange

Keymetricsforallconnectedcircuitsshown(sortedbyUtil desc)

30 ©2016CA.ALLRIGHTSRESERVED.@CAWORLD#CAWORLD

Weather-mapFunctionality

HoveroversitetoviewInfoandKPIvalues

31 ©2016CA.ALLRIGHTSRESERVED.@CAWORLD#CAWORLD

Weather-mapFunctionality

Selectasiteonmaporintabletoviewconnections

Circuitsfilteredtoonlyshowthoseto/fromselectedsite

Circuitcolorbasedonthresholdrange

32 ©2016CA.ALLRIGHTSRESERVED.@CAWORLD#CAWORLD

Weather-mapFunctionality

HoveroveracircuittoviewinfoandKPIvalues

33 ©2016CA.ALLRIGHTSRESERVED.@CAWORLD#CAWORLD

Weather-mapAppOptions

§ OptionsareconfiguredasparameterspassedtoappviaPerformanceCenterbrowserview– connect=full|half

§ Controlsthewaytheconnectionsaredrawntoenablelineover-lapinlargerconfigurations

full half

34 ©2016CA.ALLRIGHTSRESERVED.@CAWORLD#CAWORLD

Weather-mapAppOptions

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

usa europe world

35 ©2016CA.ALLRIGHTSRESERVED.@CAWORLD#CAWORLD

Weather-mapAppOptions

– theme=dark|light§ Controlsthethemeandcolors

dark light

36 ©2016CA.ALLRIGHTSRESERVED.@CAWORLD#CAWORLD

OtherOpenAPIApps

§ VisitourGitHubRepositoryforothergreatappsthatcaneasilybedeployedandcustomized

https://github.com/CA-PM

37 ©2016CA.ALLRIGHTSRESERVED.@CAWORLD#CAWORLD

YourTurn!

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

– Configurecustomattributeandgrouprulestosimplifydatavisualization

– LeveragetheOpenAPIAppstocreatethegeo-locationandconnectiondatathatisconsumedbythemap

– Runandtroubleshoot

§ Whatcouldbechangedtomakethismoreapplicabletoyourenvironment?

§ Howwouldyoumakethosechanges?

38 ©2016CA.ALLRIGHTSRESERVED.@CAWORLD#CAWORLD

Thankyou.

Stayconnectedatcommunities.ca.com

@CAWORLD#CAWORLD ©2016CA.AllRIGHTSRESERVED.39 @CAWORLD#CAWORLD

DevOps– AgileOps

FormoreinformationonDevOps– AgileOps,pleasevisit:http://cainc.to/wYXSg6


Top Related