<div class="d-flex">
  <div class="dot dot-64 p-16"
    [ngClass]="{
      'dot-success': icon === 'success',
      'dot-danger': icon === 'failed',
      'dot-info': icon === 'connecting',
      'dot-default': icon === 'no-connection' || icon === 'unknown'
    }"
  >
    <!-- unknown-->
    <svg viewBox="0 0 17 23" *ngIf="icon === 'unknown'">
        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="Artboard" transform="translate(-24.000000, -20.000000)" fill="currentColor" fill-rule="nonzero">
                <path d="M34.4437635,36.1999921 C34.8390765,36.1999921 35.1312643,35.7531166 35.1312643,35.3749911 C35.1312643,34.8765531 35.7672026,33.6906141 36.7812663,33.1062384 C38.4140808,32.1952999 40.6312709,30.9406109 40.6312709,27.674982 C40.6312709,23.7390398 36.506266,20.7999738 32.8281366,20.7999738 C29.3218824,20.7999738 26.7093793,22.2952881 24.8531271,25.3718542 C24.6640644,25.6812296 24.7328144,26.059355 25.0250023,26.2827928 L27.8437557,28.4312329 C27.9812558,28.5171705 28.118756,28.568733 28.2734437,28.568733 C28.4625064,28.568733 28.6687566,28.4656079 28.8062568,28.2937327 C29.8203205,27.0218562 30.232821,26.6093557 30.6453215,26.3171679 C31.0234469,26.059355 31.7281353,25.8187298 32.5015737,25.8187298 C33.8937629,25.8187298 35.1484519,26.6781058 35.1484519,27.6406069 C35.1484519,28.7406082 34.5984512,29.3077964 33.2750121,29.9093596 C31.7625103,30.5968605 29.7000079,32.3843626 29.7000079,34.4640526 L29.7000079,35.237491 C29.7000079,35.6156164 29.9406332,36.1999921 30.3187586,36.1999921 L34.4437635,36.1999921 Z M34.5125136,42.7999934 C34.8906391,42.7999934 35.2000079,42.4906246 35.2000079,42.1124992 L35.2000079,37.9874943 C35.2000079,37.6093688 34.8906391,37.2999934 34.5125136,37.2999934 L30.3875087,37.2999934 C30.0093832,37.2999934 29.7000079,37.6093688 29.7000079,37.9874943 L29.7000079,42.1124992 C29.7000079,42.4906246 30.0093832,42.7999934 30.3875087,42.7999934 L34.5125136,42.7999934 Z" id=""></path>
            </g>
        </g>
    </svg>
    <!-- no connection -->
    <svg viewBox="0 0 32 32" *ngIf="icon === 'no-connection'">
      <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g id="Artboard-Copy" transform="translate(-16.000000, -16.000000)" fill="currentColor" fill-rule="nonzero">
              <path d="M36.090359,41.560381 L32.5058901,45.1435604 C28.9330257,48.7177143 23.134696,48.7177143 19.5592528,45.1435604 C15.9850989,41.5681172 15.9863883,35.7710769 19.5592528,32.1969231 L23.1424323,28.6137436 L25.8772015,31.3485128 L22.294022,34.9316923 C20.2335971,36.9921172 20.2335971,40.3470769 22.294022,42.4062125 C24.3570257,44.4692161 27.710696,44.4692161 29.7711209,42.4062125 L33.3543004,38.8256117 L36.090359,41.560381 L36.090359,41.560381 Z M32.1964396,19.5597363 L28.6132601,23.1429158 L31.3480293,25.877685 L34.9324982,22.2945055 C36.9929231,20.2340806 40.3465934,20.2340806 42.4044396,22.2957949 C44.470022,24.3562198 44.470022,27.7098901 42.4095971,29.770315 L38.8264176,33.3534945 L41.5611868,36.0882637 L45.1443663,32.5063736 C48.7172308,28.9309304 48.7172308,23.1338901 45.1443663,19.5597363 C41.5676337,15.9855824 35.7705934,15.9855824 32.1964396,19.5597363 Z M24.5310916,18.5346813 L26.3877949,18.2716484 L26.9525421,22.2467985 L25.0984176,22.5111209 L24.5310916,18.5346813 L24.5310916,18.5346813 Z M18.2711649,26.386989 L18.5367766,24.5289963 L22.5132161,25.0963223 L22.2476044,26.9530256 L18.2711649,26.386989 Z M24.4511502,23.1364689 L23.1256704,24.4645275 L20.2825934,21.6240293 L21.6093627,20.2972601 L24.4511502,23.1364689 L24.4511502,23.1364689 Z M40.1699487,46.1647473 L38.3119561,46.4277802 L37.7472088,42.45263 L39.6026227,42.1883077 L40.1699487,46.1647473 L40.1699487,46.1647473 Z M46.4311649,38.3124396 L46.1642638,40.1704322 L42.1878242,39.6043956 L42.4547253,37.7464029 L46.4311649,38.3124396 Z M40.2511795,41.5616703 L41.57537,40.2349011 L44.4184469,43.0766886 L43.0916777,44.4034579 L40.2511795,41.5616703 Z" id="Shape-Copy-2"></path>
          </g>
      </g>
  </svg>
    <!-- Connecting -->
    <svg viewBox="0 0 29 32" class="icon-spin" *ngIf="icon === 'connecting'">
      <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Artboard-Copy-2" transform="translate(-17.000000, -16.000000)" fill="currentColor" fill-rule="nonzero">
          <path d="M39.7170667,23.98025 L41.3802667,22.0206 C42.31325,22.9163667 43.1179,23.9391833 43.7788167,25.0608167 L41.4996167,26.2556 C40.9991167,25.424 40.4049333,24.6565667 39.7170667,23.98025 Z M44.6502,26.7766333 L42.3568833,27.9791167 C42.6841333,28.8094333 42.9151333,29.68595 43.0409,30.5958333 L45.6345167,30.5958333 C45.4843667,29.2573167 45.1494167,27.9752667 44.6502,26.7766333 L44.6502,26.7766333 Z M25.6440333,22.3363 C27.3868,21.2711333 29.4273,20.65 31.6166667,20.65 C34.0793833,20.65 36.3585833,21.4302667 38.2348167,22.7495333 L39.9005833,20.7873167 C37.5726167,19.0946 34.7159167,18.0833333 31.6166667,18.0833333 C28.8818833,18.0833333 26.3473,18.8841333 24.18745,20.23035 L21.8132833,16.8 L19.05155,25.7833333 L28.0271833,25.7833333 L25.6440333,22.3363 L25.6440333,22.3363 Z M43.1512667,32.5208333 C43.1166167,33.7554 42.8869,34.9399167 42.4916333,36.05 L45.1879167,36.05 C45.5074667,34.9232333 45.7025333,33.7425667 45.7333333,32.5208333 L43.1512667,32.5208333 Z M23.5162667,40.41975 L21.85435,42.3794 C20.9213667,41.4836333 20.1154333,40.4608167 19.4558,39.3391833 L21.7337167,38.1444 C22.2342167,38.976 22.8284,39.7434333 23.5162667,40.41975 L23.5162667,40.41975 Z M18.5831333,37.6233667 L20.87645,36.4208833 C20.5504833,35.5905667 20.3194833,34.71405 20.1924333,33.8041667 L17.5975333,33.8041667 C17.75025,35.1426833 18.0839167,36.4247333 18.5831333,37.6233667 Z M37.5893,42.0637 C35.8478167,43.1288667 33.8073167,43.75 31.6166667,43.75 C29.1552333,43.75 26.87475,42.9697333 24.9998,41.6504667 L23.33275,43.6126833 C25.6607167,45.3054 28.5187,46.3166667 31.6166667,46.3166667 C34.35145,46.3166667 36.8873167,45.5158667 39.0458833,44.16965 L41.42005,47.6 L44.1817833,38.6166667 L35.20615,38.6166667 L37.5893,42.0637 L37.5893,42.0637 Z M20.0820667,31.8791667 C20.1167167,30.6446 20.3477167,29.4600833 20.7404167,28.35 L18.0454167,28.35 C17.7258667,29.4767667 17.5295167,30.6574333 17.5,31.8791667 L20.0820667,31.8791667 Z" id="Shape" transform="translate(31.616667, 32.200000) scale(-1, 1) translate(-31.616667, -32.200000) "></path>
        </g>
      </g>
    </svg>
    <!-- Failed -->
    <svg viewBox="0 0 28 27" *ngIf="icon === 'failed'">
      <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Artboard-Copy-3" transform="translate(-18.000000, -18.000000)" fill="currentColor" fill-rule="nonzero">
          <path d="M32.1000157,45.0000026 C39.3875244,45.0000026 45.3000315,39.0874956 45.3000315,31.7999869 C45.3000315,24.5124782 39.3875244,18.5999712 32.1000157,18.5999712 C24.812507,18.5999712 18.9,24.5124782 18.9,31.7999869 C18.9,39.0874956 24.812507,45.0000026 32.1000157,45.0000026 Z M33.6812676,34.5499902 L30.5015763,34.5499902 C30.1750134,34.5499902 29.9172006,34.3609274 29.9172006,34.1203022 L29.6250128,23.4468519 C29.6250128,23.3265393 29.6765753,23.2062266 29.796888,23.1374766 C29.9000131,23.051539 30.0547008,22.9999764 30.2093885,22.9999764 L33.990643,22.9999764 C34.1453307,22.9999764 34.3000184,23.051539 34.4031435,23.1374766 C34.5234561,23.2062266 34.5750187,23.3265393 34.5750187,23.4468519 L34.2656433,34.1203022 C34.2484558,34.3609274 33.990643,34.5499902 33.6812676,34.5499902 Z M33.7672052,40.5999974 L30.4672013,40.5999974 C30.1578259,40.5999974 29.9000131,40.3421846 29.9000131,40.0328092 L29.9000131,36.7671803 C29.9000131,36.4578049 30.1578259,36.1999921 30.4672013,36.1999921 L33.7672052,36.1999921 C34.0593931,36.1999921 34.3000184,36.4578049 34.3000184,36.7671803 L34.3000184,40.0328092 C34.3000184,40.3421846 34.0593931,40.5999974 33.7672052,40.5999974 Z" id=""></path>
        </g>
      </g>
    </svg>
    <!-- Success -->
    <svg viewBox="0 0 31 31" *ngIf="icon === 'success'">
      <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Artboard-Copy-4" transform="translate(-17.000000, -17.000000)" fill="currentColor" fill-rule="nonzero">
          <path d="M24.9403042,28.1887417 C25.5036875,27.6253583 26.1286708,27.1607917 26.7934375,26.7937583 C30.4984208,24.751975 35.2493208,25.837675 37.6311875,29.448975 L34.7488208,32.3300583 C33.9223542,30.4448417 31.8703042,29.371975 29.8285208,29.8288417 C29.0598042,30.0008083 28.3295875,30.384525 27.7328375,30.981275 L22.2093708,36.5073083 C20.5320542,38.184625 20.5320542,40.9129917 22.2093708,42.5903083 C23.8866875,44.267625 26.6150542,44.267625 28.2923708,42.5903083 L29.9953542,40.887325 C31.5443375,41.5020417 33.2049708,41.7471583 34.8450708,41.6252417 L31.0861875,45.384125 C27.8637375,48.606575 22.6392875,48.606575 19.4168375,45.384125 C16.1943875,42.161675 16.1943875,36.937225 19.4168375,33.714775 L24.9403042,28.1887417 Z M33.7131708,19.415875 L29.9542875,23.1747583 C31.5931042,23.0515583 33.2550208,23.2979583 34.8040042,23.9113917 L36.5057042,22.2096917 C38.1830208,20.532375 40.9113875,20.532375 42.5887042,22.2096917 C44.2660208,23.8870083 44.2660208,26.615375 42.5887042,28.2926917 L37.0639542,33.8174417 C35.3815042,35.4998917 32.6492875,35.485775 30.9809542,33.8174417 C30.5921042,33.4285917 30.2571542,32.944775 30.0479708,32.4686583 L27.1656042,35.3497417 C27.4684708,35.809175 27.7828875,36.205725 28.1871375,36.609975 C29.2292042,37.6520417 30.5561708,38.4284583 32.0833375,38.796775 C34.0622375,39.2728917 36.1823042,39.0098083 38.0033542,38.0049583 C38.6681208,37.637925 39.2931042,37.1733583 39.8564875,36.609975 L45.3799542,31.085225 C48.6036875,27.862775 48.6036875,22.638325 45.3812375,19.415875 C42.1587875,16.1947083 36.9356208,16.1947083 33.7131708,19.415875 Z" id="Shape-Copy"></path>
        </g>
      </g>
    </svg>
  </div>
  <div class="flex-item-middle m-l-16">
    <p class="text-label-small" translate>Connection status</p>
    <h4 class="m-t-4 m-b-8" [ngClass]="{ 'text-muted': icon === 'unknown' }">{{ statusName | translate }}</h4>
    <p><strong>{{ baseUrl }}</strong></p>
  </div>
</div>