Skip to content

Commit 1662416

Browse files
kevinmessiaenkevinmessiaen
authored
Merge pull request #1171 from Giskard-AI/feature/gsk-1299-debugging-session-list-is-broken-if-no-worker-is-connected
Fixed display issue on smaller screen height
2 parents 5d8ed45 + 738de1d commit 1662416

1 file changed

Lines changed: 65 additions & 52 deletions

File tree

‎frontend/src/views/main/project/Debugger.vue‎

Lines changed: 65 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,66 @@
11
<template>
2-
<div v-if="mlWorkerStore.isExternalWorkerConnected" class="vertical-container">
3-
<v-container fluid class="vc" v-if="debuggingSessionsStore.debuggingSessions.length > 0">
2+
<div v-if='mlWorkerStore.isExternalWorkerConnected' class='vertical-container'>
3+
<v-container v-if='debuggingSessionsStore.debuggingSessions.length > 0' class='vc' fluid>
44
<v-row>
5-
<v-col cols="4">
6-
<v-text-field v-show="debuggingSessionsStore.currentDebuggingSessionId === null" label="Search for a debugging session" append-icon="search" outlined v-model="searchSession"></v-text-field>
5+
<v-col cols='4'>
6+
<v-text-field v-show='debuggingSessionsStore.currentDebuggingSessionId === null'
7+
v-model='searchSession' append-icon='search' label='Search for a debugging session'
8+
outlined></v-text-field>
79
</v-col>
8-
<v-col cols="8">
9-
<div class="d-flex justify-end">
10-
<v-btn v-if="debuggingSessionsStore.currentDebuggingSessionId !== null" text @click="showPastSessions" class="mr-3">
11-
<v-icon class="mr-2">mdi-arrow-left</v-icon>
10+
<v-col cols='8'>
11+
<div class='d-flex justify-end'>
12+
<v-btn v-if='debuggingSessionsStore.currentDebuggingSessionId !== null' class='mr-3' text
13+
@click='showPastSessions'>
14+
<v-icon class='mr-2'>mdi-arrow-left</v-icon>
1215
Back to all sessions
1316
</v-btn>
14-
<AddDebuggingSessionModal v-show="debuggingSessionsStore.currentDebuggingSessionId === null" :projectId="projectId" @createDebuggingSession="createDebuggingSession"></AddDebuggingSessionModal>
17+
<AddDebuggingSessionModal v-show='debuggingSessionsStore.currentDebuggingSessionId === null'
18+
:projectId='projectId'
19+
@createDebuggingSession='createDebuggingSession'></AddDebuggingSessionModal>
1520
</div>
1621
</v-col>
1722
</v-row>
1823

19-
<v-expansion-panels v-if="debuggingSessionsStore.currentDebuggingSessionId === null">
20-
<v-row class="mr-12 ml-6 caption secondary--text text--lighten-3 pb-2">
21-
<v-col cols="3" class="col-container" title="Session name">Session name</v-col>
22-
<v-col cols="2" class="col-container" title="Created at">Created at</v-col>
23-
<v-col cols="3" class="col-container" title="Dataset">Dataset</v-col>
24-
<v-col cols="3" class="col-container" title="Model">Model</v-col>
25-
<v-col cols="1"></v-col>
24+
<v-expansion-panels v-if='debuggingSessionsStore.currentDebuggingSessionId === null'>
25+
<v-row class='mr-12 ml-6 caption secondary--text text--lighten-3 pb-2'>
26+
<v-col class='col-container' cols='3' title='Session name'>Session name</v-col>
27+
<v-col class='col-container' cols='2' title='Created at'>Created at</v-col>
28+
<v-col class='col-container' cols='3' title='Dataset'>Dataset</v-col>
29+
<v-col class='col-container' cols='3' title='Model'>Model</v-col>
30+
<v-col cols='1'></v-col>
2631
</v-row>
2732

28-
<v-expansion-panel v-for="session in filteredSessions" :key="session.id" @click.stop="openDebuggingSession(session.id, projectId)" class="expansion-panel">
29-
<v-expansion-panel-header :disableIconRotate="true" class="grey lighten-5" tile>
30-
<v-row class="px-2 py-1 align-center">
31-
<v-col cols="3" class="font-weight-bold" :title="`${session.name} (ID: ${session.id})`">
32-
<div class="pr-4">
33-
<InlineEditText :text="session.name" @save="(name) => renameSession(session.id, name)">
33+
<v-expansion-panel v-for='session in filteredSessions' :key='session.id'
34+
class='expansion-panel' @click.stop='openDebuggingSession(session.id, projectId)'>
35+
<v-expansion-panel-header :disableIconRotate='true' class='grey lighten-5' tile>
36+
<v-row class='px-2 py-1 align-center'>
37+
<v-col :title='`${session.name} (ID: ${session.id})`' class='font-weight-bold' cols='3'>
38+
<div class='pr-4'>
39+
<InlineEditText :text='session.name' @save='(name) => renameSession(session.id, name)'>
3440
</InlineEditText>
3541
</div>
3642
</v-col>
37-
<v-col cols="2" class="col-container">
38-
<span :title="session.createdDate | date">
43+
<v-col class='col-container' cols='2'>
44+
<span :title='session.createdDate | date'>
3945
{{ session.createdDate | date }}
4046
</span>
4147
</v-col>
42-
<v-col cols="3" class="col-container">
43-
<span :title="(session.dataset.name ? session.dataset.name : 'Unnamed dataset') + ` (ID: ${session.dataset.id})`" @click.stop.prevent="copyText(session.dataset.id, 'Copied dataset ID to clipboard')">
48+
<v-col class='col-container' cols='3'>
49+
<span
50+
:title="(session.dataset.name ? session.dataset.name : 'Unnamed dataset') + ` (ID: ${session.dataset.id})`"
51+
@click.stop.prevent="copyText(session.dataset.id, 'Copied dataset ID to clipboard')">
4452
{{ session.dataset.name ? session.dataset.name : 'Unnamed dataset' }}
4553
</span>
4654
</v-col>
47-
<v-col cols="3" class="col-container">
48-
<span :title="`${session.model.name} (ID: ${session.model.id})`" @click.stop.prevent="copyText(session.model.id, 'Copied model ID to clipboard')">{{ session.model.name ? session.model.name : 'Unnamed model' }}</span>
55+
<v-col class='col-container' cols='3'>
56+
<span :title='`${session.model.name} (ID: ${session.model.id})`'
57+
@click.stop.prevent="copyText(session.model.id, 'Copied model ID to clipboard')">{{ session.model.name ? session.model.name : 'Unnamed model'
58+
}}</span>
4959
</v-col>
50-
<v-col cols="1">
60+
<v-col cols='1'>
5161
<v-card-actions>
52-
<v-btn icon @click.stop.prevent="deleteDebuggingSession(session)">
53-
<v-icon color="accent">delete</v-icon>
62+
<v-btn icon @click.stop.prevent='deleteDebuggingSession(session)'>
63+
<v-icon color='accent'>delete</v-icon>
5464
</v-btn>
5565
</v-card-actions>
5666
</v-col>
@@ -63,37 +73,40 @@
6373
</div>
6474
</v-container>
6575

