Merge branch 'master' into Implementation_Redirect_the_user_to_the_wizard_page#3430
This commit is contained in:
David Bejanyan
GitHub
commit
313b22c677
33 changed files with 464 additions and 163 deletions
11
.github/ISSUE_TEMPLATE/config.yml
vendored
Normal file
11
.github/ISSUE_TEMPLATE/config.yml
vendored
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
blank_issues_enabled: false
|
||||
contact_links:
|
||||
- name: Official documentation
|
||||
url: https://docs.kafka-ui.provectus.io/
|
||||
about: Before reaching out for support, please refer to our documentation. Read "FAQ" and "Common problems", also try using search there.
|
||||
- name: Community Discord
|
||||
url: https://discord.gg/4DWzD7pGE5
|
||||
about: Chat with other users, get some support or ask questions.
|
||||
- name: GitHub Discussions
|
||||
url: https://github.com/provectus/kafka-ui/discussions
|
||||
about: An alternative place to ask questions or to get some support.
|
||||
16
.github/ISSUE_TEMPLATE/question.md
vendored
16
.github/ISSUE_TEMPLATE/question.md
vendored
|
|
@ -1,16 +0,0 @@
|
|||
---
|
||||
name: "❓ Question"
|
||||
about: Ask a question
|
||||
title: ''
|
||||
|
||||
---
|
||||
|
||||
<!--
|
||||
|
||||
To ask a question, please either:
|
||||
1. Open up a discussion (https://github.com/provectus/kafka-ui/discussions)
|
||||
2. Join us on discord (https://discord.gg/4DWzD7pGE5) and ask there.
|
||||
|
||||
Don't forget to check/search for existing issues/discussions.
|
||||
|
||||
-->
|
||||
|
|
@ -6,8 +6,9 @@ Following versions of the project are currently being supported with security up
|
|||
|
||||
| Version | Supported |
|
||||
| ------- | ------------------ |
|
||||
| 0.5.x | :white_check_mark: |
|
||||
| 0.4.x | :x: |
|
||||
| 0.6.x | :white_check_mark: |
|
||||
| 0.5.x | :x: |
|
||||
| 0.4.x | :x: |
|
||||
| 0.3.x | :x: |
|
||||
| 0.2.x | :x: |
|
||||
| 0.1.x | :x: |
|
||||
|
|
|
|||
|
|
@ -27,6 +27,8 @@ public class ClustersProperties {
|
|||
|
||||
String internalTopicPrefix;
|
||||
|
||||
Integer adminClientTimeout;
|
||||
|
||||
PollingProperties polling = new PollingProperties();
|
||||
|
||||
@Data
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import java.util.Map;
|
|||
import lombok.AllArgsConstructor;
|
||||
import org.openapitools.jackson.nullable.JsonNullableModule;
|
||||
import org.springframework.beans.factory.ObjectProvider;
|
||||
import org.springframework.beans.factory.annotation.Value;
|
||||
import org.springframework.boot.autoconfigure.web.ServerProperties;
|
||||
import org.springframework.boot.autoconfigure.web.reactive.WebFluxProperties;
|
||||
import org.springframework.context.ApplicationContext;
|
||||
|
|
@ -15,8 +14,6 @@ import org.springframework.http.server.reactive.ContextPathCompositeHandler;
|
|||
import org.springframework.http.server.reactive.HttpHandler;
|
||||
import org.springframework.jmx.export.MBeanExporter;
|
||||
import org.springframework.util.StringUtils;
|
||||
import org.springframework.util.unit.DataSize;
|
||||
import org.springframework.web.reactive.function.client.WebClient;
|
||||
import org.springframework.web.server.adapter.WebHttpHandlerBuilder;
|
||||
|
||||
@Configuration
|
||||
|
|
@ -52,14 +49,7 @@ public class Config {
|
|||
}
|
||||
|
||||
@Bean
|
||||
public WebClient webClient(
|
||||
@Value("${webclient.max-in-memory-buffer-size:20MB}") DataSize maxBuffSize) {
|
||||
return WebClient.builder()
|
||||
.codecs(c -> c.defaultCodecs().maxInMemorySize((int) maxBuffSize.toBytes()))
|
||||
.build();
|
||||
}
|
||||
|
||||
@Bean
|
||||
// will be used by webflux json mapping
|
||||
public JsonNullableModule jsonNullableModule() {
|
||||
return new JsonNullableModule();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
package com.provectus.kafka.ui.config;
|
||||
|
||||
import com.provectus.kafka.ui.exception.ValidationException;
|
||||
import java.beans.Transient;
|
||||
import javax.annotation.PostConstruct;
|
||||
import lombok.Data;
|
||||
import org.springframework.boot.context.properties.ConfigurationProperties;
|
||||
import org.springframework.context.annotation.Configuration;
|
||||
import org.springframework.util.unit.DataSize;
|
||||
|
||||
@Configuration
|
||||
@ConfigurationProperties("webclient")
|
||||
@Data
|
||||
public class WebclientProperties {
|
||||
|
||||
String maxInMemoryBufferSize;
|
||||
|
||||
@PostConstruct
|
||||
public void validate() {
|
||||
validateAndSetDefaultBufferSize();
|
||||
}
|
||||
|
||||
private void validateAndSetDefaultBufferSize() {
|
||||
if (maxInMemoryBufferSize != null) {
|
||||
try {
|
||||
DataSize.parse(maxInMemoryBufferSize);
|
||||
} catch (Exception e) {
|
||||
throw new ValidationException("Invalid format for webclient.maxInMemoryBufferSize");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,33 +1,36 @@
|
|||
package com.provectus.kafka.ui.service;
|
||||
|
||||
import com.provectus.kafka.ui.config.ClustersProperties;
|
||||
import com.provectus.kafka.ui.model.KafkaCluster;
|
||||
import com.provectus.kafka.ui.util.SslPropertiesUtil;
|
||||
import java.io.Closeable;
|
||||
import java.time.Instant;
|
||||
import java.util.Map;
|
||||
import java.util.Optional;
|
||||
import java.util.Properties;
|
||||
import java.util.concurrent.ConcurrentHashMap;
|
||||
import java.util.concurrent.atomic.AtomicLong;
|
||||
import lombok.RequiredArgsConstructor;
|
||||
import lombok.Setter;
|
||||
import lombok.extern.slf4j.Slf4j;
|
||||
import org.apache.kafka.clients.admin.AdminClient;
|
||||
import org.apache.kafka.clients.admin.AdminClientConfig;
|
||||
import org.springframework.beans.factory.annotation.Value;
|
||||
import org.springframework.stereotype.Service;
|
||||
import reactor.core.publisher.Mono;
|
||||
|
||||
@Service
|
||||
@RequiredArgsConstructor
|
||||
@Slf4j
|
||||
public class AdminClientServiceImpl implements AdminClientService, Closeable {
|
||||
|
||||
private static final int DEFAULT_CLIENT_TIMEOUT_MS = 30_000;
|
||||
|
||||
private static final AtomicLong CLIENT_ID_SEQ = new AtomicLong();
|
||||
|
||||
private final Map<String, ReactiveAdminClient> adminClientCache = new ConcurrentHashMap<>();
|
||||
@Setter // used in tests
|
||||
@Value("${kafka.admin-client-timeout:30000}")
|
||||
private int clientTimeout;
|
||||
private final int clientTimeout;
|
||||
|
||||
public AdminClientServiceImpl(ClustersProperties clustersProperties) {
|
||||
this.clientTimeout = Optional.ofNullable(clustersProperties.getAdminClientTimeout())
|
||||
.orElse(DEFAULT_CLIENT_TIMEOUT_MS);
|
||||
}
|
||||
|
||||
@Override
|
||||
public Mono<ReactiveAdminClient> get(KafkaCluster cluster) {
|
||||
|
|
@ -42,7 +45,7 @@ public class AdminClientServiceImpl implements AdminClientService, Closeable {
|
|||
SslPropertiesUtil.addKafkaSslProperties(cluster.getOriginalProperties().getSsl(), properties);
|
||||
properties.putAll(cluster.getProperties());
|
||||
properties.put(AdminClientConfig.BOOTSTRAP_SERVERS_CONFIG, cluster.getBootstrapServers());
|
||||
properties.put(AdminClientConfig.REQUEST_TIMEOUT_MS_CONFIG, clientTimeout);
|
||||
properties.putIfAbsent(AdminClientConfig.REQUEST_TIMEOUT_MS_CONFIG, clientTimeout);
|
||||
properties.putIfAbsent(
|
||||
AdminClientConfig.CLIENT_ID_CONFIG,
|
||||
"kafka-ui-admin-" + Instant.now().getEpochSecond() + "-" + CLIENT_ID_SEQ.incrementAndGet()
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ package com.provectus.kafka.ui.service;
|
|||
|
||||
import com.provectus.kafka.ui.client.RetryingKafkaConnectClient;
|
||||
import com.provectus.kafka.ui.config.ClustersProperties;
|
||||
import com.provectus.kafka.ui.config.WebclientProperties;
|
||||
import com.provectus.kafka.ui.connect.api.KafkaConnectClientApi;
|
||||
import com.provectus.kafka.ui.emitter.PollingSettings;
|
||||
import com.provectus.kafka.ui.model.ApplicationPropertyValidationDTO;
|
||||
|
|
@ -22,9 +23,7 @@ import java.util.Optional;
|
|||
import java.util.Properties;
|
||||
import java.util.stream.Stream;
|
||||
import javax.annotation.Nullable;
|
||||
import lombok.RequiredArgsConstructor;
|
||||
import lombok.extern.slf4j.Slf4j;
|
||||
import org.springframework.beans.factory.annotation.Value;
|
||||
import org.springframework.stereotype.Service;
|
||||
import org.springframework.util.unit.DataSize;
|
||||
import org.springframework.web.reactive.function.client.WebClient;
|
||||
|
|
@ -34,12 +33,18 @@ import reactor.util.function.Tuple2;
|
|||
import reactor.util.function.Tuples;
|
||||
|
||||
@Service
|
||||
@RequiredArgsConstructor
|
||||
@Slf4j
|
||||
public class KafkaClusterFactory {
|
||||
|
||||
@Value("${webclient.max-in-memory-buffer-size:20MB}")
|
||||
private DataSize maxBuffSize;
|
||||
private static final DataSize DEFAULT_WEBCLIENT_BUFFER = DataSize.parse("20MB");
|
||||
|
||||
private final DataSize webClientMaxBuffSize;
|
||||
|
||||
public KafkaClusterFactory(WebclientProperties webclientProperties) {
|
||||
this.webClientMaxBuffSize = Optional.ofNullable(webclientProperties.getMaxInMemoryBufferSize())
|
||||
.map(DataSize::parse)
|
||||
.orElse(DEFAULT_WEBCLIENT_BUFFER);
|
||||
}
|
||||
|
||||
public KafkaCluster create(ClustersProperties properties,
|
||||
ClustersProperties.Cluster clusterProperties) {
|
||||
|
|
@ -140,7 +145,7 @@ public class KafkaClusterFactory {
|
|||
url -> new RetryingKafkaConnectClient(
|
||||
connectCluster.toBuilder().address(url).build(),
|
||||
cluster.getSsl(),
|
||||
maxBuffSize
|
||||
webClientMaxBuffSize
|
||||
),
|
||||
ReactiveFailover.CONNECTION_REFUSED_EXCEPTION_FILTER,
|
||||
"No alive connect instances available",
|
||||
|
|
@ -158,7 +163,7 @@ public class KafkaClusterFactory {
|
|||
WebClient webClient = new WebClientConfigurator()
|
||||
.configureSsl(clusterProperties.getSsl(), clusterProperties.getSchemaRegistrySsl())
|
||||
.configureBasicAuth(auth.getUsername(), auth.getPassword())
|
||||
.configureBufferSize(maxBuffSize)
|
||||
.configureBufferSize(webClientMaxBuffSize)
|
||||
.build();
|
||||
return ReactiveFailover.create(
|
||||
parseUrlList(clusterProperties.getSchemaRegistry()),
|
||||
|
|
@ -181,7 +186,7 @@ public class KafkaClusterFactory {
|
|||
clusterProperties.getKsqldbServerAuth(),
|
||||
clusterProperties.getSsl(),
|
||||
clusterProperties.getKsqldbServerSsl(),
|
||||
maxBuffSize
|
||||
webClientMaxBuffSize
|
||||
),
|
||||
ReactiveFailover.CONNECTION_REFUSED_EXCEPTION_FILTER,
|
||||
"No live ksqldb instances available",
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ package com.provectus.kafka.ui.util;
|
|||
|
||||
|
||||
import com.provectus.kafka.ui.config.ClustersProperties;
|
||||
import com.provectus.kafka.ui.config.WebclientProperties;
|
||||
import com.provectus.kafka.ui.config.auth.OAuthProperties;
|
||||
import com.provectus.kafka.ui.config.auth.RoleBasedAccessControlProperties;
|
||||
import com.provectus.kafka.ui.exception.FileUploadException;
|
||||
|
|
@ -97,6 +98,7 @@ public class DynamicConfigOperations {
|
|||
.type(ctx.getEnvironment().getProperty("auth.type"))
|
||||
.oauth2(getNullableBean(OAuthProperties.class))
|
||||
.build())
|
||||
.webclient(getNullableBean(WebclientProperties.class))
|
||||
.build();
|
||||
}
|
||||
|
||||
|
|
@ -204,6 +206,7 @@ public class DynamicConfigOperations {
|
|||
private ClustersProperties kafka;
|
||||
private RoleBasedAccessControlProperties rbac;
|
||||
private Auth auth;
|
||||
private WebclientProperties webclient;
|
||||
|
||||
@Data
|
||||
@Builder
|
||||
|
|
@ -222,6 +225,9 @@ public class DynamicConfigOperations {
|
|||
Optional.ofNullable(auth)
|
||||
.flatMap(a -> Optional.ofNullable(a.oauth2))
|
||||
.ifPresent(OAuthProperties::validate);
|
||||
|
||||
Optional.ofNullable(webclient)
|
||||
.ifPresent(WebclientProperties::validate);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3467,6 +3467,12 @@ components:
|
|||
type: array
|
||||
items:
|
||||
$ref: '#/components/schemas/Action'
|
||||
webclient:
|
||||
type: object
|
||||
properties:
|
||||
maxInMemoryBufferSize:
|
||||
type: string
|
||||
description: "examples: 20, 12KB, 5MB"
|
||||
kafka:
|
||||
type: object
|
||||
properties:
|
||||
|
|
@ -3479,6 +3485,10 @@ components:
|
|||
type: integer
|
||||
noDataEmptyPolls:
|
||||
type: integer
|
||||
adminClientTimeout:
|
||||
type: integer
|
||||
internalTopicPrefix:
|
||||
type: string
|
||||
clusters:
|
||||
type: array
|
||||
items:
|
||||
|
|
|
|||
|
|
@ -37,9 +37,13 @@ public abstract class BasePage extends WebUtils {
|
|||
protected String pageTitleFromHeader = "//h1[text()='%s']";
|
||||
protected String pagePathFromHeader = "//a[text()='%s']/../h1";
|
||||
|
||||
protected boolean isSpinnerVisible(int... timeoutInSeconds) {
|
||||
return isVisible(loadingSpinner, timeoutInSeconds);
|
||||
}
|
||||
|
||||
protected void waitUntilSpinnerDisappear(int... timeoutInSeconds) {
|
||||
log.debug("\nwaitUntilSpinnerDisappear");
|
||||
if (isVisible(loadingSpinner, timeoutInSeconds)) {
|
||||
if (isSpinnerVisible(timeoutInSeconds)) {
|
||||
loadingSpinner.shouldBe(Condition.disappear, Duration.ofSeconds(60));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
package com.provectus.kafka.ui.pages.ksqldb;
|
||||
|
||||
import static com.codeborne.selenide.Condition.visible;
|
||||
import static com.codeborne.selenide.Selenide.$;
|
||||
import static com.codeborne.selenide.Selenide.$x;
|
||||
import static com.provectus.kafka.ui.pages.panels.enums.MenuItem.KSQL_DB;
|
||||
|
|
@ -10,12 +11,12 @@ import com.codeborne.selenide.SelenideElement;
|
|||
import com.provectus.kafka.ui.pages.BasePage;
|
||||
import com.provectus.kafka.ui.pages.ksqldb.enums.KsqlMenuTabs;
|
||||
import io.qameta.allure.Step;
|
||||
import java.time.Duration;
|
||||
import java.util.ArrayList;
|
||||
import java.util.List;
|
||||
import org.openqa.selenium.By;
|
||||
|
||||
public class KsqlDbList extends BasePage {
|
||||
|
||||
protected SelenideElement executeKsqlBtn = $x("//button[text()='Execute KSQL Request']");
|
||||
protected SelenideElement tablesTab = $x("//nav[@role='navigation']/a[text()='Tables']");
|
||||
protected SelenideElement streamsTab = $x("//nav[@role='navigation']/a[text()='Streams']");
|
||||
|
|
@ -76,9 +77,24 @@ public class KsqlDbList extends BasePage {
|
|||
this.element = element;
|
||||
}
|
||||
|
||||
private SelenideElement getNameElm() {
|
||||
return element.$x("./td[1]");
|
||||
}
|
||||
|
||||
@Step
|
||||
public String getTableName() {
|
||||
return element.$x("./td[1]").getText().trim();
|
||||
return getNameElm().getText().trim();
|
||||
}
|
||||
|
||||
@Step
|
||||
public boolean isVisible() {
|
||||
boolean isVisible = false;
|
||||
try {
|
||||
getNameElm().shouldBe(visible, Duration.ofMillis(500));
|
||||
isVisible = true;
|
||||
} catch (Throwable ignored) {
|
||||
}
|
||||
return isVisible;
|
||||
}
|
||||
|
||||
@Step
|
||||
|
|
@ -110,9 +126,24 @@ public class KsqlDbList extends BasePage {
|
|||
this.element = element;
|
||||
}
|
||||
|
||||
private SelenideElement getNameElm() {
|
||||
return element.$x("./td[1]");
|
||||
}
|
||||
|
||||
@Step
|
||||
public String getStreamName() {
|
||||
return element.$x("./td[1]").getText().trim();
|
||||
return getNameElm().getText().trim();
|
||||
}
|
||||
|
||||
@Step
|
||||
public boolean isVisible() {
|
||||
boolean isVisible = false;
|
||||
try {
|
||||
getNameElm().shouldBe(visible, Duration.ofMillis(500));
|
||||
isVisible = true;
|
||||
} catch (Throwable ignored) {
|
||||
}
|
||||
return isVisible;
|
||||
}
|
||||
|
||||
@Step
|
||||
|
|
|
|||
|
|
@ -40,9 +40,14 @@ public class KsqlQueryForm extends BasePage {
|
|||
}
|
||||
|
||||
@Step
|
||||
public KsqlQueryForm clickExecuteBtn() {
|
||||
public String getEnteredQuery() {
|
||||
return queryAreaValue.getText().trim();
|
||||
}
|
||||
|
||||
@Step
|
||||
public KsqlQueryForm clickExecuteBtn(String query) {
|
||||
clickByActions(executeBtn);
|
||||
if (queryAreaValue.getText().contains("EMIT CHANGES;")) {
|
||||
if (query.contains("EMIT CHANGES")) {
|
||||
loadingSpinner.shouldBe(Condition.visible);
|
||||
} else {
|
||||
waitUntilSpinnerDisappear();
|
||||
|
|
@ -66,19 +71,19 @@ public class KsqlQueryForm extends BasePage {
|
|||
|
||||
@Step
|
||||
public KsqlQueryForm clickAddStreamProperty() {
|
||||
clickByJavaScript(addStreamPropertyBtn);
|
||||
clickByActions(addStreamPropertyBtn);
|
||||
return this;
|
||||
}
|
||||
|
||||
@Step
|
||||
public KsqlQueryForm setQuery(String query) {
|
||||
queryAreaValue.shouldBe(Condition.visible).click();
|
||||
queryArea.setValue(query);
|
||||
sendKeysByActions(queryArea, query);
|
||||
return this;
|
||||
}
|
||||
|
||||
@Step
|
||||
public KsqlQueryForm.KsqlResponseGridItem getTableByName(String name) {
|
||||
public KsqlQueryForm.KsqlResponseGridItem getItemByName(String name) {
|
||||
return initItems().stream()
|
||||
.filter(e -> e.getName().equalsIgnoreCase(name))
|
||||
.findFirst().orElseThrow();
|
||||
|
|
@ -114,16 +119,20 @@ public class KsqlQueryForm extends BasePage {
|
|||
return element.$x("./td[1]").getText().trim();
|
||||
}
|
||||
|
||||
private SelenideElement getNameElm() {
|
||||
return element.$x("./td[2]");
|
||||
}
|
||||
|
||||
@Step
|
||||
public String getName() {
|
||||
return element.$x("./td[2]").scrollTo().getText().trim();
|
||||
return getNameElm().scrollTo().getText().trim();
|
||||
}
|
||||
|
||||
@Step
|
||||
public boolean isVisible() {
|
||||
boolean isVisible = false;
|
||||
try {
|
||||
element.$x("./td[2]").shouldBe(visible, Duration.ofMillis(500));
|
||||
getNameElm().shouldBe(visible, Duration.ofMillis(500));
|
||||
isVisible = true;
|
||||
} catch (Throwable ignored) {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -95,7 +95,7 @@ public class WebUtils {
|
|||
return isSelected;
|
||||
}
|
||||
|
||||
public static boolean selectElement(SelenideElement element, boolean select) {
|
||||
public static void selectElement(SelenideElement element, boolean select) {
|
||||
if (select) {
|
||||
if (!element.isSelected()) {
|
||||
clickByJavaScript(element);
|
||||
|
|
@ -105,6 +105,5 @@ public class WebUtils {
|
|||
clickByJavaScript(element);
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,57 +22,50 @@ public class SmokeBacklog extends BaseManualTest {
|
|||
|
||||
@Automation(state = TO_BE_AUTOMATED)
|
||||
@Suite(id = KSQL_DB_SUITE_ID)
|
||||
@QaseId(276)
|
||||
@QaseId(277)
|
||||
@Test
|
||||
public void testCaseB() {
|
||||
}
|
||||
|
||||
@Automation(state = TO_BE_AUTOMATED)
|
||||
@Suite(id = KSQL_DB_SUITE_ID)
|
||||
@QaseId(277)
|
||||
@QaseId(278)
|
||||
@Test
|
||||
public void testCaseC() {
|
||||
}
|
||||
|
||||
@Automation(state = TO_BE_AUTOMATED)
|
||||
@Suite(id = KSQL_DB_SUITE_ID)
|
||||
@QaseId(278)
|
||||
@Test
|
||||
public void testCaseD() {
|
||||
}
|
||||
|
||||
@Automation(state = TO_BE_AUTOMATED)
|
||||
@Suite(id = KSQL_DB_SUITE_ID)
|
||||
@QaseId(284)
|
||||
@Test
|
||||
public void testCaseE() {
|
||||
public void testCaseD() {
|
||||
}
|
||||
|
||||
@Automation(state = TO_BE_AUTOMATED)
|
||||
@Suite(id = BROKERS_SUITE_ID)
|
||||
@QaseId(331)
|
||||
@Test
|
||||
public void testCaseF() {
|
||||
public void testCaseE() {
|
||||
}
|
||||
|
||||
@Automation(state = TO_BE_AUTOMATED)
|
||||
@Suite(id = BROKERS_SUITE_ID)
|
||||
@QaseId(332)
|
||||
@Test
|
||||
public void testCaseG() {
|
||||
public void testCaseF() {
|
||||
}
|
||||
|
||||
@Automation(state = TO_BE_AUTOMATED)
|
||||
@Suite(id = TOPICS_PROFILE_SUITE_ID)
|
||||
@QaseId(335)
|
||||
@Test
|
||||
public void testCaseH() {
|
||||
public void testCaseG() {
|
||||
}
|
||||
|
||||
@Automation(state = TO_BE_AUTOMATED)
|
||||
@Suite(id = TOPICS_PROFILE_SUITE_ID)
|
||||
@QaseId(336)
|
||||
@Test
|
||||
public void testCaseI() {
|
||||
public void testCaseH() {
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,17 @@
|
|||
package com.provectus.kafka.ui.smokesuite.ksqldb;
|
||||
|
||||
import static com.provectus.kafka.ui.pages.ksqldb.enums.KsqlQueryConfig.SHOW_TABLES;
|
||||
import static com.provectus.kafka.ui.pages.panels.enums.MenuItem.KSQL_DB;
|
||||
import static org.apache.commons.lang3.RandomStringUtils.randomAlphabetic;
|
||||
|
||||
import com.provectus.kafka.ui.BaseTest;
|
||||
import com.provectus.kafka.ui.pages.ksqldb.models.Stream;
|
||||
import com.provectus.kafka.ui.pages.ksqldb.models.Table;
|
||||
import io.qameta.allure.Step;
|
||||
import io.qase.api.annotation.QaseId;
|
||||
import java.util.ArrayList;
|
||||
import java.util.List;
|
||||
import org.testng.Assert;
|
||||
import org.testng.annotations.AfterClass;
|
||||
import org.testng.annotations.BeforeClass;
|
||||
import org.testng.annotations.Test;
|
||||
|
|
@ -16,53 +19,30 @@ import org.testng.asserts.SoftAssert;
|
|||
|
||||
public class KsqlDbTest extends BaseTest {
|
||||
|
||||
private static final Stream STREAM_FOR_CHECK_TABLES = new Stream()
|
||||
.setName("STREAM_FOR_CHECK_TABLES_" + randomAlphabetic(4).toUpperCase())
|
||||
.setTopicName("TOPIC_FOR_STREAM_" + randomAlphabetic(4).toUpperCase());
|
||||
private static final Stream DEFAULT_STREAM = new Stream()
|
||||
.setName("DEFAULT_STREAM_" + randomAlphabetic(4).toUpperCase())
|
||||
.setTopicName("DEFAULT_TOPIC_" + randomAlphabetic(4).toUpperCase());
|
||||
private static final Table FIRST_TABLE = new Table()
|
||||
.setName("FIRST_TABLE" + randomAlphabetic(4).toUpperCase())
|
||||
.setStreamName(STREAM_FOR_CHECK_TABLES.getName());
|
||||
.setName("FIRST_TABLE_" + randomAlphabetic(4).toUpperCase())
|
||||
.setStreamName(DEFAULT_STREAM.getName());
|
||||
private static final Table SECOND_TABLE = new Table()
|
||||
.setName("SECOND_TABLE" + randomAlphabetic(4).toUpperCase())
|
||||
.setStreamName(STREAM_FOR_CHECK_TABLES.getName());
|
||||
.setName("SECOND_TABLE_" + randomAlphabetic(4).toUpperCase())
|
||||
.setStreamName(DEFAULT_STREAM.getName());
|
||||
private static final List<String> TOPIC_NAMES_LIST = new ArrayList<>();
|
||||
|
||||
@BeforeClass(alwaysRun = true)
|
||||
public void beforeClass() {
|
||||
apiService
|
||||
.createStream(STREAM_FOR_CHECK_TABLES)
|
||||
.createStream(DEFAULT_STREAM)
|
||||
.createTables(FIRST_TABLE, SECOND_TABLE);
|
||||
TOPIC_NAMES_LIST.addAll(List.of(STREAM_FOR_CHECK_TABLES.getTopicName(),
|
||||
TOPIC_NAMES_LIST.addAll(List.of(DEFAULT_STREAM.getTopicName(),
|
||||
FIRST_TABLE.getName(), SECOND_TABLE.getName()));
|
||||
}
|
||||
|
||||
@QaseId(41)
|
||||
@Test(priority = 1)
|
||||
public void checkShowTablesRequestExecution() {
|
||||
navigateToKsqlDb();
|
||||
ksqlDbList
|
||||
.clickExecuteKsqlRequestBtn();
|
||||
ksqlQueryForm
|
||||
.waitUntilScreenReady()
|
||||
.setQuery(SHOW_TABLES.getQuery())
|
||||
.clickExecuteBtn();
|
||||
SoftAssert softly = new SoftAssert();
|
||||
softly.assertTrue(ksqlQueryForm.areResultsVisible(), "areResultsVisible()");
|
||||
softly.assertTrue(ksqlQueryForm.getTableByName(FIRST_TABLE.getName()).isVisible(), "getTableName()");
|
||||
softly.assertTrue(ksqlQueryForm.getTableByName(SECOND_TABLE.getName()).isVisible(), "getTableName()");
|
||||
softly.assertAll();
|
||||
}
|
||||
|
||||
@QaseId(86)
|
||||
@Test(priority = 2)
|
||||
@Test(priority = 1)
|
||||
public void clearResultsForExecutedRequest() {
|
||||
navigateToKsqlDb();
|
||||
ksqlDbList
|
||||
.clickExecuteKsqlRequestBtn();
|
||||
ksqlQueryForm
|
||||
.waitUntilScreenReady()
|
||||
.setQuery(SHOW_TABLES.getQuery())
|
||||
.clickExecuteBtn();
|
||||
navigateToKsqlDbAndExecuteRequest(SHOW_TABLES.getQuery());
|
||||
SoftAssert softly = new SoftAssert();
|
||||
softly.assertTrue(ksqlQueryForm.areResultsVisible(), "areResultsVisible()");
|
||||
softly.assertAll();
|
||||
|
|
@ -72,6 +52,40 @@ public class KsqlDbTest extends BaseTest {
|
|||
softly.assertAll();
|
||||
}
|
||||
|
||||
@QaseId(276)
|
||||
@Test(priority = 2)
|
||||
public void clearEnteredQueryCheck() {
|
||||
navigateToKsqlDbAndExecuteRequest(SHOW_TABLES.getQuery());
|
||||
Assert.assertFalse(ksqlQueryForm.getEnteredQuery().isEmpty(), "getEnteredQuery()");
|
||||
ksqlQueryForm
|
||||
.clickClearBtn();
|
||||
Assert.assertTrue(ksqlQueryForm.getEnteredQuery().isEmpty(), "getEnteredQuery()");
|
||||
}
|
||||
|
||||
@QaseId(41)
|
||||
@Test(priority = 3)
|
||||
public void checkShowTablesRequestExecution() {
|
||||
navigateToKsqlDbAndExecuteRequest(SHOW_TABLES.getQuery());
|
||||
SoftAssert softly = new SoftAssert();
|
||||
softly.assertTrue(ksqlQueryForm.areResultsVisible(), "areResultsVisible()");
|
||||
softly.assertTrue(ksqlQueryForm.getItemByName(FIRST_TABLE.getName()).isVisible(), "getItemByName()");
|
||||
softly.assertTrue(ksqlQueryForm.getItemByName(SECOND_TABLE.getName()).isVisible(), "getItemByName()");
|
||||
softly.assertAll();
|
||||
}
|
||||
|
||||
@Step
|
||||
private void navigateToKsqlDbAndExecuteRequest(String query) {
|
||||
naviSideBar
|
||||
.openSideMenu(KSQL_DB);
|
||||
ksqlDbList
|
||||
.waitUntilScreenReady()
|
||||
.clickExecuteKsqlRequestBtn();
|
||||
ksqlQueryForm
|
||||
.waitUntilScreenReady()
|
||||
.setQuery(query)
|
||||
.clickExecuteBtn(query);
|
||||
}
|
||||
|
||||
@AfterClass(alwaysRun = true)
|
||||
public void afterClass() {
|
||||
TOPIC_NAMES_LIST.forEach(topicName -> apiService.deleteTopic(topicName));
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ import static org.apache.commons.lang3.RandomStringUtils.randomAlphabetic;
|
|||
|
||||
import com.provectus.kafka.ui.BaseTest;
|
||||
import com.provectus.kafka.ui.models.Topic;
|
||||
import com.provectus.kafka.ui.pages.topics.TopicDetails;
|
||||
import io.qameta.allure.Issue;
|
||||
import io.qameta.allure.Step;
|
||||
import io.qase.api.annotation.QaseId;
|
||||
|
|
@ -140,24 +139,22 @@ public class MessagesTest extends BaseTest {
|
|||
softly.assertAll();
|
||||
}
|
||||
|
||||
@Ignore
|
||||
@Issue("https://github.com/provectus/kafka-ui/issues/2394")
|
||||
@QaseId(15)
|
||||
@Test(priority = 6)
|
||||
public void checkMessageFilteringByOffset() {
|
||||
navigateToTopicsAndOpenDetails(TOPIC_FOR_CHECK_FILTERS.getName());
|
||||
topicDetails
|
||||
.openDetailsTab(MESSAGES);
|
||||
TopicDetails.MessageGridItem secondMessage = topicDetails.getMessageByOffset(1);
|
||||
int nextOffset = topicDetails
|
||||
.openDetailsTab(MESSAGES)
|
||||
.getAllMessages().stream()
|
||||
.findFirst().orElseThrow().getOffset() + 1;
|
||||
topicDetails
|
||||
.selectSeekTypeDdlMessagesTab("Offset")
|
||||
.setSeekTypeValueFldMessagesTab(String.valueOf(secondMessage.getOffset()))
|
||||
.setSeekTypeValueFldMessagesTab(String.valueOf(nextOffset))
|
||||
.clickSubmitFiltersBtnMessagesTab();
|
||||
SoftAssert softly = new SoftAssert();
|
||||
topicDetails.getAllMessages().forEach(message ->
|
||||
softly.assertTrue(message.getOffset() == secondMessage.getOffset()
|
||||
|| message.getOffset() > secondMessage.getOffset(),
|
||||
String.format("Expected offset is: %s, but found: %s", secondMessage.getOffset(), message.getOffset())));
|
||||
softly.assertTrue(message.getOffset() >= nextOffset,
|
||||
String.format("Expected offset not less: %s, but found: %s", nextOffset, message.getOffset())));
|
||||
softly.assertAll();
|
||||
}
|
||||
|
||||
|
|
@ -168,13 +165,11 @@ public class MessagesTest extends BaseTest {
|
|||
@Test(priority = 7)
|
||||
public void checkMessageFilteringByTimestamp() {
|
||||
navigateToTopicsAndOpenDetails(TOPIC_FOR_CHECK_FILTERS.getName());
|
||||
topicDetails
|
||||
.openDetailsTab(MESSAGES);
|
||||
LocalDateTime firstTimestamp = topicDetails.getMessageByOffset(0).getTimestamp();
|
||||
List<TopicDetails.MessageGridItem> nextMessages = topicDetails.getAllMessages().stream()
|
||||
LocalDateTime firstTimestamp = topicDetails
|
||||
.openDetailsTab(MESSAGES)
|
||||
.getMessageByOffset(0).getTimestamp();
|
||||
LocalDateTime nextTimestamp = topicDetails.getAllMessages().stream()
|
||||
.filter(message -> message.getTimestamp().getMinute() != firstTimestamp.getMinute())
|
||||
.toList();
|
||||
LocalDateTime nextTimestamp = nextMessages.stream()
|
||||
.findFirst().orElseThrow().getTimestamp();
|
||||
topicDetails
|
||||
.selectSeekTypeDdlMessagesTab("Timestamp")
|
||||
|
|
@ -183,8 +178,7 @@ public class MessagesTest extends BaseTest {
|
|||
.clickSubmitFiltersBtnMessagesTab();
|
||||
SoftAssert softly = new SoftAssert();
|
||||
topicDetails.getAllMessages().forEach(message ->
|
||||
softly.assertTrue(message.getTimestamp().isEqual(nextTimestamp)
|
||||
|| message.getTimestamp().isAfter(nextTimestamp),
|
||||
softly.assertFalse(message.getTimestamp().isBefore(nextTimestamp),
|
||||
String.format("Expected that %s is not before %s.", message.getTimestamp(), nextTimestamp)));
|
||||
softly.assertAll();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!DOCTYPE suite SYSTEM "https://testng.org/testng-1.0.dtd">
|
||||
<suite name="RegressionSuite">
|
||||
<test name="RegressionTest" enabled="true" parallel="classes" thread-count="3">
|
||||
<test name="RegressionTest" enabled="true" parallel="classes" thread-count="2">
|
||||
<packages>
|
||||
<package name="com.provectus.kafka.ui.smokesuite.*"/>
|
||||
<package name="com.provectus.kafka.ui.sanitysuite.*"/>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!DOCTYPE suite SYSTEM "https://testng.org/testng-1.0.dtd">
|
||||
<suite name="SanitySuite">
|
||||
<test name="SanityTest" enabled="true" parallel="classes" thread-count="3">
|
||||
<test name="SanityTest" enabled="true" parallel="classes" thread-count="2">
|
||||
<packages>
|
||||
<package name="com.provectus.kafka.ui.sanitysuite.*"/>
|
||||
</packages>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!DOCTYPE suite SYSTEM "https://testng.org/testng-1.0.dtd">
|
||||
<suite name="SmokeSuite">
|
||||
<test name="SmokeTest" enabled="true" parallel="classes" thread-count="3">
|
||||
<test name="SmokeTest" enabled="true" parallel="classes" thread-count="2">
|
||||
<packages>
|
||||
<package name="com.provectus.kafka.ui.smokesuite.*"/>
|
||||
</packages>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { Table } from 'components/common/table/Table/Table.styled';
|
||||
import TableHeaderCell from 'components/common/table/TableHeaderCell/TableHeaderCell';
|
||||
import { ConsumerGroupTopicPartition } from 'generated-sources';
|
||||
import { ConsumerGroupTopicPartition, SortOrder } from 'generated-sources';
|
||||
import React from 'react';
|
||||
|
||||
import { ContentBox, TopicContentWrapper } from './TopicContent.styled';
|
||||
|
|
@ -9,7 +9,125 @@ interface Props {
|
|||
consumers: ConsumerGroupTopicPartition[];
|
||||
}
|
||||
|
||||
type OrderByKey = keyof ConsumerGroupTopicPartition;
|
||||
interface Headers {
|
||||
title: string;
|
||||
orderBy: OrderByKey | undefined;
|
||||
}
|
||||
|
||||
const TABLE_HEADERS_MAP: Headers[] = [
|
||||
{ title: 'Partition', orderBy: 'partition' },
|
||||
{ title: 'Consumer ID', orderBy: 'consumerId' },
|
||||
{ title: 'Host', orderBy: 'host' },
|
||||
{ title: 'Messages Behind', orderBy: 'messagesBehind' },
|
||||
{ title: 'Current Offset', orderBy: 'currentOffset' },
|
||||
{ title: 'End offset', orderBy: 'endOffset' },
|
||||
];
|
||||
|
||||
const ipV4ToNum = (ip?: string) => {
|
||||
if (typeof ip === 'string' && ip.length !== 0) {
|
||||
const withoutSlash = ip.indexOf('/') !== -1 ? ip.slice(1) : ip;
|
||||
return Number(
|
||||
withoutSlash
|
||||
.split('.')
|
||||
.map((octet) => `000${octet}`.slice(-3))
|
||||
.join('')
|
||||
);
|
||||
}
|
||||
return 0;
|
||||
};
|
||||
|
||||
type ComparatorFunction<T> = (
|
||||
valueA: T,
|
||||
valueB: T,
|
||||
order: SortOrder,
|
||||
property?: keyof T
|
||||
) => number;
|
||||
|
||||
const numberComparator: ComparatorFunction<ConsumerGroupTopicPartition> = (
|
||||
valueA,
|
||||
valueB,
|
||||
order,
|
||||
property
|
||||
) => {
|
||||
if (property !== undefined) {
|
||||
return order === SortOrder.ASC
|
||||
? Number(valueA[property]) - Number(valueB[property])
|
||||
: Number(valueB[property]) - Number(valueA[property]);
|
||||
}
|
||||
return 0;
|
||||
};
|
||||
|
||||
const ipComparator: ComparatorFunction<ConsumerGroupTopicPartition> = (
|
||||
valueA,
|
||||
valueB,
|
||||
order
|
||||
) =>
|
||||
order === SortOrder.ASC
|
||||
? ipV4ToNum(valueA.host) - ipV4ToNum(valueB.host)
|
||||
: ipV4ToNum(valueB.host) - ipV4ToNum(valueA.host);
|
||||
|
||||
const consumerIdComparator: ComparatorFunction<ConsumerGroupTopicPartition> = (
|
||||
valueA,
|
||||
valueB,
|
||||
order
|
||||
) => {
|
||||
if (valueA.consumerId && valueB.consumerId) {
|
||||
if (order === SortOrder.ASC) {
|
||||
if (valueA.consumerId?.toLowerCase() > valueB.consumerId?.toLowerCase()) {
|
||||
return 1;
|
||||
}
|
||||
}
|
||||
|
||||
if (order === SortOrder.DESC) {
|
||||
if (valueB.consumerId?.toLowerCase() > valueA.consumerId?.toLowerCase()) {
|
||||
return -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return 0;
|
||||
};
|
||||
|
||||
const TopicContents: React.FC<Props> = ({ consumers }) => {
|
||||
const [orderBy, setOrderBy] = React.useState<OrderByKey>('partition');
|
||||
const [sortOrder, setSortOrder] = React.useState<SortOrder>(SortOrder.DESC);
|
||||
|
||||
const handleOrder = React.useCallback((columnName: string | null) => {
|
||||
if (typeof columnName === 'string') {
|
||||
setOrderBy(columnName as OrderByKey);
|
||||
setSortOrder((prevOrder) =>
|
||||
prevOrder === SortOrder.DESC ? SortOrder.ASC : SortOrder.DESC
|
||||
);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const sortedConsumers = React.useMemo(() => {
|
||||
if (orderBy && sortOrder) {
|
||||
const isNumberProperty =
|
||||
orderBy === 'partition' ||
|
||||
orderBy === 'currentOffset' ||
|
||||
orderBy === 'endOffset' ||
|
||||
orderBy === 'messagesBehind';
|
||||
|
||||
let comparator: ComparatorFunction<ConsumerGroupTopicPartition>;
|
||||
if (isNumberProperty) {
|
||||
comparator = numberComparator;
|
||||
}
|
||||
|
||||
if (orderBy === 'host') {
|
||||
comparator = ipComparator;
|
||||
}
|
||||
|
||||
if (orderBy === 'consumerId') {
|
||||
comparator = consumerIdComparator;
|
||||
}
|
||||
|
||||
return consumers.sort((a, b) => comparator(a, b, sortOrder, orderBy));
|
||||
}
|
||||
return consumers;
|
||||
}, [orderBy, sortOrder, consumers]);
|
||||
|
||||
return (
|
||||
<TopicContentWrapper>
|
||||
<td colSpan={3}>
|
||||
|
|
@ -17,16 +135,20 @@ const TopicContents: React.FC<Props> = ({ consumers }) => {
|
|||
<Table isFullwidth>
|
||||
<thead>
|
||||
<tr>
|
||||
<TableHeaderCell title="Partition" />
|
||||
<TableHeaderCell title="Consumer ID" />
|
||||
<TableHeaderCell title="Host" />
|
||||
<TableHeaderCell title="Messages behind" />
|
||||
<TableHeaderCell title="Current offset" />
|
||||
<TableHeaderCell title="End offset" />
|
||||
{TABLE_HEADERS_MAP.map((header) => (
|
||||
<TableHeaderCell
|
||||
key={header.orderBy}
|
||||
title={header.title}
|
||||
orderBy={orderBy}
|
||||
sortOrder={sortOrder}
|
||||
orderValue={header.orderBy}
|
||||
handleOrderBy={handleOrder}
|
||||
/>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{consumers.map((consumer) => (
|
||||
{sortedConsumers.map((consumer) => (
|
||||
<tr key={consumer.partition}>
|
||||
<td>{consumer.partition}</td>
|
||||
<td>{consumer.consumerId}</td>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ const TableView: React.FC<TableViewProps> = ({ fetching, rows }) => {
|
|||
data={rows || []}
|
||||
columns={columns}
|
||||
emptyMessage={fetching ? 'Loading...' : 'No rows found'}
|
||||
enableSorting={false}
|
||||
enableSorting
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ export interface AddEditFilterContainerProps {
|
|||
inputDisplayNameDefaultValue?: string;
|
||||
inputCodeDefaultValue?: string;
|
||||
isAdd?: boolean;
|
||||
submitCallback?: (values: AddMessageFilters) => void;
|
||||
submitCallback?: (values: AddMessageFilters) => Promise<void>;
|
||||
}
|
||||
|
||||
const AddEditFilterContainer: React.FC<AddEditFilterContainerProps> = ({
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import SavedFilters from 'components/Topics/Topic/Messages/Filters/SavedFilters'
|
|||
import SavedIcon from 'components/common/Icons/SavedIcon';
|
||||
import QuestionIcon from 'components/common/Icons/QuestionIcon';
|
||||
import useBoolean from 'lib/hooks/useBoolean';
|
||||
import { showAlert } from 'lib/errorHandling';
|
||||
|
||||
import AddEditFilterContainer from './AddEditFilterContainer';
|
||||
import InfoModal from './InfoModal';
|
||||
|
|
@ -43,6 +44,19 @@ const AddFilter: React.FC<FilterModalProps> = ({
|
|||
|
||||
const onSubmit = React.useCallback(
|
||||
async (values: AddMessageFilters) => {
|
||||
const isFilterExists = filters.some(
|
||||
(filter) => filter.name === values.name
|
||||
);
|
||||
|
||||
if (isFilterExists) {
|
||||
showAlert('error', {
|
||||
id: '',
|
||||
title: 'Validation Error',
|
||||
message: 'Filter with the same name already exists',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const data = { ...values };
|
||||
if (data.saveFilter) {
|
||||
addFilter(data);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import useDataSaver from 'lib/hooks/useDataSaver';
|
||||
import { TopicMessage } from 'generated-sources';
|
||||
import MessageToggleIcon from 'components/common/Icons/MessageToggleIcon';
|
||||
|
|
@ -7,22 +6,12 @@ import IconButtonWrapper from 'components/common/Icons/IconButtonWrapper';
|
|||
import { Dropdown, DropdownItem } from 'components/common/Dropdown';
|
||||
import { formatTimestamp } from 'lib/dateTimeHelpers';
|
||||
import { JSONPath } from 'jsonpath-plus';
|
||||
import Ellipsis from 'components/common/Ellipsis/Ellipsis';
|
||||
import WarningRedIcon from 'components/common/Icons/WarningRedIcon';
|
||||
|
||||
import MessageContent from './MessageContent/MessageContent';
|
||||
import * as S from './MessageContent/MessageContent.styled';
|
||||
|
||||
const StyledDataCell = styled.td`
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 350px;
|
||||
min-width: 350px;
|
||||
`;
|
||||
|
||||
const ClickableRow = styled.tr`
|
||||
cursor: pointer;
|
||||
`;
|
||||
|
||||
export interface PreviewFilter {
|
||||
field: string;
|
||||
path: string;
|
||||
|
|
@ -43,6 +32,8 @@ const Message: React.FC<Props> = ({
|
|||
partition,
|
||||
content,
|
||||
headers,
|
||||
valueSerde,
|
||||
keySerde,
|
||||
},
|
||||
keyFilters,
|
||||
contentFilters,
|
||||
|
|
@ -100,7 +91,7 @@ const Message: React.FC<Props> = ({
|
|||
|
||||
return (
|
||||
<>
|
||||
<ClickableRow
|
||||
<S.ClickableRow
|
||||
onMouseEnter={() => setVEllipsisOpen(true)}
|
||||
onMouseLeave={() => setVEllipsisOpen(false)}
|
||||
onClick={toggleIsOpen}
|
||||
|
|
@ -115,16 +106,20 @@ const Message: React.FC<Props> = ({
|
|||
<td>
|
||||
<div>{formatTimestamp(timestamp)}</div>
|
||||
</td>
|
||||
<StyledDataCell title={key}>
|
||||
{renderFilteredJson(key, keyFilters)}
|
||||
</StyledDataCell>
|
||||
<StyledDataCell title={content}>
|
||||
<S.DataCell title={key}>
|
||||
<Ellipsis text={renderFilteredJson(key, keyFilters)}>
|
||||
{keySerde === 'Fallback' && <WarningRedIcon />}
|
||||
</Ellipsis>
|
||||
</S.DataCell>
|
||||
<S.DataCell title={content}>
|
||||
<S.Metadata>
|
||||
<S.MetadataValue>
|
||||
{renderFilteredJson(content, contentFilters)}
|
||||
<Ellipsis text={renderFilteredJson(content, contentFilters)}>
|
||||
{valueSerde === 'Fallback' && <WarningRedIcon />}
|
||||
</Ellipsis>
|
||||
</S.MetadataValue>
|
||||
</S.Metadata>
|
||||
</StyledDataCell>
|
||||
</S.DataCell>
|
||||
<td style={{ width: '5%' }}>
|
||||
{vEllipsisOpen && (
|
||||
<Dropdown>
|
||||
|
|
@ -135,7 +130,7 @@ const Message: React.FC<Props> = ({
|
|||
</Dropdown>
|
||||
)}
|
||||
</td>
|
||||
</ClickableRow>
|
||||
</S.ClickableRow>
|
||||
{isOpen && (
|
||||
<MessageContent
|
||||
messageKey={key}
|
||||
|
|
|
|||
|
|
@ -35,7 +35,16 @@ export const ContentBox = styled.div`
|
|||
flex-grow: 1;
|
||||
}
|
||||
`;
|
||||
|
||||
export const DataCell = styled.td`
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 350px;
|
||||
min-width: 350px;
|
||||
`;
|
||||
export const ClickableRow = styled.tr`
|
||||
cursor: pointer;
|
||||
`;
|
||||
export const MetadataWrapper = styled.div`
|
||||
background-color: ${({ theme }) => theme.topicMetaData.backgroundColor};
|
||||
padding: 24px;
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import upperFirst from 'lodash/upperFirst';
|
|||
|
||||
jsf.option('fillProperties', false);
|
||||
jsf.option('alwaysFakeOptionals', true);
|
||||
jsf.option('failOnInvalidFormat', false);
|
||||
|
||||
const generateValueFromSchema = (preffered?: SerdeDescription) => {
|
||||
if (!preffered?.schema) {
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ const CustomParamField: React.FC<Props> = ({
|
|||
label: option,
|
||||
disabled:
|
||||
(config &&
|
||||
config[option].source !== ConfigSource.DYNAMIC_TOPIC_CONFIG) ||
|
||||
config[option]?.source !== ConfigSource.DYNAMIC_TOPIC_CONFIG) ||
|
||||
existingFields.includes(option),
|
||||
}));
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
import styled from 'styled-components';
|
||||
|
||||
export const Text = styled.div`
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 340px;
|
||||
`;
|
||||
|
||||
export const Wrapper = styled.div`
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
`;
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import React, { PropsWithChildren } from 'react';
|
||||
|
||||
import * as S from './Ellipsis.styled';
|
||||
|
||||
type EllipsisProps = {
|
||||
text: React.ReactNode;
|
||||
};
|
||||
|
||||
const Ellipsis: React.FC<PropsWithChildren<EllipsisProps>> = ({
|
||||
text,
|
||||
children,
|
||||
}) => {
|
||||
return (
|
||||
<S.Wrapper>
|
||||
<S.Text>{text}</S.Text>
|
||||
{children}
|
||||
</S.Wrapper>
|
||||
);
|
||||
};
|
||||
export default Ellipsis;
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import React from 'react';
|
||||
import { useTheme } from 'styled-components';
|
||||
|
||||
const WarningRedIcon: React.FC = () => {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
width="20"
|
||||
height="20"
|
||||
rx="10"
|
||||
fill={theme.icons.warningRedIcon.rectFill}
|
||||
/>
|
||||
<path
|
||||
d="M9 4.74219H11V12.7422H9V4.74219Z"
|
||||
fill={theme.icons.warningRedIcon.pathFill}
|
||||
/>
|
||||
<path
|
||||
d="M9 14.7422C9 14.1899 9.44772 13.7422 10 13.7422C10.5523 13.7422 11 14.1899 11 14.7422C11 15.2945 10.5523 15.7422 10 15.7422C9.44772 15.7422 9 15.2945 9 14.7422Z"
|
||||
fill={theme.icons.warningRedIcon.pathFill}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default WarningRedIcon;
|
||||
|
|
@ -14,7 +14,7 @@ import type {
|
|||
PaginationState,
|
||||
ColumnDef,
|
||||
} from '@tanstack/react-table';
|
||||
import { useSearchParams } from 'react-router-dom';
|
||||
import { useSearchParams, useLocation } from 'react-router-dom';
|
||||
import { PER_PAGE } from 'lib/constants';
|
||||
import { Button } from 'components/common/Button/Button';
|
||||
import Input from 'components/common/Input/Input';
|
||||
|
|
@ -129,6 +129,7 @@ const Table: React.FC<TableProps<any>> = ({
|
|||
onRowClick,
|
||||
}) => {
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const location = useLocation();
|
||||
const [rowSelection, setRowSelection] = React.useState({});
|
||||
const onSortingChange = React.useCallback(
|
||||
(updater: UpdaterFn<SortingState>) => {
|
||||
|
|
@ -136,7 +137,7 @@ const Table: React.FC<TableProps<any>> = ({
|
|||
setSearchParams(searchParams);
|
||||
return newState;
|
||||
},
|
||||
[searchParams]
|
||||
[searchParams, location]
|
||||
);
|
||||
const onPaginationChange = React.useCallback(
|
||||
(updater: UpdaterFn<PaginationState>) => {
|
||||
|
|
@ -145,7 +146,7 @@ const Table: React.FC<TableProps<any>> = ({
|
|||
setRowSelection({});
|
||||
return newState;
|
||||
},
|
||||
[searchParams]
|
||||
[searchParams, location]
|
||||
);
|
||||
|
||||
const table = useReactTable({
|
||||
|
|
|
|||
|
|
@ -173,6 +173,10 @@ const baseTheme = {
|
|||
closeIcon: Colors.neutral[30],
|
||||
deleteIcon: Colors.red[20],
|
||||
warningIcon: Colors.yellow[20],
|
||||
warningRedIcon: {
|
||||
rectFill: Colors.red[10],
|
||||
pathFill: Colors.red[50],
|
||||
},
|
||||
messageToggleIcon: {
|
||||
normal: Colors.brand[30],
|
||||
hover: Colors.brand[40],
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue