Files
grafana/public/app/features/admin/ldap/LdapSyncInfo.tsx
Marcus Andersson 1a0c1a39e4 DateTime: adding support to select preferred timezone for presentation of date and time values. (#23586)
* added moment timezone package.

* added a qnd way of selecting timezone.

* added a first draft to display how it can be used.

* fixed failing tests.

* made moment.local to be in utc when running tests.

* added tests to verify that the timeZone support works as expected.

* Fixed so we use the formatter in the graph context menu.

* changed so we will format d3 according to timeZone.

* changed from class base to function based for easier consumption.

* fixed so tests got green.

* renamed to make it shorter.

* fixed formatting in logRow.

* removed unused value.

* added time formatter to flot.

* fixed failing tests.

* changed so history will use the formatting with support for timezone.

* added todo.

* added so we append the correct abbrivation behind time.

* added time zone abbrevation in timepicker.

* adding timezone in rangeutil tool.

* will use timezone when formatting range.

* changed so we use new functions to format date so timezone is respected.

* wip - dashboard settings.

* changed so the time picker settings is in react.

* added force update.

* wip to get the react graph to work.

* fixed formatting and parsing on the timepicker.

* updated snap to be correct.

* fixed so we format values properly in time picker.

* make sure we pass timezone on all the proper places.

* fixed so we use correct timeZone in explore.

* fixed failing tests.

* fixed so we always parse from local to selected timezone.

* removed unused variable.

* reverted back.

* trying to fix issue with directive.

* fixed issue.

* fixed strict null errors.

* fixed so we still can select default.

* make sure we reads the time zone from getTimezone
2020-04-27 15:28:06 +02:00

75 lines
2.2 KiB
TypeScript

import React, { PureComponent } from 'react';
import { dateTimeFormat } from '@grafana/data';
import { Icon } from '@grafana/ui';
import { SyncInfo } from 'app/types';
interface Props {
ldapSyncInfo: SyncInfo;
}
interface State {
isSyncing: boolean;
}
const format = 'dddd YYYY-MM-DD HH:mm zz';
export class LdapSyncInfo extends PureComponent<Props, State> {
state = {
isSyncing: false,
};
handleSyncClick = () => {
console.log('Bulk-sync now');
this.setState({ isSyncing: !this.state.isSyncing });
};
render() {
const { ldapSyncInfo } = this.props;
const { isSyncing } = this.state;
const nextSyncTime = dateTimeFormat(ldapSyncInfo.nextSync, { format });
const prevSyncSuccessful = ldapSyncInfo && ldapSyncInfo.prevSync;
const prevSyncTime = prevSyncSuccessful ? dateTimeFormat(ldapSyncInfo.prevSync!.started, { format }) : '';
return (
<>
<h3 className="page-heading">
LDAP Synchronisation
<button className={`btn btn-secondary pull-right`} onClick={this.handleSyncClick} hidden={true}>
<span className="btn-title">Bulk-sync now</span>
{isSyncing && <Icon name="fa fa-spinner" className="fa-fw fa-spin run-icon" />}
</button>
</h3>
<div className="gf-form-group">
<div className="gf-form">
<table className="filter-table form-inline">
<tbody>
<tr>
<td>Active synchronisation</td>
<td colSpan={2}>{ldapSyncInfo.enabled ? 'Enabled' : 'Disabled'}</td>
</tr>
<tr>
<td>Scheduled</td>
<td>{ldapSyncInfo.schedule}</td>
</tr>
<tr>
<td>Next scheduled synchronisation</td>
<td>{nextSyncTime}</td>
</tr>
<tr>
<td>Last synchronisation</td>
{prevSyncSuccessful && (
<>
<td>{prevSyncTime}</td>
<td>Successful</td>
</>
)}
</tr>
</tbody>
</table>
</div>
</div>
</>
);
}
}