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

6
import { Modal } from "antd";
7
import { FormattedMessage, useIntl } from "react-intl";
8
import { Button, Col, Row } from "@cocalc/frontend/antd-bootstrap";
9
import {
10
  React,
11
  useActions,
12
  useTypedRedux,
13
} from "@cocalc/frontend/app-framework";
14
import { Icon } from "@cocalc/frontend/components";
15
import { labels } from "@cocalc/frontend/i18n";
16
import { webapp_client } from "@cocalc/frontend/webapp-client";
17
import { ConnectionStatsDisplay } from "./connection-status";
18

19
export const ConnectionInfo: React.FC = React.memo(() => {
20
  const intl = useIntl();
21

22
  const ping = useTypedRedux("page", "ping");
23
  const avgping = useTypedRedux("page", "avgping");
24
  const status = useTypedRedux("page", "connection_status");
25
  const page_actions = useActions("page");
26
  const conat = useTypedRedux("page", "conat");
27
  const hub = useTypedRedux("account", "hub");
28

29
  function close() {
30
    page_actions.show_connection(false);
31
  }
32

33
  return (
34
    <Modal
35
      width={700}
36
      open
37
      onCancel={close}
38
      onOk={close}
39
      title={
40
        <div
41
          style={{ display: "flex", alignItems: "center", marginRight: "30px" }}
42
        >
43
          <Icon name="wifi" style={{ marginRight: "1em" }} />{" "}
44
          {intl.formatMessage(labels.connection)}
45
          <div style={{ flex: 1 }} />
46
          <Button
47
            onClick={() => {
48
              webapp_client.conat_client.reconnect();
49
            }}
50
          >
51
            <Icon name="repeat" spin={status === "connecting"} />{" "}
52
            {intl.formatMessage(labels.reconnect)}
53
          </Button>
54
        </div>
55
      }
56
    >
57
      <div>
58
        {conat != null && (
59
          <Row>
60
            <Col sm={12}>
61
              {conat && (
62
                <ConnectionStatsDisplay status={conat.toJS()} hub={hub} />
63
              )}
64
            </Col>
65
          </Row>
66
        )}
67
        {ping ? (
68
          <Row style={{ marginTop: "30px" }}>
69
            <Col sm={3}>
70
              <h5>
71
                <FormattedMessage
72
                  id="connection-info.ping"
73
                  defaultMessage="Ping Time"
74
                  description={"Ping how long a server takes to respond"}
75
                />
76
              </h5>
77
            </Col>
78
            <Col sm={7}>
79
              <pre>
80
                <FormattedMessage
81
                  id="connection-info.ping_info"
82
                  defaultMessage="{avgping}ms (latest: {ping}ms)"
83
                  description={
84
                    "Short string stating the average and the most recent ping in milliseconds."
85
                  }
86
                  values={{ avgping, ping }}
87
                />
88
              </pre>
89
            </Col>
90
          </Row>
91
        ) : undefined}
92
      </div>
93
    </Modal>
94
  );
95
});
96

97