Skip to content

Commit 1834c1c

Browse files
lvcarobfrank
lvca
authored and
robfrank
committed
New studio (#3485)
* feat: improved query panel, added saved queries + reference * Refreshed Database Schema * studio: removed footer * fix: studio api + info new content * studio, new layout * studio: multiple improvements in the layout * studio: new record editor to update/delete a record. Works from the table and graph areas * studio, minor layout fixes (cherry picked from commit de9ea0c)
1 parent 88276cc commit 1834c1c

File tree

15 files changed

+5098
-1201
lines changed

15 files changed

+5098
-1201
lines changed

‎studio/src/main/resources/static/api.html‎

Lines changed: 597 additions & 115 deletions
Large diffs are not rendered by default.

‎studio/src/main/resources/static/css/studio.css‎

Lines changed: 2474 additions & 32 deletions
Large diffs are not rendered by default.

‎studio/src/main/resources/static/database.html‎

Lines changed: 81 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -1,161 +1,108 @@
1-
<div class="tab-pane fade" id="tab-database" role="tabpanel">
2-
<div class="row">
3-
<div class="col-12">
4-
<h4><i class="fa fa-database"></i> Database</h4>
1+
<div class="tab-pane fade d-flex flex-column" id="tab-database" role="tabpanel">
2+
<div class="d-flex align-items-center justify-content-between flex-shrink-0" style="padding: 10px 12px 6px;">
3+
<div class="d-flex align-items-center gap-2">
4+
<i class="fa fa-database" style="font-size: 1.2rem; color: #00aeee;"></i>
5+
<label>Connected as&nbsp;</label><label id="databaseUser"></label>@
6+
<select id="schemaInputDatabase" class="inputDatabase form-select form-select-sm" style="width: auto; display: inline-block;"></select>
7+
</div>
8+
<div class="d-flex gap-2">
9+
<button class="btn btn-sm db-action-btn" onclick="createDatabase()"><i class="fa fa-plus"></i> Create</button>
10+
<button class="btn btn-sm db-action-btn db-action-btn-danger" onclick="dropDatabase()"><i class="fa fa-trash"></i> Drop</button>
11+
<button class="btn btn-sm db-action-btn" onclick="resetDatabase()"><i class="fa fa-rotate"></i> Reset</button>
12+
<button class="btn btn-sm db-action-btn" onclick="backupDatabase()"><i class="fa fa-box-archive"></i> Backup</button>
513
</div>
614
</div>
715

8-
<div class="d-flex justify-content-between">
9-
<div>
10-
<div class="form-inline">
11-
<div class="form-group">
12-
<label>Connected as&nbsp;</label><label for="schemaInputDatabase" id="databaseUser"></label>@
13-
<select id="schemaInputDatabase" class="inputDatabase form-select"></select>
16+
<ul class="nav nav-tabs flex-shrink-0" id="tabs-database" style="padding: 0 12px;">
17+
<li class="nav-item"><a data-toggle="tab" href="#tab-schema" class="active show nav-link" id="tab-schema-sel">Schema</a></li>
18+
<li class="nav-item"><a data-toggle="tab" href="#tab-db-settings" class="nav-link" id="tab-db-settings-sel">Settings</a></li>
19+
<li class="nav-item"><a data-toggle="tab" href="#tab-db-backup" class="nav-link" id="tab-db-backup-sel">Backup</a></li>
20+
</ul>
21+
22+
<div class="tab-content" style="flex: 1; min-height: 0; position: relative;">
23+
<!-- Schema Tab -->
24+
<div class="tab-pane fade show active d-flex flex-column" id="tab-schema" role="tabpanel">
25+
<div class="d-flex" style="flex: 1; min-height: 0;">
26+
<!-- Type Badge Sidebar -->
27+
<div id="dbTypeSidebar">
28+
<div class="sidebar-header">
29+
<span class="sidebar-title">Types</span>
30+
<button class="btn btn-sm btn-light sidebar-refresh-btn" onclick="displaySchema()" title="Refresh">
31+
<i class="fa fa-sync"></i>
32+
</button>
33+
</div>
34+
<div id="dbTypeBadges">
35+
<div class="sidebar-empty">Loading...</div>
36+
</div>
37+
</div>
38+
<!-- Type Detail Panel -->
39+
<div id="dbTypeDetail" style="flex: 1; min-width: 0; overflow-y: auto; padding: 16px 20px;">
40+
<div class="db-type-empty">
41+
<i class="fa fa-database" style="font-size: 2rem; color: #ddd; margin-bottom: 12px; display: block;"></i>
42+
Select a type from the sidebar to view its schema.
43+
</div>
1444
</div>
1545
</div>
1646
</div>
17-
<div>
18-
<button class="btn btn-pill" onclick="createDatabase()"><i class="fa fa-plus"></i> Create</button>
19-
<button class="btn btn-pill" onclick="dropDatabase()"><i class="fa fa-minus"></i> Drop</button>
20-
<button class="btn btn-pill" onclick="resetDatabase()"><i class="fa fa-sync"></i> Reset</button>
21-
<button class="btn btn-pill" onclick="backupDatabase()"><i class="fa fa-archive"></i> Backup</button>
22-
</div>
23-
</div>
24-
25-
<hr />
2647

27-
<div class="row">
28-
<div class="col-6">
29-
<button class="btn btn-pill" onclick="updateDatabases()">Refresh <i class="fa fa-sync"></i></button>
30-
</div>
31-
<div class="col-6">
32-
<ul class="nav nav-tabs text-center" id="tabs-database" style="float: right">
33-
<li class="nav-item"><a data-toggle="tab" href="#tab-schema" class="active show nav-link" id="tab-schema-sel">Database Schema</a></li>
34-
<li class="nav-item text-center"><a data-toggle="tab" href="#tab-db-settings" class="nav-link" id="tab-db-settings-sel">Database Settings</a></li>
35-
<li class="nav-item text-center"><a data-toggle="tab" href="#tab-db-backup" class="nav-link" id="tab-db-backup-sel">Backup</a></li>
36-
</ul>
48+
<!-- Settings Tab -->
49+
<div class="tab-pane fade" id="tab-db-settings" role="tabpanel">
50+
<div style="padding: 16px;">
51+
<div class="table-responsive">
52+
<table id="dbSettings" class="table table-striped table-sm" style="width: 100%; table-layout: fixed"></table>
53+
</div>
54+
</div>
3755
</div>
38-
<div class="col-12">
39-
<div class="tab-content">
40-
<div class="tab-pane fade show active" id="tab-schema" role="tabpanel">
41-
<div class="col-12">
42-
<ul class="nav nav-tabs" id="tabs-schema">
43-
<li class="nav-item text-center"><a data-toggle="tab" href="#tab-vertices" class="active show nav-link" id="tab-vertices-sel">Vertices</a></li>
44-
<li class="nav-item text-center"><a data-toggle="tab" href="#tab-edges" class="nav-link" id="tab-edges-sel">Edges</a></li>
45-
<li class="nav-item text-center"><a data-toggle="tab" href="#tab-documents" class="nav-link" id="tab-documents-sel">Documents</a></li>
46-
</ul>
47-
</div>
48-
49-
<br />
5056

57+
<!-- Backup Tab -->
58+
<div class="tab-pane fade" id="tab-db-backup" role="tabpanel">
59+
<div style="padding: 16px;">
60+
<div class="row mb-3">
5161
<div class="col-12">
52-
<div class="tab-content">
53-
<div class="tab-pane show active" id="tab-vertices" role="tabpanel">
54-
<div class="row">
55-
<div class="col-12">
56-
<br />Below you can find the declared Vertex Types with the number of defined properties in parentheses. Click on the type on the left to
57-
display it properties and indexes.<br /><br />
58-
</div>
59-
</div>
60-
<div class="row">
61-
<div class="col-2">
62-
<ul id="vTypesTabs" class="nav nav-tabs"></ul>
63-
</div>
64-
<div class="col-10">
65-
<div id="vTypesPanels" class="tab-content"></div>
66-
</div>
67-
</div>
68-
</div>
69-
<div class="tab-pane fade" id="tab-edges" role="tabpanel">
70-
<div class="row">
71-
<div class="col-12">
72-
<br />Below you can find the declared Edge Types with the number of defined properties in parentheses. Click on the type on the left to
73-
display it properties and indexes.<br /><br />
74-
</div>
75-
</div>
76-
<div class="row">
77-
<div class="col-2">
78-
<ul id="eTypesTabs" class="nav nav-tabs"></ul>
79-
</div>
80-
<div class="col-10">
81-
<div id="eTypesPanels" class="tab-content"></div>
82-
</div>
83-
</div>
84-
</div>
85-
<div class="tab-pane fade" id="tab-documents" role="tabpanel">
86-
<div class="row">
87-
<div class="col-12">
88-
<br />Below you can find the declared Document Types with the number of defined properties in parentheses. Click on the type on the left to
89-
display it properties and indexes.<br /><br />
90-
</div>
91-
</div>
92-
<div class="row">
93-
<div class="col-2">
94-
<ul id="dTypesTabs" class="nav nav-tabs"></ul>
95-
</div>
96-
<div class="col-10">
97-
<div id="dTypesPanels" class="tab-content"></div>
98-
</div>
99-
</div>
62+
<div class="d-flex justify-content-between align-items-center">
63+
<h5><i class="fa fa-box-archive"></i> Database Backups</h5>
64+
<div class="d-flex gap-2">
65+
<button class="btn btn-sm db-action-btn" onclick="loadDatabaseBackups()">
66+
<i class="fa fa-sync"></i> Refresh
67+
</button>
68+
<button class="btn btn-sm db-action-btn" style="background-color: #00aeee; color: #fff;" onclick="triggerDatabaseBackup()">
69+
<i class="fa fa-play"></i> Backup Now
70+
</button>
10071
</div>
10172
</div>
10273
</div>
10374
</div>
10475

105-
<div class="tab-pane fade" id="tab-db-settings" role="tabpanel">
106-
<div class="table-responsive">
107-
<table id="dbSettings" class="table table-striped table-sm" style="width: 100%; table-layout: fixed"></table>
108-
</div>
109-
</div>
110-
111-
<div class="tab-pane fade" id="tab-db-backup" role="tabpanel">
112-
<div class="row mb-3">
113-
<div class="col-12">
114-
<div class="d-flex justify-content-between align-items-center">
115-
<h5><i class="fa fa-archive"></i> Database Backups</h5>
116-
<div>
117-
<button class="btn btn-sm btn-outline-primary" onclick="loadDatabaseBackups()">
118-
<i class="fa fa-sync"></i> Refresh
119-
</button>
120-
<button class="btn btn-sm btn-success" onclick="triggerDatabaseBackup()">
121-
<i class="fa fa-play"></i> Backup Now
122-
</button>
76+
<div class="card mb-3">
77+
<div class="card-header">Backup Configuration &amp; Statistics</div>
78+
<div class="card-body">
79+
<div class="row">
80+
<div class="col-md-8">
81+
<div id="dbBackupConfigInfo">
82+
<p class="text-muted">Loading configuration...</p>
12383
</div>
12484
</div>
125-
</div>
126-
</div>
127-
128-
<div class="card mb-3">
129-
<div class="card-header">Backup Configuration &amp; Statistics</div>
130-
<div class="card-body">
131-
<div class="row">
132-
<div class="col-md-8">
133-
<div id="dbBackupConfigInfo">
134-
<p class="text-muted">Loading configuration...</p>
85+
<div class="col-md-4">
86+
<div class="row text-center">
87+
<div class="col-6">
88+
<div class="text-muted small">Total Backups</div>
89+
<div class="fs-4" id="dbBackupTotalCount">-</div>
13590
</div>
136-
</div>
137-
<div class="col-md-4">
138-
<div class="row text-center">
139-
<div class="col-6">
140-
<div class="text-muted small">Total Backups</div>
141-
<div class="fs-4" id="dbBackupTotalCount">-</div>
142-
</div>
143-
<div class="col-6">
144-
<div class="text-muted small">Total Size</div>
145-
<div class="fs-4" id="dbBackupTotalSize">-</div>
146-
</div>
91+
<div class="col-6">
92+
<div class="text-muted small">Total Size</div>
93+
<div class="fs-4" id="dbBackupTotalSize">-</div>
14794
</div>
14895
</div>
14996
</div>
15097
</div>
15198
</div>
99+
</div>
152100

153-
<div class="card">
154-
<div class="card-header">Available Backups</div>
155-
<div class="card-body">
156-
<div class="table-responsive">
157-
<table id="dbBackupList" class="table table-striped table-sm" style="width: 100%"></table>
158-
</div>
101+
<div class="card">
102+
<div class="card-header">Available Backups</div>
103+
<div class="card-body">
104+
<div class="table-responsive">
105+
<table id="dbBackupList" class="table table-striped table-sm" style="width: 100%"></table>
159106
</div>
160107
</div>
161108
</div>

0 commit comments

Comments
 (0)