diff --git a/http/cur_swagger.yml b/http/cur_swagger.yml index 1188376673..70c4f98d08 100644 --- a/http/cur_swagger.yml +++ b/http/cur_swagger.yml @@ -1049,6 +1049,11 @@ paths: - Dashboards summary: Get all dashboards parameters: + - in: query + name: org + description: specifies the organization name of the resource + schema: + type: string - in: query name: owner description: specifies the owner id to return resources for diff --git a/ui/src/api/api.ts b/ui/src/api/api.ts index 4f5bbd476d..0acb9f68d8 100644 --- a/ui/src/api/api.ts +++ b/ui/src/api/api.ts @@ -7123,13 +7123,14 @@ export const DashboardsApiAxiosParamCreator = function (configuration?: Configur /** * * @summary Get all dashboards + * @param {string} [org] specifies the organization name of the resource * @param {string} [owner] specifies the owner id to return resources for * @param {'ID' | 'CreatedAt' | 'UpdatedAt'} [sortBy] specifies the owner id to return resources for * @param {Array} [id] ID list of dashboards to return. If both this and owner are specified, only ids is used. * @param {*} [options] Override http request option. * @throws {RequiredError} */ - dashboardsGet(owner?: string, sortBy?: 'ID' | 'CreatedAt' | 'UpdatedAt', id?: Array, options: any = {}): RequestArgs { + dashboardsGet(org?: string, owner?: string, sortBy?: 'ID' | 'CreatedAt' | 'UpdatedAt', id?: Array, options: any = {}): RequestArgs { const localVarPath = `/dashboards`; const localVarUrlObj = url.parse(localVarPath, true); let baseOptions; @@ -7140,6 +7141,10 @@ export const DashboardsApiAxiosParamCreator = function (configuration?: Configur const localVarHeaderParameter = {} as any; const localVarQueryParameter = {} as any; + if (org !== undefined) { + localVarQueryParameter['org'] = org; + } + if (owner !== undefined) { localVarQueryParameter['owner'] = owner; } @@ -7411,14 +7416,15 @@ export const DashboardsApiFp = function(configuration?: Configuration) { /** * * @summary Get all dashboards + * @param {string} [org] specifies the organization name of the resource * @param {string} [owner] specifies the owner id to return resources for * @param {'ID' | 'CreatedAt' | 'UpdatedAt'} [sortBy] specifies the owner id to return resources for * @param {Array} [id] ID list of dashboards to return. If both this and owner are specified, only ids is used. * @param {*} [options] Override http request option. * @throws {RequiredError} */ - dashboardsGet(owner?: string, sortBy?: 'ID' | 'CreatedAt' | 'UpdatedAt', id?: Array, options?: any): (axios?: AxiosInstance, basePath?: string) => AxiosPromise { - const localVarAxiosArgs = DashboardsApiAxiosParamCreator(configuration).dashboardsGet(owner, sortBy, id, options); + dashboardsGet(org?: string, owner?: string, sortBy?: 'ID' | 'CreatedAt' | 'UpdatedAt', id?: Array, options?: any): (axios?: AxiosInstance, basePath?: string) => AxiosPromise { + const localVarAxiosArgs = DashboardsApiAxiosParamCreator(configuration).dashboardsGet(org, owner, sortBy, id, options); return (axios: AxiosInstance = globalAxios, basePath: string = BASE_PATH) => { const axiosRequestArgs = Object.assign(localVarAxiosArgs.options, {url: basePath + localVarAxiosArgs.url}) return axios.request(axiosRequestArgs); @@ -7591,14 +7597,15 @@ export const DashboardsApiFactory = function (configuration?: Configuration, bas /** * * @summary Get all dashboards + * @param {string} [org] specifies the organization name of the resource * @param {string} [owner] specifies the owner id to return resources for * @param {'ID' | 'CreatedAt' | 'UpdatedAt'} [sortBy] specifies the owner id to return resources for * @param {Array} [id] ID list of dashboards to return. If both this and owner are specified, only ids is used. * @param {*} [options] Override http request option. * @throws {RequiredError} */ - dashboardsGet(owner?: string, sortBy?: 'ID' | 'CreatedAt' | 'UpdatedAt', id?: Array, options?: any) { - return DashboardsApiFp(configuration).dashboardsGet(owner, sortBy, id, options)(axios, basePath); + dashboardsGet(org?: string, owner?: string, sortBy?: 'ID' | 'CreatedAt' | 'UpdatedAt', id?: Array, options?: any) { + return DashboardsApiFp(configuration).dashboardsGet(org, owner, sortBy, id, options)(axios, basePath); }, /** * @@ -7790,6 +7797,7 @@ export class DashboardsApi extends BaseAPI { /** * * @summary Get all dashboards + * @param {string} [org] specifies the organization name of the resource * @param {string} [owner] specifies the owner id to return resources for * @param {'ID' | 'CreatedAt' | 'UpdatedAt'} [sortBy] specifies the owner id to return resources for * @param {Array} [id] ID list of dashboards to return. If both this and owner are specified, only ids is used. @@ -7797,8 +7805,8 @@ export class DashboardsApi extends BaseAPI { * @throws {RequiredError} * @memberof DashboardsApi */ - public dashboardsGet(owner?: string, sortBy?: 'ID' | 'CreatedAt' | 'UpdatedAt', id?: Array, options?: any) { - return DashboardsApiFp(this.configuration).dashboardsGet(owner, sortBy, id, options)(this.axios, this.basePath); + public dashboardsGet(org?: string, owner?: string, sortBy?: 'ID' | 'CreatedAt' | 'UpdatedAt', id?: Array, options?: any) { + return DashboardsApiFp(this.configuration).dashboardsGet(org, owner, sortBy, id, options)(this.axios, this.basePath); } /** diff --git a/ui/src/clockface/components/spinners/Spinner.tsx b/ui/src/clockface/components/spinners/Spinner.tsx index f790ac2bc2..93f33ce45d 100644 --- a/ui/src/clockface/components/spinners/Spinner.tsx +++ b/ui/src/clockface/components/spinners/Spinner.tsx @@ -15,7 +15,7 @@ interface Props { @ErrorHandling export default class Spinner extends Component { public render() { - return <>{this.children} + return this.children } private get children(): JSX.Element | JSX.Element[] { diff --git a/ui/src/dashboards/components/DashboardDefaultToggle.tsx b/ui/src/dashboards/components/DashboardDefaultToggle.tsx deleted file mode 100644 index d14856720f..0000000000 --- a/ui/src/dashboards/components/DashboardDefaultToggle.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React, {PureComponent} from 'react' -import {SlideToggle, ComponentSize} from 'src/clockface' - -interface Props { - dashboardLink: string - defaultDashboardLink: string - onChangeDefault: (link: string) => void -} - -class DefaultToggle extends PureComponent { - public render() { - return ( - - ) - } - - private handleChange = () => { - this.props.onChangeDefault(this.props.dashboardLink) - } - - private get isActive(): boolean { - const {dashboardLink, defaultDashboardLink} = this.props - return dashboardLink === defaultDashboardLink - } -} - -export default DefaultToggle diff --git a/ui/src/dashboards/components/dashboard_index/Table.tsx b/ui/src/dashboards/components/dashboard_index/Table.tsx index 58d863fe35..976ad1f961 100644 --- a/ui/src/dashboards/components/dashboard_index/Table.tsx +++ b/ui/src/dashboards/components/dashboard_index/Table.tsx @@ -31,6 +31,10 @@ interface Props { onSetDefaultDashboard: (dashboardLink: string) => void } +interface DatedDashboard extends Dashboard { + modified: Date +} + interface State { sortKey: SortKey sortDirection: Sort @@ -72,15 +76,9 @@ class DashboardsTable extends PureComponent { columnName={headerKeys[2]} sortKey={headerKeys[2]} sort={sortKey === headerKeys[2] ? sortDirection : Sort.None} - width="10%" + width="30%" onClick={this.handleClickColumn} /> - { private get sortedRows(): JSX.Element { const { dashboards, - onSetDefaultDashboard, - defaultDashboardLink, onExportDashboard, onCloneDashboard, onDeleteDashboard, } = this.props + const {sortKey, sortDirection} = this.state if (dashboards.length) { return ( - - list={dashboards} + + list={this.datedDashboards} sortKey={sortKey} direction={sortDirection} > @@ -122,8 +119,6 @@ class DashboardsTable extends PureComponent { onCloneDashboard={onCloneDashboard} onExportDashboard={onExportDashboard} onDeleteDashboard={onDeleteDashboard} - defaultDashboardLink={defaultDashboardLink} - onSetDefaultDashboard={onSetDefaultDashboard} /> )} @@ -133,6 +128,13 @@ class DashboardsTable extends PureComponent { return null } + private get datedDashboards(): DatedDashboard[] { + return this.props.dashboards.map(d => ({ + ...d, + modified: new Date(d.meta.updatedAt), + })) + } + private get emptyState(): JSX.Element { const {onCreateDashboard, searchTerm} = this.props diff --git a/ui/src/dashboards/components/dashboard_index/TableRow.tsx b/ui/src/dashboards/components/dashboard_index/TableRow.tsx index a40f0df2b7..2837afef0f 100644 --- a/ui/src/dashboards/components/dashboard_index/TableRow.tsx +++ b/ui/src/dashboards/components/dashboard_index/TableRow.tsx @@ -11,25 +11,26 @@ import { ComponentSpacer, IndexList, } from 'src/clockface' -import DefaultToggle from 'src/dashboards/components/DashboardDefaultToggle' // Types import {Dashboard} from 'src/types/v2' import {Alignment} from 'src/clockface' +import moment from 'moment' + +// Constants +import {UPDATED_AT_TIME_FORMAT} from 'src/dashboards/constants' interface Props { dashboard: Dashboard - defaultDashboardLink: string onDeleteDashboard: (dashboard: Dashboard) => void onCloneDashboard: (dashboard: Dashboard) => void onExportDashboard: (dashboard: Dashboard) => void - onSetDefaultDashboard: (dashboardLink: string) => void } export default class DashboardsIndexTableRow extends PureComponent { public render() { - const {dashboard, onSetDefaultDashboard, defaultDashboardLink} = this.props - const {id, name, links} = dashboard + const {dashboard} = this.props + const {id, name} = dashboard return ( @@ -37,13 +38,8 @@ export default class DashboardsIndexTableRow extends PureComponent { {name} You - 12h Ago - - + + {moment(dashboard.meta.updatedAt).format(UPDATED_AT_TIME_FORMAT)} diff --git a/ui/src/dashboards/components/dashboard_index/TableRows.tsx b/ui/src/dashboards/components/dashboard_index/TableRows.tsx index a1ef8a9a7c..94b88475a0 100644 --- a/ui/src/dashboards/components/dashboard_index/TableRows.tsx +++ b/ui/src/dashboards/components/dashboard_index/TableRows.tsx @@ -9,19 +9,15 @@ import {Dashboard} from 'src/types/v2' interface Props { dashboards: Dashboard[] - defaultDashboardLink: string onDeleteDashboard: (dashboard: Dashboard) => void onCloneDashboard: (dashboard: Dashboard) => void onExportDashboard: (dashboard: Dashboard) => void - onSetDefaultDashboard: (dashboardLink: string) => void } export default class DashboardsIndexTableRows extends PureComponent { public render() { const { dashboards, - onSetDefaultDashboard, - defaultDashboardLink, onExportDashboard, onCloneDashboard, onDeleteDashboard, @@ -31,8 +27,6 @@ export default class DashboardsIndexTableRows extends PureComponent { { } public render() { + const {buckets} = this.props + return ( <> @@ -39,7 +41,13 @@ export default class BucketList extends PureComponent { - {this.rows} + {buckets.map(bucket => ( + + ))} @@ -53,16 +61,6 @@ export default class BucketList extends PureComponent { ) } - private get rows(): JSX.Element[] { - return this.props.buckets.map(bucket => ( - - )) - } - private get bucket(): PrettyBucket { return this.props.buckets.find(b => b.id === this.state.bucketID) } diff --git a/ui/src/organizations/components/BucketOverlayForm.tsx b/ui/src/organizations/components/BucketOverlayForm.tsx index 193fd44bd6..5058e1d343 100644 --- a/ui/src/organizations/components/BucketOverlayForm.tsx +++ b/ui/src/organizations/components/BucketOverlayForm.tsx @@ -1,4 +1,4 @@ -import React, {PureComponent, ChangeEvent} from 'react' +import React, {PureComponent, ChangeEvent, FormEvent} from 'react' // Components import { Form, @@ -7,11 +7,11 @@ import { ComponentColor, ComponentStatus, ButtonType, + Grid, } from 'src/clockface' import Retention from 'src/organizations/components/Retention' // Types -import {RetentionRuleTypes} from 'src/types/v2' import {BucketRetentionRules} from 'src/api' interface Props { @@ -19,10 +19,10 @@ interface Props { errorMessage: string retentionSeconds: number ruleType: BucketRetentionRules.TypeEnum - onSubmit: () => void + onSubmit: (e: FormEvent) => void onCloseModal: () => void onChangeRetentionRule: (seconds: number) => void - onChangeRuleType: (t: RetentionRuleTypes) => void + onChangeRuleType: (t: BucketRetentionRules.TypeEnum) => void onChangeInput: (e: ChangeEvent) => void nameInputStatus: ComponentStatus buttonText: string @@ -46,31 +46,45 @@ export default class BucketOverlayForm extends PureComponent { return (
- - - - - -