components/policy/resources/webui/status_box.html

<style>
:host(:not([hidden])) {
  display: block;
}

fieldset {
  border: 1px solid rgb(217, 217, 217);
  display: inline;
  margin: 0;
  padding: 7px;
}

fieldset + fieldset {
  margin-inline-start: 20px;
}

div.status-entry * {
  white-space: pre-wrap
}

div.status-entry:not([hidden]) {
  display: flex;
  margin-bottom: .8em;
}

div.status-entry:last-child {
  margin-bottom: 0;
}
</style>
<fieldset>
  <legend class="legend"></legend>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelVersion}</div>
    <div class="version"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelMachineEnrollmentMachineName}</div>
    <div class="machine-enrollment-name"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelMachineEnrollmentDomain}</div>
    <div class="machine-enrollment-domain"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelMachineEnrollmentToken}</div>
    <div class="machine-enrollment-token"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelMachineEntrollmentDeviceId}</div>
    <div class="machine-enrollment-device-id"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelUsername}</div>
    <div class="username"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelManagedBy}</div>
    <div class="managed-by"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelGaiaId}</div>
    <div class="gaia-id"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelClientId}</div>
    <div class="client-id"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelProfileId}</div>
    <div class="profile-id"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelAssetId}</div>
    <div class="asset-id"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelLocation}</div>
    <div class="location"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelDirectoryApiId}</div>
    <div class="directory-api-id"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelTimeSinceLastFetchAttempt}</div>
    <div class="time-since-last-fetch-attempt"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelTimeSinceLastRefresh}</div>
    <div class="time-since-last-refresh"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelRefreshInterval}</div>
    <div class="refresh-interval"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelPoliciesPush}</div>
    <div class="policy-push"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelStatus}</div>
    <div class="status"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelIsAffiliated}</div>
    <div class="is-affiliated"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelIsOffHoursActive}</div>
    <div class="is-offhours-active"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelVersion}</div>
    <div class="version"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelLastCloudReportSentTimestamp}</div>
    <div class="last-cloud-report-sent-timestamp"></div>
  </div>
  <div class="status-entry" hidden>
    <div class="label">$i18n{labelError}:</div>
    <div class="error"></div>
  </div>
</fieldset>