+ {alertStore.info.authentication.enabled && (
+
+ Username: {alertStore.info.authentication.username}
+
+ )}
Version: {alertStore.info.version}
diff --git a/ui/src/Components/MainModal/MainModalContent.test.js b/ui/src/Components/MainModal/MainModalContent.test.js
index 9376347e5..adaed88b0 100644
--- a/ui/src/Components/MainModal/MainModalContent.test.js
+++ b/ui/src/Components/MainModal/MainModalContent.test.js
@@ -96,4 +96,22 @@ describe("
", () => {
it("calls setTab('help') after clicking on the 'Help' tab", () => {
ValidateSetTab("Help", "help");
});
+
+ it("shows username when alertStore.info.authentication.enabled=true", () => {
+ alertStore.info.authentication.enabled = true;
+ alertStore.info.authentication.username = "me@example.com";
+ const tree = mount(
+
+ {Wrapped(
+
+ )}
+
+ );
+ expect(tree.text()).toMatch(/Username: me@example.com/);
+ });
});
diff --git a/ui/src/Components/SilenceModal/AuthorInput.js b/ui/src/Components/SilenceModal/AuthorInput.js
new file mode 100644
index 000000000..c7a147e9e
--- /dev/null
+++ b/ui/src/Components/SilenceModal/AuthorInput.js
@@ -0,0 +1,59 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faUser } from "@fortawesome/free-solid-svg-icons/faUser";
+
+import { AlertStore } from "Stores/AlertStore";
+
+const IconInput = ({
+ type,
+ autoComplete,
+ icon,
+ placeholder,
+ value,
+ onChange,
+ ...extra
+}) => (
+
+);
+IconInput.propTypes = {
+ type: PropTypes.string.isRequired,
+ autoComplete: PropTypes.string.isRequired,
+ icon: FontAwesomeIcon.propTypes.icon.isRequired,
+ placeholder: PropTypes.string.isRequired,
+ value: PropTypes.string.isRequired,
+ onChange: PropTypes.func
+};
+
+const AuthenticatedAuthorInput = ({ alertStore }) => (
+
+);
+AuthenticatedAuthorInput.propTypes = {
+ alertStore: PropTypes.instanceOf(AlertStore).isRequired
+};
+
+export { IconInput, AuthenticatedAuthorInput };
diff --git a/ui/src/Components/SilenceModal/SilenceForm.js b/ui/src/Components/SilenceModal/SilenceForm.js
index 511f9a8be..b7aaa7e05 100644
--- a/ui/src/Components/SilenceModal/SilenceForm.js
+++ b/ui/src/Components/SilenceModal/SilenceForm.js
@@ -21,40 +21,7 @@ import { AlertManagerInput } from "./AlertManagerInput";
import { SilenceMatch } from "./SilenceMatch";
import { DateTimeSelect } from "./DateTimeSelect";
import { PayloadPreview } from "./PayloadPreview";
-
-const IconInput = ({
- type,
- autoComplete,
- icon,
- placeholder,
- value,
- onChange
-}) => (
-
-);
-IconInput.propTypes = {
- type: PropTypes.string.isRequired,
- autoComplete: PropTypes.string.isRequired,
- icon: FontAwesomeIcon.propTypes.icon.isRequired,
- placeholder: PropTypes.string.isRequired,
- value: PropTypes.string.isRequired,
- onChange: PropTypes.func.isRequired
-};
+import { IconInput, AuthenticatedAuthorInput } from "./AuthorInput";
const SilenceForm = observer(
class SilenceForm extends Component {
@@ -102,15 +69,14 @@ const SilenceForm = observer(
populateAuthor = action(() => {
const { alertStore, silenceFormStore, settingsStore } = this.props;
- if (alertStore.settings.values.silenceForm.author !== "") {
- settingsStore.silenceFormConfig.config.author =
- alertStore.settings.values.silenceForm.author;
- }
-
if (silenceFormStore.data.author === "") {
silenceFormStore.data.author =
settingsStore.silenceFormConfig.config.author;
}
+
+ if (alertStore.info.authentication.enabled) {
+ silenceFormStore.data.author = alertStore.info.authentication.username;
+ }
});
addMore = action(event => {
@@ -177,14 +143,19 @@ const SilenceForm = observer(
-
+ {alertStore.info.authentication.enabled ? (
+
+ ) : (
+
+ )}
+
preview", () => {
});
describe("
inputs", () => {
+ it("author is read-only when info.authentication.enabled is true", () => {
+ alertStore.info.authentication.enabled = true;
+ alertStore.info.authentication.username = "auth@example.com";
+ const tree = MountedSilenceForm();
+ const input = tree.find("input[placeholder='Author']");
+ expect(input.props().readOnly).toBe(true);
+ expect(input.props().value).toBe("auth@example.com");
+ expect(silenceFormStore.data.author).toBe("auth@example.com");
+ });
+
it("default author value comes from Settings store", () => {
settingsStore.silenceFormConfig.config.author = "foo@example.com";
const tree = MountedSilenceForm();
@@ -135,25 +145,6 @@ describe("
inputs", () => {
expect(silenceFormStore.data.author).toBe("foo@example.com");
});
- it("default author value comes from the API response if present", () => {
- alertStore.settings.values.silenceForm.author = "bar@example.com";
- settingsStore.silenceFormConfig.config.author = "foo@example.com";
- const tree = MountedSilenceForm();
- const input = tree.find("input[placeholder='Author']");
- expect(input.props().value).toBe("bar@example.com");
- });
-
- it("author value from the API response is saved to the Settings store", () => {
- alertStore.settings.values.silenceForm.author = "bar@example.com";
- settingsStore.silenceFormConfig.config.author = "";
- const tree = MountedSilenceForm();
- const input = tree.find("input[placeholder='Author']");
- expect(input.props().value).toBe("bar@example.com");
- expect(settingsStore.silenceFormConfig.config.author).toBe(
- "bar@example.com"
- );
- });
-
it("default author value is empty if nothing is stored in Settings", () => {
settingsStore.silenceFormConfig.config.author = "";
const tree = MountedSilenceForm();
diff --git a/ui/src/Stores/AlertStore.js b/ui/src/Stores/AlertStore.js
index 610b6e141..84c948377 100644
--- a/ui/src/Stores/AlertStore.js
+++ b/ui/src/Stores/AlertStore.js
@@ -215,6 +215,10 @@ class AlertStore {
info = observable(
{
+ authentication: {
+ enabled: false,
+ username: ""
+ },
totalAlerts: 0,
version: "unknown",
upgradeNeeded: false,
@@ -254,7 +258,6 @@ class AlertStore {
valueMapping: {}
},
silenceForm: {
- author: "",
strip: {
labels: []
}
@@ -418,7 +421,7 @@ class AlertStore {
this.info.upgradeNeeded = true;
}
// update extra root level keys that are stored under 'info'
- for (const key of ["totalAlerts", "version"]) {
+ for (const key of ["totalAlerts", "version", "authentication"]) {
if (this.info[key] !== result[key]) {
this.info[key] = result[key];
}