added modal and additional report

This commit is contained in:
Philip Ellis
2023-09-22 13:43:35 -05:00
parent b003959c01
commit 4d8a34f363
6 changed files with 358 additions and 32 deletions

190
package-lock.json generated
View File

@@ -8,6 +8,7 @@
"name": "sveltekit-electron",
"version": "0.0.1",
"dependencies": {
"alasql": "^4.1.9",
"electron-context-menu": "^3.6.1",
"electron-reloader": "^1.2.3",
"electron-serve": "^1.1.0",
@@ -1450,6 +1451,56 @@
"ajv": "^6.9.1"
}
},
"node_modules/alasql": {
"version": "4.1.9",
"resolved": "https://registry.npmjs.org/alasql/-/alasql-4.1.9.tgz",
"integrity": "sha512-pzwQ1Rw9PaEXGqS9XavZbXByYbpI0+YI79rCekc8SijDELchjAarOOLzC7HPCAXe28dSK0G97+VbEalEyWt51g==",
"dependencies": {
"cross-fetch": "4",
"yargs": "16"
},
"bin": {
"alasql": "bin/alasql-cli.js"
},
"engines": {
"node": ">=15"
}
},
"node_modules/alasql/node_modules/cliui": {
"version": "7.0.4",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
"integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
"dependencies": {
"string-width": "^4.2.0",
"strip-ansi": "^6.0.0",
"wrap-ansi": "^7.0.0"
}
},
"node_modules/alasql/node_modules/yargs": {
"version": "16.2.0",
"resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
"integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
"dependencies": {
"cliui": "^7.0.2",
"escalade": "^3.1.1",
"get-caller-file": "^2.0.5",
"require-directory": "^2.1.1",
"string-width": "^4.2.0",
"y18n": "^5.0.5",
"yargs-parser": "^20.2.2"
},
"engines": {
"node": ">=10"
}
},
"node_modules/alasql/node_modules/yargs-parser": {
"version": "20.2.9",
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
"integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
"engines": {
"node": ">=10"
}
},
"node_modules/ansi-regex": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -2361,6 +2412,14 @@
"yarn": ">=1"
}
},
"node_modules/cross-fetch": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-4.0.0.tgz",
"integrity": "sha512-e4a5N8lVvuLgAWgnCrLr2PP0YyDOTHa9H/Rj54dirp61qXnNq46m82bRhNqIA5VccJtWBvPTFRV3TtvHUKPB1g==",
"dependencies": {
"node-fetch": "^2.6.12"
}
},
"node_modules/cross-spawn": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -3419,7 +3478,6 @@
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
"integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
"dev": true,
"engines": {
"node": ">=6"
}
@@ -4088,7 +4146,6 @@
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
"integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
"dev": true,
"engines": {
"node": "6.* || 8.* || >= 10.*"
}
@@ -5510,6 +5567,25 @@
"dev": true,
"optional": true
},
"node_modules/node-fetch": {
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
"integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
"dependencies": {
"whatwg-url": "^5.0.0"
},
"engines": {
"node": "4.x || >=6.0.0"
},
"peerDependencies": {
"encoding": "^0.1.0"
},
"peerDependenciesMeta": {
"encoding": {
"optional": true
}
}
},
"node_modules/node-releases": {
"version": "2.0.13",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",
@@ -6505,7 +6581,6 @@
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
"integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
"dev": true,
"engines": {
"node": ">=0.10.0"
}
@@ -7612,6 +7687,11 @@
"node": ">=6"
}
},
"node_modules/tr46": {
"version": "0.0.3",
"resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
"integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
},
"node_modules/tree-kill": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
@@ -7937,6 +8017,20 @@
}
}
},
"node_modules/webidl-conversions": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
},
"node_modules/whatwg-url": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
"integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
"dependencies": {
"tr46": "~0.0.3",
"webidl-conversions": "^3.0.0"
}
},
"node_modules/which": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -8001,7 +8095,6 @@
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
"dev": true,
"dependencies": {
"ansi-styles": "^4.0.0",
"string-width": "^4.1.0",
@@ -8044,7 +8137,6 @@
"version": "5.0.8",
"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
"integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
"dev": true,
"engines": {
"node": ">=10"
}
@@ -9037,6 +9129,46 @@
"dev": true,
"requires": {}
},
"alasql": {
"version": "4.1.9",
"resolved": "https://registry.npmjs.org/alasql/-/alasql-4.1.9.tgz",
"integrity": "sha512-pzwQ1Rw9PaEXGqS9XavZbXByYbpI0+YI79rCekc8SijDELchjAarOOLzC7HPCAXe28dSK0G97+VbEalEyWt51g==",
"requires": {
"cross-fetch": "4",
"yargs": "16"
},
"dependencies": {
"cliui": {
"version": "7.0.4",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
"integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
"requires": {
"string-width": "^4.2.0",
"strip-ansi": "^6.0.0",
"wrap-ansi": "^7.0.0"
}
},
"yargs": {
"version": "16.2.0",
"resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
"integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
"requires": {
"cliui": "^7.0.2",
"escalade": "^3.1.1",
"get-caller-file": "^2.0.5",
"require-directory": "^2.1.1",
"string-width": "^4.2.0",
"y18n": "^5.0.5",
"yargs-parser": "^20.2.2"
}
},
"yargs-parser": {
"version": "20.2.9",
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
"integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w=="
}
}
},
"ansi-regex": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -9688,6 +9820,14 @@
"cross-spawn": "^7.0.1"
}
},
"cross-fetch": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-4.0.0.tgz",
"integrity": "sha512-e4a5N8lVvuLgAWgnCrLr2PP0YyDOTHa9H/Rj54dirp61qXnNq46m82bRhNqIA5VccJtWBvPTFRV3TtvHUKPB1g==",
"requires": {
"node-fetch": "^2.6.12"
}
},
"cross-spawn": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -10529,8 +10669,7 @@
"escalade": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
"integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
"dev": true
"integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw=="
},
"escape-goat": {
"version": "2.1.1",
@@ -11042,8 +11181,7 @@
"get-caller-file": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
"integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
"dev": true
"integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
},
"get-intrinsic": {
"version": "1.2.0",
@@ -12087,6 +12225,14 @@
"dev": true,
"optional": true
},
"node-fetch": {
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
"integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
"requires": {
"whatwg-url": "^5.0.0"
}
},
"node-releases": {
"version": "2.0.13",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",
@@ -12787,8 +12933,7 @@
"require-directory": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
"integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
"dev": true
"integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q=="
},
"resolve": {
"version": "1.22.6",
@@ -13600,6 +13745,11 @@
"integrity": "sha512-eM+pCBxXO/njtF7vdFsHuqb+ElbxqtI4r5EAvk6grfAFyJ6IvWlSkfZ5T9ozC6xWw3Fj1fGoSmrl0gUs46JVIw==",
"dev": true
},
"tr46": {
"version": "0.0.3",
"resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
"integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
},
"tree-kill": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
@@ -13817,6 +13967,20 @@
"dev": true,
"requires": {}
},
"webidl-conversions": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
},
"whatwg-url": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
"integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
"requires": {
"tr46": "~0.0.3",
"webidl-conversions": "^3.0.0"
}
},
"which": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -13863,7 +14027,6 @@
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
"dev": true,
"requires": {
"ansi-styles": "^4.0.0",
"string-width": "^4.1.0",
@@ -13896,8 +14059,7 @@
"y18n": {
"version": "5.0.8",
"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
"integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
"dev": true
"integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="
},
"yallist": {
"version": "4.0.0",

View File

@@ -38,6 +38,7 @@
"@typescript-eslint/eslint-plugin": "^5.56.0",
"@typescript-eslint/parser": "^5.56.0",
"autoprefixer": "^10.4.14",
"alasql": "^4.1.9",
"axios": "^1.5.0",
"concurrently": "^7.6.0",
"cross-env": "^7.0.3",

View File

@@ -1,13 +1,15 @@
<script lang="ts">
import '../app.postcss';
import { onMount } from 'svelte';
import { Modal, initializeStores } from '@skeletonlabs/skeleton';
initializeStores();
let ready: boolean = false;
onMount(() => (ready = true));
</script>
<div class="dragbar" />
<Modal />
{#if ready}
<slot />
{/if}

View File

@@ -9,10 +9,10 @@
'This report will show all source accounts for which there is a create error associated with the source',
},
{
url: '/source-account-make-error',
name: 'Source Account Make Error',
url: '/identity-inactive-but-has-access',
name: 'Inactive Identities With Access',
description:
'This report will show all source accounts for which there is a create error associated with the source',
'This report will show all identities that are inactive but still have access in sources',
},
];
</script>
@@ -28,10 +28,7 @@
<div class="flex flex-row flex-wrap">
{#each pages as page (page.url)}
<a
class="card card-hover overflow-hidden m-4 w-modal-slim"
href="/source-account-create-error"
>
<a class="card card-hover overflow-hidden m-4 w-modal-slim" href={page.url}>
<header>
<div class="w-full aspect-[21/9] text-container" alt="Post">
<div class="text">{page.name}</div>

View File

@@ -0,0 +1,129 @@
<script lang="ts">
import type { TableSource } from '@skeletonlabs/skeleton';
import { ProgressRadial, Table, tableMapperValues } from '@skeletonlabs/skeleton';
import type { Search } from 'sailpoint-api-client';
import { onMount } from 'svelte';
import alasql from 'alasql';
//export let data;
let tableSimple: TableSource | undefined = undefined;
onMount(async () => {
const search: Search = {
indices: ['identities'],
query: {
query: `@accounts(disabled:false) AND (attributes.cloudLifecycleState:inactive)`,
},
sort: ['name'],
};
const response = await fetch('/api/sailpoint/search', {
method: 'POST',
body: JSON.stringify(search),
headers: {
'content-type': 'application/json',
},
});
let data = await response.json();
console.log(data);
if (JSON.stringify(data) !== '{}') {
let reportResult = [];
for (let row of <any>data) {
let accounts: string[] = [];
for (let account of row.accounts) {
if (account.disabled == false) {
accounts.push(account.source.name);
}
}
reportResult.push({
name: row.displayName,
source: accounts.join(', '),
department: row.attributes.department,
accessCount: row.accessCount,
entitlementCount: row.entitlementCount,
roleCount: row.roleCount,
});
}
let res = alasql(
'SELECT name, source, department, accessCount, entitlementCount, roleCount FROM ?',
[reportResult],
);
console.log(res);
tableSimple = {
// A list of heading labels.
head: [
'Name',
'Sources',
'Departments',
'Access Count',
'Entitlement Count',
'Role Count',
],
// The data visibly shown in your table body UI.
body: tableMapperValues(res, [
'name',
'source',
'department',
'accessCount',
'entitlementCount',
'roleCount',
]),
// Optional: The data returned when interactive is enabled and a row is clicked.
meta: tableMapperValues(res, [
'name',
'source',
'department',
'accessCount',
'entitlementCount',
'roleCount',
]),
};
}
});
function onTableclick(event: any) {
console.log(event);
}
</script>
<main>
<div class="p-4">
<img src="/SailPoint-Developer-Community-Lockup.png" alt="sailPoint Logo" />
<a href="/home" class="btn variant-filled-primary w-full mt-2 text-slate-50 text-lg">
Go back report screen
</a>
<div class="flex justify-center mt-4 flex-col align-middle">
<div class="text-2xl text-slate-500 divide-dashed divide-y-2 mt-4 mb-2">
Listing of identities that are inactive but still have access in sources
</div>
{#if tableSimple}
<Table
class="w-full"
source={tableSimple}
interactive={true}
on:selected={onTableclick}
/>
{:else}
<div class="progress-bar">
<ProgressRadial
stroke={100}
meter="stroke-primary-500"
track="stroke-primary-500/30"
class="progress-bar"
/>
</div>
{/if}
</div>
</div>
</main>
<style>
.progress-bar {
padding-top: calc(50vh - 4.5rem - 200px);
padding-left: calc(50% - 4.5rem);
}
</style>

View File

@@ -1,11 +1,15 @@
<script lang="ts">
import type { TableSource } from '@skeletonlabs/skeleton';
import type { ModalSettings, TableSource } from '@skeletonlabs/skeleton';
import { ProgressRadial, Table, tableMapperValues } from '@skeletonlabs/skeleton';
import type { Search } from 'sailpoint-api-client';
import { onMount } from 'svelte';
import alasql from 'alasql';
import { getModalStore } from '@skeletonlabs/skeleton';
const modalStore = getModalStore();
//export let data;
let tableSimple: TableSource | undefined = undefined;
let rawData: any;
onMount(async () => {
const search: Search = {
indices: ['events'],
@@ -23,13 +27,12 @@
},
});
let data = await response.json();
console.log(data);
rawData = await response.json();
if (JSON.stringify(data) !== '{}') {
if (JSON.stringify(rawData) !== '{}') {
let reportResult = [];
for (let row of <any>data) {
for (let row of <any>rawData) {
reportResult.push({
name: row.target.name,
source: row.attributes.sourceName,
@@ -37,16 +40,43 @@
});
}
let res = alasql(
'SELECT failure, source, name, count(*) as failures FROM ? GROUP BY failure, source, name',
[reportResult],
);
console.log(res);
tableSimple = {
// A list of heading labels.
head: ['Name', 'Source', 'Failure'],
head: ['Name', 'Source', 'Failure', 'Number Failures'],
// The data visibly shown in your table body UI.
body: tableMapperValues(reportResult, ['name', 'source', 'failure']),
body: tableMapperValues(res, ['name', 'source', 'failure', 'failures']),
// Optional: The data returned when interactive is enabled and a row is clicked.
meta: tableMapperValues(reportResult, ['name', 'source', 'failure']),
meta: tableMapperValues(res, ['name', 'source', 'failure', 'failures']),
};
}
});
function onTableclick(event: any) {
console.log(event);
let exceptions = '';
for (let row of rawData) {
if (
row.target.name == event.detail[0] &&
row.attributes.sourceName == event.detail[1] &&
row.name == event.detail[2]
) {
console.log(row.attributes.errors);
exceptions = JSON.stringify(JSON.parse(row.attributes.errors), null, ' ');
}
}
const modal: ModalSettings = {
type: 'alert',
// Data
title: 'Exception Details',
body: `${exceptions}`,
};
modalStore.trigger(modal);
}
</script>
<main>
@@ -60,7 +90,12 @@
Listing of Source Account Create Errors
</div>
{#if tableSimple}
<Table class="w-full" source={tableSimple} />
<Table
class="w-full"
source={tableSimple}
interactive={true}
on:selected={onTableclick}
/>
{:else}
<div class="progress-bar">
<ProgressRadial