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

RND-367-ui-minor-changes #1574

Merged
merged 2 commits into from
Jan 1, 2024
Merged

RND-367-ui-minor-changes #1574

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d4194dc
RND-367-ui-minor-changes
Jan 1, 2024
c6c4449
Merge branch 'master' into RND-367-ui-minor-changes
SvetaMemphis Jan 1, 2024
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
7 changes: 6 additions & 1 deletion ui_src/src/components/cloneModal/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,13 +66,18 @@ const CloneModal = ({ type }) => {
)}
{type === 'cli' && (
<>
<p className="create-func-cli">
<label>Step 1:</label>Install Memphis CLI
</p>
<div className="url-wrapper">
<p className="url-text"> {githubUrls[type][tabValue]}</p>
<div className="icon">
<Copy width="18" data={githubUrls[type][tabValue]} />
</div>
</div>
<p className="create-func-cli">Create a basic Memphis function template</p>
<p className="create-func-cli">
<label>Step 2:</label>Create a basic Memphis function template
</p>
<div className="url-wrapper">
<p className="url-text"> {githubUrls[type]?.code}</p>
<div className="icon">
Expand Down
5 changes: 5 additions & 0 deletions ui_src/src/components/cloneModal/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,11 @@
font-size: 14px;
font-family: 'InterMedium';
margin: 15px 0px 5px 0px;
label {
color: var(--purple);
font-weight: 600;
margin-right: 5px;
}
}
.footer {
border-top: 1px solid #e4e4e4;
Expand Down
22 changes: 13 additions & 9 deletions ui_src/src/components/produceMessages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ const ProduceMessages = ({ stationName, cancel, produceMessagesRef, setLoading }
<p className="field-title">JSON-based value</p>
<div className="generate-action" onClick={() => generateMessage()}>
<RefreshIcon width={14} />
<span>Generate example</span>
<span>Re-generate</span>
</div>
</div>
<div className="message-example">
Expand Down Expand Up @@ -179,8 +179,8 @@ const ProduceMessages = ({ stationName, cancel, produceMessagesRef, setLoading }
backgroundColorType="none"
borderColorType="gray"
height="40px"
onBlur={(e) => creationForm.setFieldsValue({[name]: e.target.value})}
onChange={(e) => creationForm.setFieldsValue({[name]: e.target.value})}
onBlur={(e) => creationForm.setFieldsValue({ [name]: e.target.value })}
onChange={(e) => creationForm.setFieldsValue({ [name]: e.target.value })}
value={formFields.key}
/>
</Form.Item>
Expand All @@ -202,8 +202,8 @@ const ProduceMessages = ({ stationName, cancel, produceMessagesRef, setLoading }
backgroundColorType="none"
borderColorType="gray"
height="40px"
onBlur={(e) => creationForm.setFieldsValue({[name]: e.target.value})}
onChange={(e) => creationForm.setFieldsValue({[name]: e.target.value})}
onBlur={(e) => creationForm.setFieldsValue({ [name]: e.target.value })}
onChange={(e) => creationForm.setFieldsValue({ [name]: e.target.value })}
value={formFields.header}
/>
</Form.Item>
Expand All @@ -223,13 +223,17 @@ const ProduceMessages = ({ stationName, cancel, produceMessagesRef, setLoading }
<Divider className="seperator" />
<div className="by-pass-switcher">
<TitleComponent
headerTitle="Bypass schema enforcement"
headerTitle="Ignore enforced schema"
cloudOnly={isCloud() ? false : true}
typeTitle="sub-header"
headerDescription="Check this box to avoid schema validation"
/>
<Form.Item className="form-input" name="bypass_schema" initialValue={isCloud() ? false : true}>
<Switcher disabled={!isCloud()} onChange={(e) => creationForm.setFieldsValue({'bypass_schema': e})} checked={isCloud() ? formFields.bypass_schema : true} />
<Switcher
disabled={!isCloud()}
onChange={(e) => creationForm.setFieldsValue({ bypass_schema: e })}
checked={isCloud() ? formFields.bypass_schema : true}
/>
</Form.Item>
</div>
<Divider className="seperator" />
Expand All @@ -248,7 +252,7 @@ const ProduceMessages = ({ stationName, cancel, produceMessagesRef, setLoading }
height="45px"
width="100%"
options={partitons}
onChange={(e) => creationForm.setFieldsValue({'partition_number': e.target.value})}
onChange={(e) => creationForm.setFieldsValue({ partition_number: e.target.value })}
popupClassName="select-options"
disabled={!isCloud()}
/>
Expand All @@ -262,7 +266,7 @@ const ProduceMessages = ({ stationName, cancel, produceMessagesRef, setLoading }
<InputNumberComponent
min={1}
max={isCloud() ? 1000 : 1}
onChange={(e) => creationForm.setFieldsValue({'amount': e})}
onChange={(e) => creationForm.setFieldsValue({ amount: e })}
value={formFields.amount}
placeholder={formFields.amount || 1}
disabled={!isCloud()}
Expand Down
2 changes: 1 addition & 1 deletion ui_src/src/domain/administration/integrations/components/gitHubIntegration/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -270,7 +270,7 @@ const GitHubIntegration = ({ close, value }) => {
<div className="api-details api-details-github">
{isIntegrated && (
<div className="input-field">
<p className="title">Repos</p>
<p className="title">Repositories</p>
<div className="repos-container">
<div className="repos-header">
<label></label>
Expand Down
2 changes: 2 additions & 0 deletions ui_src/src/domain/administration/integrations/components/gitHubIntegration/integratedItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@ const IntegrationItem = ({ isNew, index, disabled, repo, reposList, updateIntegr
updateRepo(e);
}}
options={Object?.keys(reposList)}
placeholder={'Choose a repository'}
/>
</Form.Item>

Expand All @@ -102,6 +103,7 @@ const IntegrationItem = ({ isNew, index, disabled, repo, reposList, updateIntegr
onChange={(e) => {
updateBranch(e);
}}
placeholder={'Branch to sync with'}
/>
</Form.Item>

Expand Down
1 change: 0 additions & 1 deletion ui_src/src/domain/administration/integrations/components/integrationItem/integrationLogs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,6 @@ const IntegrationLogs = ({ integrationName }) => {
return (
<div className="integration-body">
<div className="integrate-description logs-header">
<p>Logs Details</p>
<Copy data={JSON.stringify(logsList)} />
</div>
<div className="generic-list-wrapper">
Expand Down
2 changes: 1 addition & 1 deletion ui_src/src/domain/administration/integrations/components/integrationItem/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,7 @@ integ-item {
}
.logs-header {
display: flex;
justify-content: space-between;
justify-content: flex-end;
align-items: center;
height: 30px;
}
Expand Down
2 changes: 1 addition & 1 deletion ui_src/src/domain/schema/components/schemaDetails/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -451,7 +451,7 @@ function SchemaDetails({ schemaName, closeDrawer }) {
fontFamily: 'Inter'
}}
language={schemaDetails?.type === 'protobuf' ? 'proto' : schemaDetails?.type === 'avro' ? 'json' : schemaDetails?.type}
height="calc(100% - 104px)"
height="calc(100% - 55px)"
defaultValue={versionSelected?.schema_content}
value={newVersion}
onChange={(value) => {
Expand Down
16 changes: 10 additions & 6 deletions ui_src/src/domain/stationOverview/stationObservabilty/ProduceConsumList/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ import { SiDotnet } from 'react-icons/si';
import { DiJavascript1 } from 'react-icons/di';
import ConnectorInfo from '../../../../components/connectorInfo';
import RunBenchmarkModal from '../../../../components/runBenchmarkModal';
import { connectorTypesSource, connectorTypesSink } from '../../../../connectors';

const overlayStylesConnectors = {
borderRadius: '8px',
Expand Down Expand Up @@ -400,6 +401,13 @@ const ProduceConsumList = ({ producer }) => {
return <div style={{ fontSize: '17px', display: 'flex', alignItems: 'center' }}>{iconComponent}</div>;
}

const getIconByConnector = (item, connectorType) => {
let connector;
if (connectorType === 'source') connector = connectorTypesSource.find((connector) => connector?.name?.toLowerCase() === item?.type);
else connector = connectorTypesSink.find((connector) => connector?.name?.toLowerCase() === item?.type);
return <img src={connector?.icon} height="16px" width="16px" alt={item?.type} /> || <ConnectIcon />;
};

return (
<div className="station-observabilty-side">
<div className="pubSub-list-container">
Expand Down Expand Up @@ -486,9 +494,7 @@ const ProduceConsumList = ({ producer }) => {
<div className={returnClassName(index, row?.is_deleted)} key={index} onClick={() => onSelectedRow(index, 'producer')}>
<span className="connector-name">
{row?.connector_connection_id ? (
<TooltipComponent text="connector">
<ConnectIcon />
</TooltipComponent>
<TooltipComponent text="connector">{getIconByConnector(row, 'source')}</TooltipComponent>
) : (
<TooltipComponent text="producer">{getIconByLang(row)}</TooltipComponent>
)}
Expand Down Expand Up @@ -586,9 +592,7 @@ const ProduceConsumList = ({ producer }) => {
<div className={returnClassName(index, row?.is_deleted)} key={index} onClick={() => onSelectedRow(index, 'consumer')}>
<span className="connector-name">
{row?.connector_connection_id ? (
<TooltipComponent text="connector">
<ConnectIcon />
</TooltipComponent>
<TooltipComponent text="connector">{getIconByConnector(row, 'sink')}</TooltipComponent>
) : (
<TooltipComponent text="consumer">{getIconByLang(row)}</TooltipComponent>
)}
Expand Down
18 changes: 15 additions & 3 deletions ui_src/src/domain/stationOverview/stationObservabilty/components/functionCard/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export default function FunctionCard({
const [popoverFunctionContextMenu, setPopoverFunctionContextMenu] = useState(false);
const [openFunctionDetails, setOpenFunctionDetails] = useState(false);
const [selectedFunction, setSelectedFunction] = useState();

const [averageProcessingTime, setAverageProcessingTime] = useState(null);
useEffect(() => {
setIsActive(!isDeactive);
}, [isDeactive]);
Expand All @@ -53,6 +53,7 @@ export default function FunctionCard({
func.rates = Math.floor(Math.random() * (80 - 50 + 1)) + 50;
func.forks = Math.floor(Math.random() * (100 - 80 + 1)) + 80;
setSelectedFunction(func);
getFunctionDetails();
}, [functionItem]);

const functionContextMenuStyles = {
Expand All @@ -63,6 +64,15 @@ export default function FunctionCard({
width: '150px'
};

const getFunctionDetails = async () => {
try {
const response = await httpRequest('GET', `${ApiEndpoints.GET_FUNCTION_DETAILS}?function_id=${functionItem?.id}`);
setAverageProcessingTime(response?.metrics?.average_processing_time);
} catch (e) {
return;
}
};

const getFunctionsOverview = async () => {
try {
const data = await httpRequest(
Expand Down Expand Up @@ -202,8 +212,10 @@ export default function FunctionCard({
</div>

<div className={`ms-function-card-title ${!selectedFunction?.activated ? 'deactivated-function' : undefined}`}>
<FunctionBoxTitleIcon />
<span>{selectedFunction?.name}</span>
<div className="function-name">
<FunctionBoxTitleIcon /> <span>{selectedFunction?.name}</span>
</div>
<span className="processing">avg processing: {averageProcessingTime}/ms</span>
</div>
</div>
<Tooltip text="Dead-letter">
Expand Down
20 changes: 16 additions & 4 deletions ui_src/src/domain/stationOverview/stationObservabilty/components/functionCard/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,15 +83,27 @@
font-weight: 600;
line-height: normal;
display: flex;
gap: 6px;
align-items: center;
padding-left: 7px;
span {
flex-direction: column;

.function-name {
display: flex;
align-items: center;
gap: 6px;
width: 95px;
}
span {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.processing {
display: flex;
justify-content: center;
text-align: center;
color: #737373 !important;
font-size: 10px;
margin-top: 5px;
}
.deactivated {
color: #737373 !important;
}
Expand Down
21 changes: 11 additions & 10 deletions ui_src/src/domain/users/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,8 @@ import './style.scss';
import React, { useEffect, useContext, useState, useRef } from 'react';
import { AccountCircleRounded } from '@material-ui/icons';

import { LOCAL_STORAGE_USER_PASS_BASED_AUTH } from '../../const/localStorageConsts';
import { LOCAL_STORAGE_USER_PASS_BASED_AUTH, LOCAL_STORAGE_FULL_NAME, USER_IMAGE } from '../../const/localStorageConsts';
import { isCloud, parsingDate } from '../../services/valueConvertor';
import { ReactComponent as AddUserIcon } from '../../assets/images/addUserIcon.svg';
import { ReactComponent as DeleteWrapperIcon } from '../../assets/images/deleteWrapperIcon.svg';
import { ReactComponent as MailIcon } from '../../assets/images/mailIcon.svg';
import { ReactComponent as DeleteIcon } from '../../assets/images/deleteIcon.svg';
Expand Down Expand Up @@ -152,8 +151,10 @@ function Users() {
}
};

const getAvatarSrc = (avatarId) => {
return require(`../../assets/images/bots/avatar${avatarId}.svg`);
const getAvatarSrc = (avatarId, full_name) => {
return (
(localStorage.getItem(LOCAL_STORAGE_FULL_NAME) === full_name && localStorage.getItem(USER_IMAGE)) || require(`../../assets/images/bots/avatar${avatarId}.svg`)
);
};

const handleRemoveUser = async (name, type) => {
Expand Down Expand Up @@ -303,7 +304,7 @@ function Users() {
render: (text, record) => (
<div className="user-name">
<div className="user-avatar">
<img src={getAvatarSrc(record.avatar_id)} width={25} height={25} alt="avatar" />
<img src={getAvatarSrc(record.avatar_id, record?.full_name)} width={25} height={25} alt="avatar" />
</div>
<p>{text}</p>
</div>
Expand Down Expand Up @@ -360,12 +361,12 @@ function Users() {
)
},
{
title: 'Creation date',
key: 'created_at',
dataIndex: 'created_at',
render: (created_at) => (
title: 'Last login',
key: 'last_login',
dataIndex: 'last_login',
render: (last_login) => (
<div className="created-column">
<p>{parsingDate(created_at)}</p>
<p>{parsingDate(last_login)}</p>
</div>
)
},
Expand Down
3 changes: 3 additions & 0 deletions ui_src/src/domain/users/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,9 @@
svg {
color: var(--purple);
}
img {
border-radius: 50%;
}
}
.badgeOrange {
min-width: unset !important;
Expand Down