Skip to content

Commit 46eca8b

Browse files
awesomerobotawesomerobot
authored
UX: improve AI usage per user table layout (#36225)
This improves the layout on small screens by wrapping the tables, and improves situations where there are <50 users by splitting the available users evenly into two columns. This avoids situations where one column may have 25 users and the other only 2. Before: <img width="1706" height="1540" alt="image" src="https://github.com/user-attachments/assets/c0844ad6-dea1-4d68-b74c-92483669dc32" /> <img width="500" alt="image" src="https://github.com/user-attachments/assets/7a91aaca-9cde-447d-a208-b6c37013f0ce" /> After: <img width="2232" height="1494" alt="image" src="https://github.com/user-attachments/assets/23e8440a-0ab8-4b47-bd75-915f3327130b" /> <img width="500" alt="image" src="https://github.com/user-attachments/assets/38d8c789-a29f-4e8d-9f66-88b0ead1cd66" />
1 parent a522119 commit 46eca8b

File tree

2 files changed

+86
-68
lines changed
  • plugins/discourse-ai/assets

2 files changed

+86
-68
lines changed

‎plugins/discourse-ai/assets/javascripts/discourse/components/ai-usage.gjs‎

Lines changed: 69 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { ajax } from "discourse/lib/ajax";
2020
import { bind } from "discourse/lib/decorators";
2121
import { number } from "discourse/lib/formatter";
2222
import ComboBox from "discourse/select-kit/components/combo-box";
23-
import { eq, gt, lt } from "discourse/truth-helpers";
23+
import { eq, gt } from "discourse/truth-helpers";
2424
import { i18n } from "discourse-i18n";
2525
import AiCreditBar from "./ai-credit-bar";
2626

@@ -127,6 +127,13 @@ export default class AiUsage extends Component {
127127
return this.data.users.slice(start, end);
128128
}
129129

130+
get userSplitPoint() {
131+
if (!this.data?.users) {
132+
return 0;
133+
}
134+
return Math.ceil(this.data.users.length / 2);
135+
}
136+
130137
normalizeTimeSeriesData(data) {
131138
if (!data?.length) {
132139
return [];
@@ -614,58 +621,12 @@ export default class AiUsage extends Component {
614621
{{/unless}}
615622

616623
{{#if this.data.users.length}}
617-
<table
624+
<div
618625
class={{concatClass
619-
"ai-usage__users-table"
620-
(if (lt this.data.users.length 25) "-double-width")
626+
"ai-usage__users-table-wrapper"
627+
(if (gt this.data.users.length 24) "-multi-column")
621628
}}
622629
>
623-
<thead>
624-
<tr>
625-
<th class="ai-usage__users-username">{{i18n
626-
"discourse_ai.usage.username"
627-
}}</th>
628-
<th>{{i18n "discourse_ai.usage.usage_count"}}</th>
629-
<th>{{i18n "discourse_ai.usage.total_tokens"}}</th>
630-
<th>{{i18n "discourse_ai.usage.total_spending"}}</th>
631-
</tr>
632-
</thead>
633-
<tbody>
634-
{{#each (this.takeUsers 0 24) as |user|}}
635-
<tr class="ai-usage__users-row">
636-
<td class="ai-usage__users-cell">
637-
<div class="user-info">
638-
<LinkTo
639-
@route="user"
640-
@model={{user.username}}
641-
class="username"
642-
>
643-
{{avatar user imageSize="tiny"}}
644-
{{user.username}}
645-
</LinkTo>
646-
</div></td>
647-
<td
648-
class="ai-usage__users-cell"
649-
title={{user.usage_count}}
650-
>{{number user.usage_count}}</td>
651-
<td
652-
class="ai-usage__users-cell"
653-
title={{user.total_tokens}}
654-
>{{number user.total_tokens}}</td>
655-
<td>
656-
{{this.totalSpending
657-
user.input_spending
658-
user.cache_read_spending
659-
user.cache_write_spending
660-
user.output_spending
661-
}}
662-
</td>
663-
</tr>
664-
{{/each}}
665-
</tbody>
666-
</table>
667-
668-
{{#if (gt this.data.users.length 25)}}
669630
<table class="ai-usage__users-table">
670631
<thead>
671632
<tr>
@@ -678,7 +639,10 @@ export default class AiUsage extends Component {
678639
</tr>
679640
</thead>
680641
<tbody>
681-
{{#each (this.takeUsers 25 49) as |user|}}
642+
{{#each
643+
(this.takeUsers 0 this.userSplitPoint)
644+
as |user|
645+
}}
682646
<tr class="ai-usage__users-row">
683647
<td class="ai-usage__users-cell">
684648
<div class="user-info">
@@ -711,7 +675,60 @@ export default class AiUsage extends Component {
711675
{{/each}}
712676
</tbody>
713677
</table>
714-
{{/if}}
678+
679+
{{#if (gt this.data.users.length 24)}}
680+
<table class="ai-usage__users-table">
681+
<thead>
682+
<tr>
683+
<th class="ai-usage__users-username">{{i18n
684+
"discourse_ai.usage.username"
685+
}}</th>
686+
<th>{{i18n "discourse_ai.usage.usage_count"}}</th>
687+
<th>{{i18n "discourse_ai.usage.total_tokens"}}</th>
688+
<th>{{i18n
689+
"discourse_ai.usage.total_spending"
690+
}}</th>
691+
</tr>
692+
</thead>
693+
<tbody>
694+
{{#each
695+
(this.takeUsers this.userSplitPoint 50)
696+
as |user|
697+
}}
698+
<tr class="ai-usage__users-row">
699+
<td class="ai-usage__users-cell">
700+
<div class="user-info">
701+
<LinkTo
702+
@route="user"
703+
@model={{user.username}}
704+
class="username"
705+
>
706+
{{avatar user imageSize="tiny"}}
707+
{{user.username}}
708+
</LinkTo>
709+
</div></td>
710+
<td
711+
class="ai-usage__users-cell"
712+
title={{user.usage_count}}
713+
>{{number user.usage_count}}</td>
714+
<td
715+
class="ai-usage__users-cell"
716+
title={{user.total_tokens}}
717+
>{{number user.total_tokens}}</td>
718+
<td>
719+
{{this.totalSpending
720+
user.input_spending
721+
user.cache_read_spending
722+
user.cache_write_spending
723+
user.output_spending
724+
}}
725+
</td>
726+
</tr>
727+
{{/each}}
728+
</tbody>
729+
</table>
730+
{{/if}}
731+
</div>
715732
{{/if}}
716733
</:content>
717734
</AdminConfigAreaCard>

‎plugins/discourse-ai/assets/stylesheets/modules/llms/common/usage.scss‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -101,29 +101,30 @@
101101

102102
&__users {
103103
grid-column: span 2;
104+
}
104105

105-
.admin-config-area-card__content {
106-
display: flex;
106+
&__users-table-wrapper {
107+
&.-multi-column {
108+
display: grid;
109+
grid-template-columns: 1fr 1fr;
110+
gap: 2em;
111+
align-items: start;
107112

108113
.ai-usage__users-table {
109-
&:first-child {
110-
margin-right: 2em;
111-
112-
&.-double-width {
113-
margin-right: 0;
114-
}
115-
}
116-
117-
&.-double-width {
118-
.ai-usage__users-username {
119-
width: auto;
120-
}
121-
}
122-
123114
.ai-usage__users-username {
124115
width: 50px;
125116
}
126117
}
118+
119+
@include viewport.until(md) {
120+
grid-template-columns: 1fr;
121+
}
122+
}
123+
124+
&:not(.-multi-column) {
125+
.ai-usage__users-table .ai-usage__users-username {
126+
width: auto;
127+
}
127128
}
128129
}
129130

0 commit comments

Comments
 (0)