Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Dls update flow #1322

Merged
merged 14 commits into from
Sep 21, 2023
Merged

Dls update flow #1322

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
05bab1b
add dls flow to the station overview header
aydin101 Sep 15, 2023
261f3c6
add details tab flow
aydin101 Sep 15, 2023
7b30a5b
Merge remote-tracking branch 'origin/master' into dls-update-flow
aydin101 Sep 19, 2023
07de685
dls flow
aydin101 Sep 19, 2023
c1b6f4e
build
aydin101 Sep 19, 2023
79f378c
hight of buttons
avrhamNeeman Sep 19, 2023
261409b
Poison messages
avrhamNeeman Sep 19, 2023
8c13988
remove the comments
aydin101 Sep 20, 2023
92d9897
build
aydin101 Sep 20, 2023
2eaf197
update dls flow
aydin101 Sep 20, 2023
1433144
add build
aydin101 Sep 20, 2023
141b66f
add confitional to search
aydin101 Sep 20, 2023
9f6cbe9
build
aydin101 Sep 20, 2023
cfd8994
responsive issue
avrhamNeeman Sep 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions ui_src/src/assets/images/disableIcon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions ui_src/src/assets/images/disconnectDls.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 7 additions & 0 deletions ui_src/src/assets/images/stationDlsIcon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions ui_src/src/assets/images/upRightCorner.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 5 additions & 4 deletions ui_src/src/components/activeBadge/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,19 @@
font-family: 'InterMedium';
font-size: 11px;
line-height: 12px;
white-space: nowrap;
}
}
.badgeGreen {
background: #D6F5E3;
background: #d6f5e3;
p {
color: #27AE60;
color: #27ae60;
}
}
.badgeOrange {
background: #FFE5CC;
background: #ffe5cc;
min-width: 106px;
p {
color: #FF7D00;
color: #ff7d00;
}
}
46 changes: 35 additions & 11 deletions ui_src/src/components/createStationForm/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ const storageTierTwoOptions = [

const idempotencyOptions = ['Milliseconds', 'Seconds', 'Minutes', 'Hours'];

const CreateStationForm = ({ createStationFormRef, getStartedStateRef, finishUpdate, updateFormState, getStarted, setLoading }) => {
const CreateStationForm = ({ createStationFormRef, getStartedStateRef, finishUpdate, updateFormState, getStarted, setLoading, noRedirect }) => {
const [state, dispatch] = useContext(Context);
const history = useHistory();
const [creationForm] = Form.useForm();
Expand All @@ -97,6 +97,7 @@ const CreateStationForm = ({ createStationFormRef, getStartedStateRef, finishUpd
const [retentionType, setRetentionType] = useState(retanionOptions[0].value);
const [idempotencyType, setIdempotencyType] = useState(idempotencyOptions[2]);
const [schemas, setSchemas] = useState([]);
const [stations, setStations] = useState([]);
const [useSchema, setUseSchema] = useState(false);
const [dlsConfiguration, setDlsConfiguration] = useState(true);
const [tabValue, setTabValue] = useState('Local storage tier');
Expand All @@ -118,6 +119,7 @@ const CreateStationForm = ({ createStationFormRef, getStartedStateRef, finishUpd
}
getAllSchemas();
getIntegration();
getStations();
if (getStarted && getStartedStateRef?.completedSteps > 0) setAllowEdit(false);
if (getStarted && getStartedStateRef?.formFieldsCreateStation?.retention_type) setRetentionType(getStartedStateRef.formFieldsCreateStation.retention_type);
createStationFormRef.current = onFinish;
Expand Down Expand Up @@ -184,12 +186,20 @@ const CreateStationForm = ({ createStationFormRef, getStartedStateRef, finishUpd
poison: dlsConfiguration,
schemaverse: dlsConfiguration
},
dls_station: formFields.dlsStation,
partitions_number: Number(formFields.partitions_number)
};
if ((getStarted && getStartedStateRef?.completedSteps === 0) || !getStarted) createStation(bodyRequest);
else finishUpdate();
};

const getStations = async () => {
try {
const data = await httpRequest('GET', ApiEndpoints.GET_ALL_STATIONS);
setStations(data);
} catch (error) {}
};

const getAvailableReplicas = async () => {
try {
const data = await httpRequest('GET', ApiEndpoints.GET_AVAILABLE_REPLICAS);
Expand Down Expand Up @@ -222,7 +232,7 @@ const CreateStationForm = ({ createStationFormRef, getStartedStateRef, finishUpd
setLoading(true);
const data = await httpRequest('POST', ApiEndpoints.CREATE_STATION, bodyRequest);
if (data) {
if (!getStarted) history.push(`${pathDomains.stations}/${data.name}`);
if (!getStarted) !noRedirect && history.push(`${pathDomains.stations}/${data.name}`);
else finishUpdate(data);
}
} catch (error) {
Expand Down Expand Up @@ -453,8 +463,8 @@ const CreateStationForm = ({ createStationFormRef, getStartedStateRef, finishUpd
</Form.Item>
</div>
{!getStarted && (
<div className="schema-type">
<div className="toggle-add-schema">
<div>
<div className="toggle-add">
<TitleComponent
headerTitle="Enforce schema"
typeTitle="sub-header"
Expand All @@ -474,13 +484,27 @@ const CreateStationForm = ({ createStationFormRef, getStartedStateRef, finishUpd
)}
</div>
)}
<div className="toggle-add-schema">
<TitleComponent
headerTitle="Dead-letter station"
typeTitle="sub-header"
headerDescription="Dead-letter stations are useful for debugging your application"
/>
<Switcher onChange={() => setDlsConfiguration(!dlsConfiguration)} checked={dlsConfiguration} />
<div>
<div className="toggle-add">
<TitleComponent
headerTitle="Dead-letter station"
typeTitle="sub-header"
headerDescription="Dead-letter stations are useful for debugging your application"
/>
<Switcher onChange={() => setDlsConfiguration(!dlsConfiguration)} checked={dlsConfiguration} />
</div>

{dlsConfiguration && (
<Form.Item name="dlsStation" initialValue={null}>
<SelectSchema
placeholder={creationForm.dlsStation || 'None'}
value={creationForm.dlsStation || stations[0]}
options={stations}
onChange={(e) => creationForm.setFieldsValue({ dlsStation: e })}
type={'dls'}
/>
</Form.Item>
)}
</div>
</div>
<div className="right-side">
Expand Down
51 changes: 25 additions & 26 deletions ui_src/src/components/createStationForm/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,7 @@
color: #a9a9a9;
}
}
.toggle-add-schema {
.toggle-add {
display: flex;
justify-content: space-between;
.switch-button {
Expand All @@ -218,45 +218,44 @@
a:hover {
text-decoration: underline;
}

}
.show-violation-form{
.show-violation-form {
display: flex;
margin-bottom: 10px;
margin-top:-5px;
justify-content:space-between;
align-items:center;
.flex-line{
margin-bottom: 10px;
margin-top: -5px;
justify-content: space-between;
align-items: center;
.flex-line {
display: flex;
gap: 5px;
p{
p {
margin: 0;
font-size: 13px;
color: #ff4d4f;
line-height: 13px;
}
.lock-feature-icon{
.lock-feature-icon {
color: #ff4d4f !important;
width: 20px;
}
}
.upgrade-button-wrapper {
padding: 5px 5px;
background: var(--yellow);
width: 94px;
border-radius: 32px;
color: #253342;
display: flex;
justify-content: center;
font-family: 'InterMedium';
font-size: 12px;
cursor: pointer;
p{
margin: 0;
line-height: 12px;
}
.upgrade-button-wrapper {
padding: 5px 5px;
background: var(--yellow);
width: 94px;
border-radius: 32px;
color: #253342;
display: flex;
justify-content: center;
font-family: 'InterMedium';
font-size: 12px;
cursor: pointer;
p {
margin: 0;
line-height: 12px;
}
}
.upgrade-button-wrapper:hover{
.upgrade-button-wrapper:hover {
opacity: 0.9;
}
}
59 changes: 36 additions & 23 deletions ui_src/src/components/customSelect/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import { Select } from 'antd';
import React from 'react';

import SchemaIconSelect from '../../assets/images/schemaIconSelect.svg';
import stationsIconActive from '../../assets/images/stationsIconActive.svg';
import usersIconActive from '../../assets/images/usersIconActive.svg';
import { parsingDate } from '../../services/valueConvertor';

Expand Down Expand Up @@ -56,38 +57,50 @@ const CustomSelect = ({ options, onChange, value, placeholder, type = 'schema',
<div className="top">
<p className="no-result-found">No Result Found</p>
</div>
<div className="divider" />
<div className="bottom">
<Button
placeholder={
<div className="create-btn">
<BsPlus style={{ color: '#6557FF', fontSize: '18px' }} />
<p>Create a {type === 'schema' ? ' schema' : type === 'user' ? 'user' : ''}</p>
</div>
}
className="modal-btn"
width="83px"
height="32px"
colorType="purple"
radiusType="circle"
backgroundColorType={'none'}
fontSize="12px"
fontWeight="600"
onClick={() => {
return type === 'schema' ? createNewSchema() : type === 'user' ? handleCreateNew() : null;
}}
/>
</div>

{type !== 'dls' && (
<>
<div className="divider" />
<div className="bottom">
<Button
placeholder={
<div className="create-btn">
<BsPlus style={{ color: '#6557FF', fontSize: '18px' }} />
<p>Create a {type === 'schema' ? ' schema' : type === 'user' ? 'user' : ''}</p>
</div>
}
className="modal-btn"
width="83px"
height="32px"
colorType="purple"
radiusType="circle"
backgroundColorType={'none'}
fontSize="12px"
fontWeight="600"
onClick={() => {
return type === 'schema' ? createNewSchema() : type === 'user' ? handleCreateNew() : null;
}}
/>
</div>
</>
)}
</div>
}
>
{type === 'dls' && options.length > 0 && (
<Option value={null}>
<div className="schema-details">
<p className="schema-name">None</p>
</div>
</Option>
)}
{options?.map((schema) => {
return (
<Option key={schema?.id} value={schema?.name}>
<>
<div className="schema-details">
<img
src={type === 'schema' ? SchemaIconSelect : type === 'user' ? usersIconActive : null}
src={type === 'schema' ? SchemaIconSelect : type === 'user' ? usersIconActive : type === 'dls' ? stationsIconActive : null}
alt="SchemaIconSelect"
height={20}
width={20}
Expand Down
6 changes: 5 additions & 1 deletion ui_src/src/components/detailBox/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
flex-direction: column;
justify-content: center;
align-items: center;
text-align:center;
text-align: center;
.detail-data-row {
font-family: 'InterSemiBold';
font-size: 14px;
Expand All @@ -44,6 +44,10 @@
font-size: 16px;
color: #1d1d1d;
padding-bottom: 6px;
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-between;
}
.detail-description {
font-family: 'Inter';
Expand Down
1 change: 1 addition & 0 deletions ui_src/src/components/searchInput/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
.search-icon {
margin-left: 13px;
margin-right: 5px;
margin-top: 6px;
svg {
width: 13px;
}
Expand Down
2 changes: 2 additions & 0 deletions ui_src/src/const/apiEndpoints.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,8 @@ export const ApiEndpoints = {
TIERD_STORAGE_CLICKED: '/stations/tierdStorageClicked',
UPDATE_DLS_CONFIGURATION: '/stations/updateDlsConfig',
PRODUCE: '/stations/produce',
ATTACH_DLS: '/stations/attachDlsStation',
DETACH_DLS: '/stations/detachDlsStation',

//Async Tasks
GET_ASYNC_TASKS: '/asyncTasks/getAsyncTasks',
Expand Down
Loading