chore: dashboard patch of chaos-mesh#720 and chaos-mesh#713 (chaos-me…

…sh#724) * chore: correct case of experiments state Signed-off-by: Yue Yang <[email protected]> * chore: patch of chaos-mesh#713 Signed-off-by: Yue Yang <[email protected]> Co-authored-by: ti-srebot <[email protected]>
sjwsl · Jul 22, 2020 · 50cae38 · 50cae38
1 parent dfee1b3
commit 50cae38
Show file tree

Hide file tree

Showing 12 changed files with 79 additions and 117 deletions.
diff --git a/ui/src/api/experiments.ts b/ui/src/api/experiments.ts
@@ -15,14 +15,10 @@ export const experiments: (
 ) => Promise<AxiosResponse<ExperimentReponse[]>> = (namespace = '', name = '', kind = '', status = '') =>
   http.get(`/experiments?namespace=${namespace}&name=${name}&kind=${kind}&status=${status}`)
 
-export const deleteExperiment = (namespace: string, name: string, kind: string) =>
-  http.delete(`/experiments/${kind}/${namespace}/${name}`)
+export const deleteExperiment = (uuid: uuid) => http.delete(`/experiments/${uuid}`)
 
-export const pauseExperiment = (namespace: string, name: string, kind: string) =>
-  http.put(`/experiments/pause/${kind}/${namespace}/${name}`)
+export const pauseExperiment = (uuid: uuid) => http.put(`/experiments/pause/${uuid}`)
 
-export const startExperiment = (namespace: string, name: string, kind: string) =>
-  http.put(`/experiments/start/${kind}/${namespace}/${name}`)
+export const startExperiment = (uuid: uuid) => http.put(`/experiments/start/${uuid}`)
 
