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

Sprint1308 3008/change station list view #1272

Merged
merged 5 commits into from
Aug 28, 2023
Merged

Sprint1308 3008/change station list view #1272

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
05029f2
refactoring, station list update
aydin101 Aug 24, 2023
c033504
change the station list
aydin101 Aug 25, 2023
ec2d334
create build
aydin101 Aug 25, 2023
839b350
update based on comments
aydin101 Aug 28, 2023
3cc9d3f
remove unnecessary
aydin101 Aug 28, 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
5 changes: 5 additions & 0 deletions ui_src/src/assets/images/TimeFill.svg
View file
Open in desktop
aydin101 marked this conversation as resolved.
Show resolved Hide resolved
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions ui_src/src/assets/images/timeSchedule.svg
View file
Open in desktop
aydin101 marked this conversation as resolved.
Show resolved Hide resolved
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions ui_src/src/assets/images/userPerson.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.
1 change: 1 addition & 0 deletions ui_src/src/components/checkBox/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ const CheckboxComponent = ({ indeterminate = false, disabled = false, defaultChe
onChange={onChange}
name={checkName}
disabled={disabled}
onClick={(e) => e.stopPropagation()}
/>
);
};
Expand Down
199 changes: 111 additions & 88 deletions ui_src/src/domain/stationsList/stationBoxOverview/index.js
View file
Open in desktop

Large diffs are not rendered by default.

