diff --git a/grafana-plugin/src/assets/style/utils.css b/grafana-plugin/src/assets/style/utils.css index b562bbf1..68e86e61 100644 --- a/grafana-plugin/src/assets/style/utils.css +++ b/grafana-plugin/src/assets/style/utils.css @@ -196,3 +196,11 @@ opacity: 0; transition: opacity 300ms ease-in, max-height 300ms ease-in; } + +/* ----- + * Widths + */ + +.u-max-width-1000 { + max-width: 1000px; +} diff --git a/grafana-plugin/src/components/ManualAlertGroup/ManualAlertGroup.tsx b/grafana-plugin/src/components/ManualAlertGroup/ManualAlertGroup.tsx index c20557b5..dc2c2f68 100644 --- a/grafana-plugin/src/components/ManualAlertGroup/ManualAlertGroup.tsx +++ b/grafana-plugin/src/components/ManualAlertGroup/ManualAlertGroup.tsx @@ -66,14 +66,16 @@ const ManualAlertGroup: FC = observer(({ onCreate, onHide - - - - +
+ + + + +
); diff --git a/grafana-plugin/src/components/NewScheduleSelector/NewScheduleSelector.module.css b/grafana-plugin/src/components/NewScheduleSelector/NewScheduleSelector.module.css index 719dfe35..fb24d657 100644 --- a/grafana-plugin/src/components/NewScheduleSelector/NewScheduleSelector.module.css +++ b/grafana-plugin/src/components/NewScheduleSelector/NewScheduleSelector.module.css @@ -5,3 +5,7 @@ .block { width: 100%; } + +.content { + padding-bottom: 24px; +} diff --git a/grafana-plugin/src/containers/IntegrationForm/IntegrationForm.module.scss b/grafana-plugin/src/containers/IntegrationForm/IntegrationForm.module.scss index 93814b6a..34e3b26a 100644 --- a/grafana-plugin/src/containers/IntegrationForm/IntegrationForm.module.scss +++ b/grafana-plugin/src/containers/IntegrationForm/IntegrationForm.module.scss @@ -1,5 +1,6 @@ .content { margin: 4px 4px 50px 4px; + padding-bottom: 24px; } .cards { diff --git a/grafana-plugin/src/containers/IntegrationForm/IntegrationForm.tsx b/grafana-plugin/src/containers/IntegrationForm/IntegrationForm.tsx index 03d24f91..d4000f47 100644 --- a/grafana-plugin/src/containers/IntegrationForm/IntegrationForm.tsx +++ b/grafana-plugin/src/containers/IntegrationForm/IntegrationForm.tsx @@ -215,7 +215,7 @@ const IntegrationForm = observer((props: IntegrationFormProps) => { onHide(); function createNewIntegration(): Promise { - let promise = alertReceiveChannelStore.create(data); + let promise = alertReceiveChannelStore.create(data, true); const pushHistory = (id) => history.push(`${PLUGIN_ROOT}/integrations/${id}`); diff --git a/grafana-plugin/src/containers/IntegrationLabelsForm/IntegrationLabelsForm.module.css b/grafana-plugin/src/containers/IntegrationLabelsForm/IntegrationLabelsForm.module.css index 89d574a5..1e9b21de 100644 --- a/grafana-plugin/src/containers/IntegrationLabelsForm/IntegrationLabelsForm.module.css +++ b/grafana-plugin/src/containers/IntegrationLabelsForm/IntegrationLabelsForm.module.css @@ -10,4 +10,5 @@ .buttons { width: 100%; margin-top: 30px; + margin-bottom: 24px; } diff --git a/grafana-plugin/src/containers/ScheduleForm/ScheduleForm.tsx b/grafana-plugin/src/containers/ScheduleForm/ScheduleForm.tsx index d6a7e0c8..bca301c4 100644 --- a/grafana-plugin/src/containers/ScheduleForm/ScheduleForm.tsx +++ b/grafana-plugin/src/containers/ScheduleForm/ScheduleForm.tsx @@ -77,16 +77,18 @@ const ScheduleForm = observer((props: ScheduleFormProps) => {
- - - - - - + + + + +
diff --git a/grafana-plugin/src/models/base_store.ts b/grafana-plugin/src/models/base_store.ts index af9c14f6..3aa9acc3 100644 --- a/grafana-plugin/src/models/base_store.ts +++ b/grafana-plugin/src/models/base_store.ts @@ -49,11 +49,13 @@ export default class BaseStore { } @action - async create(data: any): Promise { + async create(data: any, skipErrorHandling = false): Promise { return await makeRequest(this.path, { method: 'POST', data, - }).catch(this.onApiError); + }).catch((error) => { + this.onApiError(error, skipErrorHandling); + }); } @action diff --git a/grafana-plugin/src/pages/incidents/Incidents.module.scss b/grafana-plugin/src/pages/incidents/Incidents.module.scss index 3281f8ff..908029d6 100644 --- a/grafana-plugin/src/pages/incidents/Incidents.module.scss +++ b/grafana-plugin/src/pages/incidents/Incidents.module.scss @@ -25,6 +25,11 @@ align-items: center; } +.horizontal-scroll-table table td:global(.rc-table-cell) { + white-space: nowrap; + padding-right: 16px; +} + .bulk-actions-container { margin: 10px 0 10px 0; display: flex; diff --git a/grafana-plugin/src/pages/incidents/Incidents.tsx b/grafana-plugin/src/pages/incidents/Incidents.tsx index 00a1ad21..71dfbb97 100644 --- a/grafana-plugin/src/pages/incidents/Incidents.tsx +++ b/grafana-plugin/src/pages/incidents/Incidents.tsx @@ -536,7 +536,7 @@ class Incidents extends React.Component data={results} columns={tableColumns} tableLayout="auto" - scroll={{ x: isHorizontalScrolling ? `${Math.max(2000, tableColumns.length * 250)}px` : true }} + scroll={{ x: isHorizontalScrolling ? 'max-content' : undefined }} /> {this.shouldShowPagination() && (
@@ -790,6 +790,7 @@ class Incidents extends React.Component key: 'title', render: this.renderTitle, width: isHorizontalScrolling ? undefined : '35%', + className: 'u-max-width-1000', }, Created: { title: 'Created', diff --git a/grafana-plugin/src/utils/types.ts b/grafana-plugin/src/utils/types.ts index 20eabc4b..1a13a546 100644 --- a/grafana-plugin/src/utils/types.ts +++ b/grafana-plugin/src/utils/types.ts @@ -5,4 +5,5 @@ export interface TableColumn { title: string; key: string; render: (value: any, record: any, index: number) => React.ReactNode | RenderedCell; + className?: string; }