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/compute/cloud-filesystem/cloud-filesystem.tsx
Views: 687
1
import { Card } from "antd";

2
import { useState } from "react";

3
import type { CloudFilesystem as CloudFilesystemType } from "@cocalc/util/db-schema/cloud-filesystems";

4
import CloudFilesystemAvatar from "./avatar";

5
import CloudFilesystemCardTitle from "./card-title";

6
import ShowError from "@cocalc/frontend/components/error";

7
import { ProjectTitle } from "@cocalc/frontend/projects/project-title";

8
import DeleteCloudFilesystem from "./delete-filesystem";

9
import MountCloudFilesystem from "./mount-filesystem";

10
import EditMountpoint from "./edit-mountpoint";

11
import EditTitleAndColor from "./edit-title-and-color";

12
import EditLock from "./edit-lock";

13
import EditTrashDays from "./edit-trash-days";

14
import EditBucketStorageClass from "./edit-bucket-storage-class";

15
import EditMountOptions from "./edit-mount-options";

16
import EditProject from "./edit-project";

17
import { TimeAgo } from "@cocalc/frontend/components";

18
import { human_readable_size } from "@cocalc/util/misc";

19
import Metrics from "./metrics";

20
import { HelpModal } from "./help";

21


22
interface Props {

23
  cloudFilesystem: CloudFilesystemType;

24
  style?;

25
  refresh?;

26
  showProject?: boolean;

27
  editable?: boolean;

28
}

29


30
export default function CloudFilesystem({

31
  style,

32
  refresh,

33
  cloudFilesystem,

34
  showProject,

35
  editable,

36
}: Props) {

37
  const [error, setError] = useState<string>("");

38
  const { color, deleting } = cloudFilesystem;

39
  const [showMetrics, setShowMetrics] = useState<boolean>(false);

40
  const [showDelete, setShowDelete] = useState<boolean>(false);

41
  const [showHelp, setShowHelp] = useState<boolean>(false);

42
  const [showMount, setShowMount] = useState<boolean>(false);

43
  const [showEditMountpoint, setShowEditMountpoint] = useState<boolean>(false);

44
  const [showEditTitleAndColor, setShowEditTitleAndColor] =

45
    useState<boolean>(false);

46
  const [showEditLock, setShowEditLock] = useState<boolean>(false);

47
  const [showEditTrashDays, setShowEditTrashDays] = useState<boolean>(false);

48
  const [showEditBucketStorageClass, setShowEditBucketStorageClass] =

49
    useState<boolean>(false);

50
  const [showEditMountOptions, setShowEditMountOptions] =

51
    useState<boolean>(false);

52
  const [showEditProject, setShowEditProject] = useState<boolean>(false);

53
  const show = editable

54
    ? {

55
        setShowDelete,

56
        setShowHelp,

57
        setShowMount,

58
        setShowEditMountpoint,

59
        setShowEditTitleAndColor,

60
        setShowEditLock,

61
        setShowEditTrashDays,

62
        setShowEditBucketStorageClass,

63
        setShowEditMountOptions,

64
        setShowEditProject,

65
        setShowMetrics,

66
        showMetrics,

67
      }

68
    : undefined;

69


70
  return (

71
    <Card

72
      style={{

73
        opacity: deleting ? 0.5 : undefined,

74
        width: "100%",

75
        minWidth: "500px",

76
        border: `0.5px solid ${color ?? "#f0f0f0"}`,

77
        borderRight: `10px solid ${color ?? "#aaa"}`,

78
        borderLeft: `10px solid ${color ?? "#aaa"}`,

79
        ...style,

80
      }}

81
    >

82
      {editable && (

83
        <>

84
          {showDelete && (

85
            <DeleteCloudFilesystem

86
              cloudFilesystem={cloudFilesystem}

87
              open={showDelete}

88
              setOpen={setShowDelete}

89
              refresh={refresh}

90
            />

91
          )}

92
          {showMount && (

93
            <MountCloudFilesystem

94
              cloudFilesystem={cloudFilesystem}

95
              open={showMount}

96
              setOpen={setShowMount}

97
              refresh={refresh}

98
            />

99
          )}

100
          {showEditMountpoint && (

101
            <EditMountpoint

102
              cloudFilesystem={cloudFilesystem}

103
              open={showEditMountpoint}

104
              setOpen={setShowEditMountpoint}

105
              refresh={refresh}

106
            />

107
          )}

108
          {showHelp && <HelpModal open setOpen={setShowHelp} />}

109
          {showEditTitleAndColor && (

110
            <EditTitleAndColor

111
              cloudFilesystem={cloudFilesystem}

112
              open={showEditTitleAndColor}

113
              setOpen={setShowEditTitleAndColor}

114
              refresh={refresh}

115
            />

116
          )}

117
          {showEditLock && (

118
            <EditLock

119
              cloudFilesystem={cloudFilesystem}

120
              open={showEditLock}

121
              setOpen={setShowEditLock}

122
              refresh={refresh}

123
            />

124
          )}

125
          {showEditTrashDays && (

126
            <EditTrashDays

127
              cloudFilesystem={cloudFilesystem}

128
              open={showEditTrashDays}

129
              setOpen={setShowEditTrashDays}

130
              refresh={refresh}

131
            />

132
          )}

133
          {showEditBucketStorageClass && (

134
            <EditBucketStorageClass

135
              cloudFilesystem={cloudFilesystem}

136
              open={showEditBucketStorageClass}

137
              setOpen={setShowEditBucketStorageClass}

138
              refresh={refresh}

139
            />

140
          )}

141
          {showEditMountOptions && (

142
            <EditMountOptions

143
              cloudFilesystem={cloudFilesystem}

144
              open={showEditMountOptions}

145
              setOpen={setShowEditMountOptions}

146
              refresh={refresh}

147
            />

148
          )}

149
          {showEditProject && (

150
            <EditProject

151
              cloudFilesystem={cloudFilesystem}

152
              open={showEditProject}

153
              setOpen={setShowEditProject}

154
              refresh={refresh}

155
            />

156
          )}

157
        </>

158
      )}

159
      <Card.Meta

160
        avatar={

161
          <CloudFilesystemAvatar

162
            cloudFilesystem={cloudFilesystem}

163
            setShowMetrics={setShowMetrics}

164
            showMetrics={showMetrics}

165
          />

166
        }

167
        title={

168
          <CloudFilesystemCardTitle

169
            cloudFilesystem={cloudFilesystem}

170
            setError={setError}

171
            refresh={refresh}

172
            show={show}

173
          />

174
        }

175
        description={

176
          <div style={{ color: "#666" }}>

177
            <ShowError setError={setError} error={error} />

178
            Cloud File System{" "}

179
            <BytesUsed {...cloudFilesystem} show={show?.setShowMetrics} />,{" "}

180
            <Compression {...cloudFilesystem} />{" "}

181
            <BlockSize {...cloudFilesystem} />,{" "}

182
            {cloudFilesystem.mount ? "mounted" : "which would mount"} at{" "}

183
            <Mountpoint

184
              {...cloudFilesystem}

185
              show={show?.setShowEditMountpoint}

186
            />

187
            ,{" "}

188
            <Bucket

189
              {...cloudFilesystem}

190
              show={show?.setShowEditBucketStorageClass}

191
            />

192
            , <LastEdited {...cloudFilesystem} />.

193
            {showProject && (

194
              <ProjectTitle project_id={cloudFilesystem.project_id} />

195
            )}

196
            {showMetrics && <Metrics id={cloudFilesystem.id} />}

197
          </div>

198
        }

199
      />

200
    </Card>

201
  );

202
}

