Skip to content

Commit

Permalink
Add maximize panel feature
Browse files Browse the repository at this point in the history
  • Loading branch information
@charles-001
charles-001 committed Dec 2, 2024
1 parent 32cbe43 commit 57e0fec
Show file tree
Hide file tree
Showing 8 changed files with 230 additions and 138 deletions.
22 changes: 12 additions & 10 deletions dolphie/DataTypes.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,21 +66,22 @@ def get_sorted_replicas(self) -> List[Replica]:
@dataclass
class Panel:
name: str
display_name: str
visible: bool = False


class Panels:
def __init__(self):
self.dashboard = Panel("dashboard")
self.processlist = Panel("processlist")
self.graphs = Panel("graphs")
self.replication = Panel("replication")
self.metadata_locks = Panel("metadata_locks")
self.ddl = Panel("ddl")
self.pfs_metrics = Panel("pfs_metrics")
self.proxysql_hostgroup_summary = Panel("proxysql_hostgroup_summary")
self.proxysql_mysql_query_rules = Panel("proxysql_mysql_query_rules")
self.proxysql_command_stats = Panel("proxysql_command_stats")
self.dashboard = Panel("dashboard", "Dashboard")
self.processlist = Panel("processlist", "Processlist")
self.graphs = Panel("graphs", "Graph Metrics")
self.replication = Panel("replication", "Replication")
self.metadata_locks = Panel("metadata_locks", "Metadata Locks")
self.ddl = Panel("ddl", "DDL")
self.pfs_metrics = Panel("pfs_metrics", "Performance Schema Metrics")
self.proxysql_hostgroup_summary = Panel("proxysql_hostgroup_summary", "Hostgroup Summary")
self.proxysql_mysql_query_rules = Panel("proxysql_mysql_query_rules", "MySQL Query Rules")
self.proxysql_command_stats = Panel("proxysql_command_stats", "Command Stats")

