From ed94421f5f903fedced725cf232923bb1b3f2ffc Mon Sep 17 00:00:00 2001 From: open seven six ate Date: Tue, 8 Mar 2022 15:34:06 +0000 Subject: [PATCH] made service end points look better --- js/appd.js | 9 ++ js/widgets/tierserviceendpoints.js | 184 ++++++++++++++++++----------- pages/service/services.php | 53 ++++----- 3 files changed, 150 insertions(+), 96 deletions(-) create mode 100644 js/appd.js diff --git a/js/appd.js b/js/appd.js new file mode 100644 index 0000000..80d52ef --- /dev/null +++ b/js/appd.js @@ -0,0 +1,9 @@ +'use strict'; +//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% +//# +//############################################################################### + +var cADMetrics={ + +}; \ No newline at end of file diff --git a/js/widgets/tierserviceendpoints.js b/js/widgets/tierserviceendpoints.js index a7f2a14..9c4b3b2 100644 --- a/js/widgets/tierserviceendpoints.js +++ b/js/widgets/tierserviceendpoints.js @@ -82,8 +82,10 @@ $.widget( "ck.adserviceendpoints",{ var aResponse = poHttp.response; if (aResponse.length == 0 ) oElement.append(cRender.messagebox("no service end points found")); - else - this.render(poHttp.response); + else{ + this.renderSummary(aResponse); + this.renderSEPs(aResponse); + } }, @@ -105,81 +107,131 @@ $.widget( "ck.adserviceendpoints",{ }, //******************************************************************* - render: function(paData){ + //TODO what happens if there are thousands of end points? need to page the list. + renderSummary: function(paData){ + var oElement = this.element; + var sLastCh = null; + var sLast = null; + var iCommon = 0; + var sLastCommon = null; + + var sHTML = cRenderMDL.card_start("Service End Points"); + sHTML += cRenderMDL.body_start(); + sHTML += "
"; + paData.forEach( function(poSP){ + var sCh = poSP.name[0]; + if (sCh !== sLastCh){ + sHTML += "

" + sCh + "

