CoCalc -- onprem.tsx

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 { ReactNode, type JSX } from "react";
8

9
import { Icon, IconName } from "@cocalc/frontend/components/icon";
10
import getSupportUrl from "@cocalc/frontend/support/url";
11
import { money } from "@cocalc/util/licenses/purchase/utils";
12
import { COLORS } from "@cocalc/util/theme";
13

14
import Footer from "components/landing/footer";
15
import Head from "components/landing/head";
16
import Header from "components/landing/header";
17
import PricingItem, { Line } from "components/landing/pricing-item";
18
import { Paragraph, Text, Title } from "components/misc";
19
import A from "components/misc/A";
20

21
import { MAX_WIDTH } from "lib/config";
22
import { Customize } from "lib/customize";
23
import withCustomize from "lib/with-customize";
24

25
const PUBLISH_PRICE = false;
26

27
const CM = <Icon name="check" />;
28

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

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

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

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

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

100
  function renderContact(): JSX.Element {
101
    return (
102
      <Alert
103
        type="info"
104
        banner={true}
105
        showIcon={false}
106
        style={{
107
          textAlign: "center",
108
          padding: "30px",
109
          marginTop: "30px",
110
          marginBottom: "30px",
111
          borderRadius: "10px",
112
        }}
113
        message={
114
          <>
115
            <Paragraph strong style={{ fontSize: "150%" }}>
116
              For inquiries about licensing, further details and purchasing
117
              options, please{" "}
118
              <A href={contactURL} external>
119
                contact us
120
              </A>
121
              .
122
            </Paragraph>
123
            <Paragraph>
124
              CoCalc OnPrem's pricing is tailored to your specific needs, taking
125
              into account your use case, anticipated number of active monthly
126
              users, desired level of support, and any customization or training
127
              requirements. We offer a <Text strong>free trial period</Text> to
128
              ensure seamless integration within your environment. Importantly,
129
              pricing is <Text strong>not</Text> based on the number of CPU
130
              cores, memory, or virtual machines in your cluster.
131
            </Paragraph>
132
            <Paragraph>
133
              <Text strong>We offer flexible licensing options</Text>, including
134
              discounts for academic institutions, multi-year agreements, and
135
              first-year customers. Let us help you find the best solution for
136
              your organization.
137
            </Paragraph>
138
            {renderContactButton()}
139
          </>
140
        }
141
      />
142
    );
143
  }
144

145
  function renderPriceInfo(): JSX.Element {
146
    if (PUBLISH_PRICE) {
147
      return (
148
        <>
149
          <List
150
            grid={{ gutter: 30, column: 3, xs: 1, sm: 1 }}
151
            dataSource={data}
152
            renderItem={({
153
              price,
154
              individuals,
155
              icon,
156
              title,
157
              academic,
158
              prod,
159
            }) => {
160
              return (
161
                <PricingItem title={title} icon={icon}>
162
                  <Line amount={individuals} desc={"Monthly Active Users¹"} />
163
                  <Line amount={prod ?? 1} desc="Production Deployment" />
164
                  <Line amount={1} desc="Test Deployment" />
165
                  <Line amount={INF} desc="Number of Projects" />
166
                  <Line amount={INF} desc="Project Collaborators" />
167
                  <Line amount={INF} desc="Cluster Resources²" />
168
                  <Line amount={CM} desc="Help for Initial Setup" />
169
                  <Line amount={CM} desc="Premium Support" />
170
                  <Divider />
171
                  <Line
172
                    amount={CM}
173
                    desc="Collaborative Jupyter, LaTeX, SageMath, R, ..."
174
                  />
175
                  <Line amount={CM} desc="Custom Software Environments" />
176
                  <Line amount={CM} desc="Regular Software Upgrades" />
177
                  <Line amount={CM} desc="Flexible LLM integration³" />
178
                  <Line amount={CM} desc="GPU Support" />
179
                  <Line amount={CM} desc="SAML SSO" />
180

181
                  <br />
182
                  <div
183
                    style={{
184
                      textAlign: "center",
185
                    }}
186
                  >
187
                    {typeof price === "number"
188
                      ? renderContactButton(
189
                          <span
190
                            style={{
191
                              fontWeight: "bold",
192
                              fontSize: "18pt",
193
                              color: COLORS.GRAY_DD,
194
                              padding: "10px",
195
                            }}
196
                          >
197
                            {money(price, true)}
198
                            <span style={{ color: COLORS.GRAY }}>/year</span>
199
                          </span>,
200
                        )
201
                      : renderContactButton()}
202
                  </div>
203
                  {academic ? (
204
                    <>
205
                      <Divider />
206
                      <Line
207
                        amount={academic}
208
                        desc={<Text strong>Academic discount</Text>}
209
                      />
210
                    </>
211
                  ) : undefined}
212
                </PricingItem>
213
              );
214
            }}
215
          />
216
          {renderContact()}
217
          <Paragraph
218
            style={{
219
              marginTop: "100px",
220
              borderTop: `1px solid ${COLORS.GRAY_L}`,
221
              color: COLORS.GRAY,
222
            }}
223
          >
224
            ¹ "Monthly Active Users" is defined as the maximum count of distinct
225
            "Active Users" during any calendar month, who actually use CoCalc.
226
            <br />² There are no limitations on the number of CPU cores, Memory
227
            or Virtual Machines your instance of CoCalc OnPrem can make use of
228
            in your cluster.
229
            <br />³ Configure CoCalc OnPrem to use your own internal LLM server
230
            for increased privacy.
231
          </Paragraph>
232
        </>
233
      );
234
    } else {
235
      return renderContact();
236
    }
237
  }
238

