diag - magnus v5

by Bateman

HTML

<div class="header">
  КПИ.АПЦ.Картохранилище
</div>
<div class="container">

  <div class="page-header">
    Диагностика
  </div>

  <div class="build-info">
    <div class="build-info__item">
      <span class="build-info__item-label">branch</span>1.0.0
    </div>
    <div class="build-info__item">
      <span class="build-info__item-label">changeset</span>8098b0b8370f
    </div>
    <div class="build-info__item">
      <span class="build-info__item-label">date</span>2018-07-25 12:19 +0300
    </div>
  </div>

  <div class="test-list">

    <div class="test success">
      <div class="status-indicator"></div>

      <div class="test__content">
        <div class="test__name">
          Контекст пользователя

          <span class="test__duration">
            328мс
          </span>
        </div>
        <div class="test__address">
          http://osb.emias.dzm.lanit.ru/ETD/v1.1S/ProxyService
        </div>
        <div class="test__message">
          Имя пользователя: 'HAdiatullina' <br> getUserContext - OK
        </div>
      </div>

    </div>

    <div class="test fail">
      <div class="status-indicator"></div>

      <div class="test__content">
        <div class="test__name">
          МКАБ
          <span class="test__duration">
            65мс
          </span>
        </div>
        <div class="test__address">
          http://osb.emias.dzm.lanit.ru/CardStore/CardStoreService/v1S/ProxyService
        </div>
        <div class="test__error">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro nostrum sint sunt fuga aperiam asperiores, eum necessitatibus iste enim dolorum eos explicabo doloribus magni, esse quae cumque atque. Eius, quidem? Lorem ipsum dolor sit amet, consectetur
          adipisicing elit. Iste voluptates, labore, dolor distinctio fuga alias ea officia quas, adipisci eum, nesciunt laborum? Labore unde laudantium ducimus illo fuga voluptatem obcaecati!
        </div>
      </div>

    </div>

    <div...

CSS

:root {
  --black: #000;
  --white: #fff;
  --jungle-green: #269999;
  --concrete: #f2f2f2;
  --silver: #ccc;
  --shakespeare: #4EABD1;
  --neon-carrot: #FF9933;
  --sunglo: #E16865;
  --boulder: #7A7A7A;
  --mine-shaft: #323232;
}

* {
  box-sizing: border-box;
}

html {
  font-family: Verdana;
}

body {
  font-size: 15px;
  line-height: 1.5;
  color: var(--mine-shaft);
  background: var(--concrete);
}

.header {
  background: var(--jungle-green);
  color: var(--white);
  padding: 16px 24px;
  font-size: 21px;
  height: 64px;
}

.container {
  margin: 16px;
  background: var(--white);
  border: 1px solid var(--silver);
  padding: 16px 24px;
  height: calc(100vh - 64px - 32px);
  overflow-x: auto;
}

.page-header {
  font-size: 21px;
  margin-bottom: 16px;
}

.build-info {
  margin: 0 -24px 16px;
  padding: 16px 24px;
  background: var(--concrete);
}

.build-info__item-label {
  color: var(--boulder);
  font-size: 13px;
  display: inline-block;
  width: 80px;
  text-align: right;
  margin-right: 8px;
}

.test-list {
  border-top: 1px solid var(--mine-shaft);
  border-right: 1px solid var(--silver);
}

.status-indicator {
  width: 8px;
  min-width: 8px;
}

.success .status-indicator {
  background: var(--shakespeare);
}

.fail .status-indicator {
  background: var(--sunglo);
}

.test {
  border-bottom: 1px solid var(--silver);
  display: flex;
}

.test.fail {
  background: rgba(225, 104, 101, 0.18);
}

.test .test__content {
  padding: 16px;
}

.test .test__name {
  font-weight: bold;
}

.test .test__duration {
  font-size: 13px;
  font-weight: normal;
  color: var(--boulder);
}

.test .test__message {
  margin-top: 16px;
}

.test .test__error {
  margin-top: 16px;
}

/* .test .test__name::before {
  content: 'Ресурс';
  font-weight: normal;
} */

.test .test__address {
  font-family: Consolas;
  overflow-wrap: break-word;
}

TypeScript

interface ITest {
  name: string;
  url?: string;
  status: 'success' | 'fail';
  message: string;
  error: string | Array<IErrorInfo>;
  duration: number;
}

interface IErrorInfo {
  index: string;
  message: string;
  tyoe: string;
  stackTrance: string;
}