def get_panel(self, panel_name: str) -> Panel:
return self.__dict__.get(panel_name, None)
Expand Down Expand Up @@ -220,3 +221,4 @@ class HotkeyCommands:
rename_tab = "rename_tab"
refresh_interval = "refresh_interval"
replay_seek = "replay_seek"
maximize_panel = "maximize_panel"
127 changes: 107 additions & 20 deletions dolphie/Dolphie.tcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
background: #0a0e1b;
}
Graph {
height: 16;
height: 100%;
}
Horizontal {
height: auto;
Expand All @@ -38,7 +38,12 @@ DataTable {
& > .datatable--even-row {
background: #0f1525;
}
& > .datatable--header {
background: transparent;
color: #c5c7d2;
}
}

LoadingIndicator {
color: #8fb0ee;
height: auto;
Expand All @@ -60,7 +65,6 @@ SpinnerWidget {
height: auto;
content-align: center middle;
}

CommandList {
text-style: none;
border-bottom: hkey #1c2440;
Expand Down Expand Up @@ -95,7 +99,6 @@ CommandInput, CommandInput:focus {
padding-left: 0 !important;
margin: 0 1 !important;
}

TopBar {
dock: top;
background: #192036;
Expand Down Expand Up @@ -140,7 +143,6 @@ TopBar {
}
}


.replay_buttons {
height: auto;
width: 65;
Expand Down Expand Up @@ -182,7 +184,28 @@ TopBar {
margin-top: 0;
}
}

#panel_graphs {
& .metric_graph_container, .metric_graph_container2 {
height: 20;
}
& .metric_graph_stats {
width: 100%;
content-align: center middle;
}
}
Screen.-maximized-view {
height: 100%;
& .metric_graph_container, .metric_graph_container2, TabPane {
height: 1fr !important;
}
& Tabs {
margin-top: 0;
}
& DataTable {
height: 100% !important;
max-height: 100% !important;
}
}

#pfs_metrics_file_io_datatable, #pfs_metrics_table_io_waits_datatable, #proxysql_hostgroup_summary_datatable, #proxysql_mysql_query_rules_datatable {
overflow-x: auto;
Expand Down Expand Up @@ -357,12 +380,6 @@ Input {
}
}

.datatable--header {
background: transparent;
color: #c5c7d2;
text-style: bold;
}

.button_container {
height: auto;
width: 100%;
Expand All @@ -380,11 +397,6 @@ Input {
}
}

.stats_data {
width: 100%;
content-align: center middle;
}

Sparkline {
& > .sparkline--max-color {
color: #869fd9;
Expand Down Expand Up @@ -460,10 +472,18 @@ Switch {
}
}

Checkbox .toggle--button {
color: #0f1525;
text-style: bold;
background: #343d56;
Checkbox {
background: #131626;
border: none;
padding-left: 2;
padding-bottom: 1;
content-align: left middle;

& .toggle--button {
color: #0f1525;
text-style: bold;
background: #343d56;
}
}

RadioSet {
Expand Down Expand Up @@ -549,4 +569,71 @@ Toast {
&.-error .toast--title {
color: #ed6363;
}
}

Select {
margin: 0 2;
margin-bottom: 1;
width: 100%;

& > SelectOverlay {
background: #111322;

&:focus {
background-tint: transparent;
}
}

&:focus > SelectCurrent {
border: tall #43548b;
background-tint: transparent;
background: #151729;
}
}

SelectCurrent {
background: #111322;
border: tall #252e49;

& Static#label {
color: #606e88;
}

&.-has-value Static#label {
color: #e9e9e9;
}
}

Select > OptionList {
background: #111322;
border: tall #252e49;
width: 100%;
height: 15;
margin: 0 1 0 1;

&:focus {
margin: 0;
height: auto;
max-height: 15;
border: tall #3c476b;
}

& > .option-list--option-highlighted {
text-style: none;
background: #131626;
}
&:focus > .option-list--option-highlighted {
background: #283048;
}
& > .option-list--option-hover {
background: #283048;
}
& > .option-list--option-hover-highlighted {
background: #283048;
text-style: none;
}
&:focus > .option-list--option-hover-highlighted {
background: #283048;
text-style: none;
}
}
24 changes: 20 additions & 4 deletions dolphie/Modules/CommandManager.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ def __init__(self):
"E": {"human_key": "E", "description": "Export the processlist to a CSV file"},
"k": {"human_key": "k", "description": "Kill thread by its ID"},
"K": {"human_key": "K", "description": "Kill threads by parameter(s)"},
"M": {"human_key": "M", "description": "Maximize a panel"},
"q": {"human_key": "q", "description": "Quit"},
"r": {"human_key": "r", "description": "Set the refresh interval"},
"R": {"human_key": "R", "description": "Reset all metrics"},
Expand Down Expand Up @@ -114,6 +115,7 @@ def __init__(self):
"E": {"human_key": "E", "description": "Export the processlist to a CSV file"},
"k": {"human_key": "k", "description": "Kill thread by its ID"},
"K": {"human_key": "K", "description": "Kill threads by parameter(s)"},
"M": {"human_key": "M", "description": "Maximize a panel"},
"q": {"human_key": "q", "description": "Quit"},
"r": {"human_key": "r", "description": "Set the refresh interval"},
"R": {"human_key": "R", "description": "Reset all metrics"},
Expand Down Expand Up @@ -163,12 +165,19 @@ def __init__(self):
"placeholder_4": {"human_key": "", "description": ""},
"p": {"human_key": "p", "description": "Toggle pause of replay"},
"S": {"human_key": "S", "description": "Seek to a specific time in the replay"},
"left_square_bracket": {"human_key": "[", "description": "Seek to the previous refresh interval"},
"right_square_bracket": {"human_key": "]", "description": "Seek to the next refresh interval"},
"left_square_bracket": {
"human_key": "[",
"description": "Seek to previous refresh interval in the replay",
},
"right_square_bracket": {
"human_key": "]",
"description": "Seek to next refresh interval in the replay",
},
"placeholder_5": {"human_key": "", "description": ""},
"c": {"human_key": "c", "description": "Clear all filters set"},
"f": {"human_key": "f", "description": "Filter threads by field(s)"},
"E": {"human_key": "E", "description": "Export the processlist to a CSV file"},
"M": {"human_key": "M", "description": "Maximize a panel"},
"q": {"human_key": "q", "description": "Quit"},
"r": {"human_key": "r", "description": "Set the refresh interval"},
}
Expand Down Expand Up @@ -196,12 +205,19 @@ def __init__(self):
"placeholder_4": {"human_key": "", "description": ""},
"p": {"human_key": "p", "description": "Toggle pause of replay"},
"S": {"human_key": "S", "description": "Seek to a specific time in the replay"},
"left_square_bracket": {"human_key": "[", "description": "Seek to the previous refresh interval"},
"right_square_bracket": {"human_key": "]", "description": "Seek to the next refresh interval"},
"left_square_bracket": {
"human_key": "[",
"description": "Seek to previous refresh interval in the replay",
},
"right_square_bracket": {
"human_key": "]",
"description": "Seek to next refresh interval in the replay",
},
"placeholder_5": {"human_key": "", "description": ""},
"c": {"human_key": "c", "description": "Clear all filters set"},
"f": {"human_key": "f", "description": "Filter threads by field(s)"},
"E": {"human_key": "E", "description": "Export the processlist to a CSV file"},
"M": {"human_key": "M", "description": "Maximize a panel"},
"q": {"human_key": "q", "description": "Quit"},
"r": {"human_key": "r", "description": "Set the refresh interval"},
}
Expand Down
39 changes: 22 additions & 17 deletions dolphie/Modules/TabManager.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -466,7 +466,7 @@ async def create_ui_widgets(self):
TabPane(
"Table I/O Waits Summary",
Label(
":bulb: Format for each metric: Wait time (Operations count)",
":bulb: [highlight]Format for each metric: Wait time (Operations count)",
id="pfs_metrics_format",
),
DataTable(id="pfs_metrics_table_io_waits_datatable", show_cursor=False),
Expand Down Expand Up @@ -532,14 +532,12 @@ async def create_tab(
graph_names = metric_instance.graphs
graph_tab_name = metric_instance.graph_tab_name

graph_tab = self.app.query(f"#graph_tab_{metric_tab_name}")
if not graph_tab:
if not self.app.query(f"#graph_tab_{metric_tab_name}"):
await self.app.query_one("#metric_graph_tabs", TabbedContent).add_pane(
TabPane(
graph_tab_name,
Label(id=f"stats_{metric_tab_name}", classes="stats_data"),
Horizontal(id=f"graph_container_{metric_tab_name}"),
Horizontal(id=f"graph_container2_{metric_tab_name}"),
Label(id=f"metric_graph_stats_{metric_tab_name}", classes="metric_graph_stats"),
Horizontal(id=f"metric_graph_container_{metric_tab_name}", classes="metric_graph_container"),
Horizontal(
id=f"switch_container_{metric_tab_name}",
classes="switch_container switch_container",
Expand All @@ -550,16 +548,25 @@ async def create_tab(
)

# Save references to the labels
setattr(tab, metric_tab_name, self.app.query_one(f"#stats_{metric_tab_name}"))
setattr(tab, metric_tab_name, self.app.query_one(f"#metric_graph_stats_{metric_tab_name}"))

for graph_name in graph_names:
graph = self.app.query(f"#{graph_name}")
if not graph:
graph_container = (
"graph_container2"
if graph_name in ["graph_system_network", "graph_system_disk_io"]
else "graph_container"
)
graph_container = (
"metric_graph_container2"
if graph_name in ["graph_system_network", "graph_system_disk_io"]
else "metric_graph_container"
)

if not self.app.query(f"#{graph_name}"):
# Add graph_container2 only if it's needed
if not self.app.query(f"#{graph_container}_{metric_tab_name}"):
if graph_container == "metric_graph_container2":
await self.app.query_one(f"#graph_tab_{metric_tab_name}", TabPane).mount(
Horizontal(
id=f"{graph_container}_{metric_tab_name}", classes="metric_graph_container2"
),
after=1,
)

await self.app.query_one(f"#{graph_container}_{metric_tab_name}", Horizontal).mount(
MetricManager.Graph(id=f"{graph_name}", classes="panel_data")
Expand All @@ -569,9 +576,7 @@ async def create_tab(
setattr(tab, graph_name, self.app.query_one(f"#{graph_name}"))

for metric, metric_data in metric_instance.__dict__.items():
switch = self.app.query(f"#switch_container_{metric_tab_name} #{metric_instance_name}-{metric}")

if not switch:
if not self.app.query(f"#switch_container_{metric_tab_name} #{metric_instance_name}-{metric}"):
if (
isinstance(metric_data, MetricManager.MetricData)
and metric_data.graphable
Expand Down
Loading

0 comments on commit 57e0fec

Please sign in to comment.