[ML] Adding ace editor for JSON (#18692) (#18714)

* [ML] Adding ace editor for JSON

* removing unnecessary require-keys setting
This commit is contained in:
James Gowdy 2018-05-02 13:40:50 +01:00 committed by GitHub
parent 049516a1e3
commit ede1d86554
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 51 additions and 12 deletions

View file

@ -41,7 +41,15 @@
<button ng-click="copyToClipboard(job)" class="kuiButton kuiButton--primary" aria-label="Copy JSON to clipboard">
Copy JSON to clipboard
</button>
<div class="ml-pre">{{jobJson}}</div>
<div
ng-if="jobJson!==''"
class="json-textarea"
ui-ace="{
mode: 'json',
onLoad: aceLoaded
}"
ng-model="jobJson"
></div>
</div>
</ml-job-tab-4>
@ -115,7 +123,14 @@
is-loading="(datafeedPreview.json === '')"
/>
<div ng-hide="(datafeedPreview.json === '')">
<div class="ml-pre">{{datafeedPreview.json}}</div>
<div
class="json-textarea"
ui-ace="{
mode: 'json',
onLoad: aceLoaded
}"
ng-model="datafeedPreview.json"
></div>
</div>
</div>
<div class="tab_contents" ng-if="permissions.canPreviewDatafeed===false">

View file

@ -6,6 +6,7 @@
import _ from 'lodash';
import moment from 'moment';
import 'ace';
import { toLocaleString, detectorToString } from 'plugins/ml/util/string_utils';
import { copyTextToClipboard } from 'plugins/ml/util/clipboard_utils';
import { JOB_STATE, DATAFEED_STATE } from 'plugins/ml/../common/constants/states';
@ -45,6 +46,7 @@ module.directive('mlJobListExpandedRow', function ($location, Private) {
$scope.permissions = {
canPreviewDatafeed: checkPermission('canPreviewDatafeed')
};
$scope.jobJson = '';
$scope.toLocaleString = toLocaleString; // add toLocaleString to the scope to display nicer numbers
@ -237,6 +239,10 @@ module.directive('mlJobListExpandedRow', function ($location, Private) {
return url;
}
$scope.aceLoaded = function (editor) {
editor.setReadOnly(true);
$scope.$applyAsync();
};
},
};
})

View file

@ -16,6 +16,10 @@ ml-job-list-expanded-row {
padding: 10px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
.json-textarea {
height: 500px;
}
}
.job-audit-list-container {

View file

@ -464,12 +464,14 @@
<ml-job-tab-4 ng-show="ui.currentTab === 4" class="ml_json_tab">
<div class="tab_contents">
<label class="kuiFormLabel" id="ml_aria_label_new_job_json">JSON</label>
<textarea
aria-labelledby="ml_aria_label_new_job_json"
<div
class="form-control json-textarea"
ui-ace="{
mode: 'json',
onChange: jsonTextChange
}"
ng-model="ui.jsonText"
class="form-control ml-pre json-textarea"
ng-change="jsonTextChange()" >
</textarea>
></div>
</div>
</ml-job-tab-4>
@ -482,11 +484,15 @@
is-loading="(ui.dataPreview === '')"
/>
<div ng-hide="(ui.dataPreview === '')">
<textarea
aria-labelledby="ml_aria_label_new_job_data_preview"
aria-describedby="ml_aria_description_new_job_data_preview"
readonly
class="form-control ml-pre json-textarea">{{ui.dataPreview}}</textarea>
<div
id="datafeed-preview"
class="form-control json-textarea"
ui-ace="{
mode: 'json',
onLoad: aceLoaded
}"
ng-model="ui.dataPreview"
></div>
<div class="note">
Preview returns the content of the _source field only.
</div>

View file

@ -8,6 +8,7 @@
import _ from 'lodash';
import angular from 'angular';
import 'ace';
import { parseInterval } from 'ui/utils/parse_interval';
@ -1155,6 +1156,13 @@ module.controller('MlNewJob',
return _.sortBy(influencers, (inf) => inf);
}
$scope.aceLoaded = function (editor) {
$scope.$applyAsync();
if (editor.container.id === 'datafeed-preview') {
editor.setReadOnly(true);
}
};
init();
});