-
-
-
-
- Save this key somewhere safe, you will need it to stream or login to the admin
- dashboard!
-
-
-
-
-
-
-
+
+
+
+
+ Save this key somewhere safe, you will need it to stream or login to the admin
+ dashboard!
+
+
+
+
+
+
+
);
}
diff --git a/web/pages/components/config/edit-tags.tsx b/web/pages/components/config/edit-tags.tsx
index 9be437ab6..f04c2a2c0 100644
--- a/web/pages/components/config/edit-tags.tsx
+++ b/web/pages/components/config/edit-tags.tsx
@@ -19,7 +19,7 @@ const { Title } = Typography;
export default function EditInstanceTags() {
const [newTagInput, setNewTagInput] = useState
('');
- const [fieldStatus, setFieldStatus] = useState(null);
+ const [submitStatus, setSubmitStatus] = useState(null);
const serverStatusData = useContext(ServerStatusContext);
const { serverConfig, setFieldInConfigState } = serverStatusData || {};
@@ -38,34 +38,34 @@ export default function EditInstanceTags() {
}, []);
const resetStates = () => {
- setFieldStatus(null);
+ setSubmitStatus(null);
resetTimer = null;
clearTimeout(resetTimer);
};
// posts all the tags at once as an array obj
const postUpdateToAPI = async (postValue: any) => {
- setFieldStatus(createInputStatus(STATUS_PROCESSING));
+ setSubmitStatus(createInputStatus(STATUS_PROCESSING));
await postConfigUpdateToAPI({
apiPath,
data: { value: postValue },
onSuccess: () => {
setFieldInConfigState({ fieldName: 'tags', value: postValue, path: configPath });
- setFieldStatus(createInputStatus(STATUS_SUCCESS, 'Tags updated.'));
+ setSubmitStatus(createInputStatus(STATUS_SUCCESS, 'Tags updated.'));
setNewTagInput('');
resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
},
onError: (message: string) => {
- setFieldStatus(createInputStatus(STATUS_ERROR, message));
+ setSubmitStatus(createInputStatus(STATUS_ERROR, message));
resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
},
});
};
const handleInputChange = ({ value }: UpdateArgs) => {
- if (!fieldStatus) {
- setFieldStatus(null);
+ if (!submitStatus) {
+ setSubmitStatus(null);
}
setNewTagInput(value);
};
@@ -75,11 +75,11 @@ export default function EditInstanceTags() {
resetStates();
const newTag = newTagInput.trim();
if (newTag === '') {
- setFieldStatus(createInputStatus(STATUS_WARNING, 'Please enter a tag'));
+ setSubmitStatus(createInputStatus(STATUS_WARNING, 'Please enter a tag'));
return;
}
if (tags.some(tag => tag.toLowerCase() === newTag.toLowerCase())) {
- setFieldStatus(createInputStatus(STATUS_WARNING, 'This tag is already used!'));
+ setSubmitStatus(createInputStatus(STATUS_WARNING, 'This tag is already used!'));
return;
}
@@ -121,7 +121,7 @@ export default function EditInstanceTags() {
onPressEnter={handleSubmitNewTag}
maxLength={maxLength}
placeholder={placeholder}
- status={fieldStatus}
+ status={submitStatus}
/>
-
);
diff --git a/web/pages/config-storage.tsx b/web/pages/config-storage.tsx
index e46713350..9266e035b 100644
--- a/web/pages/config-storage.tsx
+++ b/web/pages/config-storage.tsx
@@ -1,111 +1,230 @@
+import { Typography, Switch, Button, Collapse } from 'antd';
+import classNames from 'classnames';
import React, { useContext, useState, useEffect } from 'react';
+import { UpdateArgs } from '../types/config-section';
import { ServerStatusContext } from '../utils/server-status-context';
-import { Typography, Switch, Input, Button } from 'antd';
import {
postConfigUpdateToAPI,
API_S3_INFO,
+ RESET_TIMEOUT,
+ S3_TEXT_FIELDS_INFO,
} from './components/config/constants';
-const { Title } = Typography;
-
-function Storage({ config }) {
- if (!config || !config.s3) {
- return null;
- }
-
- const [endpoint, setEndpoint] = useState(config.s3.endpoint);
- const [accessKey, setAccessKey] = useState(config.s3.accessKey);
- const [secret, setSecret] = useState(config.s3.secret);
- const [bucket, setBucket] = useState(config.s3.bucket);
- const [region, setRegion] = useState(config.s3.region);
- const [acl, setAcl] = useState(config.s3.acl);
- const [servingEndpoint, setServingEndpoint] = useState(config.s3.servingEndpoint);
- const [enabled, setEnabled] = useState(config.s3.enabled);
-
- function storageEnabledChanged(storageEnabled) {
- setEnabled(storageEnabled);
- }
-
- function endpointChanged(e) {
- setEndpoint(e.target.value)
- }
-
- function accessKeyChanged(e) {
- setAccessKey(e.target.value)
- }
-
- function secretChanged(e) {
- setSecret(e.target.value)
- }
-
- function bucketChanged(e) {
- setBucket(e.target.value)
- }
-
- function regionChanged(e) {
- setRegion(e.target.value)
- }
-
- function aclChanged(e) {
- setAcl(e.target.value)
- }
+import {
+ createInputStatus,
+ StatusState,
+ STATUS_ERROR,
+ STATUS_PROCESSING,
+ STATUS_SUCCESS,
+} from '../utils/input-statuses';
+import TextField from './components/config/form-textfield';
+import InputStatusInfo from './components/config/input-status-info';
- function servingEndpointChanged(e) {
- setServingEndpoint(e.target.value)
+const { Title } = Typography;
+const { Panel } = Collapse;
+
+// we could probably add more detailed checks here
+// `currentValues` is what's currently in the global store and in the db
+function checkSaveable(formValues: any, currentValues: any) {
+ const { endpoint, accessKey, secret, bucket, region, enabled, servingEndpoint, acl } = formValues;
+ // if fields are filled out and different from what's in store, then return true
+ if (enabled) {
+ if (endpoint !== '' && accessKey !== '' && secret !== '' && bucket !== '' && region !== '') {
+ if (
+ endpoint !== currentValues.endpoint ||
+ accessKey !== currentValues.accessKey ||
+ secret !== currentValues.bucket ||
+ region !== currentValues.region ||
+ servingEndpoint !== currentValues.servingEndpoint ||
+ acl !== currentValues.acl
+ ) {
+ return true;
+ }
+ }
+ } else if (enabled !== currentValues.enabled) {
+ return true;
}
+ return false;
+}
- async function save() {
- const payload = {
- value: {
- enabled: enabled,
- endpoint: endpoint,
- accessKey: accessKey,
- secret: secret,
- bucket: bucket,
- region: region,
- acl: acl,
- servingEndpoint: servingEndpoint,
- }
- };
+function EditStorage() {
+ const [formDataValues, setFormDataValues] = useState(null);
+ const [submitStatus, setSubmitStatus] = useState
(null);
- try {
- await postConfigUpdateToAPI({apiPath: API_S3_INFO, data: payload});
- } catch(e) {
- console.error(e);
- }
+ const [shouldDisplayForm, setShouldDisplayForm] = useState(false);
+ const serverStatusData = useContext(ServerStatusContext);
+ const { serverConfig, setFieldInConfigState } = serverStatusData || {};
+
+ const { s3 } = serverConfig;
+ const {
+ accessKey = '',
+ acl = '',
+ bucket = '',
+ enabled = false,
+ endpoint = '',
+ region = '',
+ secret = '',
+ servingEndpoint = '',
+ } = s3;
+
+ useEffect(() => {
+ setFormDataValues({
+ accessKey,
+ acl,
+ bucket,
+ enabled,
+ endpoint,
+ region,
+ secret,
+ servingEndpoint,
+ });
+ setShouldDisplayForm(enabled);
+ }, [s3]);
+
+ if (!formDataValues) {
+ return null;
}
- const table = enabled ? (
- <>
- Save
-
- ): null;
+ let resetTimer = null;
+ const resetStates = () => {
+ setSubmitStatus(null);
+ resetTimer = null;
+ clearTimeout(resetTimer);
+ };
+
+ // update individual values in state
+ const handleFieldChange = ({ fieldName, value }: UpdateArgs) => {
+ setFormDataValues({
+ ...formDataValues,
+ [fieldName]: value,
+ });
+ };
+
+ // posts the whole state
+ const handleSave = async () => {
+ setSubmitStatus(createInputStatus(STATUS_PROCESSING));
+ const postValue = formDataValues;
+
+ await postConfigUpdateToAPI({
+ apiPath: API_S3_INFO,
+ data: { value: postValue },
+ onSuccess: () => {
+ setFieldInConfigState({ fieldName: 's3', value: postValue, path: '' });
+ setSubmitStatus(createInputStatus(STATUS_SUCCESS, 'Updated.'));
+ resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
+ },
+ onError: (message: string) => {
+ setSubmitStatus(createInputStatus(STATUS_ERROR, message));
+ resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
+ },
+ });
+ };
+
+ // toggle switch.
+ const handleSwitchChange = (storageEnabled: boolean) => {
+ setShouldDisplayForm(storageEnabled);
+ handleFieldChange({ fieldName: 'enabled', value: storageEnabled });
+
+ // if current data in current store says s3 is enabled,
+ // we should save this state
+ // if (!storageEnabled && s3.enabled) {
+ // handleSave();
+ // }
+ };
+
+ const containerClass = classNames({
+ 'edit-storage-container': true,
+ enabled: shouldDisplayForm,
+ });
+
+ const isSaveable = checkSaveable(formDataValues, s3);
return (
- <>
- Storage
- Enabled:
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Advanced
+
+
+
+
+
+
+
+
+
+
+
+ Save
+
+
+
-
+ <>
+ Storage
+
- {children}
-
+ {children}
);
-}
+};
ServerStatusProvider.propTypes = {
children: PropTypes.element.isRequired,
};
-export default ServerStatusProvider;
\ No newline at end of file
+export default ServerStatusProvider;