-export const detail = (namespace: string, name: string, kind: string) =>
-  http.get(`/experiments/detail/${kind}/${namespace}/${name}`)
+export const detail = (uuid: uuid) => http.get(`/experiments/detail/${uuid}`)
diff --git a/ui/src/api/experiments.type.ts b/ui/src/api/experiments.type.ts
@@ -1,21 +1,21 @@
 import { Event } from './events.type'
 
 export interface StateOfExperiments {
-  total: number
-  running: number
-  waiting: number
-  paused: number
-  failed: number
-  finished: number
+  Total: number
+  Running: number
+  Waiting: number
+  Paused: number
+  Failed: number
+  Finished: number
 }
 
 export enum StateOfExperimentsEnum {
-  total = 'total',
-  running = 'running',
-  waiting = 'waiting',
-  paused = 'paused',
-  failed = 'failed',
-  finished = 'finished',
+  Total = 'total',
+  Running = 'running',
+  Waiting = 'waiting',
+  Paused = 'paused',
+  Failed = 'failed',
+  Finished = 'finished',
 }
 
 export interface Experiment {
@@ -24,5 +24,6 @@ export interface Experiment {
   Name: string
   created: string
   status: keyof StateOfExperiments
+  uid: uuid
   events?: Event[]
 }
diff --git a/ui/src/components/EventsTable/index.tsx b/ui/src/components/EventsTable/index.tsx
@@ -196,7 +196,7 @@ const EventsTableRow: React.FC<EventsTableRowProps> = ({ event: e, detailed, noE
           <TableCell>
             <Button
               component={Link}
-              to={`/experiments/${e.Experiment}?namespace=${e.Namespace}&kind=${e.Kind}&event=${e.ID}`}
+              to={`/experiments/${e.ExperimentID}?name=${e.Experiment}&event=${e.ID}`}
               variant="outlined"
               size="small"
               color="primary"

diff --git a/ui/src/components/ExperimentPaper/index.tsx b/ui/src/components/ExperimentPaper/index.tsx
@@ -31,14 +31,7 @@ const useStyles = makeStyles((theme: Theme) =>
 interface ExperimentPaperProps {
   experiment: Experiment | Archive
   isArchive?: boolean
-  handleSelect: (info: {
-    namespace: string
-    name: string
-    kind: string
-    title: string
-    description: string
-    action: string
-  }) => void
+  handleSelect: (info: { uuid: uuid; title: string; description: string; action: string }) => void
   handleDialogOpen: (open: boolean) => void
 }
 
@@ -59,9 +52,7 @@ const ExperimentPaper: React.FC<ExperimentPaperProps> = ({
   const handleDelete = () => {
     handleDialogOpen(true)
     handleSelect({
-      namespace: e.Namespace,
-      name: e.Name,
-      kind: e.Kind,
+      uuid: (e as Experiment).uid,
       title: `Delete ${e.Name}?`,
       description: "Once you delete this experiment, it can't be recovered.",
       action: 'delete',
@@ -71,9 +62,7 @@ const ExperimentPaper: React.FC<ExperimentPaperProps> = ({
   const handlePause = () => {
     handleDialogOpen(true)
     handleSelect({
-      namespace: e.Namespace,
-      name: e.Name,
-      kind: e.Kind,
+      uuid: (e as Experiment).uid,
       title: `Pause ${e.Name}?`,
       description: 'You can restart the experiment in the same position.',
       action: 'pause',
@@ -83,9 +72,7 @@ const ExperimentPaper: React.FC<ExperimentPaperProps> = ({
   const handleStart = () => {
     handleDialogOpen(true)
     handleSelect({
-      namespace: e.Namespace,
-      name: e.Name,
-      kind: e.Kind,
+      uuid: (e as Experiment).uid,
       title: `Start ${e.Name}?`,
       description: 'The operation will take effect immediately.',
       action: 'start',
@@ -97,7 +84,7 @@ const ExperimentPaper: React.FC<ExperimentPaperProps> = ({
       {!isArchive && (
         <>
           <Typography variant="body1">Created {day((e as Experiment).created).fromNow()}</Typography>
-          {(e as Experiment).status.toLowerCase() === 'paused' ? (
+          {(e as Experiment).status === 'Paused' ? (
             <IconButton
               color="primary"
               aria-label="Start experiment"
@@ -136,17 +123,11 @@ const ExperimentPaper: React.FC<ExperimentPaperProps> = ({
       )}
       <Button
         component={Link}
-        to={
-          isArchive
-            ? `/`
-            : `/experiments/${e.Name}?namespace=${e.Namespace}&kind=${
-                e.Kind
-              }&status=${(e as Experiment).status.toLowerCase()}`
-        }
+        to={isArchive ? `/` : `/experiments/${(e as Experiment).uid}?name=${e.Name}&status=${(e as Experiment).status}`}
         variant="outlined"
         color="primary"
         size="small"
-        disabled={!isArchive && (e as Experiment).status.toLowerCase() === 'failed'}
+        disabled={!isArchive && (e as Experiment).status === 'Failed'}
       >
         Detail
       </Button>
@@ -158,7 +139,7 @@ const ExperimentPaper: React.FC<ExperimentPaperProps> = ({
       <Box display="flex" justifyContent="space-between" alignItems="center" p={3}>
         <Box display="flex" alignItems="center" className={classes.marginRight}>
           {!isArchive &&
-            ((e as Experiment).status.toLowerCase() === 'failed' ? (
+            ((e as Experiment).status === 'Failed' ? (
               <ErrorOutlineIcon color="error" />
             ) : (
               <ExperimentEventsPreview events={(e as Experiment).events} />

diff --git a/ui/src/components/NewExperiment/index.tsx b/ui/src/components/NewExperiment/index.tsx
@@ -43,16 +43,13 @@ const Actions = ({ setInitialValues }: ActionsProps) => {
   // const [archiveRadio, setArchiveRadio] = useState('')
 
   const onExperimentRadioChange = (e: any) => {
-    const kindNamespaceName = e.target.value
-    const [kind, namespace, name] = kindNamespaceName.split('/')
+    const uuid = e.target.value
 
-    setExperimentRadio(kindNamespaceName)
+    setExperimentRadio(uuid)
 
     api.experiments
-      .detail(namespace, name, kind)
-      .then(({ data }) => {
-        setInitialValues(parseLoaded(data))
-      })
+      .detail(uuid)
+      .then(({ data }) => setInitialValues(parseLoaded(data)))
       .catch(console.log)
   }
 
@@ -62,19 +59,17 @@ const Actions = ({ setInitialValues }: ActionsProps) => {
   //   setArchiveRadio(uuid)
   // }
 
-  const fetchExperiments = () => {
+  const fetchExperiments = () =>
     api.experiments
       .experiments()
       .then(({ data }) => setExperiments(data))
       .catch(console.log)
-  }
 
-  // const fetchArchives = () => {
+  // const fetchArchives = () =>
   //   api.archives
   //     .archives()
   //     .then(({ data }) => setArchives(data))
   //     .catch(console.log)
-  // }
 
   useEffect(() => {
     fetchExperiments()
@@ -116,12 +111,7 @@ const Actions = ({ setInitialValues }: ActionsProps) => {
         <RadioGroup value={experimentRadio} onChange={onExperimentRadioChange}>
           {experiments && experiments.length > 0 ? (
             experiments.map((e) => (
-              <FormControlLabel
-                key={e.Name}
-                value={`${e.Kind}/${e.Namespace}/${e.Name}`}
-                control={<Radio color="primary" />}
-                label={e.Name}
-              />
+              <FormControlLabel key={e.uid} value={e.uid} control={<Radio color="primary" />} label={e.Name} />
             ))
           ) : experiments?.length === 0 ? (
             <Typography variant="body2">No experiments found.</Typography>

diff --git a/ui/src/components/StatusPanel/index.tsx b/ui/src/components/StatusPanel/index.tsx
@@ -55,27 +55,27 @@ const StatusPanel = () => {
   const data: { [k: string]: d } = {
     running: {
       label: 'Running',
-      value: state.running,
+      value: state.Running,
       Icon: <TimelineIcon color="primary" fontSize="large" />,
     },
     paused: {
       label: 'Paused',
-      value: state.paused,
+      value: state.Paused,
       Icon: <PauseCircleOutlineIcon color="primary" fontSize="large" />,
     },
     failed: {
       label: 'Failed',
-      value: state.failed,
+      value: state.Failed,
       Icon: <ErrorOutlineIcon color="error" fontSize="large" />,
     },
     waiting: {
       label: 'Waiting',
-      value: state.waiting,
+      value: state.Waiting,
       Icon: <SnoozeIcon color="primary" fontSize="large" />,
     },
     finished: {
       label: 'Finished',
-      value: state.finished,
+      value: state.Finished,
       Icon: <CheckCircleOutlineIcon fontSize="large" className={classes.finished} />,
     },
   }

diff --git a/ui/src/lib/d3/eventsChart.ts b/ui/src/lib/d3/eventsChart.ts
@@ -45,10 +45,17 @@ export default function gen({
   // Wrap long text, also used in zoom() and reGen()
   svg.selectAll('.tick text').call(wrapText, 30)
 
-  const allExperiments = [...new Set(events.map((d) => d.Experiment))]
+  const allUniqueExperiments = [...new Set(events.map((d) => d.Experiment + '/' + d.ExperimentID))].map((d) => {
+    const [name, uuid] = d.split('/')
+
+    return {
+      name,
+      uuid,
+    }
+  })
   const y = d3
     .scaleBand()
-    .domain(allExperiments)
+    .domain(allUniqueExperiments.map((d) => d.uuid))
     .range([0, height - margin.top - margin.bottom])
     .padding(0.5)
   const yAxis = d3.axisLeft(y).tickFormat('' as any)
@@ -79,11 +86,11 @@ export default function gen({
   const legendsRoot = d3.select(document.createElement('div')).attr('class', 'chaos-events-legends')
   const legends = legendsRoot
     .selectAll()
-    .data(allExperiments)
+    .data(allUniqueExperiments)
     .enter()
     .append('div')
     .on('click', function (d) {
-      const _events = events.filter((e) => e.Experiment === d)
+      const _events = events.filter((e) => e.ExperimentID === d.uuid)
       const event = _events[_events.length - 1]
 
       svg
@@ -100,12 +107,12 @@ export default function gen({
   legends
     .insert('div')
     .attr('style', 'color: rgba(0, 0, 0, 0.72); font-size: 0.75rem;')
-    .text((d) => d)
+    .text((d) => d.name)
   legends
     .append('div')
     .attr(
       'style',
-      (d) => `width: 14px; height: 14px; margin-left: 8px; background: ${colorPalette(d)}; cursor: pointer;`
+      (d) => `width: 14px; height: 14px; margin-left: 8px; background: ${colorPalette(d.uuid)}; cursor: pointer;`
     )
 
   function genRectWidth(d: Event) {
@@ -124,10 +131,10 @@ export default function gen({
     .enter()
     .append('rect')
     .attr('x', (d) => x(day(d.StartTime)))
-    .attr('y', (d) => y(d.Experiment)! + margin.top)
+    .attr('y', (d) => y(d.ExperimentID)! + margin.top)
     .attr('width', genRectWidth)
     .attr('height', y.bandwidth())
-    .attr('fill', (d) => colorPalette(d.Experiment))
+    .attr('fill', (d) => colorPalette(d.ExperimentID))
     .style('cursor', 'pointer')
 
   const zoom = d3.zoom().scaleExtent([0.1, 5]).on('zoom', zoomd)

diff --git a/ui/src/pages/Archives/index.tsx b/ui/src/pages/Archives/index.tsx
@@ -12,9 +12,7 @@ export default function Archives() {
   const [loading, setLoading] = useState(false)
   const [archives, setArchives] = useState<Archive[] | null>(null)
   const [selected, setSelected] = useState({
-    namespace: '',
-    name: '',
-    kind: '',
+    uuid: '',
     title: '',
     description: '',
     action: 'recover',