203


204
export function Mountpoint({

205
  mountpoint,

206
  show,

207
}: {

208
  mountpoint: string;

209
  show?;

210
}) {

211
  return (

212
    <span

213
      style={{ cursor: show != null ? "pointer" : undefined }}

214
      onClick={show}

215
    >

216
      <code>~/{mountpoint}</code>

217
    </span>

218
  );

219
}

220


221
function BlockSize({ block_size }) {

222
  return <>block size {block_size ?? 4} MB</>;

223
}

224


225
function Compression({ compression }) {

226
  if (compression == "lz4") {

227
    return <>with LZ4 compression and</>;

228
  } else if (compression == "zlib") {

229
    return <>with ZLIB compression and</>;

230
  } else {

231
    return <>with no compression and</>;

232
  }

233
}

234


235
function Bucket({ bucket_location, bucket_storage_class, show }) {

236
  return (

237
    <>

238
      stored in a{" "}

239
      <span style={{ cursor: "pointer" }} onClick={show}>

240
        {(bucket_storage_class ?? "standard").split("-").join(" ")} bucket

241
      </span>{" "}

242
      in <Location bucket_location={bucket_location} />

243
    </>

244
  );

245
}

246


247
function LastEdited({ last_edited }: { last_edited? }) {

248
  if (!last_edited) {

249
    return <>not used</>;

250
  }

251
  const d = new Date(last_edited);

252
  const recent = d >= new Date(Date.now() - 5 * 60 * 1000);

253
  return <>last edited {recent ? "recently" : <TimeAgo date={d} />}</>;

254
}

255


256
function Location({ bucket_location }) {

257
  if (!bucket_location) {

258
    return <>unknown-region</>;

259
  }

260
  if (bucket_location.includes("-")) {

261
    return <>{bucket_location}</>;

262
  } else {

263
    return <>the {bucket_location.toUpperCase()} multiregion</>;

264
  }

265
}

266


267
function BytesUsed({ bytes_used, show }: { bytes_used?; show }) {

268
  return (

269
    <span style={{ cursor: "pointer" }} onClick={() => show(true)}>

270
      storing{" "}

271
      <span style={{ color: "#666", fontWeight: "bold" }}>

272
        {human_readable_size(bytes_used ?? 0)}

273
      </span>

274
    </span>

275
  );

276
}

277


278