239
  function cloud(): JSX.Element {
240
    return (
241
      <>
242
        {/* <Title level={2}>
243
          CoCalc OnPrem <Icon name="network-wired" style={{ float: "right" }} />
244
        </Title> */}
245

246
        <Paragraph>
247
          <Text strong>
248
            <A href="https://onprem.cocalc.com/">CoCalc OnPrem</A>{" "}
249
          </Text>{" "}
250
          is a <Text strong>self-hosted version of CoCalc</Text> designed to run
251
          on your own infrastructure. Built on the same robust architecture that
252
          powers the main CoCalc platform, OnPrem delivers exceptional
253
          performance, scalability, and reliability. This enterprise-grade
254
          solution offers:
255
        </Paragraph>
256

257
        <ul>
258
          <li>
259
            The full suite of collaborative tools available on cocalc.com:{" "}
260
            <Text strong>
261
              Jupyter Notebooks for Python, SageMath, R, Octave
262
            </Text>
263
            , editing <Text strong>LaTeX, Code- and Markdown/Text-files</Text>,
264
            a <Text strong>collaborative Linux Terminal</Text>, and a{" "}
265
            <Text strong>virtual X11 desktop</Text>.
266
          </li>
267
          <li>
268
            Complete control over your data and computing environment, which
269
            results in enhanced <Text strong>privacy and security</Text> for
270
            sensitive research and educational content;
271
          </li>
272
          <li>
273
            Integration with your existing IT infrastructure – for example SAML
274
            based SSO authentication or using your own internal LLM server for
275
            increased privacy;
276
          </li>
277
          <li>
278
            Beyond the standard set of included software, it's possible to
279
            define <Text strong>customizable software environments</Text> and
280
            adjust specific features to meet specific institutional needs;
281
          </li>
282
          <li>
283
            We'll guide you through the setup process and give you enough
284
            information to be able to manage the service, react to issues, plan
285
            resource requirements, and know how to scale the various services to
286
            your expected usage.
287
          </li>
288
        </ul>
289

290
        <Paragraph>
291
          Experience the cutting-edge capabilities of CoCalc within your own
292
          secure ecosystem, providing your team or institution with a tailored,
293
          high-performance platform for scientific computing, mathematics, and
294
          data science collaboration.
295
        </Paragraph>
296

297
        <Title level={3}>Prerequisites</Title>
298
        <Paragraph>
299
          <ul>
300
            <li>
301
              A{" "}
302
              <Text strong>
303
                <A href={"https://kubernetes.io"}>Kubernetes Cluster</A>
304
              </Text>{" "}
305
              and some experience managing it. OnPrem should run on your own
306
              bare-metal cluster or a managed kubernetes cluster like{" "}
307
              <A href={"https://onprem.cocalc.com/deploy/eks.html"}>
308
                Amazon's EKS
309
              </A>
310
              ,{" "}
311
              <A href={"https://onprem.cocalc.com/deploy/gke.html"}>
312
                Google's GKE
313
              </A>
314
              , or{" "}
315
              <A href={"https://onprem.cocalc.com/deploy/aks.html"}>
316
                Azure's AKS
317
              </A>
318
              . Kubernetes is required to orchestrate and manage the
319
              containerized CoCalc OnPrem services.
320
            </li>
321
            <li>
322
              Some experience working with{" "}
323
              <A href={"https://helm.sh/"}>
324
                <b>HELM</b> charts
325
              </A>
326
              . Helm is used to simplify the deployment and management of CoCalc
327
              OnPrem on Kubernetes.
328
            </li>
329
            <li>
330
              A (sub)<Text strong>domain</Text> and TLS certificate (e.g.{" "}
331
              <A href={"https://letsencrypt.org/"}>letsencrypt</A>). A domain
332
              and TLS certificate are needed to securely access your CoCalc
333
              OnPrem instance over HTTPS. You can also run OnPrem inside a VPN,
334
              isolated from the public internet.
335
            </li>
336
            <li>
337
              A common{" "}
338
              <Text strong>
339
                <A href={"https://www.postgresql.org/"}>PostgreSQL</A>
340
              </Text>{" "}
341
              database. PostgreSQL is used for persistent data storage, and
342
              Socket.io for internal communication between CoCalc services.
343
            </li>
344
            <li>
345
              A shared network file-system like <Text strong>NFS</Text>. It must
346
              support the Kubernetes{" "}
347
              <A
348
                href={
349
                  "https://kubernetes.io/docs/concepts/storage/persistent-volumes/#access-modes"
350
                }
351
              >
352
                ReadWriteMany
353
              </A>{" "}
354
              file-system access mode. A shared network file system is required
355
              for persistent storage of project data and collaborative files.
356
            </li>
357
          </ul>
358
        </Paragraph>
359

360
        <Paragraph>
361
          For more details, see the{" "}
362
          <Text strong>
363
            <A href="https://onprem.cocalc.com/">CoCalc OnPrem documentation</A>
364
          </Text>
365
          .
366
        </Paragraph>
367
        <Title level={3}>Purchasing CoCalc OnPrem</Title>
368
        {renderPriceInfo()}
369
      </>
370
    );
371
  }
372

373
  return (
374
    <div
375
      style={{
376
        maxWidth: MAX_WIDTH,
377
        margin: "15px auto",
378
        padding: "15px",
379
        backgroundColor: "white",
380
      }}
381
    >
382
      <Title level={1} style={{ textAlign: "center" }}>
383
        <Icon name="server" style={{ marginRight: "30px" }} /> CoCalc
384
        On-Premises
385
      </Title>
386

387
      <div>{cloud()}</div>
388
    </div>
389
  );
390
}
391

392
export async function getServerSideProps(context) {
393
  return await withCustomize({ context });
394
}
395

396