+ {this.renderCard({
+ href: "/status",
+ icon: IconNames.INFO_SIGN,
+ title: "Status",
+ loading: state.statusLoading,
+ content: state.status ? `Apache Druid is running version ${state.status.version}` : '',
+ error: state.statusError
+ })}
+
+ {this.renderCard({
+ href: "#datasources",
+ icon: IconNames.MULTI_SELECT,
+ title: "Datasources",
+ loading: state.datasourceCountLoading,
+ content: pluralIfNeeded(state.datasourceCount, 'datasource'),
+ error: state.datasourceCountError
+ })}
+
+ {this.renderCard({
+ href: "#segments",
+ icon: IconNames.FULL_STACKED_CHART,
+ title: "Segments",
+ loading: state.segmentCountLoading,
+ content: pluralIfNeeded(state.segmentCount, 'segment'),
+ error: state.datasourceCountError
+ })}
+
+ {this.renderCard({
+ href: "#tasks",
+ icon: IconNames.GANTT_CHART,
+ title: "Tasks",
+ loading: state.taskCountLoading,
+ content: <>
+ { Boolean(state.runningTaskCount) &&
{pluralIfNeeded(state.runningTaskCount, 'running task')}
}
+ { Boolean(state.pendingTaskCount) &&
{pluralIfNeeded(state.pendingTaskCount, 'pending task')}
}
+ { Boolean(state.successTaskCount) &&
{pluralIfNeeded(state.successTaskCount, 'successful task')}
}
+ { Boolean(state.waitingTaskCount) &&
{pluralIfNeeded(state.waitingTaskCount, 'waiting task')}
}
+ { Boolean(state.failedTaskCount) &&
{pluralIfNeeded(state.failedTaskCount, 'failed task')}
}
+ { !(state.runningTaskCount + state.pendingTaskCount + state.successTaskCount + state.waitingTaskCount + state.failedTaskCount) &&
+
There are no tasks
+ }
+ >,
+ error: state.taskCountError
+ })}
+
+ {this.renderCard({
+ href: "#servers",
+ icon: IconNames.DATABASE,
+ title: "Data servers",
+ loading: state.dataServerCountLoading || state.middleManagerCountLoading,
+ content: <>
+
{pluralIfNeeded(state.dataServerCount, 'historical')}
+
{pluralIfNeeded(state.middleManagerCount, 'middlemanager')}
+ >,
+ error: state.dataServerCountError
+ })}
+
+ }
+}
+
diff --git a/web-console/src/views/segments-view.scss b/web-console/src/views/segments-view.scss
new file mode 100644
index 000000000000..a58cfc040d75
--- /dev/null
+++ b/web-console/src/views/segments-view.scss
@@ -0,0 +1,38 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.segments-view {
+ height: 100%;
+ width: 100%;
+
+ .ReactTable {
+ position: absolute;
+ top: 60px;
+ bottom: 0;
+ width: 100%;
+
+ .-totalPages {
+ display: none;
+ }
+
+ .segment-detail {
+ padding: 20px;
+ background: #212d36;
+ }
+ }
+}
diff --git a/web-console/src/views/segments-view.tsx b/web-console/src/views/segments-view.tsx
new file mode 100644
index 000000000000..a5cad17933db
--- /dev/null
+++ b/web-console/src/views/segments-view.tsx
@@ -0,0 +1,277 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import axios from 'axios';
+import * as React from 'react';
+import * as classNames from 'classnames';
+import ReactTable from "react-table";
+import { Filter } from "react-table";
+import { H5, Button } from "@blueprintjs/core";
+import { IconNames } from "@blueprintjs/icons";
+import {
+ addFilter,
+ makeBooleanFilter,
+ QueryManager,
+ formatBytes,
+ formatNumber,
+ parseList,
+ queryDruidSql
+} from "../utils";
+import "./segments-view.scss";
+
+export interface SegmentsViewProps extends React.Props