198 changes: 120 additions & 78 deletions ui_src/src/domain/stationsList/stationBoxOverview/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
.station-box-container {
width: calc(100%);
background-color: white;
border-radius: 10px;
box-shadow: 0px 0px 4px 3px rgba(221, 221, 221, 0.3);
border-radius: 8px;
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
min-height: 60px;
margin-bottom: 17px;
overflow: auto;
padding: 15px;
display: flex;
justify-content: space-between;
cursor: pointer;
min-width: 1370px;
flex-direction: column;
.data-labels {
color: #84818a;
font-size: 12px;
font-family: "InterSemiBold";
font-family: 'InterSemiBold';
cursor: pointer;
}
.poison {
Expand All @@ -33,9 +33,8 @@
flex-direction: column;
.header {
display: flex;
}
.data-info {
margin-left: 17px;
align-items: center;
gap: 6px;
}
}
.data-info {
Expand All @@ -45,7 +44,7 @@
text-transform: capitalize;
margin-left: 1px;
margin-top: 10px;
font-family: "InterSemiBold";
font-family: 'InterSemiBold';
cursor: pointer !important;
.anticon svg {
color: #2e2c34;
Expand All @@ -58,92 +57,135 @@
height: 20px;
}
}
.left-section {
max-width: 300px;
width: 100%;
.check-box {
.retention-info {
text-transform: none;
width: fit-content !important;
}
.main-section,
.bottom-section {
padding-left: 18px;
padding-right: 18px;
}
.main-section {
justify-content: space-between;
display: flex;
flex-direction: row;
width: calc(100%);
min-height: 101px;
padding-top: 19px;
padding-bottom: 19px;
.left-section {
padding-right: 40px;
display: flex;
align-items: center;
margin-bottom: 10px;
.station-name {
font-size: 17px;
font-family: "InterSemiBold";
margin: 0;
margin-left: 25px;
color: #2e2c34;
cursor: pointer !important;
flex-direction: column;
align-items: flex-start;
gap: 11px;
.check-box {
display: flex;
flex-direction: row;
align-items: center;
.non-native-label {
color: #84818a;
font-size: 12px;
font-family: "InterSemiBold";
gap: 11px;
.station-name {
font-size: 17px;
font-family: 'InterSemiBold';
margin: 0;
color: #2e2c34;
cursor: pointer !important;
align-items: center;
.non-native-label {
color: #84818a;
font-size: 12px;
font-family: 'InterSemiBold';
}
}
}
.date {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
max-width: 300px;
}
}
.date {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
max-width: 300px;
}
}
.middle-section {
border-left: 1px solid #e9e9e9;
padding-left: 20px;
display: flex;
max-width: 400px;
width: 100%;
.station-created {
margin-right: 40px;
}
.tags-list {
margin-bottom: 0px;
margin-left: 1px;
margin-top: 10px;
max-width: 230px;
}
}
.right-section {
width: 50%;
display: flex;
border-left: 1px solid #e9e9e9;
padding-left: 20px;
justify-content: space-between;
.station-meta {
img {
width: 14px;
margin-right: 3px;
.middle-section {
border-left: 1px solid #e9e9e9;
padding-left: 20px;
padding-right: 20px;
display: flex;
max-width: 400px;
padding-left: 20px;
padding-right: 40px;
.station-created {
margin-right: 40px;
}
.tags-list {
margin-bottom: 0px;
margin-left: 1px;
margin-top: 10px;
max-width: 230px;
}
}
.station-actions {
.right-section {
display: flex;
width: 35px;
height: 100%;
align-items: center;
.action {
border: 1px solid #ececec;
border-radius: 8px;
width: 30px;
height: 30px;
justify-content: center;
cursor: pointer;
border-left: 1px solid #e9e9e9;
padding-left: 20px;
justify-content: space-between;
flex-grow: 1;
.station-meta {
img {
width: 15px;
width: 14px;
margin-right: 3px;
}
display: none;
}
.action:hover {
opacity: 0.8;
.station-actions {
display: flex;
width: 35px;
height: 100%;
align-items: flex-start;
.action {
border: 1px solid #ececec;
border-radius: 8px;
width: 30px;
height: 30px;
justify-content: center;
background: rgba(101, 87, 255, 0.2);
cursor: pointer;
img {
width: 15px;
}
display: none;
}
.action:hover {
opacity: 0.8;
}
}
}
}
}
.station-box-container:hover {
.action {
display: flex !important;
.bottom-section {
min-height: 42px;
border-top: 1px solid rgba(101, 87, 255, 0.15);
background: rgba(101, 87, 255, 0.1);
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: 28px;
.meta-container {
display: flex;
align-items: center;
gap: 4px;
}
}
&:hover {
.action {
display: flex !important;
}
border-radius: 8px;
outline: 2px solid #6557ff;
background: #ecebff;
}
}

.check-box-station {
position: absolute;
padding: 19px;
Expand Down
18 changes: 17 additions & 1 deletion ui_src/src/services/valueConvertor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export const convertSecondsToDateObject = (seconds) => {
};
};

export const convertSecondsToDate = (seconds) => {
export const convertSecondsToDate = (seconds, short = false) => {
const days = Math.floor(seconds / 86400);
seconds -= days * 86400;
const hours = Math.floor(seconds / 3600);
Expand Down Expand Up @@ -85,6 +85,21 @@ export const convertSecondsToDate = (seconds) => {
result = `${result} and ${spliter[i]}`;
}
}
if (short) {
const replacements = [
{ search: /\bdays?\b/g, replace: 'd' },
{ search: /\bhours?\b/g, replace: 'h' },
{ search: /\bminutes?\b/g, replace: 'm' },
{ search: /\bseconds?\b/g, replace: 's' }
];
let outputString = result;
for (const replacement of replacements) {
outputString = outputString.replace(replacement.search, replacement.replace);
console.log(outputString);
}
result = outputString;
}

return result;
};

Expand All @@ -99,6 +114,7 @@ export const parsingDate = (date, withSeconds = false, withTime = true) => {
return '';
}
};

export const parsingDateWithotTime = (date) => {
if (date) {
var options = { year: 'numeric', month: 'short', day: 'numeric' };
Expand Down
11 changes: 7 additions & 4 deletions ui_static_files/build/asset-manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"files": {
"main.css": "/static/css/main.cdf5f9dd.css",
"main.js": "/static/js/main.4145eea4.js",
"main.css": "/static/css/main.fcedef38.css",
"main.js": "/static/js/main.d0b5b9c4.js",
"static/js/617.a5f8c4fc.chunk.js": "/static/js/617.a5f8c4fc.chunk.js",
"static/js/2542.27de8743.chunk.js": "/static/js/2542.27de8743.chunk.js",
"static/js/1737.e134cfd4.chunk.js": "/static/js/1737.e134cfd4.chunk.js",
Expand Down Expand Up @@ -211,6 +211,7 @@
"static/media/warningCircle.svg": "/static/media/warningCircle.35b628c068d0871aa55a59e28a393ffb.svg",
"static/media/usersIconActive.svg": "/static/media/usersIconActive.b85b8f2e28394e7e41d2d5e18774ec50.svg",
"static/media/logsActive.svg": "/static/media/logsActive.dd10b6ca576cba4444205502394b8456.svg",
"static/media/timeSchedule.svg": "/static/media/timeSchedule.564f30140af97f27cb7150d50d2a2d2e.svg",
"static/media/storage.svg": "/static/media/storage.6a918fd2ccba4582d4b45da508962d21.svg",
"static/media/grayAppUserIcon.svg": "/static/media/grayAppUserIcon.9401d63d3a38a3310942a1db6bb09bf1.svg",
"static/media/integrated.svg": "/static/media/integrated.d41f7d8e37e5b9404c9156672c0469fe.svg",
Expand Down Expand Up @@ -245,6 +246,7 @@
"static/media/versionUpgradeColor.svg": "/static/media/versionUpgradeColor.4c642366ef44734f80cce3f4ad5a51fe.svg",
"static/media/versionUpgradeGray.svg": "/static/media/versionUpgradeGray.d62075ba8f33dcb5290fba6116c4a109.svg",
"static/media/retentionIcon.svg": "/static/media/retentionIcon.1bad53366a0bc248fa647412a9b3a732.svg",
"static/media/userPerson.svg": "/static/media/userPerson.ff1d63b3458add3062c152ad9b2ba333.svg",
"static/media/remoteStorage.svg": "/static/media/remoteStorage.db23172541bec67ae83be84924574645.svg",
"static/media/requestsGray.svg": "/static/media/requestsGray.4353f2c3977ca42e61270d98cf753381.svg",
"static/media/integrationRequestIcon.svg": "/static/media/integrationRequestIcon.506de0d8af164310e144f90a3858c1cf.svg",
Expand All @@ -270,6 +272,7 @@
"static/media/redirectWhite.svg": "/static/media/redirectWhite.a7fe5174002203ec6fbbe70642f1635b.svg",
"static/media/componentIcon.svg": "/static/media/componentIcon.c7e98367f39a7a5e86d1da122feba8af.svg",
"static/media/docsLogo.svg": "/static/media/docsLogo.47318fe8ea2ef1cfe195bd21d8a3b4f5.svg",
"static/media/TimeFill.svg": "/static/media/TimeFill.bec2989f51458fe251e269295380f4ea.svg",
"static/media/addUserIcon.svg": "/static/media/addUserIcon.db68a5ce64cc9eb38d66fd25774c79c9.svg",
"static/media/overviewIcon.svg": "/static/media/overviewIcon.5a0fa6784283dc830b1c5cadf668de93.svg",
"static/media/refresh.svg": "/static/media/refresh.ba93d46f83e615f1174f50004368da8d.svg",
Expand Down Expand Up @@ -298,7 +301,7 @@
"static/media/closeNotification.svg": "/static/media/closeNotification.7551e8366682f9c6585bb1a694c4112a.svg"
},
"entrypoints": [
"static/css/main.cdf5f9dd.css",
"static/js/main.4145eea4.js"
"static/css/main.fcedef38.css",
"static/js/main.d0b5b9c4.js"
]
}
2 changes: 1 addition & 1 deletion ui_static_files/build/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Memphis.dev console is designed to simplify your work and give you a graphical user interface for controlling your stations, security, integrations, and observing your data and other vital metrics"/><link rel="manifest" href="/manifest.json"/><title>Memphis.dev Console</title><link rel="apple-touch-icon" sizes="57x57" href="/img/favicon/apple-icon-57x57.png"><link rel="apple-touch-icon" sizes="60x60" href="/img/favicon/apple-icon-60x60.png"><link rel="apple-touch-icon" sizes="72x72" href="/img/favicon/apple-icon-72x72.png"><link rel="apple-touch-icon" sizes="76x76" href="/img/favicon/apple-icon-76x76.png"><link rel="apple-touch-icon" sizes="114x114" href="/img/favicon/apple-icon-114x114.png"><link rel="apple-touch-icon" sizes="120x120" href="/img/favicon/apple-icon-120x120.png"><link rel="apple-touch-icon" sizes="144x144" href="/img/favicon/apple-icon-144x144.png"><link rel="apple-touch-icon" sizes="152x152" href="/img/favicon/apple-icon-152x152.png"><link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-icon-180x180.png"><link rel="icon" type="image/png" sizes="192x192" href="/img/favicon/android-icon-192x192.png"><link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png"><link rel="icon" type="image/png" sizes="96x96" href="/img/favicon/favicon-96x96.png"><link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png"><meta name="msapplication-TileColor" content="#ffffff"><meta name="msapplication-TileImage" content="/img/favicon/ms-icon-144x144.png"><meta name="theme-color" content="#ffffff"><script defer="defer" src="/static/js/main.4145eea4.js"></script><link href="/static/css/main.cdf5f9dd.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Memphis.dev console is designed to simplify your work and give you a graphical user interface for controlling your stations, security, integrations, and observing your data and other vital metrics"/><link rel="manifest" href="/manifest.json"/><title>Memphis.dev Console</title><link rel="apple-touch-icon" sizes="57x57" href="/img/favicon/apple-icon-57x57.png"><link rel="apple-touch-icon" sizes="60x60" href="/img/favicon/apple-icon-60x60.png"><link rel="apple-touch-icon" sizes="72x72" href="/img/favicon/apple-icon-72x72.png"><link rel="apple-touch-icon" sizes="76x76" href="/img/favicon/apple-icon-76x76.png"><link rel="apple-touch-icon" sizes="114x114" href="/img/favicon/apple-icon-114x114.png"><link rel="apple-touch-icon" sizes="120x120" href="/img/favicon/apple-icon-120x120.png"><link rel="apple-touch-icon" sizes="144x144" href="/img/favicon/apple-icon-144x144.png"><link rel="apple-touch-icon" sizes="152x152" href="/img/favicon/apple-icon-152x152.png"><link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-icon-180x180.png"><link rel="icon" type="image/png" sizes="192x192" href="/img/favicon/android-icon-192x192.png"><link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png"><link rel="icon" type="image/png" sizes="96x96" href="/img/favicon/favicon-96x96.png"><link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png"><meta name="msapplication-TileColor" content="#ffffff"><meta name="msapplication-TileImage" content="/img/favicon/ms-icon-144x144.png"><meta name="theme-color" content="#ffffff"><script defer="defer" src="/static/js/main.d0b5b9c4.js"></script><link href="/static/css/main.fcedef38.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
Loading