Skip to content

Fix hub workflow detail page not being scrollable #2933

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sixsage merged 6 commits into from
Oct 27, 2024
Merged

Fix hub workflow detail page not being scrollable #2933

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e61d198
remove overflow: hidden
sixsage Oct 14, 2024
ae24f4f
Merge branch 'master' into restore-hub-details-scrollbar
sixsage Oct 23, 2024
30a7eae
remove double scroll bar in quota
sixsage Oct 24, 2024
a928ca2
Merge branch 'master' into restore-hub-details-scrollbar
sixsage Oct 25, 2024
19be713
Merge branch 'master' into restore-hub-details-scrollbar
aglinxinyuan Oct 27, 2024
b321312
Merge branch 'master' into restore-hub-details-scrollbar
sixsage Oct 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
212 changes: 106 additions & 106 deletions core/gui/src/app/dashboard/component/user/user-quota/user-quota.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,110 +1,110 @@
<div class="scrollable-container">
<div [style.height]="dynamicHeight">
<nz-card
class="section-title"
[style.background]="backgroundColor">
<h2
class="page-title"
[style.color]="textColor">
Quota
</h2>
</nz-card>
<div>
<nz-tabset nzCentered>
<nz-tab nzTitle="Quota Table">
<div class="info-container">
<div class="info-box">
<h2 class="info-heading">Files Uploaded</h2>
<p class="info-content">{{ this.createdFiles.length }}</p>
</div>
<div class="info-box">
<h2 class="info-heading">Datasets Uploaded</h2>
<p class="info-content">{{ this.totalUploadedDatasetCount }}</p>
</div>
<div class="info-box">
<h2 class="info-heading">Total Size of Datasets</h2>
<p class="info-content">{{ formatSize(this.totalUploadedDatasetSize) }}</p>
</div>
<div class="info-box">
<h2 class="info-heading">Workflows Created</h2>
<p class="info-content">{{ this.createdWorkflows.length }}</p>
</div>
<div class="info-box">
<h2 class="info-heading">Files with Access</h2>
<p class="info-content">{{ this.accessFiles.length }}</p>
</div>
<div class="info-box">
<h2 class="info-heading">Workflows with Access</h2>
<p class="info-content">{{ this.accessWorkflows.length }}</p>
</div>
<div class="info-box">
<h2 class="info-heading">Total Size of the Files</h2>
<p class="info-content">{{ formatSize(this.totalFileSize) }}</p>
</div>
<div class="info-box">
<h2 class="info-heading">Total Result Cache Size</h2>
<p class="info-content">{{ formatSize(this.totalMongoSize) }}</p>
</div>
<div
[style.height]="dynamicHeight"
style="overflow-y: auto">
<nz-card
class="section-title"
[style.background]="backgroundColor">
<h2
class="page-title"
[style.color]="textColor">
Quota
</h2>
</nz-card>
<div>
<nz-tabset nzCentered>
<nz-tab nzTitle="Quota Table">
<div class="info-container">
<div class="info-box">
<h2 class="info-heading">Files Uploaded</h2>
<p class="info-content">{{ this.createdFiles.length }}</p>
</div>
<nz-card
class="section-title"
[style.backgroundColor]="backgroundColor">
<h2
class="page-title"
[style.color]="textColor">
Diagram
</h2>
</nz-card>
<div class="charts-grid">
<div id="sizePieChart"></div>
<div id="datasetLineChart"></div>
<div id="workflowLineChart"></div>
<div class="info-box">
<h2 class="info-heading">Datasets Uploaded</h2>
<p class="info-content">{{ this.totalUploadedDatasetCount }}</p>
</div>
</nz-tab>
<nz-tab nzTitle="Result Cache">
<nz-collapse>
<nz-collapse-panel
*ngFor="let workflow of mongodbWorkflows"
[nzHeader]="workflow.workflowName">
<nz-table
#executionTable
[nzData]="workflow.executions"
[nzPageSize]="3"
nzFrontPagination="true">
<thead>
<tr>
<th>Collection Name</th>
<th>Execution ID</th>
<th [nzSortFn]="sortByMongoDBSize">Cache Size</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let execution of executionTable.data">
<td>{{ execution.pointer }}</td>
<td>{{ execution.eid }}</td>
<td>{{ formatSize(execution.size) }}</td>
<td>
<button
nz-popconfirm
nzPopconfirmTitle="Confirm to delete selected workflows."
nz-button
nz-tooltip="delete collection"
(nzOnConfirm)="deleteMongoCollection(execution.pointer, execution, execution.workflowName)"
type="button">
<i
nz-icon
nzTheme="outline"
nzType="delete"></i>
</button>
</td>
</tr>
</tbody>
</nz-table>
</nz-collapse-panel>
</nz-collapse>
</nz-tab>
</nz-tabset>
</div>
<div class="info-box">
<h2 class="info-heading">Total Size of Datasets</h2>
<p class="info-content">{{ formatSize(this.totalUploadedDatasetSize) }}</p>
</div>
<div class="info-box">
<h2 class="info-heading">Workflows Created</h2>
<p class="info-content">{{ this.createdWorkflows.length }}</p>
</div>
<div class="info-box">
<h2 class="info-heading">Files with Access</h2>
<p class="info-content">{{ this.accessFiles.length }}</p>
</div>
<div class="info-box">
<h2 class="info-heading">Workflows with Access</h2>
<p class="info-content">{{ this.accessWorkflows.length }}</p>
</div>
<div class="info-box">
<h2 class="info-heading">Total Size of the Files</h2>
<p class="info-content">{{ formatSize(this.totalFileSize) }}</p>
</div>
<div class="info-box">
<h2 class="info-heading">Total Result Cache Size</h2>
<p class="info-content">{{ formatSize(this.totalMongoSize) }}</p>
</div>
</div>
<nz-card
class="section-title"
[style.backgroundColor]="backgroundColor">
<h2
class="page-title"
[style.color]="textColor">
Diagram
</h2>
</nz-card>
<div class="charts-grid">
<div id="sizePieChart"></div>
<div id="datasetLineChart"></div>
<div id="workflowLineChart"></div>
</div>
</nz-tab>
<nz-tab nzTitle="Result Cache">
<nz-collapse>
<nz-collapse-panel
*ngFor="let workflow of mongodbWorkflows"
[nzHeader]="workflow.workflowName">
<nz-table
#executionTable
[nzData]="workflow.executions"
[nzPageSize]="3"
nzFrontPagination="true">
<thead>
<tr>
<th>Collection Name</th>
<th>Execution ID</th>
<th [nzSortFn]="sortByMongoDBSize">Cache Size</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let execution of executionTable.data">
<td>{{ execution.pointer }}</td>
<td>{{ execution.eid }}</td>
<td>{{ formatSize(execution.size) }}</td>
<td>
<button
nz-popconfirm
nzPopconfirmTitle="Confirm to delete selected workflows."
nz-button
nz-tooltip="delete collection"
(nzOnConfirm)="deleteMongoCollection(execution.pointer, execution, execution.workflowName)"
type="button">
<i
nz-icon
nzTheme="outline"
nzType="delete"></i>
</button>
</td>
</tr>
</tbody>
</nz-table>
</nz-collapse-panel>
</nz-collapse>
</nz-tab>
</nz-tabset>
</div>
</div>
5 changes: 0 additions & 5 deletions core/gui/src/app/dashboard/component/user/user-quota/user-quota.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,3 @@
}
}
}

.scrollable-container {
height: 100vh;
overflow-y: auto;
}
4 changes: 0 additions & 4 deletions core/gui/src/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,10 +73,6 @@ hr {
padding-right: 24px;
}

body {
overflow: hidden;
}

.annotation-highlight {
background-color: #6a5acd;
}