PreviewSettings.tsx 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. import React, { PureComponent } from 'react';
  2. import { Button, CollapsableSection, FileUpload } from '@grafana/ui';
  3. import { getBackendSrv } from 'app/core/services/backend_srv';
  4. import { getThumbnailURL } from 'app/features/search/components/SearchCard';
  5. interface Props {
  6. uid: string;
  7. }
  8. interface State {}
  9. export class PreviewSettings extends PureComponent<Props, State> {
  10. state: State = {};
  11. doUpload = (evt: EventTarget & HTMLInputElement, isLight?: boolean) => {
  12. const file = evt?.files && evt.files[0];
  13. if (!file) {
  14. console.log('NOPE!', evt);
  15. return;
  16. }
  17. const url = getThumbnailURL(this.props.uid, isLight);
  18. const formData = new FormData();
  19. formData.append('file', file);
  20. fetch(url, {
  21. method: 'POST',
  22. body: formData,
  23. })
  24. .then((response) => response.json())
  25. .then((result) => {
  26. console.log('Success:', result);
  27. location.reload(); //HACK
  28. })
  29. .catch((error) => {
  30. console.error('Error:', error);
  31. });
  32. };
  33. markAsStale = (isLight: boolean) => async () => {
  34. return getBackendSrv().put(getThumbnailURL(this.props.uid, isLight), { state: 'stale' });
  35. };
  36. render() {
  37. const { uid } = this.props;
  38. const imgstyle = { maxWidth: 300, maxHeight: 300 };
  39. return (
  40. <CollapsableSection label="Preview settings" isOpen={true}>
  41. <div>DUMMY UI just so we have an upload button!</div>
  42. <table cellSpacing="4">
  43. <thead>
  44. <tr>
  45. <td>[DARK]</td>
  46. <td>[LIGHT]</td>
  47. </tr>
  48. </thead>
  49. <tbody>
  50. <tr>
  51. <td>
  52. <Button type="button" variant="primary" onClick={this.markAsStale(false)} fill="outline">
  53. Mark as stale
  54. </Button>
  55. </td>
  56. <td>
  57. <Button type="button" variant="primary" onClick={this.markAsStale(true)} fill="outline">
  58. Mark as stale
  59. </Button>
  60. </td>
  61. </tr>
  62. <tr>
  63. <td>
  64. <img src={getThumbnailURL(uid, false)} style={imgstyle} />
  65. </td>
  66. <td>
  67. <img src={getThumbnailURL(uid, true)} style={imgstyle} />
  68. </td>
  69. </tr>
  70. <tr>
  71. <td>
  72. <FileUpload
  73. accept="image/png, image/webp"
  74. onFileUpload={({ currentTarget }) => this.doUpload(currentTarget, false)}
  75. >
  76. Upload dark
  77. </FileUpload>
  78. </td>
  79. <td>
  80. <FileUpload
  81. accept="image/png, image/webp"
  82. onFileUpload={({ currentTarget }) => this.doUpload(currentTarget, true)}
  83. >
  84. Upload light
  85. </FileUpload>
  86. </td>
  87. </tr>
  88. </tbody>
  89. </table>
  90. </CollapsableSection>
  91. );
  92. }
  93. }