Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[REF] APIv4 Explorer - improve performance #17062

Merged
merged 3 commits into from
Apr 16, 2020
Merged

[REF] APIv4 Explorer - improve performance #17062

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4cd6927
APIv4 Explorer - performance boost with one-time-binding expressions
colemanw Apr 12, 2020
f28caa2
APIv4 Explorer - performance boost with fewer watch expressions
colemanw Apr 12, 2020
8f38d9e
APIv4 Explorer - performance boost with less intensive loops
colemanw Apr 13, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
110 changes: 57 additions & 53 deletions ang/api4Explorer/Explorer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,10 @@ <h1 crm-page-title>
<div class="panel-heading">
<div class="form-inline">
<span ng-mouseenter="help('entity', paramDoc('$entity'))" ng-mouseleave="help()">
<input class="collapsible-optgroups form-control" ng-model="entity" ng-disabled="!entities.length" ng-class="{loading: !entities.length}" crm-ui-select="{placeholder: ts('Entity'), data: entities}" />
<input class="collapsible-optgroups form-control" ng-model="entity" ng-disabled="!entities.length" ng-class="{loading: !entities.length}" crm-ui-select="::{placeholder: ts('Entity'), data: entities}" />
</span>
<span ng-mouseenter="help('action', paramDoc('$action'))" ng-mouseleave="help()">
<input class="collapsible-optgroups form-control" ng-model="action" ng-disabled="!entity || !actions.length" ng-class="{loading: entity && !actions.length}" crm-ui-select="{placeholder: ts('Action'), data: actions}" />
<input class="collapsible-optgroups form-control" ng-model="action" ng-disabled="!entity || !actions.length" ng-class="{loading: entity && !actions.length}" crm-ui-select="::{placeholder: ts('Action'), data: actions}" />
</span>
<input class="form-control api4-index" type="search" ng-model="index" ng-mouseenter="help('index', paramDoc('$index'))" ng-mouseleave="help()" placeholder="{{:: ts('Index') }}" />
<button class="btn btn-success pull-right" crm-icon="fa-bolt" ng-disabled="!entity || !action || loading" ng-click="execute()" ng-mouseenter="help(ts('Execute'), executeDoc())" ng-mouseleave="help()">{{:: ts('Execute') }}</button>
Expand All @@ -31,17 +31,17 @@ <h1 crm-page-title>
</div>
<div class="panel-body">
<div class="api4-input form-inline">
<label class="form-control" ng-mouseenter="help(name, param)" ng-mouseleave="help()" ng-class="{'api4-option-selected': params[name]}" ng-repeat="(name, param) in availableParams" ng-if="!isSpecial(name) && param.type[0] === 'bool' && param.default !== null">
<input type="checkbox" id="api4-param-{{ name }}" ng-model="params[name]"/>
{{ name }}<span class="crm-marker" ng-if="param.required"> *</span>
<label class="form-control" ng-mouseenter="help(name, param)" ng-mouseleave="help()" ng-class="{'api4-option-selected': params[name]}" ng-repeat="(name, param) in ::getGenericParams(['bool'], false)">
<input type="checkbox" id="api4-param-{{:: name }}" ng-model="params[name]"/>
{{:: name }}<span class="crm-marker" ng-if="::param.required"> *</span>
</label>
<label class="form-control" ng-mouseenter="help('selectRowCount', availableParams.select)" ng-mouseleave="help()" ng-class="{'api4-option-selected': isSelectRowCount()}" ng-if="availableParams.select">
<label class="form-control" ng-mouseenter="help('selectRowCount', availableParams.select)" ng-mouseleave="help()" ng-class="{'api4-option-selected': isSelectRowCount()}" ng-if="::availableParams.select">
<input type="checkbox" id="api4-param-selectRowCount" ng-checked="isSelectRowCount()" ng-click="selectRowCount()" />
SelectRowCount
</label>
</div>
<div class="api4-input form-inline" ng-mouseenter="help(name, param)" ng-mouseleave="help()" ng-repeat="(name, param) in availableParams" ng-if="!isSpecial(name) && param.type[0] === 'bool' && param.default === null">
<label>{{ name }}<span class="crm-marker" ng-if="param.required"> *</span></label>
<div class="api4-input form-inline" ng-mouseenter="help(name, param)" ng-mouseleave="help()" ng-repeat="(name, param) in ::getGenericParams(['bool'], true)">
<label>{{ name }}<span class="crm-marker" ng-if="::param.required"> *</span></label>
<label class="radio-inline">
<input type="radio" ng-model="params[name]" ng-value="true" />true
</label>
Expand All @@ -51,7 +51,7 @@ <h1 crm-page-title>
<a href class="crm-hover-button" title="Clear" ng-click="clearParam(name)" ng-show="params[name] !== null"><i class="crm-i fa-times"></i></a>
</div>
<fieldset class="api4-input form-inline" ng-mouseenter="help('select', availableParams.select)" ng-mouseleave="help()" ng-if="availableParams.select && !isSelectRowCount()">
<legend>select<span class="crm-marker" ng-if="availableParams.select.required"> *</span></legend>
<legend>select<span class="crm-marker" ng-if="::availableParams.select.required"> *</span></legend>
<div ng-model="params.select" ui-sortable="{axis: 'y'}">
<div class="api4-input form-inline" ng-repeat="item in params.select track by $index">
<i class="crm-i fa-arrows"></i>
Expand All @@ -63,29 +63,29 @@ <h1 crm-page-title>
<input class="collapsible-optgroups form-control huge" ng-model="controls.select" crm-ui-select="{data: fieldsAndJoinsAndFunctionsAndWildcards}" placeholder="Add select" />
</div>
</fieldset>
<div class="api4-input form-inline" ng-mouseenter="help('fields', availableParams.fields)" ng-mouseleave="help()"ng-if="availableParams.fields">
<label for="api4-param-fields">fields<span class="crm-marker" ng-if="availableParams.fields.required"> *</span></label>
<input class="form-control" ng-list crm-ui-select="{data: fields, multiple: true}" id="api4-param-fields" ng-model="params.fields" style="width: 85%;"/>
<div class="api4-input form-inline" ng-mouseenter="help('fields', availableParams.fields)" ng-mouseleave="help()" ng-if="::availableParams.fields">
<label for="api4-param-fields">fields<span class="crm-marker" ng-if="::availableParams.fields.required"> *</span></label>
<input class="form-control" ng-list crm-ui-select="::{data: fields, multiple: true}" id="api4-param-fields" ng-model="params.fields" style="width: 85%;"/>
</div>
<div class="api4-input form-inline" ng-mouseenter="help('action', availableParams.action)" ng-mouseleave="help()"ng-if="availableParams.action">
<label for="api4-param-action">action<span class="crm-marker" ng-if="availableParams.action.required"> *</span></label>
<div class="api4-input form-inline" ng-mouseenter="help('action', availableParams.action)" ng-mouseleave="help()"ng-if="::availableParams.action">
<label for="api4-param-action">action<span class="crm-marker" ng-if="::availableParams.action.required"> *</span></label>
<input class="form-control" crm-ui-select="{data: actions, allowClear: true, placeholder: 'None'}" id="api4-param-action" ng-model="params.action"/>
</div>
<div class="api4-input form-inline" ng-mouseenter="help(name, param)" ng-mouseleave="help()" ng-repeat="(name, param) in availableParams" ng-if="!isSpecial(name) && (param.type[0] === 'string' || param.type[0] === 'int')">
<label for="api4-param-{{ name }}">{{ name }}<span class="crm-marker" ng-if="param.required"> *</span></label>
<input class="form-control" ng-if="!param.options" type="{{ param.type[0] === 'int' && param.type.length === 1 ? 'number' : 'text' }}" id="api4-param-{{ name }}" ng-model="params[name]"/>
<select class="form-control" ng-if="param.options" ng-options="o for o in param.options" id="api4-param-{{ name }}" ng-model="params[name]"></select>
<div class="api4-input form-inline" ng-mouseenter="help(name, param)" ng-mouseleave="help()" ng-repeat="(name, param) in ::getGenericParams(['string', 'int'])">
<label for="api4-param-{{:: name }}">{{:: name }}<span class="crm-marker" ng-if="::param.required"> *</span></label>
<input class="form-control" ng-if="::!param.options" type="{{:: param.type[0] === 'int' && param.type.length === 1 ? 'number' : 'text' }}" id="api4-param-{{:: name }}" ng-model="params[name]"/>
<select class="form-control" ng-if="::param.options" ng-options="o for o in ::param.options" id="api4-param-{{:: name }}" ng-model="params[name]"></select>
<a href class="crm-hover-button" title="Clear" ng-click="clearParam(name)" ng-show="!!params[name]"><i class="crm-i fa-times"></i></a>
</div>
<div class="api4-input" ng-mouseenter="help(name, param)" ng-mouseleave="help()" ng-repeat="(name, param) in availableParams" ng-if="!isSpecial(name) && (param.type[0] === 'array' || param.type[0] === 'mixed')">
<label for="api4-param-{{ name }}">{{ name }}<span class="crm-marker" ng-if="param.required"> *</span></label>
<textarea class="form-control" type="{{ param.type[0] === 'int' && param.type.length === 1 ? 'number' : 'text' }}" id="api4-param-{{ name }}" ng-model="params[name]">
<div class="api4-input" ng-mouseenter="help(name, param)" ng-mouseleave="help()" ng-repeat="(name, param) in ::getGenericParams(['array', 'mixed'])">
<label for="api4-param-{{:: name }}">{{:: name }}<span class="crm-marker" ng-if="::param.required"> *</span></label>
<textarea class="form-control" type="{{:: param.type[0] === 'int' && param.type.length === 1 ? 'number' : 'text' }}" id="api4-param-{{:: name }}" ng-model="params[name]">
</textarea>
</div>
<fieldset ng-if="availableParams.where" class="api4-clause-fieldset" ng-mouseenter="help('where', availableParams.where)" ng-mouseleave="help()" crm-api4-clause="{type: 'where', clauses: params.where, required: availableParams.where.required, op: 'AND', label: 'where', fields: fieldsAndJoins}">
<fieldset ng-if="::availableParams.where" class="api4-clause-fieldset" ng-mouseenter="help('where', availableParams.where)" ng-mouseleave="help()" crm-api4-clause="{type: 'where', clauses: params.where, required: availableParams.where.required, op: 'AND', label: 'where', fields: fieldsAndJoins}">
</fieldset>
<fieldset ng-repeat="name in ['values', 'defaults']" ng-if="availableParams[name]" ng-mouseenter="help(name, availableParams[name])" ng-mouseleave="help()">
<legend>{{ name }}<span class="crm-marker" ng-if="availableParams[name].required"> *</span></legend>
<fieldset ng-repeat="name in ['values', 'defaults']" ng-if="::availableParams[name]" ng-mouseenter="help(name, availableParams[name])" ng-mouseleave="help()">
<legend>{{:: name }}<span class="crm-marker" ng-if="::availableParams[name].required"> *</span></legend>
<div class="api4-input form-inline" ng-repeat="clause in params[name]" ng-mouseenter="help('value: ' + clause[0], fieldHelp(clause[0]))" ng-mouseleave="help(name, availableParams[name])">
<input class="collapsible-optgroups form-control" ng-model="clause[0]" crm-ui-select="{formatResult: formatSelect2Item, formatSelection: formatSelect2Item, data: fieldList(name), allowClear: true, placeholder: 'Field'}" />
<input class="form-control" ng-model="clause[1]" api4-exp-value="{field: clause[0], action: action === 'getFields' ? params.action || 'get' : action}" />
Expand All @@ -94,8 +94,8 @@ <h1 crm-page-title>
<input class="collapsible-optgroups form-control" ng-model="controls[name]" crm-ui-select="{formatResult: formatSelect2Item, formatSelection: formatSelect2Item, data: fieldList(name), placeholder: ts('Add %1', {1: name.slice(0, -1)})}"/>
</div>
</fieldset>
<fieldset ng-if="availableParams.groupBy" ng-mouseenter="help('groupBy', availableParams.groupBy)" ng-mouseleave="help()">
<legend>groupBy<span class="crm-marker" ng-if="availableParams.groupBy.required"> *</span></legend>
<fieldset ng-if="::availableParams.groupBy" ng-mouseenter="help('groupBy', availableParams.groupBy)" ng-mouseleave="help()">
<legend>groupBy<span class="crm-marker" ng-if="::availableParams.groupBy.required"> *</span></legend>
<div ng-model="params.groupBy" ui-sortable="{axis: 'y'}">
<div class="api4-input form-inline" ng-repeat="item in params.groupBy track by $index">
<i class="crm-i fa-arrows"></i>
Expand All @@ -107,10 +107,10 @@ <h1 crm-page-title>
<input class="collapsible-optgroups form-control huge" ng-model="controls.groupBy" crm-ui-select="{data: fieldsAndJoinsAndFunctions}" placeholder="Add groupBy" />
</div>
</fieldset>
<fieldset ng-if="availableParams.having" class="api4-clause-fieldset" ng-mouseenter="help('having', availableParams.having)" ng-mouseleave="help()" crm-api4-clause="{type: 'having', clauses: params.having, required: availableParams.having.required, op: 'AND', label: 'having', fields: havingOptions}">
<fieldset ng-if="::availableParams.having" class="api4-clause-fieldset" ng-mouseenter="help('having', availableParams.having)" ng-mouseleave="help()" crm-api4-clause="{type: 'having', clauses: params.having, required: availableParams.having.required, op: 'AND', label: 'having', fields: havingOptions}">
</fieldset>
<fieldset ng-if="availableParams.orderBy" ng-mouseenter="help('orderBy', availableParams.orderBy)" ng-mouseleave="help()">
<legend>orderBy<span class="crm-marker" ng-if="availableParams.orderBy.required"> *</span></legend>
<fieldset ng-if="::availableParams.orderBy" ng-mouseenter="help('orderBy', availableParams.orderBy)" ng-mouseleave="help()">
<legend>orderBy<span class="crm-marker" ng-if="::availableParams.orderBy.required"> *</span></legend>
<div ng-model="params.orderBy" ui-sortable="{axis: 'y'}">
<div class="api4-input form-inline" ng-repeat="clause in params.orderBy">
<i class="crm-i fa-arrows"></i>
Expand All @@ -126,25 +126,25 @@ <h1 crm-page-title>
<input class="collapsible-optgroups form-control huge" ng-model="controls.orderBy" crm-ui-select="{data: fieldsAndJoinsAndFunctions}" placeholder="Add orderBy" />
</div>
</fieldset>
<fieldset ng-if="availableParams.limit && availableParams.offset">
<fieldset ng-if="::availableParams.limit && availableParams.offset">
<div class="api4-input form-inline">
<span ng-mouseenter="help('limit', availableParams.limit)" ng-mouseleave="help()">
<label for="api4-param-limit">limit<span class="crm-marker" ng-if="availableParams.limit.required"> *</span></label>
<label for="api4-param-limit">limit<span class="crm-marker" ng-if="::availableParams.limit.required"> *</span></label>
<input class="form-control" type="number" min="0" id="api4-param-limit" ng-model="params.limit"/>
</span>
<span ng-mouseenter="help('offset', availableParams.offset)" ng-mouseleave="help()">
<label for="api4-param-offset">offset<span class="crm-marker" ng-if="availableParams.offset.required"> *</span></label>
<label for="api4-param-offset">offset<span class="crm-marker" ng-if="::availableParams.offset.required"> *</span></label>
<input class="form-control" type="number" min="0" id="api4-param-offset" ng-model="params.offset"/>
</span>
<a href class="crm-hover-button" title="Clear" ng-click="clearParam('limit');clearParam('offset');" ng-show="!!params.limit || !!params.offset"><i class="crm-i fa-times"></i></a>
</div>
</fieldset>
<fieldset ng-if="availableParams.chain" ng-mouseenter="help('chain', availableParams.chain)" ng-mouseleave="help()">
<fieldset ng-if="::availableParams.chain" ng-mouseenter="help('chain', availableParams.chain)" ng-mouseleave="help()">
<legend>chain</legend>
<div class="api4-input form-inline" ng-repeat="clause in params.chain" api4-exp-chain="clause" entities="entities" main-entity="entity" >
<div class="api4-input form-inline" ng-repeat="clause in params.chain" api4-exp-chain="clause" entities="::entities" main-entity="::entity" >
</div>
<div class="api4-input form-inline">
<input class="form-control" ng-model="controls.chain" crm-ui-select="{data: entities}" placeholder="Add chain" />
<input class="form-control" ng-model="controls.chain" crm-ui-select="::{data: entities}" placeholder="Add chain" />
</div>
</fieldset>
</div>
Expand All @@ -171,16 +171,16 @@ <h4 ng-bind-html="helpContent.description"></h4>
<div class="api4-explorer-row">
<div class="panel panel-warning explorer-code-panel">
<ul class="panel-heading nav nav-tabs">
<li role="presentation" ng-repeat="tab in code" ng-class="{active: selectedTab.code === tab.lang}">
<a href ng-click="selectedTab.code = tab.lang">
{{ tab.lang }}
<li role="presentation" ng-repeat="lang in ::langs" ng-class="{active: selectedTab.code === lang}">
<a href ng-click="selectLang(lang)">
{{:: lang }}
</a>
</li>
</ul>
<div class="panel-body">
<table ng-repeat="tab in code" ng-show="selectedTab.code === tab.lang">
<tr ng-repeat="style in tab.style">
<td>{{ style.label }}</td>
<table>
<tr ng-repeat="style in code[selectedTab.code]">
<td>{{:: style.label }}</td>
<td><pre class="prettyprint" ng-bind-html="style.code"></pre></td>
</tr>
</table>
Expand All @@ -190,14 +190,16 @@ <h4 ng-bind-html="helpContent.description"></h4>
<ul class="panel-heading nav nav-tabs">
<li role="presentation" ng-class="{active: selectedTab.result === 'result'}">
<a href ng-click="selectedTab.result = 'result'">
<i class="fa fa-fw fa-circle-o" ng-if="status === 'default'"></i>
<i class="fa fa-fw fa-check-circle" ng-if="status === 'success'"></i>
<i class="fa fa-fw fa-minus-circle" ng-if="status === 'danger'"></i>
<i class="fa fa-fw fa-spinner fa-pulse" ng-if="status === 'warning'"></i>
<span ng-switch="status">
<i class="fa fa-fw fa-circle-o" ng-switch-when="default"></i>
<i class="fa fa-fw fa-check-circle" ng-switch-when="success"></i>
<i class="fa fa-fw fa-minus-circle" ng-switch-when="danger"></i>
<i class="fa fa-fw fa-spinner fa-pulse" ng-switch-when="warning"></i>
</span>
<span>{{:: ts('Result') }}</span>
</a>
</li>
<li role="presentation" ng-if="perm.accessDebugOutput" ng-class="{active: selectedTab.result === 'debug'}">
<li role="presentation" ng-if="::perm.accessDebugOutput" ng-class="{active: selectedTab.result === 'debug'}">
<a href ng-click="selectedTab.result = 'debug'">
<i class="fa fa-fw fa-{{ debug ? 'bug' : 'circle-o' }}"></i>
<span>{{:: ts('Debug') }}</span>
Expand All @@ -208,14 +210,16 @@ <h4 ng-bind-html="helpContent.description"></h4>
<div ng-show="selectedTab.result === 'result'">
<pre class="prettyprint" ng-repeat="code in result" ng-bind-html="code"></pre>
</div>
<div ng-show="selectedTab.result === 'debug'">
<div ng-if="::perm.accessDebugOutput" ng-show="selectedTab.result === 'debug'">
<pre ng-if="debug" class="prettyprint" ng-bind-html="debug"></pre>
<p ng-if="!debug">
{{:: ts('To view debugging output, enable the debug param before executing.') }}
</p>
<p ng-if="!debug">
{{:: ts('Enable backtrace in system settings to see error backtraces.') }}
</p>
<div ng-if="!debug">
<p>
{{:: ts('To view debugging output, enable the debug param before executing.') }}
</p>
<p>
{{:: ts('Enable backtrace in system settings to see error backtraces.') }}
</p>
</div>
</div>
</div>
</div>
Expand Down
Loading