CoCalc -- onprem.tsx

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/next/pages/pricing/onprem.tsx
Views: ⁶⁸⁷
1
/*
2
 *  This file is part of CoCalc: Copyright © 2022 Sagemath, Inc.
3
 *  License: MS-RSL – see LICENSE.md for details
4
 */
5

6
import { Alert, Button, Divider, Layout, List } from "antd";
7
import { Icon, IconName } from "@cocalc/frontend/components/icon";
8
import { money } from "@cocalc/util/licenses/purchase/utils";
9
import { COLORS } from "@cocalc/util/theme";
10
import Footer from "components/landing/footer";
11
import Head from "components/landing/head";
12
import Header from "components/landing/header";
13
import PricingItem, { Line } from "components/landing/pricing-item";
14
import { Paragraph, Text, Title } from "components/misc";
15
import A from "components/misc/A";
16
import { MAX_WIDTH } from "lib/config";
17
import { Customize } from "lib/customize";
18
import withCustomize from "lib/with-customize";
19
import { ReactNode } from "react";
20
import getSupportUrl from "@cocalc/frontend/support/url";
21

22
const PUBLISH_PRICE = true;
23

24
const CM = <Icon name="check" />;
25

26
const INF = "∞";
27
interface Item {
28
  title: string;
29
  icon: IconName;
30
  individuals: string;
31
  price: number | null;
32
  academic?: ReactNode;
33
  extra?: number;
34
  prod?: string;
35
}
36

37
const data: Item[] = [
38
  {
39
    title: "Small Business",
40
    icon: "experiment",
41
    individuals: "≤ 25",
42
    price: 10000,
43
  },
44
  {
45
    title: "Large Organization",
46
    icon: "home",
47
    individuals: "> 25",
48
    price: null,
49
    prod: "≥1",
50
  },
51
  {
52
    title: "University",
53
    icon: "graduation-cap",
54
    individuals: "≤ 150",
55
    price: 6000,
56
    academic: CM,
57
  },
58
];
59

60
export default function OnPrem({ customize }) {
61
  const { siteName } = customize;
62
  return (
63
    <Customize value={customize}>
64
      <Head title={`${siteName} – On-Premises Offerings`} />
65
      <Layout>
66
        <Header page="pricing" subPage="onprem" />
67
        <Layout.Content
68
          style={{
69
            backgroundColor: "white",
70
          }}
71
        >
72
          <Body />
73
          <Footer />
74
        </Layout.Content>
75
      </Layout>
76
    </Customize>
77
  );
78
}
79

