CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutSign UpSign In
sagemathinc

Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place.

GitHub Repository: sagemathinc/cocalc
 Path: blob/master/src/packages/frontend/billing/project-quota-free-table.tsx
Views: 687
1
/*

2
 *  This file is part of CoCalc: Copyright © 2020 Sagemath, Inc.

3
 *  License: MS-RSL – see LICENSE.md for details

4
 */

5


6
/*

7
This (and the ProjectQuotaBoundsTable) are currently only showed

8
in the backend static pages, so the tooltips are not visible there (no javascript).

9
*/

10


11
import { Component, Rendered } from "../app-framework";

12
import { DEFAULT_QUOTAS, PROJECT_UPGRADES } from "@cocalc/util/schema";

13
import { Tip } from "../components/tip";

14
import { Icon } from "../components/icon";

15
import { Gap } from "../components/gap";

16
import { Panel } from "@cocalc/frontend/antd-bootstrap";

17
import { render_project_quota } from "./util";

18


19
export class ProjectQuotaFreeTable extends Component {

20
  private render_header(): Rendered {

21
    return (

22
      <div style={{ paddingLeft: "10px" }}>

23
        <Icon name="battery-empty" />{" "}

24
        <span style={{ fontWeight: "bold" }}>Free plan</span>

25
      </div>

26
    );

27
  }

28


29
  public render(): Rendered {

30
    return (

31
      <Panel header={this.render_header()}>

32
        <Gap />

33
        <div style={{ marginBottom: "5px", marginLeft: "10px" }}>

34
          <Tip

35
            title="Free servers"

36
            tip="Many free projects are crammed together inside weaker compute machines, competing for CPU, RAM and I/O."

37
          >

38
            <span style={{ fontWeight: "bold", color: "#666" }}>low-grade</span>

39
            <Gap />

40
            <span style={{ color: "#999" }}>Server hosting</span>

41
          </Tip>

42
        </div>

43
        <div style={{ marginBottom: "5px", marginLeft: "10px" }}>

44
          <Tip

45
            title="Internet access"

46
            tip="Despite working inside a web-browser, free projects are not allowed to directly access the internet due to security/abuse reasons."

47
          >

48
            <span style={{ fontWeight: "bold", color: "#666" }}>no</span>

49
            <Gap />

50
            <span style={{ color: "#999" }}>Internet access</span>

51
          </Tip>

52
        </div>

53
        {PROJECT_UPGRADES.field_order

54
          .filter((name) => DEFAULT_QUOTAS[name])

55
          .map((name) => render_project_quota(name, DEFAULT_QUOTAS[name]))}

56
        <Gap />

57
        <div style={{ textAlign: "center", marginTop: "10px" }}>

58
          <h3 style={{ textAlign: "left" }}>

59
            <span style={{ fontSize: "16px", verticalAlign: "super" }}>$</span>

60
            <Gap />

61
            <span style={{ fontSize: "30px" }}>0</span>

62
          </h3>

63
        </div>

64
      </Panel>

65
    );

66
  }

67
}

68


69