feat: details (#224)

Signed-off-by: Javed Habib <100477031+JaeAeich@users.noreply.github.com> Co-authored-by: Javed Habib <jh4official@gmail.com> Co-authored-by: Javed Habib <100477031+JaeAeich@users.noreply.github.com>
elixir-cloud-aai · Mar 3, 2024 · 223aa30 · 223aa30
1 parent d7d38bc
commit 223aa30
Show file tree

Hide file tree

Showing 9 changed files with 1,366 additions and 1,615 deletions.
diff --git a/apps/documentation/docs/design/components/details.md b/apps/documentation/docs/design/components/details.md
diff --git a/packages/ecc-client-lit-ga4gh-tes/demo/runs/index.html b/packages/ecc-client-lit-ga4gh-tes/demo/runs/index.html
@@ -16,14 +16,12 @@
 			import { html, render } from "lit";
 			import "../../dist/index.js";
 
-			const baseURL = "http://localhost:8080/ga4gh/tes/v1";
+			// const baseURL = "http://localhost:8080/ga4gh/tes/v1";
 			const pageSize = 10;
+			// .baseURL="${baseURL}"
 
 			render(
-			  html`<ecc-client-lit-ga4gh-tes-runs
-			    .pageSize="${pageSize}"
-			    .baseURL="${baseURL}"
-			  />`,
+			  html`<ecc-client-lit-ga4gh-tes-runs .pageSize="${pageSize}" />`,
 			  document.querySelector("#demo")
 			);
 		</script>

diff --git a/packages/ecc-client-lit-ga4gh-tes/src/components/runs/runs.ts b/packages/ecc-client-lit-ga4gh-tes/src/components/runs/runs.ts
@@ -16,8 +16,21 @@ export interface Children {
 }
 
 export interface Field {
-  tabGroup: string;
-  children: Array<Children>;
+  key: string;
+  path: string;
+  tab?: string;
+  label?: string;
+  arrayOptions?: {
+    labelOptions?: {
+      path?: string;
+      prefix?: string;
+      suffix?: string;
+    };
+    type?: "detail" | "tag";
+  };
+  tooltip?: string;
+  copy?: boolean;
+  parentKey?: string;
 }
 interface ItemProp {
   index: number;
@@ -40,11 +53,25 @@ interface FilterProp {
   placeholder?: string;
 }
 
-interface FooterButton {
+export interface Action {
   key: string;
-  name: string;
-  variant?: "primary" | "success" | "neutral" | "warning" | "danger";
-  icon?: string;
+  label: string;
+  type: "button" | "link";
+  buttonOptions?: {
+    variant?: "primary" | "success" | "neutral" | "warning" | "danger" | "text";
+    loading?: boolean;
+    disabled?: boolean;
+    size?: "small" | "medium" | "large";
+    icon?: {
+      url: string;
+      position?: "prefix" | "suffix";
+    };
+  };
+  linkOptions?: {
+    url: string;
+    size?: "small" | "medium" | "large";
+  };
+  position?: "left" | "right";
 }
 
 @customElement("ecc-client-lit-ga4gh-tes-runs")
@@ -58,66 +85,128 @@ export class TESRuns extends LitElement {
   @property({ type: Boolean }) private search = true;
   @property({ type: Array }) private fields: Array<Field> = [
     {
-      tabGroup: "Overview",
-      children: [
-        {
-          label: "Name",
-          path: "name",
-          copy: true,
-        },
-        {
-          label: "Description",
-          path: "description",
-        },
-        {
-          label: "Resources",
-          path: "resources",
-        },
-        {
-          label: "Tags",
-          path: "tags",
-        },
-        {
-          label: "Executor",
-          path: "executors",
-        },
-        {
-          label: "Volumes",
-          path: "volumes",
-        },
-        {
-          label: "Creation time",
-          path: "creation_time",
+      key: "name",
+      path: "name",
+      tab: "Overview",
+      label: "Name",
+      copy: true,
+    },
+    {
+      key: "description",
+      path: "description",
+      tab: "Overview",
+      label: "Description",
+    },
+    {
+      key: "resources",
+      path: "resources",
+      tab: "Overview",
+      label: "Resources",
+    },
+    {
+      key: "tags",
+      path: "tags",
+      tab: "Overview",
+      label: "Tags",
+    },
+    {
+      key: "executors",
+      path: "executors",
+      tab: "Overview",
+      label: "Executor",
+    },
+    {
+      key: "executors*",
+      path: "executors[*]",
+      arrayOptions: {
+        labelOptions: {
+          path: "image",
         },
-      ],
+      },
+    },
+    {
+      key: "executors*command",
+      path: "executors[*].command",
+      arrayOptions: {
+        type: "tag",
+      },
+    },
+    {
+      key: "volumes",
+      path: "volumes",
+      tab: "Overview",
+      label: "Volumes",
+    },
+    {
+      key: "creation_time",
+      path: "creation_time",
+      tab: "Overview",
+      label: "Creation time",
+    },
+    {
+      key: "logs",
+      path: "logs",
+      tab: "Logs",
+      label: "Logs",
+      copy: true,
+    },
+    {
+      key: "logs[*].logs[*].stderr",
+      path: "logs[*].logs[*].stderr",
+      label: "STDERR",
+      copy: true,
     },
     {
-      tabGroup: "Logs",
-      children: [
-        {
-          label: "Logs",
-          path: "logs",
-          copy: true,
+      key: "logs[*].logs[*].stdout",
+      path: "logs[*].logs[*].stdout",
+      label: "STDOUT",
+      copy: true,
+    },
+    {
+      key: "logs[*]",
+      path: "logs[*]",
+      arrayOptions: {
+        labelOptions: {
+          path: "start_time",
+          prefix: "Start time: ",
         },
-      ],
+      },
+      copy: true,
     },
     {
-      tabGroup: "Output",
-      children: [
-        {
-          label: "Output",
-          path: "outputs",
+      key: "logs[*].logs[*]",
+      path: "logs[*].logs[*]",
+      arrayOptions: {
+        labelOptions: {
+          path: "start_time",
+          prefix: "Start time: ",
         },
-      ],
+      },
+      copy: true,
     },
     {
-      tabGroup: "Inputs",
-      children: [
-        {
-          label: "Input",
-          path: "inputs",
+      key: "outputs",
+      path: "outputs",
+      tab: "Output",
+      label: "Output",
+      copy: true,
+    },
+    {
+      key: "inputs",
+      path: "inputs",
+      tab: "Inputs",
+      label: "Input",
+      copy: true,
+    },
+    {
+      key: "inputs",
+      path: "inputs[*]",
+      arrayOptions: {
+        labelOptions: {
+          path: "path",
         },
-      ],
+      },
+      copy: true,
     },
   ];
 
@@ -280,12 +369,17 @@ export class TESRuns extends LitElement {
         const child = document.createElement("div");
         child.setAttribute("slot", key);
 
-        const button: FooterButton[] = [
+        const button: Action[] = [
           {
             key,
-            name: "Delete",
-            variant: "danger",
-            icon: "/assets/delete.svg",
+            label: "Delete",
+            type: "button",
+            buttonOptions: {
+              variant: "danger",
+              icon: {
+                url: "https://cdn.iconscout.com/icon/free/png-256/free-delete-2902143-2411575.png",
+              },
+            },
           },
         ];
 
@@ -294,7 +388,7 @@ export class TESRuns extends LitElement {
           id=${key}
           .data=${runData}
           .fields=${this.fields}
-          .buttons=${button}
+          .actions=${button}
         >
         </ecc-utils-design-details>`;
 

diff --git a/packages/ecc-client-lit-ga4gh-wes/assets/delete.svg b/packages/ecc-client-lit-ga4gh-wes/assets/delete.svg
diff --git a/packages/ecc-client-lit-ga4gh-wes/demo/runs/index.html b/packages/ecc-client-lit-ga4gh-wes/demo/runs/index.html
@@ -1,32 +1,32 @@
 <!DOCTYPE html>
 <html lang="en-GB">
-  <head>
-    <meta charset="utf-8" />
-    <style>
-      body {
-        background: #fafafa;
-      }
-    </style>
-  </head>
-  <title>ecc-client-ga4gh-wes-runs</title>
-  <body>
-    <div id="demo"></div>
+	<head>
+		<meta charset="utf-8" />
+		<style>
+			body {
+				background: #fafafa;
+			}
+		</style>
+	</head>
+	<title>ecc-client-ga4gh-wes-runs</title>
+	<body>
+		<div id="demo"></div>
 
-    <script type="module">
-      import { html, render } from "lit";
-      import "../../dist/index.js";
+		<script type="module">
+			import { html, render } from "lit";
+			import "../../dist/index.js";
 
-      const baseURL = "http://localhost:8090/ga4gh/wes/v1";
-      const pageSize = 10;
-      const filter = false;
-      render(
-        html`<ecc-client-lit-ga4gh-wes-runs
-          .pageSize="${pageSize}"
-          .baseURL="${baseURL}"
-          .filter=${filter}
-        />`,
-        document.querySelector("#demo")
-      );
-    </script>
-  </body>
+			// const baseURL = "http://localhost:8090/ga4gh/wes/v1";
+			const pageSize = 10;
+			const filter = false;
+			// .baseURL="${baseURL}"
+			render(
+			  html`<ecc-client-lit-ga4gh-wes-runs
+			    .pageSize="${pageSize}"
+			    .filter=${filter}
+			  />`,
+			  document.querySelector("#demo")
+			);
+		</script>
+	</body>
 </html>