80
function Body() {
81
  const contactURL = getSupportUrl({
82
    subject: "Purchase CoCalc OnPrem",
83
    type: "chat",
84
    url: "",
85
  });
86

87
  function renderContactButton(
88
    text: string | ReactNode = "Contact Us",
89
  ): JSX.Element {
90
    return (
91
      <Button size="large" href={contactURL}>
92
        {text}
93
      </Button>
94
    );
95
  }
96

97
  function renderContact(): JSX.Element {
98
    return (
99
      <Alert
100
        type="info"
101
        banner={true}
102
        showIcon={false}
103
        style={{
104
          textAlign: "center",
105
          padding: "30px",
106
          marginTop: "30px",
107
          marginBottom: "30px",
108
          borderRadius: "10px",
109
        }}
110
        message={
111
          <>
112
            <Paragraph strong style={{ fontSize: "150%" }}>
113
              Please <A href={contactURL} external>contact us</A> for questions,
114
              licensing details, and purchasing.
115
            </Paragraph>
116
            <Paragraph>
117
              <Text strong>Licensing is very flexible:</Text> additional
118
              discounts for academic institutions, multi-year commitments,
119
              first-year customers, and other options are available.
120
            </Paragraph>
121
            {renderContactButton()}
122
          </>
123
        }
124
      />
125
    );
126
  }
127

128
  function renderPriceInfo(): JSX.Element {
129
    if (PUBLISH_PRICE) {
130
      return (
131
        <>
132
          <List
133
            grid={{ gutter: 30, column: 3, xs: 1, sm: 1 }}
134
            dataSource={data}
135
            renderItem={({
136
              price,
137
              individuals,
138
              icon,
139
              title,
140
              academic,
141
              prod,
142
            }) => {
143
              return (
144
                <PricingItem title={title} icon={icon}>
145
                  <Line amount={individuals} desc={"Monthly Active Users¹"} />
146
                  <Line amount={prod ?? 1} desc="Production Deployment" />
147
                  <Line amount={1} desc="Test Deployment" />
148
                  <Line amount={INF} desc="Number of Projects" />
149
                  <Line amount={INF} desc="Project Collaborators" />
150
                  <Line amount={INF} desc="Cluster Resources²" />
151
                  <Line amount={CM} desc="Help for Initial Setup" />
152
                  <Line amount={CM} desc="Premium Support" />
153
                  <Divider />
154
                  <Line
155
                    amount={CM}
156
                    desc="Collaborative Jupyter, LaTeX, SageMath, R, ..."
157
                  />
158
                  <Line amount={CM} desc="Custom Software Environments" />
159
                  <Line amount={CM} desc="Regular Software Upgrades" />
160
                  <Line amount={CM} desc="Flexible LLM integration³" />
161
                  <Line amount={CM} desc="GPU Support" />
162
                  <Line amount={CM} desc="SAML SSO" />
163

164
                  <br />
165
                  <div
166
                    style={{
167
                      textAlign: "center",
168
                    }}
169
                  >
170
                    {typeof price === "number"
171
                      ? renderContactButton(
172
                          <span
173
                            style={{
174
                              fontWeight: "bold",
175
                              fontSize: "18pt",
176
                              color: COLORS.GRAY_DD,
177
                              padding: "10px",
178
                            }}
179
                          >
180
                            {money(price, true)}
181
                            <span style={{ color: COLORS.GRAY }}>/year</span>
182
                          </span>,
183
                        )
184
                      : renderContactButton()}
185
                  </div>
186
                  {academic ? (
187
                    <>
188
                      <Divider />
189
                      <Line
190
                        amount={academic}
191
                        desc={<Text strong>Academic discount</Text>}
192
                      />
193
                    </>
194
                  ) : undefined}
195
                </PricingItem>
196
              );
197
            }}
198
          />
199
          {renderContact()}
200
        </>
201
      );
202
    } else {
203
      return (
204
        <>
205
          <Paragraph>
206
            CoCalc OnPrem is a scalable solution and the license price depends
207
            on the use case, expected number of users, level of support, and
208
            amount of customization and training involved.
209
          </Paragraph>
210
          {renderContact()}
211
        </>
212
      );
213
    }
214
  }
215

216
  function cloud(): JSX.Element {
217
    return (
218
      <>
219
        <Title level={2}>
220
          CoCalc OnPrem <Icon name="network-wired" style={{ float: "right" }} />
221
        </Title>
222

223
        <Paragraph>
224
          <Text strong>
225
            <A href="https://onprem.cocalc.com/">CoCalc OnPrem</A>{" "}
226
          </Text>{" "}
227
          is a <Text strong>self-hosted version of CoCalc</Text> designed to run
228
          on your own infrastructure. Built on the same robust architecture that
229
          powers the main CoCalc platform, OnPrem delivers exceptional
230
          performance, scalability, and reliability. This enterprise-grade
231
          solution offers:
232
          <ul>
233
            <li>
234
              The full suite of collaborative tools available on cocalc.com:{" "}
235
              <Text strong>
236
                Jupyter Notebooks for Python, SageMath, R, Octave
237
              </Text>
238
              , editing <Text strong>LaTeX, Code- and Markdown/Text-files</Text>
239
              , a <Text strong>collaborative Linux Terminal</Text>, and a{" "}
240
              <Text strong>virtual X11 desktop</Text>.
241
            </li>
242
            <li>
243
              Complete control over your data and computing environment, which
244
              results in enhanced <Text strong>privacy and security</Text> for
245
              sensitive research and educational content;
246
            </li>
247
            <li>
248
              Integration with your existing IT infrastructure – for example
249
              SAML based SSO authentication;
250
            </li>
251
            <li>
252
              Beyond the standard set of included software, it's possible to
253
              define <Text strong>customizable software environments</Text> and
254
              adjust specific features to meet specific institutional needs;
255
            </li>
256
            <li>
257
              We'll guide you through the setup process and give you enough
258
              information to be able to manage the service, react to issues,
259
              plan resource requirements, and know how to scale the various
260
              services to your expected usage.
261
            </li>
262
          </ul>
263
          Experience the cutting-edge capabilities of CoCalc within your own
264
          secure ecosystem, providing your team or institution with a tailored,
265
          high-performance platform for scientific computing, mathematics, and
266
          data science collaboration.
267
        </Paragraph>
268

269
        <Title level={3}>Prerequisites</Title>
270

271
        <Paragraph>
272
          <ul>
273
            <li>
274
              A{" "}
275
              <Text strong>
276
                <A href={"https://kubernetes.io"}>Kubernetes Cluster</A>
277
              </Text>{" "}
278
              and some experience managing it. OnPrem should run on your own
279
              bare-metal cluster or a managed kubernetes cluster like{" "}
280
              <A href={"https://onprem.cocalc.com/deploy/eks.html"}>
281
                Amazon's EKS
282
              </A>
283
              ,{" "}
284
              <A href={"https://onprem.cocalc.com/deploy/gke.html"}>
285
                Google's GKE
286
              </A>
287
              , or{" "}
288
              <A href={"https://onprem.cocalc.com/deploy/aks.html"}>
289
                Azure's AKS
290
              </A>
291
              .
292
            </li>
293
            <li>
294
              Some experience working with{" "}
295
              <A href={"https://helm.sh/"}>
296
                <b>HELM</b> charts
297
              </A>
298
              .
299
            </li>
300
            <li>
301
              A (sub)<Text strong>domain</Text> and TLS certificate (e.g.{" "}
302
              <A href={"https://letsencrypt.org/"}>letsencrypt</A>).
303
            </li>
304
            <li>
305
              A common{" "}
306
              <A href={"https://www.postgresql.org/"}>
307
                <Text strong>PostgreSQL</Text>
308
              </A>{" "}
309
              database.
310
            </li>
311
            <li>
312
              A shared network file-system like <Text strong>NFS</Text>. It must
313
              support the Kubernetes{" "}
314
              <A
315
                href={
316
                  "https://kubernetes.io/docs/concepts/storage/persistent-volumes/#access-modes"
317
                }
318
              >
319
                ReadWriteMany
320
              </A>{" "}
321
              file-system access mode.
322
            </li>
323
          </ul>
324
        </Paragraph>
325
        <Paragraph>
326
          For more details, see the{" "}
327
          <Text strong>
328
            <A href="https://onprem.cocalc.com/">CoCalc OnPrem documentation</A>
329
          </Text>
330
          .
331
        </Paragraph>
332
        <Title level={3}>Purchasing CoCalc OnPrem</Title>
333
        {renderPriceInfo()}
334
        <Paragraph
335
          style={{
336
            marginTop: "100px",
337
            borderTop: `1px solid ${COLORS.GRAY_L}`,
338
            color: COLORS.GRAY,
339
          }}
340
        >
341
          ¹ "Monthly Active Users" is defined as the maximum count of distinct
342
          "Active Users" during any calendar month, who actually use CoCalc.
343
          <br />² There are no limitations on the number of CPU cores, Memory or
344
          Virtual Machines your instance of CoCalc OnPrem can make use of in
345
          your cluster.
346
          <br />³ Configure CoCalc OnPrem to use your own internal LLM server
347
          for increased privacy.
348
        </Paragraph>
349
      </>
350
    );
351
  }
352

353
  return (
354
    <div
355
      style={{
356
        maxWidth: MAX_WIDTH,
357
        margin: "15px auto",
358
        padding: "15px",
359
        backgroundColor: "white",
360
      }}
361
    >
362
      <Title level={1} style={{ textAlign: "center" }}>
363
        <Icon name="server" style={{ marginRight: "30px" }} /> CoCalc - On
364
        Premises
365
      </Title>
366

367
      <div>{cloud()}</div>
368
    </div>
369
  );
370
}
371

372
export async function getServerSideProps(context) {
373
  return await withCustomize({ context });
374
}
375

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

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