1
/*
2
 *  This file is part of CoCalc: Copyright © 2021 Sagemath, Inc.
3
 *  License: MS-RSL – see LICENSE.md for details
4
 */
5

6
import { Table } from "antd";
7
import { HistoricCounts } from "@cocalc/util/db-schema/stats";
8
import { Paragraph, Title } from "components/misc";
9
import { ZEROS } from "./misc";
10

11
interface Props {
12
  active: HistoricCounts;
13
  created: HistoricCounts;
14
  hubServers: { host: string; clients: number }[];
15
  style?: React.CSSProperties;
16
}
17

18
const columns = [
19
  { title: "Accounts", dataIndex: "type", key: "type" },
20
  { title: "Hour", dataIndex: "1h", key: "1h" },
21
  { title: "Day", dataIndex: "1d", key: "1d" },
22
  { title: "Week", dataIndex: "7d", key: "7d" },
23
  { title: "Month", dataIndex: "30d", key: "30d" },
24
];
25

26
// Data collection got not implemented right now, so disabling "connection" and replacing by
27
// active during the last hour, which is probably more meaningful, since people can just
28
// leave browsers connected.
29

30
// function connectedUsers(hubServers): number {
31
//   if (hubServers == null || hubServers.length === 0) {
32
//     return 0;
33
//   } else {
34
//     return hubServers.map((x) => x.clients).reduce((s, t) => s + t);
35
//   }
36
// }
37

38
export default function ActiveUsers({ created, active, style }: Props) {
39
  const rows = [
40
    { type: "In use", ...ZEROS, ...active },
41
    { type: "Created", ...ZEROS, ...created },
42
  ];
43
  return (
44
    <div style={style}>
45
      <Title level={2}>Active Users: {active["1h"]}</Title>
46
      <Paragraph>
47
        Track the number of users that were recently active or created new
48
        accounts below. There were {active["5min"]} users who edited a file
49
        during the last 5 minutes.
50
      </Paragraph>
51

52
      <Table
53
        dataSource={rows}
54
        columns={columns}
55
        bordered
56
        pagination={false}
57
        rowKey={"type"}
58
      />
59
    </div>
60
  );
61
}
62

63