System Initiative

<template> <div class="w-full h-full flex flex-col items-center relative overflow-hidden dark:bg-neutral-800 dark:text-shade-0 bg-neutral-50 text-neutral-900" > <Stack spacing="lg"> <span class="flex flex-row mt-10 font-bold text-3xl">Dev Dashboard</span> <Stack> <h2 class="font-bold text-lg">FRONTEND</h2> <Inline spacing="md"> <div> <span class="font-bold">Branch: </span> <a :href="getGithubBranchLink(webBranch)" class="text-action-400 hover:underline" target="_blank" > {{ webBranch }} </a> </div> <div> <span class="font-bold">Sha: </span> <a :href="getGithubShaLink(webSha)" class="text-action-400 hover:underline" target="_blank" > {{ webSha }} </a> </div> </Inline> <div class="text-md font-bold text-action-400 hover:underline"> <RouterLink :to="{ name: 'svg' }"> <div class="text-2xl pb-2xs">Debug Design Reference Page</div> <div class="italic text-sm"> (see all Icons, EmptyStateIcons, other SVGs, and Semantic Sizes/Colors) </div> </RouterLink> </div> </Stack> <Stack> <h2>API</h2> <ErrorMessage :requestStatus="apiVersionReqStatus" /> <template v-if="apiVersionReqStatus.isPending">Loading...</template> <template v-else-if="apiVersionReqStatus.isSuccess && apiSha && apiBranch" > <Inline spacing="md"> <div> Branch: <a :href="getGithubBranchLink(apiBranch)" class="text-action-400" target="_blank" >{{ apiBranch }}</a > </div> <div> Sha: <a :href="getGithubShaLink(apiSha)" class="text-action-400" target="_blank" >{{ apiSha }}</a > </div> </Inline> </template> </Stack> </Stack> </div> </template> <script lang="ts" setup> import { computed, onBeforeMount } from "vue"; import { ErrorMessage, Inline, Stack } from "@si/vue-lib/design-system"; import { useSystemStatusStore } from "@/store/system_status.store"; const systemStatusStore = useSystemStatusStore(); onBeforeMount(() => { systemStatusStore.CHECK_CURRENT_API_VERSION(); }); const apiVersionReqStatus = systemStatusStore.getRequestStatus( "CHECK_CURRENT_API_VERSION", ); const apiBranch = computed(() => systemStatusStore.apiGitBranch); const apiSha = computed(() => systemStatusStore.apiGitSha); const webBranch = computed(() => systemStatusStore.webGitBranch); const webSha = computed(() => systemStatusStore.webGitSha); function getGithubBranchLink(branch: string) { return `https://github.com/systeminit/si/tree/${branch}`; } function getGithubShaLink(sha: string) { return `https://github.com/systeminit/si/commit/${sha}`; } </script>