"; + sLastCh = sCh; + } + var sName = poSP.name; + /* TBD trying to be too clever + if (sLast){ + iCommon = cString.count_common_chars(sName, sLast); + if (iCommon >10 ){ + var sCommon = sName.substr(0,iCommon -1); + if (sCommon === sLastCommon) + sName = "... " + sName.substr(iCommon ); + sLastCommon = sCommon; + } + }*/ + sHTML += "
  • " + sName + "
    "; + sLast = poSP.name; + }); + sHTML += "
    • "; + sHTML += ""; + sHTML += "

    "; + + oElement.append(sHTML); + }, + + //******************************************************************* + get_SEP_Table: function(poSP,psBaseMetric){ + var oElement = this.element; + var oTable = $("", {border:0,cellspacing:0,style:"width:100%;overflow-wrap: break-word"}); + oTable.append(""); + + var sBaseUrl = oElement.attr(cRenderQS.HOME_QS) + "/pages/service/endpoint.php"; + var oParams = {}; + oParams[ cRenderQS.TIER_ID_QS ] = oElement.attr(cRenderQS.TIER_ID_QS); + oParams[ cRenderQS.APP_ID_QS ] = oElement.attr(cRenderQS.APP_ID_QS); + oParams[ cRenderQS.SERVICE_ID_QS ] = poSP.id; + oParams[ cRenderQS.SERVICE_QS ] = poSP.name; + var sUrl = cBrowser.buildUrl(sBaseUrl, oParams); + var sSPMetric = psBaseMetric + "|" + poSP.name; + + //----------------------------------------------------------------- + var oChartParams = {}; + oChartParams[cChartConsts.ATTR_TITLE + "0"] = poSP.name ; + oChartParams[cRenderQS.APP_ID_QS] = oElement.attr(cRenderQS.APP_ID_QS); + oChartParams["type"] = "spwidget"; + oChartParams["style"] = "position: relative; max-width: 341px; width: 341px; height: 125px;"; + oChartParams["class"] = "chart_widget"; + oChartParams[cRenderQS.HOME_QS] = oElement.attr(cRenderQS.HOME_QS) ; + oChartParams[cChartConsts.ATTR_SHOW_ZOOM] =1; + oChartParams[cChartConsts.ATTR_SHOW_COMPARE] = 1; + oChartParams[cChartConsts.ATTR_PREVIOUS] = 0; + oChartParams[cChartConsts.ATTR_WIDTH] = cChartConsts.WIDTH_3ACROSS; + oChartParams[cChartConsts.ATTR_HEIGHT] = cChartConsts.LETTERBOX_HEIGHT; + + //----------------------------------------------------------------- + var oRow = $(""); + oChartParams[cRenderQS.METRIC_QS + "0"] = sSPMetric + "|Calls per Minute"; + oChartParams[cChartConsts.ATTR_GO_URL] =sUrl; + + var oTD = $("
    CallsResponse TimesErrors per minute
    "); + var oChart = $("
    ", oChartParams); + oChart.append("please wait - chart loading...") + oTD.append(oChart); + oRow.append(oTD); + + //----------------------------------------------------------------- + oChartParams[cRenderQS.METRIC_QS + "0"] = sSPMetric + "|Average Response Time (ms)"; + oChartParams[cChartConsts.ATTR_GO_URL] = null; + oTD = $("
    		"); + oChart = $("
    ", oChartParams); + oChart.append("please wait - chart loading...") + oTD.append(oChart); + oRow.append(oTD); + + //----------------------------------------------------------------- + oChartParams[cRenderQS.METRIC_QS + "0"] = sSPMetric + "|Errors Per Minute"; + oTD = $("
    		"); + oChart = $("
    ", oChartParams); + oChart.append("please wait - chart loading...") + oTD.append(oChart); + oRow.append(oTD); + + //----------------------------------------------------------------- + + oTable.append(oRow); + return oTable; + }, + + //******************************************************************* + renderSEPs: function(paData){ var oThis = this; var oElement = this.element; var sBaseMetric = "Service Endpoints|"+oElement.attr(cRenderQS.TIER_QS); - oElement.empty(); - var oTable = $("", {border:1,cellspacing:0,style:"width:100%;overflow-wrap: break-word"}); - oTable.append(""); - - paData.forEach( function(poSP){ - var sBaseUrl = oElement.attr(cRenderQS.HOME_QS) + "/pages/service/endpoint.php"; - var oParams = {}; - oParams[ cRenderQS.TIER_ID_QS ] = oElement.attr(cRenderQS.TIER_ID_QS); - oParams[ cRenderQS.APP_ID_QS ] = oElement.attr(cRenderQS.APP_ID_QS); - oParams[ cRenderQS.SERVICE_ID_QS ] = poSP.id; - oParams[ cRenderQS.SERVICE_QS ] = poSP.name; - var sUrl = cBrowser.buildUrl(sBaseUrl, oParams); - var sSPMetric = sBaseMetric + "|" + poSP.name; - - //----------------------------------------------------------------------- - var oRow = $(""); - oRow.append(""); - oTable.append(oRow); - - //----------------------------------------------------------------- - var oChartParams = {}; - oChartParams[cChartConsts.ATTR_TITLE + "0"] = poSP.name ; - oChartParams[cRenderQS.APP_ID_QS] = oElement.attr(cRenderQS.APP_ID_QS); - oChartParams["type"] = "spwidget"; - oChartParams["style"] = "position: relative; max-width: 341px; width: 341px; height: 125px;"; - oChartParams["class"] = "chart_widget"; - oChartParams[cRenderQS.HOME_QS] = oElement.attr(cRenderQS.HOME_QS) ; - oChartParams[cChartConsts.ATTR_SHOW_ZOOM] =1; - oChartParams[cChartConsts.ATTR_SHOW_COMPARE] = 1; - oChartParams[cChartConsts.ATTR_PREVIOUS] = 0; - oChartParams[cChartConsts.ATTR_WIDTH] = cChartConsts.WIDTH_3ACROSS; - oChartParams[cChartConsts.ATTR_HEIGHT] = cChartConsts.LETTERBOX_HEIGHT; - - //----------------------------------------------------------------- - var oRow = $(""); - oChartParams[cRenderQS.METRIC_QS + "0"] = sSPMetric + "|Calls per Minute"; - var oTD = $("
    CallsResponse TimesErrors per minute
    " + poSP.name + "
    "); - var oChart = $("
    ", oChartParams); - oChart.append("please wait - chart loading...") - oTD.append(oChart); - oRow.append(oTD); - //----------------------------------------------------------------- - oChartParams[cRenderQS.METRIC_QS + "0"] = sSPMetric + "|Average Response Time (ms)"; - oTD = $("
    		"); - oChart = $("
    ", oChartParams); - oChart.append("please wait - chart loading...") - oTD.append(oChart); - oRow.append(oTD); - //----------------------------------------------------------------- - oChartParams[cRenderQS.METRIC_QS + "0"] = sSPMetric + "|Errors Per Minute"; - oTD = $("
    		"); - oChart = $("
    ", oChartParams); - oChart.append("please wait - chart loading...") - oTD.append(oChart); - oRow.append(oTD); - - //----------------------------------------------------------------- - - oTable.append(oRow); - }); - - oElement.append(oTable); + paData.forEach( function(poSP){ + var sHTML = cRenderMDL.card_start("" + poSP.name + ""); + sHTML += cRenderMDL.body_start(); + var oTable = oThis.get_SEP_Table(poSP, sBaseMetric); + sHTML += oTable[0].outerHTML; + sHTML += "
    "; + sHTML += "

    "; + oElement.append(sHTML); + }); + //- - - - -convert chart to Widgets if (cCharts.isGoogleChartsLoaded()) this.convert_to_widgets() else cCharts.load_google_charts(function(){this.convert_to_widgets();}); }, - + //******************************************************************* convert_to_widgets: function(){ $("DIV[type=spwidget]").each( diff --git a/pages/service/services.php b/pages/service/services.php index e7eee5e..403c7be 100644 --- a/pages/service/services.php +++ b/pages/service/services.php @@ -32,52 +32,45 @@ //get passed in values $oApp = cRenderObjs::get_current_app(); $oTimes = cRender::get_times(); +$oTier = null; +if (cHeader::get(cRenderQS::TIER_ID_QS))$oTier = cRenderObjs::get_current_tier(); +//******************************************************************** +//display a summary cRenderCards::card_start(); cRenderCards::action_start(); cADCommon::button(cADControllerUI::serviceEndPoints($oApp,$oTimes)); - if (cHeader::get(cRenderQS::TIER_ID_QS)){ + if ($oTier){ $sAppQS = cRenderQS::get_base_app_QS($oApp); $sUrl = cHttp::build_url(cCommon::filename(), $sAppQS); cRender::button("Service End points for App: $oApp->name", $sUrl); cRenderMenus::show_tier_menu("Show Service EndPoints for"); + cRenderMenus::show_tier_functions($oTier); }else cRenderMenus::show_apps_menu("Show Service EndPoints for"); cRenderCards::action_end(); cRenderCards::card_end(); -//#################################################################### -//TBD add a list mode - show the avg and max response times of each SEP //******************************************************************** -if (cHeader::get(cRenderQS::TIER_ID_QS)){ - $oTier = cRenderObjs::get_current_tier(); - cRenderCards::card_start("$oTier->name"); - cRenderCards::body_start(); - ?> -

    ="id?>" - ="id?>" - ="name?>" - ="" - > - Please Wait.. -
    - - +
    ="id?>" + ="id?>" + ="name?>" + ="" + > + Please Wait.. +
    + + GET_Tiers();