-
- );
- }
-
- return (
-
-
- );
-};
-
-const getStyles = (theme: GrafanaTheme2) => {
- return {
- wrap: css`
- border: 4px solid red;
- `,
- running: css`
- border: 4px solid green;
- `,
- };
-};
diff --git a/public/app/features/admin/ServerStats.tsx b/public/app/features/admin/ServerStats.tsx
index 1b3cf7799d6..672d1ba2746 100644
--- a/public/app/features/admin/ServerStats.tsx
+++ b/public/app/features/admin/ServerStats.tsx
@@ -10,7 +10,6 @@ import { contextSrv } from '../../core/services/context_srv';
import { Loader } from '../plugins/admin/components/Loader';
import { CrawlerStatus } from './CrawlerStatus';
-import { ExportStatus } from './ExportStatus';
import { getServerStats, ServerStat } from './state/apis';
export const ServerStats = () => {
@@ -99,7 +98,6 @@ export const ServerStats = () => {
)}
{config.featureToggles.dashboardPreviews && config.featureToggles.dashboardPreviewsAdmin && {JSON.stringify(status, null, 2)}
- {Boolean(!status.running) &&
+
+ );
+}
diff --git a/public/app/features/storage/Breadcrumb.tsx b/public/app/features/storage/Breadcrumb.tsx
new file mode 100644
index 00000000000..f2a824a54e4
--- /dev/null
+++ b/public/app/features/storage/Breadcrumb.tsx
@@ -0,0 +1,60 @@
+import { css } from '@emotion/css';
+import { uniqueId } from 'lodash';
+import React from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+import { Icon, IconName, useStyles2 } from '@grafana/ui';
+
+interface Props {
+ rootIcon?: IconName;
+ pathName: string;
+ onPathChange: (path: string) => void;
+}
+
+export function Breadcrumb({ pathName, onPathChange, rootIcon }: Props) {
+ const styles = useStyles2(getStyles);
+ const paths = pathName.split('/').filter(Boolean);
+
+ return (
+ TODO... Add ROOT
+
+ -
+ {rootIcon && (
+
- onPathChange('')}>
+
+
+ )}
+ {paths.map((path, index) => {
+ let url = '/' + paths.slice(0, index + 1).join('/');
+ const onClickBreadcrumb = () => onPathChange(url);
+ const isLastBreadcrumb = index === paths.length - 1;
+ return (
+ - + {path} + + ); + })} +
+ {
+ setBody(JSON.parse(text)); // force JSON?
+ }}
+ />
+
+ {renderButton()}
;
+ }
+
+ return (
+
+
+ );
+};
diff --git a/public/app/features/storage/FileView.tsx b/public/app/features/storage/FileView.tsx
new file mode 100644
index 00000000000..9051b4acec2
--- /dev/null
+++ b/public/app/features/storage/FileView.tsx
@@ -0,0 +1,161 @@
+import { css } from '@emotion/css';
+import { isString } from 'lodash';
+import React, { useMemo } from 'react';
+import SVG from 'react-inlinesvg';
+import { useAsync } from 'react-use';
+import AutoSizer from 'react-virtualized-auto-sizer';
+
+import { DataFrame, GrafanaTheme2 } from '@grafana/data';
+import { CodeEditor, useStyles2 } from '@grafana/ui';
+
+import { getGrafanaStorage } from './helper';
+import { StorageView } from './types';
+
+interface FileDisplayInfo {
+ category?: 'svg' | 'image' | 'text';
+ language?: string; // match code editor
+}
+
+interface Props {
+ listing: DataFrame;
+ path: string;
+ onPathChange: (p: string, view?: StorageView) => void;
+ view: StorageView;
+}
+
+export function FileView({ listing, path, onPathChange, view }: Props) {
+ const styles = useStyles2(getStyles);
+ const info = useMemo(() => getFileDisplayInfo(path), [path]);
+ const body = useAsync(async () => {
+ if (info.category === 'text') {
+ const rsp = await getGrafanaStorage().get(path);
+ if (isString(rsp)) {
+ return rsp;
+ }
+ return JSON.stringify(rsp, null, 2);
+ }
+ return null;
+ }, [info, path]);
+
+ switch (view) {
+ case StorageView.Config:
+ return {JSON.stringify(status, null, 2)}
+ {Boolean(!status.running) && renderButton()}
+ {Boolean(status.running) && (
+
+ )}
+ CONFIGURE?
;
+ case StorageView.Perms:
+ return Permissions
;
+ case StorageView.History:
+ return TODO... history
;
+ }
+
+ let src = `api/storage/read/${path}`;
+ if (src.endsWith('/')) {
+ src = src.substring(0, src.length - 1);
+ }
+
+ switch (info.category) {
+ case 'svg':
+ return (
+
+
+
+ );
+ case 'image':
+ return (
+
+
+ 
+
+
+ );
+ case 'text':
+ return (
+
+
+ {({ width, height }) => (
+ {
+ console.log('CHANGED!', text);
+ }}
+ />
+ )}
+
+
+ );
+ }
+
+ return (
+
+ FILE: {path}
+
+ );
+}
+
+function getFileDisplayInfo(path: string): FileDisplayInfo {
+ const idx = path.lastIndexOf('.');
+ if (idx < 0) {
+ return {};
+ }
+ const suffix = path.substring(idx + 1).toLowerCase();
+ switch (suffix) {
+ case 'svg':
+ return { category: 'svg' };
+ case 'jpg':
+ case 'jpeg':
+ case 'png':
+ case 'webp':
+ case 'gif':
+ return { category: 'image' };
+
+ case 'geojson':
+ case 'json':
+ return { category: 'text', language: 'json' };
+ case 'text':
+ case 'go':
+ case 'md':
+ return { category: 'text' };
+ }
+ return {};
+}
+
+const getStyles = (theme: GrafanaTheme2) => ({
+ // TODO: remove `height: 90%`
+ wrapper: css`
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ `,
+ tableControlRowWrapper: css`
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ margin-bottom: ${theme.spacing(2)};
+ `,
+ // TODO: remove `height: 100%`
+ tableWrapper: css`
+ border: 1px solid ${theme.colors.border.medium};
+ height: 100%;
+ `,
+ uploadSpot: css`
+ margin-left: ${theme.spacing(2)};
+ `,
+ border: css`
+ border: 1px solid ${theme.colors.border.medium};
+ padding: ${theme.spacing(2)};
+ `,
+ img: css`
+ max-width: 100%;
+ // max-height: 147px;
+ // fill: ${theme.colors.text.primary};
+ `,
+ icon: css`
+ // max-width: 100%;
+ // max-height: 147px;
+ // fill: ${theme.colors.text.primary};
+ `,
+});
diff --git a/public/app/features/storage/FolderView.tsx b/public/app/features/storage/FolderView.tsx
new file mode 100644
index 00000000000..9a10b8beaf1
--- /dev/null
+++ b/public/app/features/storage/FolderView.tsx
@@ -0,0 +1,87 @@
+import { css } from '@emotion/css';
+import React from 'react';
+import AutoSizer from 'react-virtualized-auto-sizer';
+
+import { DataFrame, GrafanaTheme2 } from '@grafana/data';
+import { Table, useStyles2 } from '@grafana/ui';
+
+import { UploadView } from './UploadView';
+import { StorageView } from './types';
+
+interface Props {
+ listing: DataFrame;
+ path: string;
+ onPathChange: (p: string, view?: StorageView) => void;
+ view: StorageView;
+}
+
+export function FolderView({ listing, path, onPathChange, view }: Props) {
+ const styles = useStyles2(getStyles);
+
+ switch (view) {
+ case StorageView.Config:
+ return CONFIGURE?
;
+ case StorageView.Perms:
+ return Permissions
;
+ case StorageView.Upload:
+ return (
+
+
+ {({ width, height }) => (
+
+
+ );
+}
+
+const getStyles = (theme: GrafanaTheme2) => ({
+ // TODO: remove `height: 90%`
+ wrapper: css`
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ `,
+ tableControlRowWrapper: css`
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ margin-bottom: ${theme.spacing(2)};
+ `,
+ // TODO: remove `height: 100%`
+ tableWrapper: css`
+ border: 1px solid ${theme.colors.border.medium};
+ height: 100%;
+ `,
+ uploadSpot: css`
+ margin-left: ${theme.spacing(2)};
+ `,
+ border: css`
+ border: 1px solid ${theme.colors.border.medium};
+ padding: ${theme.spacing(2)};
+ `,
+});
diff --git a/public/app/features/storage/RootView.tsx b/public/app/features/storage/RootView.tsx
new file mode 100644
index 00000000000..04b40ad5ceb
--- /dev/null
+++ b/public/app/features/storage/RootView.tsx
@@ -0,0 +1,114 @@
+import { css } from '@emotion/css';
+import React, { useMemo, useState } from 'react';
+
+import { DataFrame, DataFrameView, GrafanaTheme2 } from '@grafana/data';
+import { config } from '@grafana/runtime';
+import { Button, Card, FilterInput, Icon, IconName, TagList, useStyles2, VerticalGroup } from '@grafana/ui';
+
+import { StorageView } from './types';
+
+interface Props {
+ root: DataFrame;
+ onPathChange: (p: string, v?: StorageView) => void;
+}
+
+interface RootFolder {
+ name: string;
+ title: string;
+ storageType: string;
+ description: string;
+ readOnly: boolean;
+ builtIn: boolean;
+}
+
+export function RootView({ root, onPathChange }: Props) {
+ const styles = useStyles2(getStyles);
+ const [searchQuery, setSearchQuery] = useState
+
+
+ )}
+
+
+ {roots.map((v) => (
+
+ {v.title ?? v.name}
+ {v.description}
+
+
+
+
+
+ ))}
+
+
+ );
+}
+
+function getStyles(theme: GrafanaTheme2) {
+ return {
+ secondaryTextColor: css`
+ color: ${theme.colors.text.secondary};
+ `,
+ clickable: css`
+ pointer-events: none;
+ `,
+ };
+}
+
+function getTags(v: RootFolder) {
+ const tags: string[] = [];
+ if (v.builtIn) {
+ tags.push('Builtin');
+ }
+ if (v.readOnly) {
+ tags.push('Read only');
+ }
+ return tags;
+}
+
+export function getIconName(type: string): IconName {
+ switch (type) {
+ case 'git':
+ return 'code-branch';
+ case 'disk':
+ return 'folder-open';
+ case 'sql':
+ return 'database';
+ default:
+ return 'folder-open';
+ }
+}
diff --git a/public/app/features/storage/StoragePage.tsx b/public/app/features/storage/StoragePage.tsx
new file mode 100644
index 00000000000..73211f386c7
--- /dev/null
+++ b/public/app/features/storage/StoragePage.tsx
@@ -0,0 +1,205 @@
+import { css } from '@emotion/css';
+import React, { useMemo } from 'react';
+import { useAsync } from 'react-use';
+
+import { DataFrame, GrafanaTheme2, isDataFrame, ValueLinkConfig } from '@grafana/data';
+import { locationService } from '@grafana/runtime';
+import { useStyles2, IconName, Spinner, TabsBar, Tab, Button, HorizontalGroup } from '@grafana/ui';
+import Page from 'app/core/components/Page/Page';
+import { useNavModel } from 'app/core/hooks/useNavModel';
+import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
+
+import { AddRootView } from './AddRootView';
+import { Breadcrumb } from './Breadcrumb';
+import { ExportView } from './ExportView';
+import { FileView } from './FileView';
+import { FolderView } from './FolderView';
+import { RootView } from './RootView';
+import { getGrafanaStorage } from './helper';
+import { StorageView } from './types';
+
+interface RouteParams {
+ path: string;
+}
+
+interface QueryParams {
+ view: StorageView;
+}
+
+interface Props extends GrafanaRouteComponentProps
+
+
+
+
+ {config.featureToggles.export && (
+
+ )}
+
+
+
+
+
+ {opts.map((opt) => (
+ setPath(path, opt.what)}
+ />
+ ))}
+
+ {isFolder ? (
+
+ );
+ };
+
+ return (
+
+ {canAddFolder && }
+ {canDelete && (
+
+ )}
+
+
+ {secondaryText}
+
+ );
+};
+
+export const UploadView = ({ folder, onUpload }: Props) => {
+ const [file, setFile] = useState
+ {isSvg && }
+ {isImage && !isSvg && }
+
+
+ {
+ setFile(undefined);
+ }}
+ options={{
+ accept: { 'image/*': ['.jpg', '.jpeg', '.png', '.gif', '.webp'] },
+ multiple: false,
+ onDrop: (acceptedFiles: File[]) => {
+ setFile(acceptedFiles[0]);
+ },
+ }}
+ >
+ {error.message !== '' ?
+
+
+
+
+
+ );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+ resourcePickerPopover: css`
+ border-radius: ${theme.shape.borderRadius()};
+ box-shadow: ${theme.shadows.z3};
+ background: ${theme.colors.background.primary};
+ border: 1px solid ${theme.colors.border.medium};
+ `,
+ resourcePickerPopoverContent: css`
+ width: 315px;
+ font-size: ${theme.typography.bodySmall.fontSize};
+ min-height: 184px;
+ padding: ${theme.spacing(1)};
+ display: flex;
+ flex-direction: column;
+ `,
+ button: css`
+ margin: 12px 20px 5px;
+ `,
+ iconPreview: css`
+ width: 238px;
+ height: 198px;
+ border: 1px solid ${theme.colors.border.medium};
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ `,
+ img: css`
+ width: 147px;
+ height: 147px;
+ fill: ${theme.colors.text.primary};
+ `,
+ iconWrapper: css`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ `,
+ small: css`
+ color: ${theme.colors.text.secondary};
+ margin-bottom: ${theme.spacing(2)};
+ `,
+});
diff --git a/public/app/features/storage/helper.ts b/public/app/features/storage/helper.ts
new file mode 100644
index 00000000000..f93c15d841c
--- /dev/null
+++ b/public/app/features/storage/helper.ts
@@ -0,0 +1,66 @@
+import { DataFrame, dataFrameFromJSON, DataFrameJSON, getDisplayProcessor } from '@grafana/data';
+import { config, getBackendSrv } from '@grafana/runtime';
+
+import { UploadReponse } from './types';
+
+// Likely should be built into the search interface!
+export interface GrafanaStorage {
+ get: {error.message}
: Boolean(file) ?