[Feature] Logs Page

src/app.scss

@@ -24,6 +24,7 @@
 @import 'assets/styles/pages/organizations';
 @import 'assets/styles/pages/organization';
 @import 'assets/styles/pages/auth';
+@import 'assets/styles/pages/logs';
 @import 'assets/styles/pages/config';
 @import 'assets/styles/pages/clustering';
 @import 'assets/styles/pages/resources';

src/assets/styles/components/_modal.scss

@@ -66,3 +66,22 @@
 		}
 	}
 }
+
+#log-info-modal {
+	.error,
+	.fatal {
+		color: $color-danger;
+	}
+
+	.warn {
+		color: $color-warning;
+	}
+
+	.complete,
+	.notify {
+		color: $color-success;
+	}
+	code {
+		color: initial;
+	}
+}

src/assets/styles/overrides/_akamai.scss

@@ -234,6 +234,10 @@ $partner-brand-color: #017ac6;
 		color: $color-grey !important;
 	}
 
+	.filters-header {
+		color: $color-black !important;
+	}
+
 	.modal-content {
 		background: $color-white !important;
 		color: $color-grey !important;

src/assets/styles/overrides/_dark.scss

@@ -58,6 +58,19 @@
 		background-color: $color-pureblack !important;
 		border: 1px solid $faint-white-overlay !important;
 	}
+	#logs {
+		.react-select__control {
+			background-color: $color-pureblack !important;
+		}
+
+		.react-select__single-value {
+			color: $color-white !important;
+		}
+
+		.react-select__placeholder {
+			color: $color-white !important;
+		}
+	}
 
 	input,
 	select,
@@ -189,6 +202,10 @@
 		color: $color-lightgrey !important;
 	}
 
+	.filters-header {
+		color: $color-white !important;
+	}
+
 	#replaceFile {
 		color: $color-white;
 	}
@@ -200,6 +217,10 @@
 		.modal-header {
 			background: $dark-grey-overlay !important;
 		}
+
+		code {
+			color: $color-white !important;
+		}
 	}
 
 	.auth-form-container {

src/assets/styles/overrides/_light.scss

@@ -141,6 +141,15 @@
 		}
 	}
 
+	#logs {
+		.react-select__single-value {
+			color: $color-darkgrey !important;
+		}
+
+		.react-select__placeholder {
+			color: $color-darkgrey !important;
+		}
+	}
 	input,
 	select,
 	textarea,
@@ -225,6 +234,10 @@
 		color: $color-grey !important;
 	}
 
+	.filters-header {
+		color: $color-black !important;
+	}
+
 	.modal-content {
 		background: $color-white !important;
 		color: $color-grey !important;

src/assets/styles/pages/_logs.scss

@@ -0,0 +1,98 @@
+#logs {
+	height: 100%;
+	.filters-header {
+		color: $color-white;
+		font-weight: $font-weight-bold;
+		white-space: nowrap;
+		font-size: 13px !important;
+	}
+
+	.instance-details {
+		.card-body {
+			padding-bottom: 0;
+		}
+
+		.nowrap-scroll {
+			overflow: hidden;
+			overflow-x: auto;
+			white-space: nowrap;
+		}
+	}
+
+	.react-select__control {
+		background-color: $color-white !important;
+	}
+
+	.react-select__single-value {
+		color: $color-darkgrey !important;
+	}
+
+	.react-select__placeholder {
+		color: $color-darkgrey !important;
+	}
+
+	.input-label {
+		color: $color-white;
+		font-weight: $font-weight-bold;
+		white-space: nowrap;
+		font-size: 13px !important;
+		display: block;
+	}
+
+	.item-list {
+		font-size: 0.65rem;
+		padding: 0;
+
+		.header {
+			padding: 16px 16px 8px;
+		}
+
+		hr {
+			background-color: $color-grey !important;
+		}
+
+		.item-scroller {
+			height: calc(100vh - 275px);
+			overflow: hidden auto;
+
+			&::-webkit-scrollbar {
+				width: 10px;
+			}
+
+			.item-row {
+				border-bottom: 1px solid $lightest-grey-overlay;
+				padding: 4px;
+
+				.text-nowrap {
+					overflow: hidden;
+					text-overflow: ellipsis;
+				}
+
+				.error,
+				.fatal {
+					color: $color-danger;
+				}
+
+				.warn {
+					color: $color-warning;
+				}
+
+				.complete,
+				.notify {
+					color: $color-success;
+				}
+				pre {
+					margin-bottom: 0;
+					font-size: 12px;
+				}
+			}
+		}
+	}
+
+	.configLoader {
+		height: 38px;
+		padding-top: 15px;
+		text-align: center;
+		width: 100%;
+	}
+}

src/components/instance/logs/LogRow.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Row, Col } from 'reactstrap';
+
+import isObject from '../../../functions/util/isObject';
+
+function LogsRow({ onRowClick, level, timestamp, message, tags, thread }) {
+	return (
+		<Row xs="12" md="12" className="item-row" onClick={onRowClick}>
+			<Col xs="2" md="1" className={`text-nowrap ${level?.toLowerCase()}`}>
+				{level?.toUpperCase() || 'UNKNOWN'}
+			</Col>
+			<Col xs="2" md="2" lg="1">
+				{new Date(timestamp || null).toLocaleDateString()}
+			</Col>
+			<Col xs="2" md="2" lg="1">
+				{new Date(timestamp || null).toLocaleTimeString()}
+			</Col>
+			<Col xs="2" md="1" lg="1">
+				{thread}
+			</Col>
+			<Col xs="2" md="2" lg="1">
+				{tags?.join(', ')}
+			</Col>
+			<Col xs="2" md="4" lg="7">
+				{isObject(message) && message.error ? (
+					message.error
+				) : (
+					<pre>
+						<code>{message}</code>
+					</pre>
+				)}
+			</Col>
+		</Row>
+	);
+}
+
+export default LogsRow;