Skip to content

Commit

Permalink
Add pretty display support for ZLib-compressed blobs
Browse files Browse the repository at this point in the history
  • Loading branch information
remko committed Aug 19, 2021
1 parent 477edf0 commit 96b626d
Show file tree
Hide file tree
Showing 6 changed files with 62 additions and 3 deletions.
3 changes: 2 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
Administration GUI for the Google Cloud Datastore Emulator.

- Supports browsing, editing, creating, deleting, querying (using GQL), import, export, ...
- Supports formatted display of JSON properties & compressed properties
- Supports large databases
- Does not have problematic dependencies (such as gRPC, which are not available
on all platforms)
Expand All @@ -30,7 +31,7 @@ features, had performance issues, were painful to set up, or had dependencies
that prevented them from e.g. being installed in a non-x86 Docker image.

This project tries to fix all of the issues with the other Datastore admin
interfaces, and even improve on the original Google interface in some areas.
interfaces, and bring improvements on the original Google interface.


## 🚧 Not yet implemented
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
"http2-proxy": "^5.0.53",
"jsesc": "^3.0.2",
"node-static": "^0.7.11",
"pako": "^2.0.4",
"yargs": "14.2.3"
},
"devDependencies": {
Expand Down
31 changes: 29 additions & 2 deletions src/PropertyValueEdit.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,26 @@ import PlusIcon from "./ui/icons/plus";
import ExclamationCircle from "./ui/icons/exclamation-circle";
import TrashIcon from "./ui/icons/trash";
import LinkIcon from "./ui/icons/link";
import ArrowsAngleContractIcon from "./ui/icons/arrows-angle-contract";
import { Link } from "wouter";
import Modal from "./ui/Modal";
import { inflate } from "pako";

function decompress(raw: string) {
if (raw.length < 1) {
return null;
}
const rawLength = raw.length;
const array = new Uint8Array(new ArrayBuffer(rawLength));
for (let i = 0; i < rawLength; i++) {
array[i] = raw.charCodeAt(i);
}
try {
return new TextDecoder().decode(inflate(array));
} catch (e) {
return null;
}
}

function toPrettyValue(v: string | null) {
if (v == null) {
Expand Down Expand Up @@ -119,17 +137,26 @@ function BlobValueEdit({
);
let blob: string | null = null;
let prettyValue: string | null = null;
let decompressedBlob: string | null = null;
try {
blob = atob(value);
prettyValue = toPrettyValue(blob);
decompressedBlob = decompress(blob);
prettyValue = toPrettyValue(decompressedBlob ?? blob);
} catch (e) {
//pass
}
return (
<div className="mb-3">
<div className="d-flex justify-content-between align-items-center mb-1">
<label className="form-label mb-1">Value (Base64)</label>
{prettyValue != null ? <PrettyValueButton value={prettyValue} /> : null}
<div>
{decompressedBlob != null ? (
<ArrowsAngleContractIcon className="me-2" title="Compressed" />
) : null}
{prettyValue != null ? (
<PrettyValueButton value={prettyValue} />
) : null}
</div>
</div>
<textarea
className={classNames("form-control", length == null && "is-invalid")}
Expand Down
22 changes: 22 additions & 0 deletions src/ui/icons/arrows-angle-contract.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React from "react";
import type { IconProps } from "./icon";

const ArrowsAngleContract = (props: IconProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="12"
height="12"
fill="currentColor"
className="bi"
viewBox="0 0 16 16"
{...props}
>
{props.title != null ? <title>{props.title}</title> : null}
<path
fillRule="evenodd"
d="M.172 15.828a.5.5 0 0 0 .707 0l4.096-4.096V14.5a.5.5 0 1 0 1 0v-3.975a.5.5 0 0 0-.5-.5H1.5a.5.5 0 0 0 0 1h2.768L.172 15.121a.5.5 0 0 0 0 .707zM15.828.172a.5.5 0 0 0-.707 0l-4.096 4.096V1.5a.5.5 0 1 0-1 0v3.975a.5.5 0 0 0 .5.5H14.5a.5.5 0 0 0 0-1h-2.768L15.828.879a.5.5 0 0 0 0-.707z"
/>
</svg>
);

export default ArrowsAngleContract;
3 changes: 3 additions & 0 deletions types/pako.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
declare module "pako" {
export function inflate(input: Uint8Array);
}
5 changes: 5 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -4426,6 +4426,11 @@ pacote@^11.3.1:
ssri "^8.0.1"
tar "^6.1.0"

pako@^2.0.4:
version "2.0.4"
resolved "https://registry.yarnpkg.com/pako/-/pako-2.0.4.tgz#6cebc4bbb0b6c73b0d5b8d7e8476e2b2fbea576d"
integrity sha512-v8tweI900AUkZN6heMU/4Uy4cXRc2AYNRggVmTR+dEncawDJgCdLMximOVA2p4qO57WMynangsfGRb5WD6L1Bg==

parent-module@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz"
Expand Down

0 comments on commit 96b626d

Please sign in to comment.