src/components/status.vue

<script>
import { GlButton, GlIcon } from '@gitlab/ui';

export default {
  name: 'GlStatus',
  components: {
    GlButton,
    GlIcon,
  },
  props: {
    incidents: {
      type: Array,
      required: false,
      default: () => [],
    },
  },
  computed: {
    isOperational() {
      const OPEN_STATUS = 'opened';

      return !this.incidents.map(({ status }) => status).includes(OPEN_STATUS);
    },
    statusText() {
      return this.isOperational ? 'All systems are operational!' : 'Active incident';
    },
    statusUpdate() {
      return this.isOperational
        ? 'We continuously monitor all our services. If there are any performance or service interruptions, an update will be posted here.'
        : 'We are investigating an active incident. We will post additional updates as soon as possible.';
    },
  },
};
</script>

<template>
  <div class="gl-mb-7 gl-mt-3 gl-text-center">
    <h1 v-if="isOperational">
      <gl-icon name="check-circle-filled" :size="72" class="gl-text-green-500" />
    </h1>
    <h1 v-else>
      <gl-icon name="status_warning" :size="72" class="gl-text-orange-300" />
    </h1>
    <h2 class="gl-mt-5" data-testid="incident-status-text">{{ statusText }}</h2>
    <p class="gl-mt-5 gl-text-gray-500">
      {{ statusUpdate }}
    </p>
    <gl-button
      class="gl-mt-5"
      href="https://support.gitlab.com/hc/en-us/requests/new"
      target="_blank"
    >
      Contact support
    </gl-button>
  </div>
</template>