mirror of https://github.com/usememos/memos
feat: storage service frontend (#1088)
Zeng1998
2 years ago
committed by
GitHub
parent
4641e89c17
commit
2493bb0fb7
@ -1,5 +1,3 @@
|
||||
{
|
||||
"recommendations": [
|
||||
"golang.go"
|
||||
]
|
||||
"recommendations": ["golang.go"]
|
||||
}
|
||||
|
||||
@ -0,0 +1,169 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import Icon from "./Icon";
|
||||
import { generateDialog } from "./Dialog";
|
||||
import { Button, Input, Typography } from "@mui/joy";
|
||||
import { useState } from "react";
|
||||
import { useStorageStore } from "../store/module";
|
||||
import toastHelper from "./Toast";
|
||||
|
||||
type Props = DialogProps;
|
||||
|
||||
const CreateStorageServiceDialog: React.FC<Props> = (props: Props) => {
|
||||
const { destroy } = props;
|
||||
const { t } = useTranslation();
|
||||
const storageStore = useStorageStore();
|
||||
const [storageCreate, setStorageCreate] = useState<StorageCreate>({
|
||||
name: "",
|
||||
endPoint: "",
|
||||
region: "",
|
||||
accessKey: "",
|
||||
secretKey: "",
|
||||
bucket: "",
|
||||
urlPrefix: "",
|
||||
});
|
||||
|
||||
const handleCloseBtnClick = () => {
|
||||
destroy();
|
||||
};
|
||||
|
||||
const allowConfirmAction = () => {
|
||||
if (
|
||||
storageCreate.name === "" ||
|
||||
storageCreate.endPoint === "" ||
|
||||
storageCreate.region === "" ||
|
||||
storageCreate.accessKey === "" ||
|
||||
storageCreate.bucket === "" ||
|
||||
storageCreate.bucket === ""
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
const handleConfirmBtnClick = async () => {
|
||||
try {
|
||||
await storageStore.createStorage(storageCreate);
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
toastHelper.error(error.response.data.message);
|
||||
}
|
||||
destroy();
|
||||
};
|
||||
|
||||
const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const name = event.target.value;
|
||||
setStorageCreate({
|
||||
...storageCreate,
|
||||
name,
|
||||
});
|
||||
};
|
||||
|
||||
const handleEndPointChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const endPoint = event.target.value;
|
||||
setStorageCreate({
|
||||
...storageCreate,
|
||||
endPoint,
|
||||
});
|
||||
};
|
||||
|
||||
const handleRegionChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const region = event.target.value;
|
||||
setStorageCreate({
|
||||
...storageCreate,
|
||||
region,
|
||||
});
|
||||
};
|
||||
|
||||
const handleAccessKeyChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const accessKey = event.target.value;
|
||||
setStorageCreate({
|
||||
...storageCreate,
|
||||
accessKey,
|
||||
});
|
||||
};
|
||||
|
||||
const handleSecretKeyChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const secretKey = event.target.value;
|
||||
setStorageCreate({
|
||||
...storageCreate,
|
||||
secretKey,
|
||||
});
|
||||
};
|
||||
|
||||
const handleBucketChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const bucket = event.target.value;
|
||||
setStorageCreate({
|
||||
...storageCreate,
|
||||
bucket,
|
||||
});
|
||||
};
|
||||
|
||||
const handleURLPrefixChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const urlPrefix = event.target.value;
|
||||
setStorageCreate({
|
||||
...storageCreate,
|
||||
urlPrefix,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="dialog-header-container !w-64">
|
||||
<p className="title-text">{t("setting.storage-section.create-a-service")}</p>
|
||||
<button className="btn close-btn" onClick={handleCloseBtnClick}>
|
||||
<Icon.X />
|
||||
</button>
|
||||
</div>
|
||||
<div className="dialog-content-container">
|
||||
<Typography className="!mb-1" level="body2">
|
||||
Name
|
||||
</Typography>
|
||||
<Input className="mb-2" placeholder="Name" value={storageCreate.name} onChange={handleNameChange} fullWidth />
|
||||
<Typography className="!mb-1" level="body2">
|
||||
EndPoint
|
||||
</Typography>
|
||||
<Input className="mb-2" placeholder="EndPoint" value={storageCreate.endPoint} onChange={handleEndPointChange} fullWidth />
|
||||
<Typography className="!mb-1" level="body2">
|
||||
Region
|
||||
</Typography>
|
||||
<Input className="mb-2" placeholder="Region" value={storageCreate.region} onChange={handleRegionChange} fullWidth />
|
||||
<Typography className="!mb-1" level="body2">
|
||||
AccessKey
|
||||
</Typography>
|
||||
<Input className="mb-2" placeholder="AccessKey" value={storageCreate.accessKey} onChange={handleAccessKeyChange} fullWidth />
|
||||
<Typography className="!mb-1" level="body2">
|
||||
SecretKey
|
||||
</Typography>
|
||||
<Input className="mb-2" placeholder="SecretKey" value={storageCreate.secretKey} onChange={handleSecretKeyChange} fullWidth />
|
||||
<Typography className="!mb-1" level="body2">
|
||||
Bucket
|
||||
</Typography>
|
||||
<Input className="mb-2" placeholder="Bucket" value={storageCreate.bucket} onChange={handleBucketChange} fullWidth />
|
||||
<Typography className="!mb-1" level="body2">
|
||||
URLPrefix
|
||||
</Typography>
|
||||
<Input className="mb-2" placeholder="URLPrefix" value={storageCreate.urlPrefix} onChange={handleURLPrefixChange} fullWidth />
|
||||
<div className="mt-2 w-full flex flex-row justify-end items-center space-x-1">
|
||||
<Button variant="plain" color="neutral" onClick={handleCloseBtnClick}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleConfirmBtnClick} disabled={!allowConfirmAction()}>
|
||||
Create
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
function showCreateStorageServiceDialog() {
|
||||
generateDialog(
|
||||
{
|
||||
className: "create-storage-service-dialog",
|
||||
dialogName: "create-storage-service-dialog",
|
||||
},
|
||||
CreateStorageServiceDialog
|
||||
);
|
||||
}
|
||||
|
||||
export default showCreateStorageServiceDialog;
|
||||
@ -0,0 +1,65 @@
|
||||
import { Radio } from "@mui/joy";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useGlobalStore, useStorageStore } from "../../store/module";
|
||||
import * as api from "../../helpers/api";
|
||||
import showCreateStorageServiceDialog from "../CreateStorageServiceDialog";
|
||||
import showUpdateStorageServiceDialog from "../UpdateStorageServiceDialog";
|
||||
import "../../less/settings/storage-section.less";
|
||||
|
||||
const StorageSection = () => {
|
||||
const { t } = useTranslation();
|
||||
const storageStore = useStorageStore();
|
||||
const storages = storageStore.state.storages;
|
||||
const globalStore = useGlobalStore();
|
||||
const systemStatus = globalStore.state.systemStatus;
|
||||
const [storageServiceId, setStorageServiceId] = useState(systemStatus.storageServiceId);
|
||||
|
||||
useEffect(() => {
|
||||
storageStore.fetchStorages();
|
||||
globalStore.fetchSystemStatus();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setStorageServiceId(systemStatus.storageServiceId);
|
||||
}, [systemStatus]);
|
||||
|
||||
const handleActiveStorageServiceChanged = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = parseInt(event.target.value);
|
||||
setStorageServiceId(value);
|
||||
await api.upsertSystemSetting({
|
||||
name: "storageServiceId",
|
||||
value: JSON.stringify(value),
|
||||
});
|
||||
};
|
||||
|
||||
const handleStorageServiceUpdate = async (event: React.MouseEvent, storage: Storage) => {
|
||||
event.preventDefault();
|
||||
showUpdateStorageServiceDialog(storage);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="section-container storage-section-container">
|
||||
<p className="title-text">{t("setting.storage-section.storage-services-list")}</p>
|
||||
{storages.map((storage) => (
|
||||
<label className="form-label selector" key={storage.id}>
|
||||
<span className="normal-text underline cursor-pointer" onClick={(event) => handleStorageServiceUpdate(event, storage)}>
|
||||
{storage.name}
|
||||
</span>
|
||||
<Radio value={storage.id} checked={storageServiceId === storage.id} onChange={handleActiveStorageServiceChanged} />
|
||||
</label>
|
||||
))}
|
||||
<label className="form-label selector">
|
||||
<span className="normal-text">{t("common.database")}</span>
|
||||
<Radio value={0} checked={storageServiceId === 0} onChange={handleActiveStorageServiceChanged} />
|
||||
</label>
|
||||
<div className="w-full flex flex-row justify-end items-center mt-2 space-x-2">
|
||||
<button className="btn-normal" onClick={showCreateStorageServiceDialog}>
|
||||
{t("setting.storage-section.create-a-service")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default StorageSection;
|
||||
@ -0,0 +1,189 @@
|
||||
import { Button, Input, Typography } from "@mui/joy";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useState } from "react";
|
||||
import Icon from "./Icon";
|
||||
import { generateDialog } from "./Dialog";
|
||||
import { showCommonDialog } from "./Dialog/CommonDialog";
|
||||
import { useStorageStore } from "../store/module";
|
||||
import toastHelper from "./Toast";
|
||||
|
||||
interface Props extends DialogProps {
|
||||
storage: StoragePatch;
|
||||
}
|
||||
|
||||
const UpdateStorageServiceDialog: React.FC<Props> = (props: Props) => {
|
||||
const { storage, destroy } = props;
|
||||
const { t } = useTranslation();
|
||||
const storageStore = useStorageStore();
|
||||
const [storagePatch, setStoragePatch] = useState<StoragePatch>(storage);
|
||||
|
||||
const handleCloseBtnClick = () => {
|
||||
destroy();
|
||||
};
|
||||
|
||||
const allowConfirmAction = () => {
|
||||
if (
|
||||
storagePatch.name === "" ||
|
||||
storagePatch.endPoint === "" ||
|
||||
storagePatch.region === "" ||
|
||||
storagePatch.accessKey === "" ||
|
||||
storagePatch.bucket === "" ||
|
||||
storagePatch.bucket === ""
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
const handleConfirmBtnClick = async () => {
|
||||
try {
|
||||
await storageStore.patchStorage(storagePatch);
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
toastHelper.error(error.response.data.message);
|
||||
}
|
||||
destroy();
|
||||
};
|
||||
|
||||
const handleDeleteBtnClick = async () => {
|
||||
const warningText = t("setting.storage-section.warning-text");
|
||||
showCommonDialog({
|
||||
title: t("setting.storage-section.delete-storage"),
|
||||
content: warningText,
|
||||
style: "warning",
|
||||
dialogName: "delete-storage-dialog",
|
||||
onConfirm: async () => {
|
||||
try {
|
||||
await storageStore.deleteStorageById(storagePatch.id);
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
toastHelper.error(error.response.data.message);
|
||||
}
|
||||
destroy();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const name = event.target.value;
|
||||
setStoragePatch({
|
||||
...storagePatch,
|
||||
name,
|
||||
});
|
||||
};
|
||||
|
||||
const handleEndPointChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const endPoint = event.target.value;
|
||||
setStoragePatch({
|
||||
...storagePatch,
|
||||
endPoint,
|
||||
});
|
||||
};
|
||||
|
||||
const handleRegionChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const region = event.target.value;
|
||||
setStoragePatch({
|
||||
...storagePatch,
|
||||
region,
|
||||
});
|
||||
};
|
||||
|
||||
const handleAccessKeyChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const accessKey = event.target.value;
|
||||
setStoragePatch({
|
||||
...storagePatch,
|
||||
accessKey,
|
||||
});
|
||||
};
|
||||
|
||||
const handleSecretKeyChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const secretKey = event.target.value;
|
||||
setStoragePatch({
|
||||
...storagePatch,
|
||||
secretKey,
|
||||
});
|
||||
};
|
||||
|
||||
const handleBucketChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const bucket = event.target.value;
|
||||
setStoragePatch({
|
||||
...storagePatch,
|
||||
bucket,
|
||||
});
|
||||
};
|
||||
|
||||
const handleURLPrefixChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const urlPrefix = event.target.value;
|
||||
setStoragePatch({
|
||||
...storagePatch,
|
||||
urlPrefix,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="dialog-header-container !w-64">
|
||||
<p className="title-text">{t("setting.storage-section.update-a-service")}</p>
|
||||
<button className="btn close-btn" onClick={handleCloseBtnClick}>
|
||||
<Icon.X />
|
||||
</button>
|
||||
</div>
|
||||
<div className="dialog-content-container">
|
||||
<Typography className="!mb-1" level="body2">
|
||||
Name
|
||||
</Typography>
|
||||
<Input className="mb-2" placeholder="Name" value={storagePatch.name} onChange={handleNameChange} fullWidth />
|
||||
<Typography className="!mb-1" level="body2">
|
||||
EndPoint
|
||||
</Typography>
|
||||
<Input className="mb-2" placeholder="EndPoint" value={storagePatch.endPoint} onChange={handleEndPointChange} fullWidth />
|
||||
<Typography className="!mb-1" level="body2">
|
||||
Region
|
||||
</Typography>
|
||||
<Input className="mb-2" placeholder="Region" value={storagePatch.region} onChange={handleRegionChange} fullWidth />
|
||||
<Typography className="!mb-1" level="body2">
|
||||
AccessKey
|
||||
</Typography>
|
||||
<Input className="mb-2" placeholder="AccessKey" value={storagePatch.accessKey} onChange={handleAccessKeyChange} fullWidth />
|
||||
<Typography className="!mb-1" level="body2">
|
||||
SecretKey
|
||||
</Typography>
|
||||
<Input className="mb-2" placeholder="SecretKey" value={storagePatch.secretKey} onChange={handleSecretKeyChange} fullWidth />
|
||||
<Typography className="!mb-1" level="body2">
|
||||
Bucket
|
||||
</Typography>
|
||||
<Input className="mb-2" placeholder="Bucket" value={storagePatch.bucket} onChange={handleBucketChange} fullWidth />
|
||||
<Typography className="!mb-1" level="body2">
|
||||
URLPrefix
|
||||
</Typography>
|
||||
<Input className="mb-2" placeholder="URLPrefix" value={storagePatch.urlPrefix} onChange={handleURLPrefixChange} fullWidth />
|
||||
<div className="mt-2 w-full flex flex-row justify-between items-center space-x-1">
|
||||
<Button color="danger" onClick={handleDeleteBtnClick}>
|
||||
Delete
|
||||
</Button>
|
||||
<div className="flex justify-end">
|
||||
<Button variant="plain" color="neutral" onClick={handleCloseBtnClick}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleConfirmBtnClick} disabled={!allowConfirmAction()}>
|
||||
Update
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
function showUpdateStorageServiceDialog(storage: Storage) {
|
||||
generateDialog(
|
||||
{
|
||||
className: "update-storage-service-dialog",
|
||||
dialogName: "update-storage-service-dialog",
|
||||
},
|
||||
UpdateStorageServiceDialog,
|
||||
{ storage }
|
||||
);
|
||||
}
|
||||
|
||||
export default showUpdateStorageServiceDialog;
|
||||
@ -0,0 +1,14 @@
|
||||
.storage-section-container {
|
||||
> .title-text {
|
||||
@apply mt-4 first:mt-1;
|
||||
}
|
||||
|
||||
> .form-label.selector {
|
||||
@apply mb-2 flex flex-row justify-between items-center;
|
||||
|
||||
> .normal-text {
|
||||
@apply mr-2 text-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,31 @@
|
||||
import store, { useAppSelector } from "..";
|
||||
import * as api from "../../helpers/api";
|
||||
import { setStorages, createStorage, patchStorage, deleteStorage } from "../reducer/storage";
|
||||
|
||||
export const useStorageStore = () => {
|
||||
const state = useAppSelector((state) => state.storage);
|
||||
return {
|
||||
state,
|
||||
getState: () => {
|
||||
return store.getState().storage;
|
||||
},
|
||||
fetchStorages: async () => {
|
||||
const { data } = (await api.getStorageList()).data;
|
||||
store.dispatch(setStorages(data));
|
||||
},
|
||||
createStorage: async (storageCreate: StorageCreate) => {
|
||||
const { data: storage } = (await api.createStorage(storageCreate)).data;
|
||||
store.dispatch(createStorage(storage));
|
||||
return storage;
|
||||
},
|
||||
patchStorage: async (storagePatch: StoragePatch) => {
|
||||
const { data: storage } = (await api.patchStorage(storagePatch)).data;
|
||||
store.dispatch(patchStorage(storage));
|
||||
return storage;
|
||||
},
|
||||
deleteStorageById: async (storageId: StorageId) => {
|
||||
await api.deleteStorage(storageId);
|
||||
store.dispatch(deleteStorage(storageId));
|
||||
},
|
||||
};
|
||||
};
|
||||
@ -0,0 +1,53 @@
|
||||
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
|
||||
|
||||
interface State {
|
||||
storages: Storage[];
|
||||
}
|
||||
|
||||
const storageSlice = createSlice({
|
||||
name: "storage",
|
||||
initialState: {
|
||||
storages: [],
|
||||
} as State,
|
||||
reducers: {
|
||||
setStorages: (state, action: PayloadAction<Storage[]>) => {
|
||||
return {
|
||||
...state,
|
||||
storages: action.payload,
|
||||
};
|
||||
},
|
||||
createStorage: (state, action: PayloadAction<Storage>) => {
|
||||
return {
|
||||
...state,
|
||||
storages: [action.payload].concat(state.storages),
|
||||
};
|
||||
},
|
||||
patchStorage: (state, action: PayloadAction<Partial<Storage>>) => {
|
||||
return {
|
||||
...state,
|
||||
storages: state.storages.map((storage) => {
|
||||
if (storage.id === action.payload.id) {
|
||||
return {
|
||||
...storage,
|
||||
...action.payload,
|
||||
};
|
||||
} else {
|
||||
return storage;
|
||||
}
|
||||
}),
|
||||
};
|
||||
},
|
||||
deleteStorage: (state, action: PayloadAction<StorageId>) => {
|
||||
return {
|
||||
...state,
|
||||
storages: state.storages.filter((storage) => {
|
||||
return storage.id !== action.payload;
|
||||
}),
|
||||
};
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const { setStorages, createStorage, patchStorage, deleteStorage } = storageSlice.actions;
|
||||
|
||||
export default storageSlice.reducer;
|
||||
@ -0,0 +1,36 @@
|
||||
type StorageId = number;
|
||||
|
||||
interface Storage {
|
||||
id: StorageId;
|
||||
creatorId: UserId;
|
||||
createdTs: TimeStamp;
|
||||
updatedTs: TimeStamp;
|
||||
name: string;
|
||||
endPoint: string;
|
||||
region: string;
|
||||
accessKey: string;
|
||||
secretKey: string;
|
||||
bucket: string;
|
||||
urlPrefix: string;
|
||||
}
|
||||
|
||||
interface StorageCreate {
|
||||
name: string;
|
||||
endPoint: string;
|
||||
region: string;
|
||||
accessKey: string;
|
||||
secretKey: string;
|
||||
bucket: string;
|
||||
urlPrefix: string;
|
||||
}
|
||||
|
||||
interface StoragePatch {
|
||||
id: StorageId;
|
||||
name: string;
|
||||
endPoint: string;
|
||||
region: string;
|
||||
accessKey: string;
|
||||
secretKey: string;
|
||||
bucket: string;
|
||||
urlPrefix: string;
|
||||
}
|
||||
Loading…
Reference in New Issue