ui/lib/shared/addon/components/modal-yaml/component.js

134 lines
3.2 KiB
JavaScript

import { alias } from '@ember/object/computed';
import Component from '@ember/component';
import { get, set, computed, observer } from '@ember/object';
import NewOrEdit from 'ui/mixins/new-or-edit';
import { inject as service } from '@ember/service';
import CodeMirror from 'codemirror';
import jsyaml from 'js-yaml';
import ModalBase from 'shared/mixins/modal-base';
import fetchYaml from 'shared/utils/fetch-yaml';
import layout from './template';
export default Component.extend(ModalBase, NewOrEdit, {
intl: service(),
growl: service(),
scope: service(),
store: service('store'),
layout,
model: null,
errors: null,
compose: null,
loading: null,
classNames: ['modal-container', 'large-modal', 'fullscreen-modal', 'modal-shell', 'alert'],
resource: alias('modalService.modalOpts.resource'),
readOnly: alias('modalService.modalOpts.readOnly'),
init() {
this._super(...arguments);
window.jsyaml || (window.jsyaml = jsyaml);
let resource = get(this, 'resource');
if ( resource && resource.links.yaml ) {
let yamlLink = resource.links.yaml;
set(this, 'loading', true);
return fetchYaml(yamlLink).then((yaml) => {
set(this, 'editing', true);
set(this, 'model', {
resource,
yaml
});
}).catch((error) => {
set(this, 'errors', [get(error, 'message') || get(error, 'xhr')]);
}).finally(() => {
set(this, 'loading', false);
});
} else {
set(this, 'editing', false);
set(this, 'model', {
resource,
yaml: ''
});
}
},
actions: {
cancel() {
return this._super(...arguments);
},
close() {
return this._super(...arguments);
},
save(success) {
let model = get(this, 'model');
const lintError = [];
try {
jsyaml.safeLoadAll(model.yaml, (y) => {
lintError.pushObjects(CodeMirror.lint.yaml(y));
});
} catch (error){
set(this, 'errors', [error.message || error.xhr]);
success(false);
return;
}
if ( lintError.length ) {
set(this, 'errors', [get(this, 'intl').t('yamlPage.errors')]);
success(false);
return;
}
set(this, 'errors', null);
let resource = model.resource;
if ( resource ) {
get(this, 'store').request({
data: JSON.stringify(jsyaml.load(model.yaml)),
url: resource.links.yaml,
method: 'PUT'
}).then(() => {
this.send('cancel');
}).catch((error) => {
set(this, 'errors', [get(error, 'message') || get(error, 'xhr')]);
success(false);
});
return;
}
},
},
lintObserver: observer('model.yaml', function() {
const yaml = get(this, 'model.yaml');
const lintError = [];
jsyaml.safeLoadAll(yaml, (y) => {
lintError.pushObjects(CodeMirror.lint.yaml(y));
});
if ( lintError.length ) {
set(this, 'errors', null);
}
}),
filename: computed('model.resource', function() {
let resource = get(this, 'model.resource');
if (resource){
return `${ resource.name }.yaml`;
}
return 'kubenetes.yaml';
}),
});