66-
<v-container v-else class="vc mt-6">
67-
<v-alert class="text-center">
68-
<p class="headline font-weight-medium grey--text text--darken-2">You haven't created any debugging session for this project. <br>Please create your first session to start debugging your model.</p>
76+
<v-container v-else class='vc mt-6'>
77+
<v-alert class='text-center'>
78+
<p class='headline font-weight-medium grey--text text--darken-2'>You haven't created any debugging session for
79+
this project. <br>Please create your first session to start debugging your model.</p>
6980
</v-alert>
70-
<AddDebuggingSessionModal :projectId="projectId" v-on:createDebuggingSession="createDebuggingSession"></AddDebuggingSessionModal>
71-
<div class="d-flex justify-center mb-6">
72-
<img src="@/assets/logo_debugger.png" class="debugger-logo" title="Debugger tab logo" alt="A turtle using a magnifying glass">
81+
<AddDebuggingSessionModal :projectId='projectId'
82+
v-on:createDebuggingSession='createDebuggingSession'></AddDebuggingSessionModal>
83+
<div class='d-flex justify-center mb-6'>
84+
<img alt='A turtle using a magnifying glass' class='debugger-logo' src='@/assets/logo_debugger.png'
85+
title='Debugger tab logo'>
7386
</div>
7487
</v-container>
7588
</div>
76-
<v-container v-else class="d-flex flex-column vc fill-height">
77-
<h1 class="pt-16">ML Worker is not connected</h1>
89+
<v-container v-else class='d-flex flex-column align-center'>
90+
<h1 class='pt-16'>ML Worker is not connected</h1>
7891
<StartWorkerInstructions></StartWorkerInstructions>
7992
</v-container>
8093
</template>
8194

82-
<script setup lang="ts">
83-
import { computed, ref, onActivated, watch } from "vue";
95+
<script lang='ts' setup>
96+
import { computed, onActivated, ref, watch } from 'vue';
8497
import { $vfm } from 'vue-final-modal';
8598
import { api } from '@/api';
86-
import { useRouter, useRoute } from 'vue-router/composables';
87-
import { useMainStore } from "@/stores/main";
88-
import { useDebuggingSessionsStore } from "@/stores/debugging-sessions";
89-
import { useMLWorkerStore } from "@/stores/ml-worker";
90-
import { InspectionDTO } from "@/generated-sources";
99+
import { useRoute, useRouter } from 'vue-router/composables';
100+
import { useMainStore } from '@/stores/main';
101+
import { useDebuggingSessionsStore } from '@/stores/debugging-sessions';
102+
import { useMLWorkerStore } from '@/stores/ml-worker';
103+
import { InspectionDTO } from '@/generated-sources';
91104
import AddDebuggingSessionModal from '@/components/AddDebuggingSessionModal.vue';
92105
import InlineEditText from '@/components/InlineEditText.vue';
93106
import ConfirmModal from './modals/ConfirmModal.vue';
94-
import StartWorkerInstructions from "@/components/StartWorkerInstructions.vue";
95-
import { copyText } from "@/utils";
96-
import { TYPE } from "vue-toastification";
107+
import StartWorkerInstructions from '@/components/StartWorkerInstructions.vue';
108+
import { copyText } from '@/utils';
109+
import { TYPE } from 'vue-toastification';
97110
98111
const router = useRouter();
99112
const route = useRoute();
@@ -107,7 +120,7 @@ interface Props {
107120
108121
const props = defineProps<Props>();
109122
110-
const searchSession = ref("");
123+
const searchSession = ref('');
111124
112125
const filteredSessions = computed(() => {
113126
@@ -125,7 +138,7 @@ const filteredSessions = computed(() => {
125138
model.id.toString().includes(search)
126139
);
127140
}));
128-
})
141+
});
129142
130143
async function showPastSessions() {
131144
debuggingSessionsStore.reload();
@@ -194,7 +207,7 @@ async function openDebuggingSession(debuggingSessionId: number, projectId: numbe
194207
}
195208
196209
function resetSearchInput() {
197-
searchSession.value = "";
210+
searchSession.value = '';
198211
}
199212
200213
async function openInspection(projectId: string, inspectionId: string) {

0 commit comments

Comments
 (0)