<commit_before>import React, { useState } from "react"
import { Button } from "react-bootstrap"
import Log from "./shared/logger"

const serverError = (errorText, onReload) => {
  return (
    <>
      <p>{errorText}</p>
      <p>
        Please try later again
        {onReload && (
          <React.Fragment>
            <span> or try reloading.</span>
          </React.Fragment>
        )}
      </p>
      {onReload && (
        <div className="ep-reload-button">
          <Button bsStyle="primary" onClick={onReload}>
            Reload <i className="fa fa-refresh"></i>
          </Button>
        </div>
      )}
    </>
  )
}

const subTitle = (error) => {
  if (error && error.status && error.statusText) {
    return (
      <p>
        <b>{error.status}</b> {error.statusText}
      </p>
    )
  }
  return null
}

const description = (error, onReload) => {
  const errorText =
    "There was an error. Don't worry, it's not you - it's us. Sorry about that."
  const httpStatus = (error && error.status) || error.status

  // internal errors
  if (!httpStatus) {
    return serverError(error, onReload)
  }

  // rest api call errors
  if (httpStatus >= 500) {
    return serverError(errorText, onReload)
  } else if (httpStatus == 404) {
    return <p>That’s an error. The requested entity was not found</p>
  } else if (httpStatus >= 400 && httpStatus < 500) {
    return null
  } else {
    return serverError(errorText, onReload)
  }
}

const ErrorPage = ({ error, headTitle, onReload }) => {
  Log.debug("RENDER error page")
  const [showDetails, setShowDetails] = useState(false)
  const err = error.error || error

  const details = () => {
    const errorDetails =
      (err.data && (err.data.errors || err.data.error)) || err.message
    return errorDetails
  }

  return (
    <>
      <div className="row error-page">
        <div className="col-md-10 col-md-offset-2">
          <div className="row">
            <div className="col-md-10">
              <h3>{headTitle}</h3>
              {subTitle(err)}
              {description(err, onReload)}
              {details() && (
                <>
                  <div className="display-flex">
                    <div
                      className="action-link"
                      onClick={() => setShowDetails(!showDetails)}
                      data-toggle="collapse"
                      data-target="#collapseDetails"
                      aria-expanded={showDetails}
                      aria-controls="collapseDetails"
                    >
                      {showDetails ? (
                        <>
                          <span>Hide details</span>
                          <i className="fa fa-chevron-circle-up" />
                        </>
                      ) : (
                        <>
                          <span>Show details</span>
                          <i className="fa fa-chevron-circle-down" />
                        </>
                      )}
                    </div>
                  </div>
                  <div className="collapse" id="collapseDetails">
                    <pre>
                      <code>{details()}</code>
                    </pre>
                  </div>
                </>
              )}
            </div>
          </div>
        </div>
      </div>
    </>
  )
}

export default ErrorPage
<commit_msg>[lbaas] fix display of errortext<commit_after>import React, { useState } from "react"
import { Button } from "react-bootstrap"
import Log from "./shared/logger"

const serverError = (errorText, onReload) => {
  return (
    <>
      <p>{errorText}</p>
      <p>
        Please try later again
        {onReload && (
          <React.Fragment>
            <span> or try reloading.</span>
          </React.Fragment>
        )}
      </p>
      {onReload && (
        <div className="ep-reload-button">
          <Button bsStyle="primary" onClick={onReload}>
            Reload <i className="fa fa-refresh"></i>
          </Button>
        </div>
      )}
    </>
  )
}

const subTitle = (error) => {
  if (error?.status && error?.statusText) {
    return (
      <p>
        <b>{error.status}</b> {error.statusText}
      </p>
    )
  } else {
    if (error?.status) {
      return (
        <p>
          Error <b>{error.status}</b>
        </p>
      )
    }
  }
  return null
}

const description = (error, onReload) => {
  const errorText =
    "There was an error. Don't worry, it's not you - it's us. Sorry about that."
  const httpStatus = (error && error.status) || error.status

  // internal errors
  if (!httpStatus) {
    return serverError(error, onReload)
  }

  // rest api call errors
  if (httpStatus >= 500) {
    return serverError(errorText, onReload)
  } else if (httpStatus == 404) {
    return <p>That’s an error. The requested entity was not found</p>
  } else if (httpStatus >= 400 && httpStatus < 500) {
    return null
  } else {
    return serverError(errorText, onReload)
  }
}

const ErrorPage = ({ error, headTitle, onReload }) => {
  Log.debug("RENDER error page")
  const [showDetails, setShowDetails] = useState(false)
  const err = error.error || error

  const details = () => {
    const errorDetails =
      (err.data && (err.data.errors || err.data.error)) || err.message
    return errorDetails
  }

  return (
    <>
      <div className="row error-page">
        <div className="col-md-10 col-md-offset-2">
          <div className="row">
            <div className="col-md-10">
              <h3>{headTitle}</h3>
              {subTitle(err)}
              {description(err, onReload)}
              {details() && (
                <>
                  <div className="display-flex">
                    <div
                      className="action-link"
                      onClick={() => setShowDetails(!showDetails)}
                      data-toggle="collapse"
                      data-target="#collapseDetails"
                      aria-expanded={showDetails}
                      aria-controls="collapseDetails"
                    >
                      {showDetails ? (
                        <>
                          <span>Hide details</span>
                          <i className="fa fa-chevron-circle-up" />
                        </>
                      ) : (
                        <>
                          <span>Show details</span>
                          <i className="fa fa-chevron-circle-down" />
                        </>
                      )}
                    </div>
                  </div>
                  <div className="collapse" id="collapseDetails">
                    <pre>
                      <code>{details()}</code>
                    </pre>
                  </div>
                </>
              )}
            </div>
          </div>
        </div>
      </div>
    </>
  )
}

export default ErrorPage

{'fraction_non_alphanumeric': 0.13508415554265815, 'fraction_numerical': 0.005513639001741149, 'mean_word_length': 1.371173030615755, 'pattern_counts': {'":': 0, '<': 121, '<?xml version=': 0, '>': 135, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6743857', 'n_tokens_mistral': 1999, 'n_tokens_neox': 1893, 'n_words': 421}