Add pipeline log fullscreen (#5377)

web/src/assets/locales/en.json

@@ -569,5 +569,7 @@
   "use_this_redirect_uri_to_create": "Use this redirect URI to create or update the OAuth application. Go to {0} and setup the OAuth application.",
   "developer_settings": "Developer settings",
   "public_url_for_oauth_if": "Public URL for OAuth if different from URL ({0})",
-  "forge_saved": "Forge saved"
+  "forge_saved": "Forge saved",
+  "fullscreen": "Fullscreen",
+  "exit_fullscreen": "Exit fullscreen"
 }

web/src/components/atomic/Icon.vue

@@ -67,6 +67,8 @@
   <SvgIcon v-else-if="name === 'bug-outline'" :path="mdiBugOutline" size="1.3rem" />
   <SvgIcon v-else-if="name === 'docker'" :path="mdiDocker" size="1.3rem" />
   <SvgIcon v-else-if="name === 'forge'" :path="mdiCodeBraces" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'fullscreen'" :path="mdiFullscreen" size="1.3rem" />
+  <SvgIcon v-else-if="name === 'exit-fullscreen'" :path="mdiFullscreenExit" size="1.3rem" />
 
   <SvgIcon v-else-if="name === 'visibility-private'" :path="mdiLockOutline" size="1.3rem" />
   <SvgIcon v-else-if="name === 'visibility-internal'" :path="mdiLockOpenOutline" size="1.3rem" />
@@ -132,6 +134,8 @@ import {
   mdiFolderOutline,
   mdiFormatListBulleted,
   mdiFormatListGroup,
+  mdiFullscreen,
+  mdiFullscreenExit,
   mdiGestureTap,
   mdiGit,
   mdiGithub,
@@ -237,6 +241,8 @@ export type IconNames =
   | 'cron'
   | 'toolbox'
   | 'forge'
+  | 'fullscreen'
+  | 'exit-fullscreen'
   | 'folder'
   | 'folder-open'
   | 'file';

web/src/components/repo/pipeline/PipelineLog.vue

@@ -1,5 +1,11 @@
 <template>
-  <div v-if="pipeline" class="flex flex-col pt-10 md:pt-0">
+  <div
+    v-if="pipeline"
+    class="fixed top-0 left-0 flex h-full w-full flex-col pt-10 md:pt-0"
+    :class="{
+      'md:absolute': !fullscreen,
+    }"
+  >
     <div
       class="code-box-log flex grow flex-col overflow-hidden p-0! shadow-sm md:mt-0 md:rounded-md!"
       @mouseover="showActions = true"
@@ -14,6 +20,12 @@
         </span>
 
         <div class="ml-auto flex flex-row items-center gap-x-2">
+          <IconButton
+            :title="fullscreen ? $t('exit_fullscreen') : $t('fullscreen')"
+            class="hidden! md:flex!"
+            :icon="fullscreen ? 'exit-fullscreen' : 'fullscreen'"
+            @click="fullscreen = !fullscreen"
+          />
           <IconButton
             v-if="step?.finished !== undefined && hasLogs"
             :is-loading="downloadInProgress"
@@ -154,6 +166,7 @@ const step = computed(() => pipeline.value && findStep(pipeline.value.workflows
 const stream = ref<EventSource>();
 const log = ref<LogLine[]>();
 const consoleElement = ref<Element>();
+const fullscreen = ref(false);
 
 const loadedLogs = computed(() => !!log.value);
 const hasLogs = computed(

web/src/views/repo/pipeline/Pipeline.vue

@@ -50,12 +50,7 @@
           </Panel>
         </div>
 
-        <PipelineLog
+        <PipelineLog v-else-if="selectedStepId !== null" v-model:step-id="selectedStepId" :pipeline="pipeline!" />
-          v-else-if="selectedStepId !== null"
-          v-model:step-id="selectedStepId"
-          :pipeline="pipeline!"
-          class="fixed top-0 left-0 h-full w-full md:absolute"
-        />
       </div>
     </div>
   </Container>