System Initiative

<template> <Stack :class=" clsx( '[&_dd]:m-xs [&_dd]:pl-xs [&_dd]:break-all [&_dd]:font-mono', '[&_dt]:p-2xs [&_dt]:font-bold', themeClasses( '[&_select]:text-neutral-900 [&_select]:bg-neutral-100', '[&_select]:text-neutral-200 [&_select]:bg-neutral-900', ), ) " > <h2 class="font-bold text-xl">WORKSPACES</h2> <div class="flex flex-row gap-xs p-xs w-full"> <LoadStatus :requestStatus="searchWorkspacesReqStatus" loadingMessage="Searching workspaces ..." > <template #success> <select v-if="filteredWorkspaces?.length > 0" v-model="selectedWorkspaceId" > <option v-for="workspace in filteredWorkspaces" :key="workspace.id" :value="workspace.id" > {{ workspace.name }} ({{ workspace.id }}) </option> </select> <p v-else>No workspaces found...</p> </template> </LoadStatus> <VormInput v-model="workspacesFilter" label="WORKSPACE SEARCH: type here to search for a workspace by id or name, or change set id or name, or user id, name, or email (50 results max). then press ENTER" placeholder="workspace name/id, or user name/id/email)" @keydown.enter="searchWorkspaces(workspacesFilter)" /> </div> <template v-if="selectedWorkspaceId && selectedWorkspace"> <LoadStatus :requestStatus="listChangeSetsReqStatus.value" loadingMessage="Loading change sets ..." > <template #success> <div class="flex flex-row gap-xs p-xs w-full"> <select v-if="filteredChangeSets?.length > 0" v-model="selectedChangeSetId" > <option v-for="changeSet in filteredChangeSets" :key="changeSet.id" :value="changeSet.id" > {{ changeSet.name }} ({{ changeSet.id }}) -- {{ changeSet.status }} <p v-if="changeSet.id === selectedWorkspace?.defaultChangeSetId" > * </p> </option> </select> <p v-else>No change sets found for workspace ...</p> <VormInput v-model="changeSetsFilter" placeholder="change set name, ID, status, e.g. 'open'" label="CHANGE SET SEARCH: type here to filter the change set list (e.g., type 'open' to see only open change sets)" /> </div> </template> </LoadStatus> <div class="flex flex-row flex-wrap gap-xs p-xs w-full"> <Stack v-if="selectedChangeSetId && selectedChangeSet" class="flex-none" > <VButton :loading="isGettingSnapshot" @click="getSnapshot(selectedWorkspaceId, selectedChangeSetId)" >Save snapshot to disk</VButton > <VButton :loading="isSettingSnapshot" @click="setSnapshot(selectedWorkspaceId, selectedChangeSetId)" >Replace snapshot for this change set</VButton > <VButton :loading="isGettingCasData" @click="getCasData(selectedWorkspaceId, selectedChangeSetId)" >Save cas data to disk</VButton > <VButton :loading="isUploadingCasData" @click="uploadCasData(selectedWorkspaceId, selectedChangeSetId)" >Upload cas data to service</VButton > <VButton :requestStatus="validateSnapshotRequestStatus" @click="validateSnapshot(selectedWorkspaceId, selectedChangeSetId)" >Validate snapshot</VButton > <VButton :requestStatus="validateSnapshotRequestStatus" @click=" validateSnapshot(selectedWorkspaceId, selectedChangeSetId, { fixIssues: true, }) " >Validate AND FIX changeset</VButton > </Stack> <dl class="p-3"> <dt>Workspace Id</dt> <dd> {{ selectedWorkspace.id }} </dd> <dt>Name</dt> <dd> {{ selectedWorkspace.name }} </dd> <dt>Snapshot Version</dt> <dd> {{ selectedWorkspace.snapshotVersion }} </dd> <dt class="font-bold">Component Concurrency Limit</dt> <dd> {{ selectedWorkspace.componentConcurrencyLimit ?? "default" }} <VButton class="m-1" @click="openModal">Set</VButton> </dd> </dl> <Stack v-if="workspaceUsers.length"> <h3 class="font-bold text-sm">USERS</h3> <div v-for="user in workspaceUsers" :key="user.id" class="m-1 text-sm" > {{ user.name }} &lt;{{ user.email }}&gt; </div> </Stack> <dl v-if="selectedChangeSetId && selectedChangeSet" class="p-3 max-w-xs overflow-hidden" > <dt>Change Set Id</dt> <dd> {{ selectedChangeSet.id }} </dd> <dt>Name</dt> <dd> {{ selectedChangeSet.name }} </dd> <dt>Status</dt> <dd> {{ selectedChangeSet.status }} </dd> <dt>Snapshot Address (blake3 hash of contents)</dt> <dd> {{ selectedChangeSet.workspaceSnapshotAddress }} </dd> </dl> </div> <Modal ref="concurrencyModalRef" :title="concurrencyModalTitle"> <Stack> <VormInput v-model="editingConcurrencyLimit" placeholder="blank is default" label="Enter a component concurrency limit for this workspace, blank for default" @keydown.enter="setConcurrencyLimit()" /> <VButton :requestStatus="setConcurrencyLimitReqStatus" @click="setConcurrencyLimit()" >Set</VButton > </Stack> </Modal> <ValidateSnapshot v-if="showPanel === 'validate-snapshot'" /> </template> </Stack> </template> <script lang="ts" setup> import { computed, ref, watch } from "vue"; import { Modal, Stack, VormInput, VButton, LoadStatus, useModal, themeClasses, } from "@si/vue-lib/design-system"; import clsx from "clsx"; import { WorkspaceUser } from "@/store/auth.store"; import { AdminWorkspace, AdminChangeSet, useAdminStore, } from "@/store/admin.store"; import { useWorkspacesStore } from "@/store/workspaces.store"; import { ChangeSetId, ChangeSetStatus } from "@/api/sdf/dal/change_set"; import ValidateSnapshot from "@/components/AdminDashboard/ValidateSnapshot.vue"; import { WorkspacePk } from "@/api/sdf/dal/workspace"; const adminStore = useAdminStore(); const workspacesStore = useWorkspacesStore(); const searchWorkspacesReqStatus = adminStore.getRequestStatus("SEARCH_WORKSPACES"); const setConcurrencyLimitReqStatus = adminStore.getRequestStatus( "SET_CONCURRENCY_LIMIT", ); const workspaceUsers = ref<WorkspaceUser[]>([]); const workspaceChangeSets = ref<{ [key: string]: AdminChangeSet }>({}); const editingConcurrencyLimit = ref<string | null>(null); const isGettingSnapshot = ref<boolean>(false); const isSettingSnapshot = ref<boolean>(false); const isGettingCasData = ref<boolean>(false); const isUploadingCasData = ref<boolean>(false); const lastUploadedSnapshotAddress = ref<string | null>(null); const concurrencyModalRef = ref<InstanceType<typeof Modal>>(); const concurrencyModalTitle = computed(() => selectedWorkspace.value ? `Set concurrency limit for ${selectedWorkspace.value.name} (${selectedWorkspace.value.id})` : "No workspace selected", ); const { open: openModal, close: closeModal } = useModal(concurrencyModalRef); const applyFilter = <T extends object>( things: { [key: string]: T }, filter?: string | null, ): T[] => { const lowerCaseFilter = filter?.toLocaleLowerCase(); return Object.values(things).filter((thing) => lowerCaseFilter ? JSON.stringify(Object.values(thing)) .toLocaleLowerCase() .includes(lowerCaseFilter) : true, ); }; const workspacesFilter = ref<string | null>(null); const searchWorkspaces = async (filter?: string | null) => { const result = await adminStore.SEARCH_WORKSPACES(filter ?? undefined); if (result?.result.success) { filteredWorkspaces.value = result.result.data.workspaces; } else { filteredWorkspaces.value = []; } }; // Start out searching for the current workspace searchWorkspaces(workspacesStore.selectedWorkspacePk); const filteredWorkspaces = ref<AdminWorkspace[]>([]); const selectedWorkspaceId = ref<string | null>(null); // When filteredWorkspaces changes, make sure selectedWorkspaceId is one of them watch(filteredWorkspaces, (filteredWorkspaces) => { if ( !( selectedWorkspaceId.value && selectedWorkspaceId.value in filteredWorkspaces ) ) { // Select the first workspace, unless the selected workspace is one of the results already selectedWorkspaceId.value = filteredWorkspaces[0]?.id ?? null; } }); const selectedWorkspace = computed(() => selectedWorkspaceId.value ? filteredWorkspaces.value.find( (workspace) => workspace.id === selectedWorkspaceId.value, ) : undefined, ); watch(selectedWorkspaceId, async (currentWorkspaceId) => { if (currentWorkspaceId) { editingConcurrencyLimit.value = selectedWorkspace.value ?.componentConcurrencyLimit ? String(selectedWorkspace.value.componentConcurrencyLimit) : null; await fetchChangeSets(currentWorkspaceId); await fetchUsers(currentWorkspaceId); } }); const changeSetsFilter = ref<string | null>(null); // Sort open change sets first const ACTIVE_CHANGE_SET_STATUS: ChangeSetStatus[] = [ ChangeSetStatus.Open, ChangeSetStatus.Approved, ChangeSetStatus.NeedsApproval, ChangeSetStatus.NeedsAbandonApproval, ChangeSetStatus.Rejected, ]; const fetchChangeSets = async (workspaceId: string) => { const result = await adminStore.LIST_CHANGE_SETS(workspaceId); if (result?.result.success) { workspaceChangeSets.value = Object.fromEntries( Object.entries(result.result.data.changeSets).sort((a, b) => { // Sort HEAD first if (!a[1].baseChangeSetId !== !b[1].baseChangeSetId) { return !a[1].baseChangeSetId ? -1 : 1; } const aIsActive = ACTIVE_CHANGE_SET_STATUS.includes(a[1].status); const bIsActive = ACTIVE_CHANGE_SET_STATUS.includes(b[1].status); if (aIsActive && !bIsActive) { return -1; } else if (!aIsActive && bIsActive) { return 1; } return a[1].name.localeCompare(b[1].name); }), ); } else { workspaceChangeSets.value = {}; } }; const listChangeSetsReqStatus = computed(() => adminStore.getRequestStatus("LIST_CHANGE_SETS", selectedWorkspaceId.value), ); const filteredChangeSets = computed(() => selectedWorkspaceId.value ? applyFilter(workspaceChangeSets.value ?? {}, changeSetsFilter.value) : [], ); const selectedChangeSetId = ref<string | null>(null); // When filteredChangeSets changes, make sure selectedChangeSetId is one of them watch(filteredChangeSets, (filteredChangeSets) => { if ( !( selectedChangeSetId.value && selectedChangeSetId.value in filteredChangeSets ) ) { // Select the first workspace, unless the selected workspace is one of the results already selectedChangeSetId.value = filteredChangeSets[0]?.id ?? null; } }); const selectedChangeSet = computed(() => selectedWorkspaceId.value && selectedChangeSetId.value ? workspaceChangeSets.value?.[selectedChangeSetId.value] : undefined, ); if ( !( selectedWorkspaceId.value && selectedWorkspaceId.value in filteredWorkspaces.value ) ) { // Select the first workspace, unless the selected workspace is one of the results already selectedWorkspaceId.value = filteredWorkspaces.value[0]?.id ?? null; } const fetchUsers = async (workspaceId: string) => { const result = await adminStore.LIST_WORKSPACE_USERS(workspaceId); if (result?.result.success) { workspaceUsers.value = result.result.data.users; } else { workspaceUsers.value = []; } }; const getSnapshot = async (workspaceId: string, changeSetId: string) => { isGettingSnapshot.value = true; try { const result = await adminStore.GET_SNAPSHOT(workspaceId, changeSetId); if (result.result.success) { const bytes = Buffer.from(result.result.data, "base64"); const blob = new Blob([bytes], { type: "application/octet-stream" }); const fileHandle = await window.showSaveFilePicker({ suggestedName: `${changeSetId}.snapshot`, types: [ { description: `Workspace Snapshot for change set ${changeSetId}`, accept: { "application/octet-stream": [".snapshot"], }, }, ], }); const writable = await fileHandle.createWritable(); await writable.write(blob); await writable.close(); } } finally { isGettingSnapshot.value = false; } }; const setSnapshot = async (workspaceId: string, changeSetId: string) => { isSettingSnapshot.value = true; try { const [fileHandle] = await window.showOpenFilePicker({ types: [ { description: `Workspace Snapshot for change set ${changeSetId}`, accept: { "application/octet-stream": [".snapshot"], }, }, ], }); const fileData = await fileHandle.getFile(); const result = await adminStore.SET_SNAPSHOT( workspaceId, changeSetId, fileData, ); if (result.result.success) { lastUploadedSnapshotAddress.value = result.result.data.workspaceSnapshotAddress; } if (selectedWorkspaceId.value) { await fetchChangeSets(selectedWorkspaceId.value); } } finally { isSettingSnapshot.value = false; } }; const uploadCasData = async (workspaceId: string, changeSetId: string) => { isUploadingCasData.value = true; try { const [fileHandle] = await window.showOpenFilePicker({ types: [ { description: `Cas data map for change set ${changeSetId}`, accept: { "application/octet-stream": [".cas"], }, }, ], }); const fileData = await fileHandle.getFile(); await adminStore.UPLOAD_CAS_DATA(workspaceId, changeSetId, fileData); } finally { isUploadingCasData.value = false; } }; const getCasData = async (workspaceId: string, changeSetId: string) => { isGettingCasData.value = true; try { const result = await adminStore.GET_CAS_DATA(workspaceId, changeSetId); if (result.result.success) { const bytes = Buffer.from(result.result.data, "base64"); const blob = new Blob([bytes], { type: "application/octet-stream" }); const fileHandle = await window.showSaveFilePicker({ suggestedName: `${changeSetId}.cas`, types: [ { description: `Cas Data map for change set ${changeSetId}`, accept: { "application/octet-stream": [".cas"], }, }, ], }); const writable = await fileHandle.createWritable(); await writable.write(blob); await writable.close(); } } finally { isGettingCasData.value = false; } }; const setConcurrencyLimit = async () => { const componentConcurrencyLimit = editingConcurrencyLimit.value ? parseInt(editingConcurrencyLimit.value) : undefined; if (selectedWorkspaceId.value) { const result = await adminStore.SET_CONCURRENCY_LIMIT( selectedWorkspaceId.value, componentConcurrencyLimit, ); if (result.result.success) { const newLimit = result.result.data.concurrencyLimit; filteredWorkspaces.value = filteredWorkspaces.value.map((workspace) => { if (workspace.id === selectedWorkspaceId.value) { return { ...workspace, componentConcurrencyLimit: newLimit, }; } return workspace; }); closeModal(); } } }; const showPanel = ref<"validate-snapshot" | "migrate-connections" | null>(null); const validateSnapshotRequestStatus = adminStore.getRequestStatus("VALIDATE_SNAPSHOT"); function validateSnapshot( workspaceId: WorkspacePk, changeSetId: ChangeSetId, options?: { fixIssues?: boolean }, ) { adminStore.VALIDATE_SNAPSHOT(workspaceId, changeSetId, options); showPanel.value = "validate-snapshot"; } </script>