stitch-ui/src/debugconsole/components/OutputPanel.js

import React from "react"; // eslint-disable-line no-unused-vars
import PropTypes from "prop-types";
import { Banner } from "../../core";
import { toJSON } from "../../util";

export default function OutputPanel({
  output,
  clearOutput,
  error,
  adminError
}) {
  return (
    <div className="debugconsole-splitpanel-output">
      <div className="steps-step  splitpanel-rightside-content-step">
        <div className="steps-step-num">3</div>
        <h5 className="steps-step-title">Result</h5>
      </div>
      {output !== undefined &&
        <div className="debugconsole-options-clearlink" onClick={clearOutput}>
          clear
        </div>}
      <Banner message={error} error />
      <Banner message={adminError} error />
      {output !== undefined
        ? <pre>
            {toJSON(output)}
          </pre>
        : <div className="debugconsole-splitpanel-output-noresults">
            {'No output. Click "Execute" to run the pipeline and see results.'}
          </div>}
    </div>
  );
}

OutputPanel.propTypes = {
  clearOutput: PropTypes.func.isRequired,
  output: PropTypes.object, // eslint-disable-line react/forbid-prop-types
  error: PropTypes.string,
  adminError: PropTypes.string
};

OutputPanel.defaultProps = {
  output: undefined,
  error: null,
  adminError: null
};