open-vault/ui/app/components/console/ui-panel.js
Matthew Irish 311cc49c61
UI - Vault API explorer engine (#7044)
* open-api-explorer engine with embedded swagger-ui

* move swagger config to a component, rely directly on swagger-ui

* filter operations by endpoint, hook up filter to query param, add namespace handling

* fix namespace handling

* update ember-engines so that we can app.import in a lazy engine

* use engine's included hook to move swagger-ui to engine-vendor.* files

* show flash message about this being a live vault server

* show a namespace reminder and override some styles from swagger-ui

* switch filter to use includes instead of startsWith

* move flash-message to alert-banner and fix namespace reminder with a block

* adds explore web-cli command to navigate to the api-explorer engine

* allow passing a preformatted string to flash messages

* add multi-line flash-message to api explorer

* invert control and trigger events on react app so we can control the layout more and use our components

* tweak styling some more and adjust message on the flash

* change web cli command from 'explore' to 'api'

* shorten namespace warning

* fix console

* fix comments
2019-07-02 17:41:23 -05:00

155 lines
4.5 KiB
JavaScript

import { inject as service } from '@ember/service';
import { alias, or } from '@ember/object/computed';
import Component from '@ember/component';
import { getOwner } from '@ember/application';
import { run } from '@ember/runloop';
import { task } from 'ember-concurrency';
import ControlGroupError from 'vault/lib/control-group-error';
import {
parseCommand,
extractDataAndFlags,
logFromResponse,
logFromError,
logErrorFromInput,
executeUICommand,
} from 'vault/lib/console-helpers';
export default Component.extend({
console: service(),
router: service(),
controlGroup: service(),
store: service(),
'data-test-component': 'console/ui-panel',
classNames: 'console-ui-panel',
classNameBindings: ['isFullscreen:fullscreen'],
isFullscreen: false,
inputValue: null,
log: alias('console.log'),
didRender() {
this._super(...arguments);
this.scrollToBottom();
},
logAndOutput(command, logContent) {
this.get('console').logAndOutput(command, logContent);
run.schedule('afterRender', () => this.scrollToBottom());
},
isRunning: or('executeCommand.isRunning', 'refreshRoute.isRunning'),
executeCommand: task(function*(command, shouldThrow = false) {
this.set('inputValue', '');
let service = this.get('console');
let serviceArgs;
if (
executeUICommand(command, args => this.logAndOutput(args), {
api: () => this.routeToExplore.perform(command),
clearall: () => service.clearLog(true),
clear: () => service.clearLog(),
fullscreen: () => this.toggleProperty('isFullscreen'),
refresh: () => this.refreshRoute.perform(),
})
) {
return;
}
// parse to verify it's valid
try {
serviceArgs = parseCommand(command, shouldThrow);
} catch (e) {
this.logAndOutput(command, { type: 'help' });
return;
}
// we have a invalid command but don't want to throw
if (serviceArgs === false) {
return;
}
let [method, flagArray, path, dataArray] = serviceArgs;
if (dataArray || flagArray) {
var { data, flags } = extractDataAndFlags(dataArray, flagArray);
}
let inputError = logErrorFromInput(path, method, flags, dataArray);
if (inputError) {
this.logAndOutput(command, inputError);
return;
}
try {
let resp = yield service[method].call(service, path, data, flags.wrapTTL);
this.logAndOutput(command, logFromResponse(resp, path, method, flags));
} catch (error) {
if (error instanceof ControlGroupError) {
return this.logAndOutput(command, this.get('controlGroup').logFromError(error));
}
this.logAndOutput(command, logFromError(error, path, method));
}
}),
refreshRoute: task(function*() {
let owner = getOwner(this);
let routeName = this.get('router.currentRouteName');
let route = owner.lookup(`route:${routeName}`);
try {
this.get('store').clearAllDatasets();
yield route.refresh();
this.logAndOutput(null, { type: 'success', content: 'The current screen has been refreshed!' });
} catch (error) {
this.logAndOutput(null, { type: 'error', content: 'The was a problem refreshing the current screen.' });
}
}),
routeToExplore: task(function*(command) {
let filter = command.replace('api', '').trim();
try {
yield this.router.transitionTo('vault.cluster.open-api-explorer.index', {
queryParams: { filter },
});
let content =
'Welcome to the Vault API explorer! \nYou can search for endpoints, see what parameters they accept, and even execute requests with your current token.';
if (filter) {
content = `Welcome to the Vault API explorer! \nWe've filtered the list of endpoints for '${filter}'.`;
}
this.logAndOutput(null, {
type: 'success',
content,
});
} catch (error) {
this.logAndOutput(null, {
type: 'error',
content: 'There was a problem navigating to the api explorer.',
});
}
}),
shiftCommandIndex(keyCode) {
this.get('console').shiftCommandIndex(keyCode, val => {
this.set('inputValue', val);
});
},
scrollToBottom() {
this.element.scrollTop = this.element.scrollHeight;
},
actions: {
closeConsole() {
this.set('console.isOpen', false);
},
toggleFullscreen() {
this.toggleProperty('isFullscreen');
},
executeCommand(val) {
this.get('executeCommand').perform(val, true);
},
shiftCommandIndex(direction) {
this.shiftCommandIndex(direction);
},
},
});