Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-08 14:35:45 +01:00
Code Issues Packages Projects Releases Activity

WIP

Browse Source
This commit is contained in:
René Pfeuffer
2020-02-19 18:37:09 +01:00
parent fe1591171d
commit 4bc3d16aa9
3 changed files with 165 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
scm-ui/ui-types/src/Sources.ts
View File

@@ -18,6 +18,7 @@ export type File = {
subRepository?: SubRepository; // TODO subRepository?: SubRepository; // TODO
partialResult: boolean; partialResult: boolean;
computationAborted: boolean; computationAborted: boolean;
truncated: boolean;
_links: Links; _links: Links;
_embedded: { _embedded: {
children: File[] | null | undefined; children: File[] | null | undefined;

161
scm-ui/ui-webapp/src/repos/sources/components/FileTree.tsx
View File

@@ -7,28 +7,40 @@ import styled from "styled-components";
import { binder } from "@scm-manager/ui-extensions"; import { binder } from "@scm-manager/ui-extensions";
import { File, Repository } from "@scm-manager/ui-types"; import { File, Repository } from "@scm-manager/ui-types";
import { ErrorNotification, Loading, Notification } from "@scm-manager/ui-components"; import { ErrorNotification, Loading, Notification } from "@scm-manager/ui-components";
import { fetchSources, getFetchSourcesFailure, getSources, isFetchSourcesPending } from "../modules/sources"; import {
fetchSources,
getFetchSourcesFailure,
getHunkCount,
getSources,
isFetchSourcesPending, isUpdateSourcePending
} from "../modules/sources";
import FileTreeLeaf from "./FileTreeLeaf"; import FileTreeLeaf from "./FileTreeLeaf";
import queryString from "query-string"; import Button from "@scm-manager/ui-components/src/buttons/Button";
type Props = WithTranslation & { type Hunk = {
tree: File;
loading: boolean; loading: boolean;
error: Error; error: Error;
tree: File; updateSources: (hunk: number) => void;
};
type Props = WithTranslation & {
repository: Repository; repository: Repository;
revision: string; revision: string;
path: string; path: string;
baseUrl: string; baseUrl: string;
location: any; location: any;
hunks: Hunk[];
updateSources: () => void; // dispatch props
fetchSources: (repository: Repository, revision: string, path: string, hunk: number) => void;
// context props // context props
match: any; match: any;
}; };
type State = { type State = {
stoppableUpdateHandler?: number; stoppableUpdateHandler: number[];
}; };
const FixedWidthTh = styled.th` const FixedWidthTh = styled.th`
@@ -50,44 +62,57 @@ export function findParent(path: string) {
class FileTree extends React.Component<Props, State> { class FileTree extends React.Component<Props, State> {
constructor(props: Props) { constructor(props: Props) {
super(props); super(props);
this.state = {}; this.state = { stoppableUpdateHandler: [] };
} }
componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<State>): void { componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<State>): void {
if (prevState.stoppableUpdateHandler === this.state.stoppableUpdateHandler) { if (prevState.stoppableUpdateHandler === this.state.stoppableUpdateHandler) {
const { tree, updateSources } = this.props; const { hunks } = this.props;
if (tree?._embedded?.children && tree._embedded.children.find(c => c.partialResult)) { hunks?.forEach((hunk, index) => {
const stoppableUpdateHandler = setTimeout(updateSources, 3000); if (hunk.tree?._embedded?.children && hunk.tree._embedded.children.find(c => c.partialResult)) {
this.setState({ stoppableUpdateHandler: stoppableUpdateHandler }); const stoppableUpdateHandler = setTimeout(hunk.updateSources, 3000);
} this.setState(prevState => {
return {
stoppableUpdateHandler: [...prevState.stoppableUpdateHandler, stoppableUpdateHandler]
};
});
}
});
} }
} }
componentWillUnmount(): void { componentWillUnmount(): void {
if (this.state.stoppableUpdateHandler) { this.state.stoppableUpdateHandler.forEach(handler => clearTimeout(handler));
clearTimeout(this.state.stoppableUpdateHandler);
}
} }
loadMore = () => {
// console.log("smth");
};
render() { render() {
const { error, loading, tree } = this.props; const { hunks, t } = this.props;
if (error) { if (!hunks || hunks.length === 0) {
return <ErrorNotification error={error} />;
}
if (loading) {
return <Loading />;
}
if (!tree) {
return null; return null;
} }
return <div className="panel-block">{this.renderSourcesTable()}</div>; if (hunks.some(hunk => hunk.error)) {
return <ErrorNotification error={hunks.map(hunk => hunk.error)[0]} />;
}
const lastHunk = hunks[hunks.length - 1];
return (
<div className="panel-block">
{this.renderSourcesTable()}
{lastHunk.loading && <Loading />}
{lastHunk.tree?.truncated && <Button label={t("sources.loadMore")} action={this.loadMore} />}
</div>
);
} }
renderSourcesTable() { renderSourcesTable() {
const { tree, revision, path, baseUrl, t, location } = this.props; const { hunks, revision, path, baseUrl, t } = this.props;
const files = []; const files = [];
@@ -115,46 +140,41 @@ class FileTree extends React.Component<Props, State> {
} }
}; };
if (tree._embedded && tree._embedded.children) { hunks
const children = [...tree._embedded.children].sort(compareFiles); .filter(hunk => !hunk.loading)
files.push(...children); .forEach(hunk => {
} if (hunk.tree?._embedded && hunk.tree._embedded.children) {
const children = [...hunk.tree._embedded.children];
files.push(...children);
}
});
if (files && files.length > 0) { if (files && files.length > 0) {
let baseUrlWithRevision = baseUrl; let baseUrlWithRevision = baseUrl;
if (revision) { if (revision) {
baseUrlWithRevision += "/" + encodeURIComponent(revision); baseUrlWithRevision += "/" + encodeURIComponent(revision);
} else { } else {
baseUrlWithRevision += "/" + encodeURIComponent(tree.revision); baseUrlWithRevision += "/" + encodeURIComponent(hunks[0].tree.revision);
}
const offset = queryString.parse(location.search).offset;
if (offset) {
baseUrlWithRevision += "?offset=" + offset;
} }
return ( return (
<> <table className="table table-hover table-sm is-fullwidth">
<table className="table table-hover table-sm is-fullwidth"> <thead>
<thead> <tr>
<tr> <FixedWidthTh />
<FixedWidthTh /> <th>{t("sources.file-tree.name")}</th>
<th>{t("sources.file-tree.name")}</th> <th className="is-hidden-mobile">{t("sources.file-tree.length")}</th>
<th className="is-hidden-mobile">{t("sources.file-tree.length")}</th> <th className="is-hidden-mobile">{t("sources.file-tree.commitDate")}</th>
<th className="is-hidden-mobile">{t("sources.file-tree.commitDate")}</th> <th className="is-hidden-touch">{t("sources.file-tree.description")}</th>
<th className="is-hidden-touch">{t("sources.file-tree.description")}</th> {binder.hasExtension("repos.sources.tree.row.right") && <th className="is-hidden-mobile" />}
{binder.hasExtension("repos.sources.tree.row.right") && <th className="is-hidden-mobile" />} </tr>
</tr> </thead>
</thead> <tbody>
<tbody> {files.map((file: any) => (
{files.map((file: any) => ( <FileTreeLeaf key={file.name} file={file} baseUrl={baseUrlWithRevision} />
<FileTreeLeaf key={file.name} file={file} baseUrl={baseUrlWithRevision} /> ))}
))} </tbody>
</tbody> </table>
</table>
{tree.truncated && <h1>TRUNCATED</h1>}
</>
); );
} }
return <Notification type="info">{t("sources.noSources")}</Notification>; return <Notification type="info">{t("sources.noSources")}</Notification>;
@@ -164,24 +184,37 @@ class FileTree extends React.Component<Props, State> {
const mapDispatchToProps = (dispatch: any, ownProps: Props) => { const mapDispatchToProps = (dispatch: any, ownProps: Props) => {
const { repository, revision, path } = ownProps; const { repository, revision, path } = ownProps;
const updateSources = () => dispatch(fetchSources(repository, revision, path, false)); return {
updateSources: (hunk: number) => dispatch(fetchSources(repository, revision, path, false, hunk)),
return { updateSources }; fetchSources: (repository: Repository, revision: string, path: string, hunk: number) => {
dispatch(fetchSources(repository, revision, path, true, hunk));
}
};
}; };
const mapStateToProps = (state: any, ownProps: Props) => { const mapStateToProps = (state: any, ownProps: Props) => {
const { repository, revision, path } = ownProps; const { repository, revision, path } = ownProps;
const loading = isFetchSourcesPending(state, repository, revision, path); const loading = isFetchSourcesPending(state, repository, revision, path, 0);
const error = getFetchSourcesFailure(state, repository, revision, path); const error = getFetchSourcesFailure(state, repository, revision, path, 0);
const tree = getSources(state, repository, revision, path); const hunkCount = getHunkCount(state, repository, revision, path);
const hunks = [];
for (let i = 0; i < hunkCount; ++i) {
console.log(`getting data for hunk ${i}`);
const tree = getSources(state, repository, revision, path, i);
const loading = isFetchSourcesPending(state, repository, revision, path, i);
hunks.push({
tree,
loading
});
}
return { return {
revision, revision,
path, path,
loading, loading,
error, error,
tree hunks
}; };
}; };

91
scm-ui/ui-webapp/src/repos/sources/modules/sources.ts
View File

@@ -10,34 +10,36 @@ export const FETCH_UPDATES_PENDING = `${FETCH_SOURCES}_UPDATE_PENDING`;
export const FETCH_SOURCES_SUCCESS = `${FETCH_SOURCES}_${types.SUCCESS_SUFFIX}`; export const FETCH_SOURCES_SUCCESS = `${FETCH_SOURCES}_${types.SUCCESS_SUFFIX}`;
export const FETCH_SOURCES_FAILURE = `${FETCH_SOURCES}_${types.FAILURE_SUFFIX}`; export const FETCH_SOURCES_FAILURE = `${FETCH_SOURCES}_${types.FAILURE_SUFFIX}`;
export function fetchSources(repository: Repository, revision: string, path: string, initialLoad = true) { export function fetchSources(repository: Repository, revision: string, path: string, initialLoad = true, hunk = 0) {
return function(dispatch: any, getState: () => any) { return function(dispatch: any, getState: () => any) {
const state = getState(); const state = getState();
if ( if (
isFetchSourcesPending(state, repository, revision, path) || isFetchSourcesPending(state, repository, revision, path, hunk) ||
isUpdateSourcePending(state, repository, revision, path) isUpdateSourcePending(state, repository, revision, path, hunk)
) { ) {
return; return;
} }
if (initialLoad) { if (initialLoad) {
dispatch(fetchSourcesPending(repository, revision, path)); dispatch(fetchSourcesPending(repository, revision, path, hunk));
} else { } else {
dispatch(updateSourcesPending(repository, revision, path, getSources(state, repository, revision, path))); dispatch(
updateSourcesPending(repository, revision, path, hunk, getSources(state, repository, revision, path, hunk))
);
} }
return apiClient return apiClient
.get(createUrl(repository, revision, path)) .get(createUrl(repository, revision, path, hunk))
.then(response => response.json()) .then(response => response.json())
.then((sources: File) => { .then((sources: File) => {
dispatch(fetchSourcesSuccess(repository, revision, path, sources)); dispatch(fetchSourcesSuccess(repository, revision, path, hunk, sources));
}) })
.catch(err => { .catch(err => {
dispatch(fetchSourcesFailure(repository, revision, path, err)); dispatch(fetchSourcesFailure(repository, revision, path, hunk, err));
}); });
}; };
} }
function createUrl(repository: Repository, revision: string, path: string) { function createUrl(repository: Repository, revision: string, path: string, hunk: number) {
const base = (repository._links.sources as Link).href; const base = (repository._links.sources as Link).href;
if (!revision && !path) { if (!revision && !path) {
return base; return base;
@@ -45,13 +47,14 @@ function createUrl(repository: Repository, revision: string, path: string) {
// TODO handle trailing slash // TODO handle trailing slash
const pathDefined = path ? path : ""; const pathDefined = path ? path : "";
return `${base}${encodeURIComponent(revision)}/${pathDefined}`; return `${base}${encodeURIComponent(revision)}/${pathDefined}?hunk=${hunk}`;
} }
export function fetchSourcesPending(repository: Repository, revision: string, path: string): Action { export function fetchSourcesPending(repository: Repository, revision: string, path: string, hunk: number): Action {
return { return {
type: FETCH_SOURCES_PENDING, type: FETCH_SOURCES_PENDING,
itemId: createItemId(repository, revision, path) itemId: createItemId(repository, revision, path),
payload: { hunk, pending: true, sources: {} }
}; };
} }
@@ -59,24 +62,37 @@ export function updateSourcesPending(
repository: Repository, repository: Repository,
revision: string, revision: string,
path: string, path: string,
hunk: number,
currentSources: any currentSources: any
): Action { ): Action {
return { return {
type: FETCH_UPDATES_PENDING, type: FETCH_UPDATES_PENDING,
payload: { updatePending: true, sources: currentSources }, payload: { hunk, updatePending: true, sources: currentSources },
itemId: createItemId(repository, revision, path) itemId: createItemId(repository, revision, path)
}; };
} }
export function fetchSourcesSuccess(repository: Repository, revision: string, path: string, sources: File) { export function fetchSourcesSuccess(
repository: Repository,
revision: string,
path: string,
hunk: number,
sources: File
) {
return { return {
type: FETCH_SOURCES_SUCCESS, type: FETCH_SOURCES_SUCCESS,
payload: { updatePending: false, sources }, payload: { hunk, pending: false, updatePending: false, sources },
itemId: createItemId(repository, revision, path) itemId: createItemId(repository, revision, path)
}; };
} }
export function fetchSourcesFailure(repository: Repository, revision: string, path: string, error: Error): Action { export function fetchSourcesFailure(
repository: Repository,
revision: string,
path: string,
hunk: number,
error: Error
): Action {
return { return {
type: FETCH_SOURCES_FAILURE, type: FETCH_SOURCES_FAILURE,
payload: error, payload: error,
@@ -99,9 +115,14 @@ export default function reducer(
} }
): any { ): any {
if (action.itemId && (action.type === FETCH_SOURCES_SUCCESS || action.type === FETCH_UPDATES_PENDING)) { if (action.itemId && (action.type === FETCH_SOURCES_SUCCESS || action.type === FETCH_UPDATES_PENDING)) {
console.log("adding payload to " + action.itemId + "/" + action.payload.hunk);
return { return {
...state, ...state,
[action.itemId]: action.payload [action.itemId + "/hunkCount"]: action.payload.hunk + 1,
[action.itemId + "/" + action.payload.hunk]: {
sources: action.payload.sources,
loading: false
}
}; };
} }
return state; return state;
@@ -110,7 +131,7 @@ export default function reducer(
// selectors // selectors
export function isDirectory(state: any, repository: Repository, revision: string, path: string): boolean { export function isDirectory(state: any, repository: Repository, revision: string, path: string): boolean {
const currentFile = getSources(state, repository, revision, path); const currentFile = getSources(state, repository, revision, path, 0);
if (currentFile && !currentFile.directory) { if (currentFile && !currentFile.directory) {
return false; return false;
} else { } else {
@@ -118,31 +139,53 @@ export function isDirectory(state: any, repository: Repository, revision: string
} }
} }
export function getHunkCount(state: any, repository: Repository, revision: string | undefined, path: string): number {
if (state.sources) {
const count = state.sources[createItemId(repository, revision, path) + "/hunkCount"];
return count ? count : 0;
}
return 0;
}
export function getSources( export function getSources(
state: any, state: any,
repository: Repository, repository: Repository,
revision: string | undefined, revision: string | undefined,
path: string path: string,
hunk: number
): File | null | undefined { ): File | null | undefined {
if (state.sources) { if (state.sources) {
return state.sources[createItemId(repository, revision, path)]?.sources; return state.sources[createItemId(repository, revision, path) + "/" + hunk]?.sources;
} }
return null; return null;
} }
export function isFetchSourcesPending(state: any, repository: Repository, revision: string, path: string): boolean { export function isFetchSourcesPending(
state: any,
repository: Repository,
revision: string,
path: string,
hunk: number
): boolean {
return state && isPending(state, FETCH_SOURCES, createItemId(repository, revision, path)); return state && isPending(state, FETCH_SOURCES, createItemId(repository, revision, path));
} }
function isUpdateSourcePending(state: any, repository: Repository, revision: string, path: string): boolean { export function isUpdateSourcePending(
return state?.sources && state.sources[createItemId(repository, revision, path)]?.updatePending; state: any,
repository: Repository,
revision: string,
path: string,
hunk: number
): boolean {
return state?.sources && state.sources[createItemId(repository, revision, path) + "/" + hunk]?.updatePending;
} }
export function getFetchSourcesFailure( export function getFetchSourcesFailure(
state: any, state: any,
repository: Repository, repository: Repository,
revision: string, revision: string,
path: string path: string,
hunk: number
): Error | null | undefined { ): Error | null | undefined {
return getFailure(state, FETCH_SOURCES, createItemId(repository, revision, path)); return getFailure(state, FETCH_SOURCES, createItemId(repository, revision, path));
} }