Skip to content

Commit

Permalink
made service end points look better
Browse files Browse the repository at this point in the history
  • Loading branch information
@open768
open768 committed Mar 8, 2022
1 parent fb340e6 commit ed94421
Show file tree
Hide file tree
Showing 3 changed files with 150 additions and 96 deletions.
9 changes: 9 additions & 0 deletions js/appd.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
'use strict';
//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
//%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
//#
//###############################################################################

var cADMetrics={

};
184 changes: 118 additions & 66 deletions js/widgets/tierserviceendpoints.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
},


Expand All @@ -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 += "<div style='column-count:3;overflow-wrap:break-word' >";
paData.forEach( function(poSP){
var sCh = poSP.name[0];
if (sCh !== sLastCh){
sHTML += "<hr><h3>" + sCh + "</h3>";
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 += "<li><a href='#" + poSP.id + "'>" + sName + "</a><br>";
sLast = poSP.name;
});
sHTML += "</div>";
sHTML += "</div>";
sHTML += "</div><p>";

oElement.append(sHTML);
},

//*******************************************************************
get_SEP_Table: function(poSP,psBaseMetric){
var oElement = this.element;
var oTable = $("<table>", {border:0,cellspacing:0,style:"width:100%;overflow-wrap: break-word"});
oTable.append("<TR><TH>Calls</TH><TH>Response Times</TH><TH>Errors per minute</TH></TR>");

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 = $("<TR>");
oChartParams[cRenderQS.METRIC_QS + "0"] = sSPMetric + "|Calls per Minute";
oChartParams[cChartConsts.ATTR_GO_URL] =sUrl;

var oTD = $("<TD>");
var oChart = $("<div>", 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 = $("<TD>");
oChart = $("<div>", oChartParams);
oChart.append("please wait - chart loading...")
oTD.append(oChart);
oRow.append(oTD);

//-----------------------------------------------------------------
oChartParams[cRenderQS.METRIC_QS + "0"] = sSPMetric + "|Errors Per Minute";
oTD = $("<TD>");
oChart = $("<div>", 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 = $("<table>", {border:1,cellspacing:0,style:"width:100%;overflow-wrap: break-word"});
oTable.append("<TR><TH>Calls</TH><TH>Response Times</TH><TH>Errors per minute</TH></TR>");

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 = $("<TR>");
oRow.append("<td colspan='3'><a target='SP' href='" + sUrl + "'>" + poSP.name + "</a></td>");
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 = $("<TR>");
oChartParams[cRenderQS.METRIC_QS + "0"] = sSPMetric + "|Calls per Minute";
var oTD = $("<TD>");
var oChart = $("<div>", oChartParams);
oChart.append("please wait - chart loading...")
oTD.append(oChart);
oRow.append(oTD);
//-----------------------------------------------------------------
oChartParams[cRenderQS.METRIC_QS + "0"] = sSPMetric + "|Average Response Time (ms)";
oTD = $("<TD>");
oChart = $("<div>", oChartParams);
oChart.append("please wait - chart loading...")
oTD.append(oChart);
oRow.append(oTD);
//-----------------------------------------------------------------
oChartParams[cRenderQS.METRIC_QS + "0"] = sSPMetric + "|Errors Per Minute";
oTD = $("<TD>");
oChart = $("<div>", 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("<a name='" + poSP.id + "'>" + poSP.name + "</a>");
sHTML += cRenderMDL.body_start();
var oTable = oThis.get_SEP_Table(poSP, sBaseMetric);
sHTML += oTable[0].outerHTML;
sHTML += "</div>";
sHTML += "</div><p>";
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(
Expand Down
53 changes: 23 additions & 30 deletions pages/service/services.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
?>
<div
type="widget"
<?=cRenderQS::APP_ID_QS?>="<?=$oApp->id?>"
<?=cRenderQS::TIER_ID_QS?>="<?=$oTier->id?>"
<?=cRenderQS::TIER_QS?>="<?=$oTier->name?>"
<?=cRenderQS::HOME_QS?>="<?=$home?>"
>
Please Wait..
</div>
<script language="javascript">
function init_widget(){
$("DIV[type=widget]").adserviceendpoints();
}

$( init_widget);
</script>
<?php
cRenderCards::body_end();
cRenderCards::action_start();
cRenderMenus::show_tier_functions($oTier);
cRenderCards::action_end();
cRenderCards::card_end();
if ($oTier){
?>
<div
id="tierwidget"
<?=cRenderQS::APP_ID_QS?>="<?=$oApp->id?>"
<?=cRenderQS::TIER_ID_QS?>="<?=$oTier->id?>"
<?=cRenderQS::TIER_QS?>="<?=$oTier->name?>"
<?=cRenderQS::HOME_QS?>="<?=$home?>"
>
Please Wait..
</div>
<script language="javascript">
$(function(){
$("#tierwidget").adserviceendpoints();
});
</script>
<?php
}else{
//TBD make these widgets that hide tiers that dont have service end points
$aTiers = $oApp->GET_Tiers();
Expand Down

0 comments on commit ed94421

Please sign in to comment.